Fix Collapse regression of handling toggling between sibling chilldren (#34951)

1 files changed, 57 insertions, 0 deletions

diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index 82cd5c1f7..da709bb85 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -267,6 +267,63 @@ describe('Collapse', () => {
       collapse.show()
     })
 
+    it('should be able to handle toggling of other children siblings', done => {
+      fixtureEl.innerHTML = [
+        '<div id="parentGroup" class="accordion">',
+        '   <div id="parentHeader" class="accordion-header">',
+        '      <button data-bs-target="#parentContent" data-bs-toggle="collapse" role="button" class="accordion-toggle">Parent</button>',
+        '   </div>',
+        '   <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">',
+        '      <div class="accordion-body">',
+        '         <div id="childGroup" class="accordion">',
+        '            <div class="accordion-item">',
+        '               <div id="childHeader1" class="accordion-header">',
+        '                  <button data-bs-target="#childContent1" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 1</button>',
+        '               </div>',
+        '               <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">',
+        '                  <div>content</div>',
+        '               </div>',
+        '            </div>',
+        '            <div class="accordion-item">',
+        '               <div id="childHeader2" class="accordion-header">',
+        '                  <button data-bs-target="#childContent2" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 2</button>',
+        '               </div>',
+        '               <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">',
+        '                  <div>content</div>',
+        '               </div>',
+        '            </div>',
+        '         </div>',
+        '      </div>',
+        '   </div>',
+        '</div>'
+      ].join('')
+
+      const el = selector => fixtureEl.querySelector(selector)
+
+      const parentBtn = el('[data-bs-target="#parentContent"]')
+      const childBtn1 = el('[data-bs-target="#childContent1"]')
+      const childBtn2 = el('[data-bs-target="#childContent2"]')
+
+      const parentCollapseEl = el('#parentContent')
+      const childCollapseEl1 = el('#childContent1')
+      const childCollapseEl2 = el('#childContent2')
+
+      parentCollapseEl.addEventListener('shown.bs.collapse', () => {
+        expect(parentCollapseEl.classList.contains('show')).toEqual(true)
+        childBtn1.click()
+      })
+      childCollapseEl1.addEventListener('shown.bs.collapse', () => {
+        expect(childCollapseEl1.classList.contains('show')).toEqual(true)
+        childBtn2.click()
+      })
+      childCollapseEl2.addEventListener('shown.bs.collapse', () => {
+        expect(childCollapseEl2.classList.contains('show')).toEqual(true)
+        expect(childCollapseEl1.classList.contains('show')).toEqual(false)
+        done()
+      })
+
+      parentBtn.click()
+    })
     it('should not change tab tabpanels descendants on accordion', done => {
       fixtureEl.innerHTML = [
         '<div class="accordion" id="accordionExample">',