semmet-angular 0.23.0 → 0.24.0

package/src/close-button/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `
+    <<%= selector %>
+      label="Close dialog"
+      variant="inverse"
+      size="lg"
+      [disabled]="disabled"
+      (buttonClick)="clickCount = clickCount + 1"
+    />
+  `,
+})
+class HostComponent {
+  disabled = false;
+  clickCount = 0;
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders a native close button with accessible name and visual variants', () => {
+    const button = host.querySelector<HTMLButtonElement>('button');
+    const icon = host.querySelector<HTMLElement>('.semmet-close-button__icon');
+
+    expect(button?.type).toBe('button');
+    expect(button?.getAttribute('aria-label')).toBe('Close dialog');
+    expect(button?.classList.contains('semmet-close-button--inverse')).toBe(true);
+    expect(button?.classList.contains('semmet-close-button--lg')).toBe(true);
+    expect(icon?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('emits buttonClick only when enabled', () => {
+    const component = fixture.componentInstance;
+    const button = host.querySelector<HTMLButtonElement>('button');
+
+    button?.click();
+    fixture.detectChanges();
+    expect(component.clickCount).toBe(1);
+
+    component.disabled = true;
+    fixture.detectChanges();
+
+    button?.click();
+    fixture.detectChanges();
+    expect(component.clickCount).toBe(1);
+    expect(button?.disabled).toBe(true);
+  });
+});

package/src/close-button/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.closeButton = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.closeButton = (0, generate_component_1.createAriaComponentSchematic)();
+exports.closeButton = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/close-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,WAAW,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,WAAW,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/close-button/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const closeButton = createAriaComponentSchematic();
+export const closeButton = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/combobox/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,79 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `<<%= selector %> />`,
+})
+class HostComponent {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders the combobox with label and collapsed popup wiring', () => {
+    const input = host.querySelector<HTMLInputElement>('[role="combobox"]');
+    const listbox = host.querySelector<HTMLElement>('[role="listbox"]');
+
+    expect(input).toBeTruthy();
+    expect(input?.getAttribute('aria-autocomplete')).toBe('list');
+    expect(input?.getAttribute('aria-expanded')).toBe('false');
+    expect(input?.getAttribute('aria-controls')).toBe(listbox?.id);
+    expect(input?.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(listbox?.hidden).toBe(true);
+  });
+
+  it('filters options from user input and opens the listbox', () => {
+    const inputDebug = fixture.debugElement.query(By.css('[role="combobox"]'));
+    const input = inputDebug.nativeElement as HTMLInputElement;
+
+    input.value = 'ba';
+    inputDebug.triggerEventHandler('input', { target: input });
+    fixture.detectChanges();
+
+    const options = Array.from(host.querySelectorAll<HTMLElement>('[role="option"]'));
+    const listbox = host.querySelector<HTMLElement>('[role="listbox"]');
+
+    expect(input.value).toBe('ba');
+    expect(listbox?.hidden).toBe(false);
+    expect(options.map((option) => option.textContent?.trim())).toEqual(['Banana']);
+  });
+
+  it('moves active option with the keyboard and selects it with Enter', () => {
+    const inputDebug = fixture.debugElement.query(By.css('[role="combobox"]'));
+    const input = inputDebug.nativeElement as HTMLInputElement;
+
+    inputDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    fixture.detectChanges();
+
+    let activeOption = host.querySelector<HTMLElement>('[role="option"][aria-selected="true"]');
+    expect(input.getAttribute('aria-activedescendant')).toBe(activeOption?.id);
+    expect(activeOption?.textContent?.trim()).toBe('Apple');
+
+    inputDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    fixture.detectChanges();
+
+    activeOption = host.querySelector<HTMLElement>('[role="option"][aria-selected="true"]');
+    expect(activeOption?.textContent?.trim()).toBe('Banana');
+
+    inputDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'Enter' }));
+    fixture.detectChanges();
+
+    const listbox = host.querySelector<HTMLElement>('[role="listbox"]');
+    expect(input.value).toBe('Banana');
+    expect(listbox?.hidden).toBe(true);
+  });
+});

package/src/combobox/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.combobox = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.combobox = (0, generate_component_1.createAriaComponentSchematic)();
+exports.combobox = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,QAAQ,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,QAAQ,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/combobox/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const combobox = createAriaComponentSchematic();
+export const combobox = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/dialog/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,68 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<<%= classify(name) %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [<%= classify(name) %>],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(<%= classify(name) %>);
+    fixture.detectChanges();
+  });
+
+  function openButton(): HTMLButtonElement {
+    return fixture.nativeElement.querySelector('button');
+  }
+
+  function dialog(): HTMLElement | null {
+    return fixture.nativeElement.querySelector('[role="dialog"]');
+  }
+
+  it('starts closed with an opening trigger', () => {
+    expect(openButton().textContent?.trim()).toBe('Open dialog');
+    expect(dialog()).toBeNull();
+  });
+
+  it('opens a modal dialog with labelled title', () => {
+    openButton().click();
+    fixture.detectChanges();
+
+    const element = dialog();
+    const title = fixture.nativeElement.querySelector('h2');
+
+    expect(element).toBeTruthy();
+    expect(element?.getAttribute('aria-modal')).toBe('true');
+    expect(element?.getAttribute('aria-labelledby')).toBe(title.id);
+    expect(element?.getAttribute('tabindex')).toBe('-1');
+    expect(title.textContent?.trim()).toBe('Dialog title');
+  });
+
+  it('closes with the close button and restores focus to the trigger', () => {
+    const trigger = openButton();
+    trigger.focus();
+    trigger.click();
+    fixture.detectChanges();
+
+    const closeButton = Array.from(fixture.nativeElement.querySelectorAll('button')).at(-1) as HTMLButtonElement;
+    closeButton.click();
+    fixture.detectChanges();
+
+    expect(dialog()).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('closes with Escape from inside the dialog', () => {
+    const trigger = openButton();
+    trigger.click();
+    fixture.detectChanges();
+
+    dialog()?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(dialog()).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+});

package/src/dialog/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialog = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.dialog = (0, generate_component_1.createAriaComponentSchematic)();
+exports.dialog = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,MAAM,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,MAAM,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/dialog/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const dialog = createAriaComponentSchematic();
+export const dialog = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/disclosure/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %>, <%= classify(name) %>Content } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Content],
+  template: `
+    <<%= selector %> label="Show profile details" [(expanded)]="expanded" [preserveContent]="preserveContent">
+      <ng-template <%= camelize(name) %>Content>
+        <p>Profile details</p>
+      </ng-template>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {
+  expanded = false;
+  preserveContent = true;
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+  });
+
+  function button(): HTMLButtonElement {
+    return fixture.nativeElement.querySelector('button');
+  }
+
+  function panel(): HTMLElement {
+    return fixture.nativeElement.querySelector('div');
+  }
+
+  it('renders button and panel with ARIA relationships', () => {
+    expect(button().textContent?.trim()).toBe('Show profile details');
+    expect(button().getAttribute('aria-expanded')).toBe('false');
+    expect(button().getAttribute('aria-controls')).toBe(panel().id);
+    expect(panel().getAttribute('aria-labelledby')).toBe(button().id);
+    expect(panel().hidden).toBe(true);
+  });
+
+  it('toggles expanded state from the trigger button', () => {
+    button().click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.expanded).toBe(true);
+    expect(button().getAttribute('aria-expanded')).toBe('true');
+    expect(panel().hidden).toBe(false);
+    expect(panel().textContent).toContain('Profile details');
+  });
+
+  it('preserves content after first render when preserveContent is enabled', () => {
+    button().click();
+    fixture.detectChanges();
+    button().click();
+    fixture.detectChanges();
+
+    expect(panel().hidden).toBe(true);
+    expect(panel().textContent).toContain('Profile details');
+  });
+});

package/src/disclosure/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.disclosure = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.disclosure = (0, generate_component_1.createAriaComponentSchematic)();
+exports.disclosure = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/disclosure/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,UAAU,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,UAAU,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/disclosure/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const disclosure = createAriaComponentSchematic();
+export const disclosure = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/input/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `
+    <<%= selector %>
+      label="Work email"
+      hint="Use your company address."
+      error="Email is required."
+      [required]="true"
+      [(value)]="email"
+    />
+  `,
+})
+class HostComponent {
+  email = '';
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+  });
+
+  function input(): HTMLInputElement {
+    return fixture.nativeElement.querySelector('input');
+  }
+
+  it('wires label, required state, hint, and error message', () => {
+    const label = fixture.nativeElement.querySelector('label');
+    const hint = fixture.nativeElement.querySelector('.semmet-field__hint');
+    const error = fixture.nativeElement.querySelector('.semmet-field__error');
+
+    expect(label.textContent).toContain('Work email');
+    expect(label.getAttribute('for')).toBe(input().id);
+    expect(input().required).toBe(true);
+    expect(input().getAttribute('aria-required')).toBe('true');
+    expect(input().getAttribute('aria-invalid')).toBe('true');
+    expect(input().getAttribute('aria-describedby')).toContain(hint.id);
+    expect(input().getAttribute('aria-describedby')).toContain(error.id);
+    expect(error.getAttribute('role')).toBe('alert');
+  });
+
+  it('updates the bound value on input', () => {
+    input().value = 'team@example.com';
+    input().dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.email).toBe('team@example.com');
+  });
+});

package/src/input/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.input = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.input = (0, generate_component_1.createAriaComponentSchematic)();
+exports.input = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,KAAK,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,KAAK,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/input/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const input = createAriaComponentSchematic();
+export const input = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/list-group/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `
+    <<%= selector %>
+      label="Account sections"
+      [items]="items"
+    />
+  `,
+})
+class HostComponent {
+  readonly items = [
+    { id: 'profile', title: 'Profile', description: 'Public identity', active: true },
+    { id: 'security', title: 'Security', description: 'Password settings', badge: '2' },
+    { id: 'billing', title: 'Billing', description: 'Invoices', disabled: true },
+  ];
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders a labeled semantic list with active and disabled states', () => {
+    const list = host.querySelector<HTMLUListElement>('ul');
+    const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>('button'));
+
+    expect(list?.getAttribute('aria-label')).toBe('Account sections');
+    expect(buttons.map((button) => button.textContent?.replace(/\s+/g, ' ').trim())).toEqual([
+      'Profile Public identity',
+      'Security Password settings 2',
+      'Billing Invoices',
+    ]);
+    expect(buttons[0].getAttribute('aria-current')).toBe('true');
+    expect(buttons[2].disabled).toBe(true);
+  });
+
+  it('updates selected item when an enabled item is activated', () => {
+    const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>('button'));
+
+    buttons[1].click();
+    fixture.detectChanges();
+
+    expect(buttons[0].getAttribute('aria-current')).toBeNull();
+    expect(buttons[1].getAttribute('aria-current')).toBe('true');
+
+    buttons[2].click();
+    fixture.detectChanges();
+
+    expect(buttons[1].getAttribute('aria-current')).toBe('true');
+    expect(buttons[2].getAttribute('aria-current')).toBeNull();
+  });
+});

package/src/list-group/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listGroup = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.listGroup = (0, generate_component_1.createAriaComponentSchematic)();
+exports.listGroup = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/list-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,SAAS,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,SAAS,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/list-group/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const listGroup = createAriaComponentSchematic();
+export const listGroup = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/listbox/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<<%= classify(name) %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [<%= classify(name) %>] }).compileComponents();
+    fixture = TestBed.createComponent(<%= classify(name) %>);
+    fixture.detectChanges();
+  });
+
+  function listbox(): HTMLElement {
+    return fixture.nativeElement.querySelector('[role="listbox"]');
+  }
+
+  function options(): HTMLElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('[role="option"]'));
+  }
+
+  it('renders listbox semantics with active descendant', () => {
+    const [first, second] = options();
+
+    expect(listbox().getAttribute('aria-labelledby')).toBeTruthy();
+    expect(listbox().getAttribute('aria-activedescendant')).toBe(first.id);
+    expect(first.getAttribute('aria-selected')).toBe('true');
+    expect(second.getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('selects an option on click', () => {
+    const [, second] = options();
+    second.click();
+    fixture.detectChanges();
+
+    expect(listbox().getAttribute('aria-activedescendant')).toBe(second.id);
+    expect(second.getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('moves active option with keyboard', () => {
+    listbox().dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(listbox().getAttribute('aria-activedescendant')).toBe(options()[1].id);
+
+    listbox().dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(listbox().getAttribute('aria-activedescendant')).toBe(options()[0].id);
+  });
+});

package/src/listbox/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listbox = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.listbox = (0, generate_component_1.createAriaComponentSchematic)();
+exports.listbox = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
 //# sourceMappingURL=index.js.map

package/src/listbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,OAAO,GAAG,IAAA,iDAA4B,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,OAAO,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/listbox/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const listbox = createAriaComponentSchematic();
+export const listbox = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,64 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<<%= classify(name) %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [<%= classify(name) %>] }).compileComponents();
+    fixture = TestBed.createComponent(<%= classify(name) %>);
+    fixture.detectChanges();
+  });
+
+  function trigger(): HTMLButtonElement {
+    return fixture.nativeElement.querySelector('button');
+  }
+
+  function menu(): HTMLElement {
+    return fixture.nativeElement.querySelector('[role="menu"]');
+  }
+
+  function menuItems(): HTMLElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('[role="menuitem"]'));
+  }
+
+  it('starts closed with menu button semantics', () => {
+    expect(trigger().getAttribute('aria-haspopup')).toBe('true');
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+    expect(trigger().getAttribute('aria-controls')).toBe(menu().id);
+    expect(menu().hidden).toBe(true);
+  });
+
+  it('opens from click and wires menu labelling', () => {
+    trigger().click();
+    fixture.detectChanges();
+
+    expect(trigger().getAttribute('aria-expanded')).toBe('true');
+    expect(menu().hidden).toBe(false);
+    expect(menu().getAttribute('aria-labelledby')).toBe(trigger().id);
+    expect(menuItems()[0].textContent?.trim()).toBe('First option');
+  });
+
+  it('opens with keyboard and closes with Escape', () => {
+    trigger().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    expect(menu().hidden).toBe(false);
+
+    menuItems()[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(menu().hidden).toBe(true);
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  it('moves focus between menu items', () => {
+    trigger().click();
+    fixture.detectChanges();
+
+    menuItems()[0].focus();
+    menuItems()[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(menuItems()[1]);
+  });
+});