Fix visual tests (#35585)

* Fix visual tests They broke in #34509 * load bundle.js in visual tests Co-authored-by: GeoSot <[email protected]>
coreui · Jan 30, 2022 · 89f8876 · 89f8876
1 parent f77a58b
commit 89f8876
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 86 deletions.
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
@@ -43,10 +43,6 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
       </div>
     </div>
 
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/alert.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
@@ -44,10 +44,6 @@ <h1>Button <small>Bootstrap Visual Test</small></h1>
       </div>
     </div>
 
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/button.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
@@ -45,12 +45,7 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
       </div>
     </div>
 
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/carousel.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
       var t0
       var t1

diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
@@ -71,11 +71,6 @@ <h5 class="mb-0">
       </div>
     </div>
 
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/collapse.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -200,13 +200,6 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </div>
     </div>
 
-    <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/dropdown.js"></script>
-    <script src="../../dist/collapse.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -199,16 +199,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
       </button>
     </div>
 
-    <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/modal.js"></script>
-    <script src="../../dist/collapse.js"></script>
-    <script src="../../dist/tooltip.js"></script>
-    <script src="../../dist/popover.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
       var ffBugTestResult = document.getElementById('ff-bug-test-result')
       var firefoxTestDone = false
@@ -222,11 +213,11 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
 
       var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]')
       for (const popoverEl of popoverElements) {
-        new Popover(popoverEl)
+        new bootstrap.Popover(popoverEl)
       }
       var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
       for (const tooltipEl of tooltipElements) {
-        new Tooltip(tooltipEl)
+        new bootstrap.Tooltip(tooltipEl)
       }
 
       var tallToggle = document.getElementById('tall-toggle')
@@ -249,7 +240,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
       ffBugInput.addEventListener('focus', handlerClickFfBugInput)
 
       var btnPreventModal = document.getElementById('btnPreventModal')
-      var modalFf = new Modal(firefoxModal)
+      var modalFf = new bootstrap.Modal(firefoxModal)
 
       btnPreventModal.addEventListener('click', function () {
         function shownFirefoxModal() {

diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
@@ -31,18 +31,11 @@ <h1>Popover <small>Bootstrap Visual Test</small></h1>
       </button>
     </div>
 
-    <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/tooltip.js"></script>
-    <script src="../../dist/popover.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
       var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]')
       for (const popoverEl of popoverElements) {
-        new Popover(popoverEl)
+        new bootstrap.Popover(popoverEl)
       }
     </script>
   </body>

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
@@ -86,13 +86,6 @@ <h2 id="final">Final section</h2>
       <p>Ad leggings keytar, brunch id art party dolor labore.</p>
     </div>
 
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/scrollspy.js"></script>
-    <script src="../../dist/dropdown.js"></script>
-    <script src="../../dist/collapse.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
@@ -218,11 +218,6 @@ <h4>Tabs with list-group (with fade)</h4>
       </div>
     </div>
 
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/tab.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -50,30 +50,26 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
       </div>
     </div>
 
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/toast.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
       window.addEventListener('load', function () {
         var toastElements = document.querySelectorAll('.toast')
         for (const toastEl of toastElements) {
-          new Toast(toastEl)
+          new bootstrap.Toast(toastEl)
         }
 
         document.getElementById('btnShowToast').addEventListener('click', function () {
           var toastElements = document.querySelectorAll('.toast')
           for (const toastEl of toastElements) {
-            var toast = Toast.getInstance(toastEl)
+            var toast = bootstrap.Toast.getInstance(toastEl)
             toast.show()
           }
         })
 
         document.getElementById('btnHideToast').addEventListener('click', function () {
           var toastElements = document.querySelectorAll('.toast')
           for (const toastEl of toastElements) {
-            var toast = Toast.getInstance(toastEl)
+            var toast = bootstrap.Toast.getInstance(toastEl)
             toast.hide()
           }
         })

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
@@ -68,13 +68,7 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
       <div id="customContainer"></div>
     </div>
 
-    <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/selector-engine.js"></script>
-    <script src="../../dist/dom/event-handler.js"></script>
-    <script src="../../dist/dom/manipulator.js"></script>
-    <script src="../../dist/dom/data.js"></script>
-    <script src="../../dist/base-component.js"></script>
-    <script src="../../dist/tooltip.js"></script>
+    <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
       if (typeof document.body.attachShadow === 'function') {
         var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
@@ -86,24 +80,24 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
           '  Tooltip on top in a shadow dom' +
           '</button>'
 
-        var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
-        var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
+        var firstChildTooltip = new bootstrap.Tooltip(shadowRoot.firstChild)
+        var secondChildTooltip = new bootstrap.Tooltip(shadowRoot.getElementById('secondTooltip'), {
           container: shadowRoot
         })
       }
 
       var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
       for (const tooltipEl of tooltipElements) {
-        new Tooltip(tooltipEl)
+        new bootstrap.Tooltip(tooltipEl)
       }
 
       var tooltipElement = document.getElementById('tooltipElement')
-      var tooltipElementInstance = new Tooltip(tooltipElement, {
+      var tooltipElementInstance = new bootstrap.Tooltip(tooltipElement, {
         container: document.getElementById('customContainer')
       })
 
       var target = document.getElementById('target')
-      var targetTooltip = new Tooltip(target, {
+      var targetTooltip = new bootstrap.Tooltip(target, {
         placement : 'top',
         trigger : 'manual'
       })