use es6 on visual tests

twbs · Sep 14, 2022 · af3a8cc · af3a8cc
1 parent aedd7fb
commit af3a8cc
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 51 deletions.
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
@@ -47,17 +47,17 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
-      var t0
-      var t1
-      var carousel = document.getElementById('carousel-example-generic')
+      let t0
+      let t1
+      const 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
-      carousel.addEventListener('slid.bs.carousel', function (event) {
+      carousel.addEventListener('slid.bs.carousel', event => {
         t1 = performance.now()
         console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ' + event.timeStamp)
       })
-      carousel.addEventListener('slide.bs.carousel', function () {
+      carousel.addEventListener('slide.bs.carousel', () => {
         t0 = performance.now()
       })
     </script>

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -201,8 +201,8 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
-      var ffBugTestResult = document.getElementById('ff-bug-test-result')
-      var firefoxTestDone = false
+      const ffBugTestResult = document.getElementById('ff-bug-test-result')
+      const firefoxTestDone = false
 
       function reportFirefoxTestResult(result) {
         if (!firefoxTestDone) {
@@ -211,44 +211,37 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
         }
       }
 
-      var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]')
-      for (const popoverEl of popoverElements) {
-        new bootstrap.Popover(popoverEl)
-      }
-      var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-      for (const tooltipEl of tooltipElements) {
-        new bootstrap.Tooltip(tooltipEl)
-      }
+      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
+
+      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
 
-      var tallToggle = document.getElementById('tall-toggle')
-      var tall = document.getElementById('tall')
-      tallToggle.addEventListener('click', function () {
+      const tall = document.getElementById('tall')
+      document.getElementById('tall-toggle').addEventListener('click', function () {
         if (tall.style.display === 'none') {
           tall.style.display = 'block'
         } else {
           tall.style.display = 'none'
         }
       })
 
-      var ffBugInput = document.getElementById('ff-bug-input')
-      var firefoxModal = document.getElementById('firefoxModal')
+      const ffBugInput = document.getElementById('ff-bug-input')
+      const 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 bootstrap.Modal(firefoxModal)
+      const modalFf = new bootstrap.Modal(firefoxModal)
 
-      btnPreventModal.addEventListener('click', function () {
-        function shownFirefoxModal() {
+      document.getElementById('btnPreventModal').addEventListener('click', () => {
+        const shownFirefoxModal =() => {
           modalFf.hide()
           firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
         }
 
-        function hideFirefoxModal(event) {
+        const hideFirefoxModal = event => {
           event.preventDefault()
           firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
 
@@ -266,16 +259,16 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
       })
 
       // Test transition duration
-      var t0
-      var t1
-      var slowModal = document.getElementById('slowModal')
+      let t0
+      let t1
+      const slowModal = document.getElementById('slowModal')
 
-      slowModal.addEventListener('shown.bs.modal', function () {
+      slowModal.addEventListener('shown.bs.modal', () => {
         t1 = performance.now()
         console.log('transition-duration took ' + (t1 - t0) + 'ms.')
       })
 
-      slowModal.addEventListener('show.bs.modal', function () {
+      slowModal.addEventListener('show.bs.modal', () => {
         t0 = performance.now()
       })
     </script>

diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
@@ -33,10 +33,7 @@ <h1>Popover <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
-      var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]')
-      for (const popoverEl of popoverElements) {
-        new bootstrap.Popover(popoverEl)
-      }
+      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
     </script>
   </body>
 </html>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -52,26 +52,15 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
-      window.addEventListener('load', function () {
-        var toastElements = document.querySelectorAll('.toast')
-        for (const toastEl of toastElements) {
-          new bootstrap.Toast(toastEl)
-        }
+      window.addEventListener('load', () => {
+        document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
 
-        document.getElementById('btnShowToast').addEventListener('click', function () {
-          var toastElements = document.querySelectorAll('.toast')
-          for (const toastEl of toastElements) {
-            var toast = bootstrap.Toast.getInstance(toastEl)
-            toast.show()
-          }
+        document.getElementById('btnShowToast').addEventListener('click', () => {
+          document.querySelectorAll('.toast').forEach(toastEl =>  bootstrap.Toast.getInstance(toastEl).show())
         })
 
-        document.getElementById('btnHideToast').addEventListener('click', function () {
-          var toastElements = document.querySelectorAll('.toast')
-          for (const toastEl of toastElements) {
-            var toast = bootstrap.Toast.getInstance(toastEl)
-            toast.hide()
-          }
+        document.getElementById('btnHideToast').addEventListener('click', () => {
+          document.querySelectorAll('.toast').forEach(toastEl =>  bootstrap.Toast.getInstance(toastEl).hide())
         })
       })
     </script>