test(aria/combobox): check for incorrect usage of Combobox directives and log violations

Author: adolgachev

src/aria/combobox/combobox-popup.ts

@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {computed, Directive, inject, input, OnDestroy, OnInit, signal} from '@angular/core';
+import {
+  computed,
+  Directive,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  signal,
+  afterRenderEffect,
+} from '@angular/core';
 import {DeferredContent, ComboboxPopupPattern} from '@angular/aria/private';
 import type {Combobox} from './combobox';
 import type {ComboboxWidget} from './combobox-widget';
@@ -58,6 +67,21 @@ export class ComboboxPopup implements OnInit, OnDestroy {
     ...this,
   });
 
+  constructor() {
+    // Check for any violations after the DOM has been updated.
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          if (!this._widget()) {
+            console.error(
+              'ngComboboxPopup must contain an ngComboboxWidget to establish focus controls.',
+            );
+          }
+        }
+      },
+    });
+  }
+
   ngOnInit() {
     this.combobox()._registerPopup(this);
     this._deferredContent.deferredContentAware.set(this.combobox());

src/aria/combobox/combobox.spec.ts

@@ -6,6 +6,7 @@ import {
   untracked,
   viewChild,
   afterRenderEffect,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
@@ -95,6 +96,45 @@ describe('Combobox', () => {
 
     afterEach(async () => await runAccessibilityChecks(fixture.nativeElement));
 
+    describe('structural validations', () => {
+      let consoleSpy: jasmine.Spy;
+
+      beforeEach(() => {
+        consoleSpy = spyOn(console, 'error');
+      });
+
+      afterEach(() => {
+        TestBed.resetTestingModule();
+        setupCombobox();
+      });
+
+      it('should warn when ngCombobox is missing ngComboboxPopup', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          imports: [ComboboxWithoutPopup],
+        });
+        const noPopupFixture = TestBed.createComponent(ComboboxWithoutPopup);
+        noPopupFixture.detectChanges();
+
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'ngCombobox must have a corresponding ngComboboxPopup template to render.',
+        );
+      });
+
+      it('should warn when ngComboboxPopup is missing ngComboboxWidget', () => {
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          imports: [ComboboxPopupWithoutWidget],
+        });
+        const noWidgetFixture = TestBed.createComponent(ComboboxPopupWithoutWidget);
+        noWidgetFixture.detectChanges();
+
+        expect(consoleSpy).toHaveBeenCalledWith(
+          'ngComboboxPopup must contain an ngComboboxWidget to establish focus controls.',
+        );
+      });
+    });
+
     describe('ARIA attributes and roles', () => {
       beforeEach(() => setupCombobox());
 
@@ -1705,3 +1745,28 @@ class ComboboxListboxHighlightExample {
     this.popupExpanded.set(false);
   }
 }
+
+@Component({
+  template: `
+    <div ngCombobox>
+      <input />
+    </div>
+  `,
+  imports: [Combobox],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class ComboboxWithoutPopup {}
+
+@Component({
+  template: `
+    <div ngCombobox #combobox="ngCombobox">
+      <input />
+      <ng-template ngComboboxPopup [combobox]="combobox">
+        <div class="plain-div">No Widget Inside</div>
+      </ng-template>
+    </div>
+  `,
+  imports: [Combobox, ComboboxPopup],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class ComboboxPopupWithoutWidget {}

src/aria/combobox/combobox.ts

@@ -123,6 +123,19 @@ export class Combobox extends DeferredContentAware implements OnInit {
         this._pattern.highlightEffect();
       });
     }
+
+    // Check for any violations after the DOM has been updated.
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          if (!this._popup()) {
+            console.error(
+              'ngCombobox must have a corresponding ngComboboxPopup template to render.',
+            );
+          }
+        }
+      },
+    });
   }
 
   ngOnInit() {