test(aria/tabs): generate additional tests for Tab directives, harness and patterns

Author: adolgachev

goldens/aria/tabs/testing/index.api.md

@@ -27,6 +27,7 @@ export class TabHarness extends ContentContainerComponentHarness {
 // @public
 export interface TabHarnessFilters extends BaseHarnessFilters {
     disabled?: boolean;
+    id?: string | RegExp;
     selected?: boolean;
     title?: string | RegExp;
 }

src/aria/private/tabs/tabs.spec.ts

@@ -420,4 +420,21 @@ describe('Tabs Pattern', () => {
       expect(tabPanelPatterns[2].labelledBy()).toBe('tab-3-id');
     });
   });
+
+  describe('ActiveDescendant mode', () => {
+    beforeEach(() => {
+      tabListInputs.focusMode.set('activedescendant');
+      tabListPattern.setDefaultState();
+    });
+
+    it('should update activeDescendant when navigating', () => {
+      expect(tabListPattern.activeDescendant()).toBe('tab-1-id');
+
+      tabListPattern.onKeydown(right());
+      expect(tabListPattern.activeDescendant()).toBe('tab-2-id');
+
+      tabListPattern.onKeydown(right());
+      expect(tabListPattern.activeDescendant()).toBe('tab-3-id');
+    });
+  });
 });

src/aria/tabs/tabs.spec.ts

@@ -495,23 +495,23 @@ describe('Tabs', () => {
         ],
       });
 
-      const tabsDebugElement = fixture.debugElement.query(By.directive(Tabs));
-      const tabsDirective = tabsDebugElement.injector.get(Tabs);
-
-      let orderedItems = tabsDirective._collection.orderedItems();
-      expect(orderedItems.length).toBe(3);
-      expect(orderedItems[0].value()).toBe('tab1');
-      expect(orderedItems[2].value()).toBe('tab3');
+      // Verify initial DOM order
+      expect(tabElements.length).toBe(3);
+      expect(tabElements[0].textContent?.trim()).toBe('Tab 1');
+      expect(tabElements[2].textContent?.trim()).toBe('Tab 3');
 
+      // Shuffle (reverse) data
       const items = testComponent.tabsData().reverse();
       testComponent.tabsData.set([...items]);
       fixture.detectChanges();
       await waitForMicrotasks();
 
-      orderedItems = tabsDirective._collection.orderedItems();
-      expect(orderedItems.length).toBe(3);
-      expect(orderedItems[0].value()).toBe('tab3');
-      expect(orderedItems[2].value()).toBe('tab1');
+      // Re-query elements to check new DOM order
+      defineTestVariables();
+
+      expect(tabElements.length).toBe(3);
+      expect(tabElements[0].textContent?.trim()).toBe('Tab 3');
+      expect(tabElements[2].textContent?.trim()).toBe('Tab 1');
     });
   });
 
@@ -740,6 +740,97 @@ describe('Tabs', () => {
       expect(tabPanelElements[2].hasAttribute('inert')).toBe(true);
     });
   });
+
+  describe('Dynamic tabs', () => {
+    beforeEach(() => {
+      setupTestTabs();
+      updateTabs({
+        initialTabs: [
+          {value: 'tab1', label: 'Tab 1', content: 'Content 1'},
+          {value: 'tab2', label: 'Tab 2', content: 'Content 2'},
+          {value: 'tab3', label: 'Tab 3', content: 'Content 3'},
+        ],
+        selectedTab: 'tab2',
+      });
+    });
+
+    it('should update selection when active tab is removed', () => {
+      expect(testComponent.selectedTab()).toBe('tab2');
+
+      testComponent.tabsData.set([
+        {value: 'tab1', label: 'Tab 1', content: 'Content 1'},
+        {value: 'tab3', label: 'Tab 3', content: 'Content 3'},
+      ]);
+      fixture.detectChanges();
+      defineTestVariables();
+
+      expect(testComponent.selectedTab()).toBeUndefined();
+    });
+
+    it('should maintain selection when a new tab is added', () => {
+      expect(testComponent.selectedTab()).toBe('tab2');
+
+      testComponent.tabsData.set([
+        {value: 'tab1', label: 'Tab 1', content: 'Content 1'},
+        {value: 'tab2', label: 'Tab 2', content: 'Content 2'},
+        {value: 'tab3', label: 'Tab 3', content: 'Content 3'},
+        {value: 'tab4', label: 'Tab 4', content: 'Content 4'},
+      ]);
+      fixture.detectChanges();
+      defineTestVariables();
+
+      expect(testComponent.selectedTab()).toBe('tab2');
+    });
+  });
+
+  describe('Content lazy rendering', () => {
+    beforeEach(() => {
+      setupTestTabs();
+      updateTabs({
+        initialTabs: [
+          {value: 'tab1', label: 'Tab 1', content: 'Content 1'},
+          {value: 'tab2', label: 'Tab 2', content: 'Content 2'},
+        ],
+        selectedTab: 'tab1',
+      });
+    });
+
+    it('should not render content of unselected tabs', () => {
+      expect(tabPanelElements[0].textContent?.trim()).toContain('Content 1');
+      expect(tabPanelElements[1].textContent?.trim()).not.toContain('Content 2');
+    });
+
+    it('should render content when tab becomes selected', () => {
+      updateTabs({selectedTab: 'tab2'});
+
+      expect(tabPanelElements[0].textContent?.trim()).not.toContain('Content 1');
+      expect(tabPanelElements[1].textContent?.trim()).toContain('Content 2');
+    });
+  });
+
+  describe('Custom IDs', () => {
+    let customIdFixture: ComponentFixture<TestTabsCustomIdComponent>;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [provideFakeDirectionality('ltr')],
+      });
+      customIdFixture = TestBed.createComponent(TestTabsCustomIdComponent);
+      fixture = customIdFixture as any;
+      customIdFixture.detectChanges();
+    });
+
+    it('should use custom ID for tab and link to panel', async () => {
+      const tabEl = customIdFixture.nativeElement.querySelector('#custom-tab-id');
+      const panelEl = customIdFixture.nativeElement.querySelector('#custom-panel-id');
+
+      expect(tabEl).toBeTruthy();
+      expect(panelEl).toBeTruthy();
+
+      expect(tabEl.getAttribute('aria-controls')).toBe('custom-panel-id');
+      expect(panelEl.getAttribute('aria-labelledby')).toBe('custom-tab-id');
+    });
+  });
 });
 
 @Component({
@@ -798,3 +889,21 @@ class TestTabsComponent {
   focusMode = signal<'roving' | 'activedescendant'>('roving');
   selectionMode = signal<'follow' | 'explicit'>('follow');
 }
+
+@Component({
+  template: `
+    <div ngTabs>
+      <ul ngTabList [(selectedTab)]="selectedTab">
+        <li ngTab value="tab1" id="custom-tab-id">Tab 1</li>
+      </ul>
+      <div ngTabPanel value="tab1" id="custom-panel-id">
+        <ng-template ngTabContent>Content 1</ng-template>
+      </div>
+    </div>
+  `,
+  imports: [Tabs, TabList, Tab, TabPanel, TabContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class TestTabsCustomIdComponent {
+  selectedTab = signal('tab1');
+}

src/aria/tabs/testing/tabs-harness-filters.ts

@@ -19,4 +19,6 @@ export interface TabHarnessFilters extends BaseHarnessFilters {
   selected?: boolean;
   /** Only find instances that are disabled. */
   disabled?: boolean;
+  /** Only find instances whose id matches the given value. */
+  id?: string | RegExp;
 }

src/aria/tabs/testing/tabs-harness.spec.ts

@@ -126,14 +126,43 @@ describe('TabsHarness', () => {
     expect(filteredTabs.length).toBe(1);
     expect(await filteredTabs[0].getTitle()).toBe('Tab 3');
   });
+
+  it('should filter tabs by id', async () => {
+    const tabs = await loader.getHarness(TabsHarness);
+    const filteredTabs = await tabs.getTabs({id: 'custom-id-2'});
+
+    expect(filteredTabs.length).toBe(1);
+    expect(await filteredTabs[0].getTitle()).toBe('Tab 2');
+  });
+
+  it('should handle deferred content when collapsed', async () => {
+    const tabs = await loader.getHarness(TabsHarness);
+    const tabItems = await tabs.getTabs();
+
+    // Tab 2 is collapsed initially, content should not be available
+    const contentHarness = await tabItems[1].getHarnessOrNull(TestContentHarness);
+    expect(contentHarness).toBeNull();
+  });
+
+  it('should handle deferred content when expanded', async () => {
+    const tabs = await loader.getHarness(TabsHarness);
+    const tabItems = await tabs.getTabs();
+
+    await tabItems[1].select(); // Expand Tab 2
+
+    // Now expanded, content should be available
+    const contentHarness = await tabItems[1].getHarness(TestContentHarness);
+    expect(contentHarness).toBeTruthy();
+    expect(await contentHarness.getText()).toBe('Content 2');
+  });
 });
 
 @Component({
   template: `
     <div ngTabs>
       <ul ngTabList [selectedTab]="'tab1'">
         <li ngTab value="tab1">Tab 1</li>
-        <li ngTab value="tab2">Tab 2</li>
+        <li ngTab value="tab2" id="custom-id-2">Tab 2</li>
         <li ngTab value="tab3" [disabled]="true">Tab 3</li>
       </ul>
 
@@ -144,7 +173,9 @@ describe('TabsHarness', () => {
         </ng-template>
       </div>
       <div ngTabPanel value="tab2">
-        <ng-template ngTabContent>Content 2</ng-template>
+        <ng-template ngTabContent>
+          <div class="test-content">Content 2</div>
+        </ng-template>
       </div>
       <div ngTabPanel value="tab3">
         <ng-template ngTabContent>Content 3</ng-template>

src/aria/tabs/testing/tabs-harness.ts

@@ -38,6 +38,9 @@ export class TabHarness extends ContentContainerComponentHarness {
         'disabled',
         options.disabled,
         async (harness, disabled) => (await harness.isDisabled()) === disabled,
+      )
+      .addOption('id', options.id, async (harness, id) =>
+        HarnessPredicate.stringMatches((await harness.host()).getAttribute('id'), id),
       );
   }