fix(visual-test): remove jquery in them

11 files changed, 100 insertions, 54 deletions

diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 9111e3572..8b073a9fc 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -51,7 +51,7 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/dom/data.js"></script>
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index 5f2dfa92a..428fd156f 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index aa6c5e4c7..42e81df6c 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -45,24 +45,25 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/carousel.js"></script>
     <script>
-      $(function() {
+      document.addEventListener('DOMContentLoaded', function () {
         var t0, t1;
-        var carousel = SelectorEngine.find('#carousel-example-generic')
+        var carousel = document.getElementById('carousel-example-generic')
 
         // Test to show that the carousel doesn't slide when the current tab isn't visible
         // Test to show that transition-duration can be changed with css
-        EventHandler.on(carousel, 'slid.bs.carousel', function (event) {
+        carousel.addEventListener('slid.bs.carousel', function (event) {
           t1 = performance.now()
-          console.log('transition-duration took' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
+          console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
         })
-        EventHandler.on(carousel, 'slide.bs.carousel', function () {
+        carousel.addEventListener('slide.bs.carousel', function () {
           t0 = performance.now()
         })
       })
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 49d2ae82a..e905e451a 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -71,7 +71,8 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/dom/data.js"></script>
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index fe1ca333e..951aefa96 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -209,7 +209,6 @@
 
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
     <script src="../../dist/dom/polyfill.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 2062a195b..1f0eb0d63 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -205,8 +205,8 @@
       </button>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/manipulator.js"></script>
@@ -218,53 +218,85 @@
     <script src="../../dist/popover.js"></script>
     <script>
       var firefoxTestDone = false
-      function reportFirefoxTestResult(result) {
-        if (!firefoxTestDone) {
-          $('#ff-bug-test-result')
-            .addClass(result ? 'text-success' : 'text-danger')
-            .text(result ? 'PASS' : 'FAIL')
+      document.addEventListener('DOMContentLoaded', function () {
+        var ffBugTestResult = document.getElementById('ff-bug-test-result')
+
+        function reportFirefoxTestResult(result) {
+          if (!firefoxTestDone) {
+            ffBugTestResult.classList
+              .add(result ? 'text-success' : 'text-danger')
+
+            ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
+          }
         }
-      }
 
-      $(function () {
-        $('[data-toggle="popover"]').popover()
-        $('[data-toggle="tooltip"]').tooltip()
+        document.querySelectorAll('[data-toggle="popover"]')
+          .forEach(function (popover) {
+            new Popover(popover)
+          })
 
-        $('#tall-toggle').click(function () {
-          $('#tall').toggle()
-        })
+        document.querySelectorAll('[data-toggle="tooltip"]')
+          .forEach(function (tooltip) {
+            new Tooltip(tooltip)
+          })
 
-        $('#ff-bug-input').one('focus', function () {
-          $('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
-          $('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
+        var tallToggle = document.getElementById('tall-toggle')
+        var tall = document.getElementById('tall')
+        tallToggle.addEventListener('click', function () {
+          if (tall.style.display === 'none') {
+            tall.style.display = 'block'
+          } else {
+            tall.style.display = 'none'
+          }
         })
 
-        $('#btnPreventModal').on('click', function () {
-          $('#firefoxModal').one('shown.bs.modal', function () {
-            $(this).modal('hide')
-          })
-          .one('hide.bs.modal', function (event) {
+        var ffBugInput = document.getElementById('ff-bug-input')
+        var firefoxModal = document.getElementById('firefoxModal')
+        function handlerClickFfBugInput() {
+          firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false))
+          ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
+          ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
+        }
+        ffBugInput.addEventListener('focus', handlerClickFfBugInput)
+
+        var btnPreventModal = document.getElementById('btnPreventModal')
+        var modalFf = new Modal(firefoxModal)
+
+        btnPreventModal.addEventListener('click', function () {
+          function shownFirefoxModal() {
+            modalFf.hide()
+            firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
+          }
+
+          function hideFirefoxModal(event) {
             event.preventDefault()
-            if ($(this).data('bs.modal')._isTransitioning) {
+            firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
+
+            if (modalFf._isTransitioning) {
               console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
             } else {
               console.log('Test passed')
-              $(this).modal('hide') // work as expected
+              modalFf.hide() // work as expected
             }
-          })
-          .modal('show')
+          }
+
+          firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal)
+          firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal)
+          modalFf.show()
         })
 
         // Test transition duration
         var t0, t1;
+        var slowModal = document.getElementById('slowModal')
 
-        $('#slowModal').on('shown.bs.modal', function(){
+        slowModal.addEventListener('shown.bs.modal', function () {
           t1 = performance.now()
           console.log('transition-duration took ' + (t1 - t0) + 'ms.')
-        }).on('show.bs.modal', function(){
-          t0 = performance.now()
         })
 
+        slowModal.addEventListener('show.bs.modal', function () {
+          t0 = performance.now()
+        })
       })
     </script>
   </body>
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 0acc6c1c0..676ca9448 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -31,8 +31,9 @@
       </button>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
@@ -40,8 +41,11 @@
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
     <script>
-      $(function () {
-        $('[data-toggle="popover"]').popover()
+      document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('[data-toggle="popover"]')
+          .forEach(function (popover) {
+            new Popover(popover)
+          })
       })
     </script>
   </body>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index d526af6d2..00def6a7c 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -86,8 +86,8 @@
       <p>Ad leggings keytar, brunch id art party dolor labore.</p>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../site/docs/4.2/assets/js/vendor/popper.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/manipulator.js"></script>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 78e573403..7c6d95ee4 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -225,8 +225,8 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/manipulator.js"></script>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index 06fa73d92..93a627cc5 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -52,7 +52,6 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/toast.js"></script>
     <script>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 601732a38..d97f8d57a 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -71,17 +71,18 @@
       <div id="customContainer"></div>
     </div>
 
-    <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/polyfill.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script>
-      $(function () {
+      document.addEventListener('DOMContentLoaded', function () {
         if (typeof document.body.attachShadow === 'function') {
-          var shadowRoot = $('#shadow')[0].attachShadow({ mode: 'open' })
+          var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
           shadowRoot.innerHTML =
             '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' +
             '  Tooltip on top in a shadow dom' +
@@ -90,19 +91,28 @@
             '  Tooltip on top in a shadow dom' +
             '</button>'
 
-          $(shadowRoot.firstChild).tooltip()
-          $(shadowRoot.getElementById('secondTooltip')).tooltip({
+          var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
+          var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
             container: shadowRoot
           })
         }
-        $('[data-toggle="tooltip"]').tooltip()
-        $('#tooltipElement').tooltip({
-          container: $('#customContainer')[0]
+
+        document.querySelectorAll('[data-toggle="tooltip"]')
+          .forEach(function (tooltip) {
+            new Tooltip(tooltip)
+          })
+
+        var tooltipElement = document.getElementById('tooltipElement')
+        var tooltipElementInstance = new Tooltip(tooltipElement, {
+          container: document.getElementById('customContainer')
         })
-        $('#target').tooltip({
+
+        var target = document.getElementById('target')
+        var targetTooltip = new Tooltip(target, {
           placement : 'top',
           trigger : 'manual'
-        }).tooltip('show')
+        })
+        targetTooltip.show()
       })
     </script>
   </body>