Merge branch 'main' into main-xmr-docs-render-headingmain-xmr-docs-render-heading

10 files changed, 79 insertions, 10 deletions

diff --git a/js/tests/browsers.js b/js/tests/browsers.js
index b8e47a364..665b26a2e 100644
--- a/js/tests/browsers.js
+++ b/js/tests/browsers.js
@@ -28,13 +28,27 @@ const browsers = {
     os: 'Windows',
     os_version: '10',
     browser: 'Chrome',
-    browser_version: 'latest'
+    browser_version: '60'
   },
   firefoxWin10: {
     base: 'BrowserStack',
     os: 'Windows',
     os_version: '10',
     browser: 'Firefox',
+    browser_version: '60'
+  },
+  chromeWin10Latest: {
+    base: 'BrowserStack',
+    os: 'Windows',
+    os_version: '10',
+    browser: 'Chrome',
+    browser_version: 'latest'
+  },
+  firefoxWin10Latest: {
+    base: 'BrowserStack',
+    os: 'Windows',
+    os_version: '10',
+    browser: 'Firefox',
     browser_version: 'latest'
   },
   iphone7: {
diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index 67b60f15e..1d4b0d3e4 100644
--- a/js/tests/karma.conf.js
+++ b/js/tests/karma.conf.js
@@ -108,7 +108,7 @@ if (BROWSERSTACK) {
   conf.browserStack = {
     username: ENV.BROWSER_STACK_USERNAME,
     accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
-    build: `bootstrap-${new Date().toISOString()}`,
+    build: `bootstrap-${ENV.GITHUB_SHA ? ENV.GITHUB_SHA.slice(0, 7) + '-' : ''}${new Date().toISOString()}`,
     project: 'Bootstrap',
     retryLimit: 2
   }
diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json
index adde3105d..6362a1acf 100644
--- a/js/tests/unit/.eslintrc.json
+++ b/js/tests/unit/.eslintrc.json
@@ -4,5 +4,10 @@
   ],
   "env": {
     "jasmine": true
+  },
+  "rules": {
+    "unicorn/consistent-function-scoping": "off",
+    "unicorn/no-useless-undefined": "off",
+    "unicorn/prefer-add-event-listener": "off"
   }
 }
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index 6220623fc..ece88eff5 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -267,6 +267,56 @@ describe('Collapse', () => {
       collapse.show()
     })
 
+    it('should not change tab tabpanels descendants on accordion', done => {
+      fixtureEl.innerHTML = [
+        '<div class="accordion" id="accordionExample">',
+        '      <div class="accordion-item">',
+        '        <h2 class="accordion-header" id="headingOne">',
+        '          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">',
+        '            Accordion Item #1',
+        '          </button>',
+        '        </h2>',
+        '        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">',
+        '          <div class="accordion-body">',
+        '            <nav>',
+        '              <div class="nav nav-tabs" id="nav-tab" role="tablist">',
+        '                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>',
+        '                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>',
+        '              </div>',
+        '            </nav>',
+        '            <div class="tab-content" id="nav-tabContent">',
+        '              <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>',
+        '              <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>',
+        '            </div>',
+        '          </div>',
+        '        </div>',
+        '      </div>',
+        '    </div>'
+      ].join('')
+
+      // const btn = fixtureEl.querySelector('[data-bs-target="#collapseOne"]')
+      const el = fixtureEl.querySelector('#collapseOne')
+      const activeTabPane = fixtureEl.querySelector('#nav-home')
+      const collapse = new Collapse(el)
+      let times = 1
+
+      el.addEventListener('hidden.bs.collapse', () => {
+        setTimeout(() => collapse.show(), 10)
+      })
+
+      el.addEventListener('shown.bs.collapse', () => {
+        expect(activeTabPane.classList.contains('show')).toEqual(true)
+        times++
+        if (times === 2) {
+          done()
+        }
+
+        collapse.hide()
+      })
+
+      collapse.show()
+    })
+
     it('should not fire shown when show is prevented', done => {
       fixtureEl.innerHTML = '<div class="collapse"></div>'
 
diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js
index 289612df5..7513341a4 100644
--- a/js/tests/unit/jquery.spec.js
+++ b/js/tests/unit/jquery.spec.js
@@ -5,6 +5,7 @@ import Carousel from '../../src/carousel'
 import Collapse from '../../src/collapse'
 import Dropdown from '../../src/dropdown'
 import Modal from '../../src/modal'
+import Offcanvas from '../../src/offcanvas'
 import Popover from '../../src/popover'
 import ScrollSpy from '../../src/scrollspy'
 import Tab from '../../src/tab'
@@ -32,6 +33,7 @@ describe('jQuery', () => {
     expect(Collapse.jQueryInterface).toEqual(jQuery.fn.collapse)
     expect(Dropdown.jQueryInterface).toEqual(jQuery.fn.dropdown)
     expect(Modal.jQueryInterface).toEqual(jQuery.fn.modal)
+    expect(Offcanvas.jQueryInterface).toEqual(jQuery.fn.offcanvas)
     expect(Popover.jQueryInterface).toEqual(jQuery.fn.popover)
     expect(ScrollSpy.jQueryInterface).toEqual(jQuery.fn.scrollspy)
     expect(Tab.jQueryInterface).toEqual(jQuery.fn.tab)
diff --git a/js/tests/unit/util/focustrap.spec.js b/js/tests/unit/util/focustrap.spec.js
index 2457239c4..99bc95fca 100644
--- a/js/tests/unit/util/focustrap.spec.js
+++ b/js/tests/unit/util/focustrap.spec.js
@@ -74,7 +74,7 @@ describe('FocusTrap', () => {
       document.dispatchEvent(focusInEvent)
     })
 
-    it('should wrap focus around foward on tab', done => {
+    it('should wrap focus around forward on tab', done => {
       fixtureEl.innerHTML = [
         '<a href="#" id="outside">outside</a>',
         '<div id="focustrap" tabindex="-1">',
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 2a7f793f6..561b6ce5a 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -60,7 +60,7 @@
       // Test to show that transition-duration can be changed with css
       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)
       })
       carousel.addEventListener('slide.bs.carousel', function () {
         t0 = performance.now()
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 8ad9f63fb..ac0a931af 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -199,7 +199,7 @@
       </button>
     </div>
 
-    <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <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>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 16c19de63..0ce8be03c 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -218,13 +218,11 @@
       </div>
     </div>
 
-    <script src="../../../node_modules/popper.js/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/tab.js"></script>
-    <script src="../../dist/dropdown.js"></script>
   </body>
 </html>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 370b0da77..ab6040920 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -45,9 +45,6 @@
       </div>
       <div class="row">
         <p>
-          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-container="<img src=1 onerror=alert(123)>">
-            Tooltip with XSS
-          </button>
           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with container (selector)" data-bs-container="#customContainer">
             Tooltip with container (selector)
           </button>
@@ -57,6 +54,9 @@
           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
             Tooltip with HTML
           </button>
+          <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-container="<img src=1 onerror=alert(123)>">
+            Tooltip with XSS
+          </button>
         </p>
       </div>
       <div class="row">