Fix JavaScript visual tests using `bootstrap` instance (#42562)

diff --git a/js/tests/visual/datepicker.html b/js/tests/visual/datepicker.html
index 29ec0ff57cc50aef2ab7d62ad28ebb5148d519e8..9217813f49afd8af4c8c4abd6f498aa798995b3b 100644 (file)
--- 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 df7835f15c8b2bc8e31713a8aa4bbdee8cbb8aee..26b4290fafc3230b0a5e8af1c5392d314926feca 100644 (file)
--- 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 b7f8de74eab4b7273897e0e5f86f2ed995849d22..91c5c826f29fe23f7ee4519ac5bc6da42f012e29 100644 (file)
--- 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 94f814b7608545f894611a7adb624e9b711c8e88..444efe93e70d44621807ebe9281e66fc0b65e2c6 100644 (file)
--- 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 76424e2bcc4e4cb3d7de74512d45c408a30a3181..a065155878d7ec4eae7e17e1ade726bce57b01ff 100644 (file)
--- 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>