Add eslint-plugin-html to lint JS in HTML files (#37186)

5 files changed, 40 insertions, 13 deletions

diff --git a/js/tests/visual/.eslintrc.json b/js/tests/visual/.eslintrc.json
new file mode 100644
index 0000000000..8a33225720
--- /dev/null
+++ b/js/tests/visual/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "html"
+  ],
+  "extends": "../../../.eslintrc.json",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "settings": {
+    "html/html-extensions": [
+      ".html"
+    ]
+  },
+  "rules": {
+    "no-console": "off",
+    "no-new": "off",
+    "unicorn/no-array-for-each": "off"
+  }
+}
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 5056c6e7c5..fd93c068ac 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -201,6 +201,8 @@
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       const ffBugTestResult = document.getElementById('ff-bug-test-result')
       const firefoxTestDone = false
 
@@ -217,11 +219,7 @@
 
       const tall = document.getElementById('tall')
       document.getElementById('tall-toggle').addEventListener('click', () => {
-        if (tall.style.display === 'none') {
-          tall.style.display = 'block'
-        } else {
-          tall.style.display = 'none'
-        }
+        tall.style.display = tall.style.display === 'none' ? 'block' : 'none'
       })
 
       const ffBugInput = document.getElementById('ff-bug-input')
@@ -231,6 +229,7 @@
         ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
         ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
       }
+
       ffBugInput.addEventListener('focus', handlerClickFfBugInput)
 
       const modalFf = new bootstrap.Modal(firefoxModal)
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 96b746b728..73edf998d4 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -33,6 +33,8 @@
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
     </script>
   </body>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index cacc7da707..f86926d019 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -52,15 +52,17 @@
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       window.addEventListener('load', () => {
         document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
 
         document.getElementById('btnShowToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl =>  bootstrap.Toast.getInstance(toastEl).show())
+          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
         })
 
         document.getElementById('btnHideToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl =>  bootstrap.Toast.getInstance(toastEl).hide())
+          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
         })
       })
     </script>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 9a65640b44..1a3b9f21db 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -85,6 +85,8 @@
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       if (typeof document.body.attachShadow === 'function') {
         const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
         shadowRoot.innerHTML =
@@ -101,32 +103,35 @@
         })
       }
 
-
       new bootstrap.Tooltip('#tooltipElement', {
         container: '#customContainer'
       })
 
       const targetTooltip = new bootstrap.Tooltip('#target', {
-        placement : 'top',
-        trigger : 'manual'
+        placement: 'top',
+        trigger: 'manual'
       })
       targetTooltip.show()
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl=>  new bootstrap.Tooltip(tooltipEl))
+      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
     </script>
 
     <script>
+      /* global bootstrap: false */
+
       new bootstrap.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)
+        buttonsBlockClone.innerHTML += new Date().toLocaleString()
+        document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
       }
+      /* eslint-enable no-unused-vars */
     </script>
 
   </body>