test(aria/tabs): check for incorrect usage of Tabs directives and log violations

Author: adolgachev

src/aria/tabs/tab-list.ts

@@ -149,6 +149,19 @@ export class TabList implements OnInit, OnDestroy {
         this.selectedTab.set(tab?.value());
       },
     });
+
+    // Check for any violations after the DOM has been updated.
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          const values = this._collection.orderedItems().map(t => t.value());
+          const duplicates = values.filter((item, index) => values.indexOf(item) !== index);
+          if (duplicates.length > 0) {
+            console.error(`Duplicate value '${duplicates[0]}' detected inside ngTabList.`);
+          }
+        }
+      },
+    });
   }
 
   ngOnInit() {

src/aria/tabs/tab-panel.ts

@@ -14,11 +14,13 @@ import {
   inject,
   input,
   afterRenderEffect,
+  contentChild,
   OnInit,
   OnDestroy,
 } from '@angular/core';
 import {TabPanelPattern, DeferredContentAware} from '../private';
 import {TABS} from './tab-tokens';
+import {TabContent} from './tab-content';
 
 /**
  * A TabPanel container for the resources of layered content associated with a tab.
@@ -89,8 +91,37 @@ export class TabPanel implements OnInit, OnDestroy {
     tab: this._tabPattern,
   });
 
+  private readonly _tabContent = contentChild(TabContent);
+
   constructor() {
-    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
+    // Connect the panel's hidden state to the DeferredContentAware's visibility.
+    afterRenderEffect({
+      write: () => {
+        this._deferredContentAware.contentVisible.set(this.visible());
+      },
+    });
+
+    // Check for any violations after the DOM has been updated.
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          const violations: string[] = [];
+
+          if (!this._tabContent()) {
+            violations.push('ngTabPanel must have an ngTabContent structural directive to render.');
+          }
+          if (!this._tabs._tabMap().has(this.value())) {
+            violations.push(
+              `ngTabPanel with value '${this.value()}' does not have a corresponding ngTab.`,
+            );
+          }
+
+          for (const violation of violations) {
+            console.error(violation);
+          }
+        }
+      },
+    });
   }
 
   ngOnInit() {

src/aria/tabs/tab.ts

@@ -16,6 +16,7 @@ import {
   computed,
   inject,
   input,
+  afterRenderEffect,
 } from '@angular/core';
 import {TabPattern, HasElement} from '../private';
 import {TAB_LIST} from './tab-tokens';
@@ -92,6 +93,22 @@ export class Tab implements HasElement, OnInit, OnDestroy {
     this._pattern.open();
   }
 
+  constructor() {
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          if (this._tabList && this._tabList._tabsParent) {
+            if (!this._tabList._tabsParent._panelMap().has(this.value())) {
+              console.error(
+                `ngTab with value '${this.value()}' does not have a corresponding ngTabPanel.`,
+              );
+            }
+          }
+        }
+      },
+    });
+  }
+
   ngOnInit() {
     this._tabList._collection.register(this);
   }

src/aria/tabs/tabs.spec.ts

@@ -806,6 +806,69 @@ describe('Tabs', () => {
       expect(panelEl.getAttribute('aria-labelledby')).toBe('custom-tab-id');
     });
   });
+
+  describe('structural validations', () => {
+    let consoleSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      consoleSpy = spyOn(console, 'error');
+    });
+
+    afterEach(() => {
+      TestBed.resetTestingModule();
+      setupTestTabs();
+    });
+
+    it('should warn when ngTab is missing its corresponding ngTabPanel', () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [TabWithoutPanelComponent],
+      });
+      const noPanelFixture = TestBed.createComponent(TabWithoutPanelComponent);
+      noPanelFixture.detectChanges();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        "ngTab with value 'tab1' does not have a corresponding ngTabPanel.",
+      );
+    });
+
+    it('should warn when ngTabPanel is missing its corresponding ngTab', () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [PanelWithoutTabComponent],
+      });
+      const noTabFixture = TestBed.createComponent(PanelWithoutTabComponent);
+      noTabFixture.detectChanges();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        "ngTabPanel with value 'tab1' does not have a corresponding ngTab.",
+      );
+    });
+
+    it('should warn when ngTabPanel is missing ngTabContent structural directive', () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [PanelWithoutContentComponent],
+      });
+      const noContentFixture = TestBed.createComponent(PanelWithoutContentComponent);
+      noContentFixture.detectChanges();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'ngTabPanel must have an ngTabContent structural directive to render.',
+      );
+    });
+
+    it('should warn when duplicate values are detected inside ngTabList', () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [DuplicateTabValuesComponent],
+      });
+      const duplicateFixture = TestBed.createComponent(DuplicateTabValuesComponent);
+      duplicateFixture.detectChanges();
+
+      expect(consoleSpy).toHaveBeenCalledWith("Duplicate value 'tab1' detected inside ngTabList.");
+    });
+  });
 });
 
 @Component({
@@ -882,3 +945,62 @@ class TestTabsComponent {
 class TestTabsCustomIdComponent {
   selectedTab = signal('tab1');
 }
+
+@Component({
+  template: `
+    <div ngTabs>
+      <ul ngTabList>
+        <li ngTab value="tab1">Tab 1</li>
+      </ul>
+    </div>
+  `,
+  imports: [Tabs, TabList, Tab],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class TabWithoutPanelComponent {}
+
+@Component({
+  template: `
+    <div ngTabs>
+      <div ngTabPanel value="tab1">
+        <ng-template ngTabContent>Content 1</ng-template>
+      </div>
+    </div>
+  `,
+  imports: [Tabs, TabPanel, TabContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class PanelWithoutTabComponent {}
+
+@Component({
+  template: `
+    <div ngTabs>
+      <ul ngTabList>
+        <li ngTab value="tab1">Tab 1</li>
+      </ul>
+      <div ngTabPanel value="tab1">
+        Content 1
+      </div>
+    </div>
+  `,
+  imports: [Tabs, TabList, Tab, TabPanel],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class PanelWithoutContentComponent {}
+
+@Component({
+  template: `
+    <div ngTabs>
+      <ul ngTabList>
+        <li ngTab value="tab1">Tab 1</li>
+        <li ngTab value="tab1">Tab 1 Copy</li>
+      </ul>
+      <div ngTabPanel value="tab1">
+        <ng-template ngTabContent>Content 1</ng-template>
+      </div>
+    </div>
+  `,
+  imports: [Tabs, TabList, Tab, TabPanel, TabContent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class DuplicateTabValuesComponent {}