From 0ad1675720f452cee21786be0c5f874d9c555f54 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 25 Jun 2026 22:11:43 +0200
Subject: [PATCH] Fix JavaScript visual tests using `bootstrap` instance
 (#42562)

---
 js/tests/visual/datepicker.html |  7 +++----
 js/tests/visual/dialog.html     | 11 +++++-----
 js/tests/visual/popover.html    |  7 +++----
 js/tests/visual/toast.html      | 11 +++++-----
 js/tests/visual/tooltip.html    | 37 ++++++++++++++-------------------
 5 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/js/tests/visual/datepicker.html b/js/tests/visual/datepicker.html
index 29ec0ff57c..9217813f49 100644
--- a/js/tests/visual/datepicker.html
+++ b/js/tests/visual/datepicker.html
@@ -111,13 +111,12 @@
 
     </div>
 
-    <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script>
-    <script>
-      /* global bootstrap: false */
+    <script type="module">
+      import { Datepicker } from '../../../dist/js/bootstrap.bundle.js'
 
       // Initialize via JavaScript
       const jsDatepickerEl = document.getElementById('jsDatepicker')
-      const jsDatepicker = new bootstrap.Datepicker(jsDatepickerEl, {
+      const jsDatepicker = new Datepicker(jsDatepickerEl, {
         firstWeekday: 1,
         selectedDates: ['2026-01-15']
       })
diff --git a/js/tests/visual/dialog.html b/js/tests/visual/dialog.html
index df7835f15c..26b4290faf 100644
--- a/js/tests/visual/dialog.html
+++ b/js/tests/visual/dialog.html
@@ -174,13 +174,12 @@
       </div>
     </div>
 
-    <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script>
-    <script>
-      /* global bootstrap: false */
+    <script type="module">
+      import { Dialog, Popover, Tooltip } from '../../../dist/js/bootstrap.bundle.js'
 
-      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new Popover(popoverEl))
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
+      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new Tooltip(tooltipEl))
 
       const tall = document.getElementById('tall')
       document.getElementById('tall-toggle').addEventListener('click', () => {
@@ -190,7 +189,7 @@
       // Test JavaScript API
       document.getElementById('jsOpen').addEventListener('click', () => {
         const dialogEl = document.getElementById('myDialog')
-        const dialog = bootstrap.Dialog.getOrCreateInstance(dialogEl)
+        const dialog = Dialog.getOrCreateInstance(dialogEl)
         dialog.show()
       })
 
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index b7f8de74ea..91c5c826f2 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -31,11 +31,10 @@
       </button>
     </div>
 
-    <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script>
-    <script>
-      /* global bootstrap: false */
+    <script type="module">
+      import { Popover } from '../../../dist/js/bootstrap.bundle.js'
 
-      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new Popover(popoverEl))
     </script>
   </body>
 </html>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index 94f814b760..444efe93e7 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -50,19 +50,18 @@
       </div>
     </div>
 
-    <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script>
-    <script>
-      /* global bootstrap: false */
+    <script type="module">
+      import { Toast } from '../../../dist/js/bootstrap.bundle.js'
 
       window.addEventListener('load', () => {
-        document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
+        document.querySelectorAll('.toast').forEach(toastEl => new Toast(toastEl))
 
         document.getElementById('btnShowToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
+          document.querySelectorAll('.toast').forEach(toastEl => Toast.getInstance(toastEl).show())
         })
 
         document.getElementById('btnHideToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
+          document.querySelectorAll('.toast').forEach(toastEl => Toast.getInstance(toastEl).hide())
         })
       })
     </script>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 76424e2bcc..a065155878 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -83,9 +83,17 @@
       </div>
     </div>
 
-    <script src="../../../dist/js/bootstrap.bundle.js" type="module"></script>
     <script>
-      /* global bootstrap: false */
+      function duplicateButtons() {
+        const buttonsBlock = document.querySelector('.selectorButtonsBlock') // get first
+        const buttonsBlockClone = buttonsBlock.cloneNode(true)
+        buttonsBlockClone.innerHTML += new Date().toLocaleString()
+        document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
+      }
+    </script>
+
+    <script type="module">
+      import { Tooltip } from '../../../dist/js/bootstrap.bundle.js'
 
       if (typeof document.body.attachShadow === 'function') {
         const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
@@ -97,41 +105,28 @@
           '  Tooltip on top in a shadow dom' +
           '</button>'
 
-        new bootstrap.Tooltip(shadowRoot.firstChild)
-        new bootstrap.Tooltip(shadowRoot.getElementById('secondShadowTooltip'), {
+        new Tooltip(shadowRoot.firstChild)
+        new Tooltip(shadowRoot.getElementById('secondShadowTooltip'), {
           container: shadowRoot
         })
       }
 
-      new bootstrap.Tooltip('#tooltipElement', {
+      new Tooltip('#tooltipElement', {
         container: '#customContainer'
       })
 
-      const targetTooltip = new bootstrap.Tooltip('#target', {
+      const targetTooltip = new Tooltip('#target', {
         placement: 'top',
         trigger: 'manual'
       })
       targetTooltip.show()
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
-    </script>
-
-    <script>
-      /* global bootstrap: false */
+      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new Tooltip(tooltipEl))
 
-      new bootstrap.Tooltip('#wrapperTriggeredBySelector', {
+      new Tooltip('#wrapperTriggeredBySelector', {
         animation: false,
         selector: '.bs-dynamic-tooltip'
       })
-
-      /* eslint-disable no-unused-vars */
-      function duplicateButtons() {
-        const buttonsBlock = document.querySelector('.selectorButtonsBlock')// get first
-        const buttonsBlockClone = buttonsBlock.cloneNode(true)
-        buttonsBlockClone.innerHTML += new Date().toLocaleString()
-        document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
-      }
-      /* eslint-enable no-unused-vars */
     </script>
 
   </body>
-- 
2.47.3