fix(sbb-tab-group): correctly select a new tab if it is 'active' pt.2

sbb-design-systems · Nov 29, 2024 · 2943d6e · 2943d6e
1 parent bd504d4
commit 2943d6e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/elements/tabs/tab-group/tab-group.spec.ts b/src/elements/tabs/tab-group/tab-group.spec.ts
@@ -178,32 +178,33 @@ describe(`sbb-tab-group`, () => {
 
   it('recovers if active tabs are added later', async () => {
     element = await fixture(html`<sbb-tab-group></sbb-tab-group>`);
+    const changeSpy = new EventSpy(SbbTabGroupElement.events.didChange);
 
     const newLabel = document.createElement('sbb-tab-label');
     newLabel.textContent = 'Label 1';
     newLabel.toggleAttribute('active', true);
     const newTab = document.createElement('sbb-tab');
     newTab.textContent = 'Tab 1';
 
-    element.appendChild(newLabel);
-    element.appendChild(newTab);
+    element.append(newLabel, newTab);
 
     await waitForLitRender(element);
     // Await throttling
     await aTimeout(200);
 
+    // console.log(element._selectedTab)
     const newLabelActive = document.createElement('sbb-tab-label');
     newLabelActive.textContent = 'Label 2';
     const newTabActive = document.createElement('sbb-tab');
     newTabActive.textContent = 'Tab 2';
 
-    element.appendChild(newLabelActive);
-    element.appendChild(newTabActive);
+    element.append(newLabelActive, newTabActive);
 
     await waitForLitRender(element);
     // Await throttling
     await aTimeout(200);
 
+    expect(changeSpy.count).to.be.equal(1);
     expect(element.querySelector('sbb-tab-label')).to.have.attribute('active');
     expect(element.querySelector('sbb-tab-label')).to.have.attribute('aria-selected', 'true');
     expect(element.querySelector('sbb-tab')).to.have.attribute('active');
@@ -217,6 +218,7 @@ describe(`sbb-tab-group`, () => {
     newLabelActive.click();
     await waitForLitRender(element);
 
+    expect(changeSpy.count).to.be.equal(2);
     expect(element.querySelector('sbb-tab-label')).not.to.have.attribute('active');
     expect(element.querySelector('sbb-tab-label')).to.have.attribute('aria-selected', 'false');
     expect(element.querySelector('sbb-tab')).not.to.have.attribute('active');

diff --git a/src/elements/tabs/tab-group/tab-group.ts b/src/elements/tabs/tab-group/tab-group.ts
@@ -173,7 +173,7 @@ class SbbTabGroupElement extends SbbHydrationMixin(LitElement) {
       this._tabs = this._tabs.concat(loadedTabs);
 
       // If there is an active tab in the new batch, it becomes the new selected
-      // loadedTabs.find((tab) => tab.active)?.tabGroupActions?.select();
+      loadedTabs.find((tab) => tab.active)?.tabGroupActions?.select();
     }
   };