semmet-angular 0.23.0 → 0.25.0

package/README.md

@@ -8,17 +8,18 @@ Semmet Angular helps teams generate, test, verify, and package accessible Angula
 
 **Gerar. Testar. Verificar. Empacotar.**
 
+Read the broader product direction in [PRODUCT_VISION.md](./PRODUCT_VISION.md).
+
 `ng generate semmet-angular:accordion my-faq` scaffolds a standalone, signals-based Angular component — `.ts`/`.html`/`.css` — plus `.spec.ts` and `.e2e-spec.ts` smoke tests. The generated component implements a W3C ARIA Authoring Practices Guide pattern for real: correct roles and `aria-*` wiring, the keyboard/focus behavior the pattern requires (arrow-key navigation, focus traps, focus restoration...), and a consistent visual identity out of the box.
 
 ## Usage
 
 ```
-npm install -D semmet-angular
 ng add semmet-angular
 ng generate semmet-angular:accordion my-faq
 ```
 
-`ng add semmet-angular` configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
+`ng add semmet-angular` installs the package and configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
 
 ## Generated tests
 
@@ -32,7 +33,7 @@ my-faq.spec.ts
 my-faq.e2e-spec.ts
 ```
 
-The unit test uses Angular's `TestBed` to verify that the standalone component can be created. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
+The unit test uses Angular's `TestBed` to verify the component through its public selector. Interactive components also generate behavior-focused tests for their ARIA state, keyboard flow, value changes, focus management, and open/close behavior. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
 
 After running `ng add semmet-angular`, use:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Accessible UI Delivery Kit for Angular: schematics that generate ARIA-conformant standalone components with styling, keyboard behavior, unit tests, and Playwright e2e smoke tests.",
   "publisher": "danilodevsilva",
   "license": "MIT",

package/src/accordion/files/__name@dasherize__/__name@dasherize__.html.template

@@ -25,7 +25,7 @@ Set [preserveContent]="false" on <<%= selector %>> to destroy panel content when
       [attr.aria-controls]="instanceId + '-panel-' + item.id()"
       [id]="instanceId + '-header-' + item.id()"
       (click)="toggle(item)"
-      (keydown)="navigateHeaders($event, i)"
+      (keydown)="navigateHeaders($event)"
     >
       {{ item.title() }}
     </button>

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

@@ -0,0 +1,124 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
+  template: `
+    <<%= selector %> [preserveContent]="preserveContent">
+      <ng-template <%= camelize(name) %>Item id="profile" title="Profile" [expanded]="true">
+        <p>Profile content</p>
+      </ng-template>
+
+      <ng-template <%= camelize(name) %>Item id="settings" title="Settings">
+        <p>Settings content</p>
+      </ng-template>
+
+      <ng-template <%= camelize(name) %>Item id="billing" title="Billing" disabled>
+        <p>Billing content</p>
+      </ng-template>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {
+  preserveContent = true;
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+  });
+
+  function buttons(): HTMLButtonElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('button'));
+  }
+
+  function panels(): HTMLElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('[role="region"]'));
+  }
+
+  it('renders projected accordion items with ARIA relationships', () => {
+    const [profileButton, settingsButton] = buttons();
+    const [profilePanel, settingsPanel] = panels();
+
+    expect(profileButton.textContent?.trim()).toBe('Profile');
+    expect(profileButton.getAttribute('aria-expanded')).toBe('true');
+    expect(profileButton.getAttribute('aria-controls')).toBe(profilePanel.id);
+    expect(profilePanel.getAttribute('aria-labelledby')).toBe(profileButton.id);
+    expect(profilePanel.hidden).toBe(false);
+
+    expect(settingsButton.textContent?.trim()).toBe('Settings');
+    expect(settingsButton.getAttribute('aria-expanded')).toBe('false');
+    expect(settingsButton.getAttribute('aria-controls')).toBe(settingsPanel.id);
+    expect(settingsPanel.hidden).toBe(true);
+  });
+
+  it('toggles an enabled item with click', () => {
+    const [, settingsButton] = buttons();
+    const [, settingsPanel] = panels();
+
+    settingsButton.click();
+    fixture.detectChanges();
+
+    expect(settingsButton.getAttribute('aria-expanded')).toBe('true');
+    expect(settingsPanel.hidden).toBe(false);
+    expect(settingsPanel.textContent).toContain('Settings content');
+
+    settingsButton.click();
+    fixture.detectChanges();
+
+    expect(settingsButton.getAttribute('aria-expanded')).toBe('false');
+    expect(settingsPanel.hidden).toBe(true);
+  });
+
+  it('does not toggle disabled items', () => {
+    const disabledButton = buttons()[2];
+    const disabledPanel = panels()[2];
+
+    expect(disabledButton.disabled).toBe(true);
+    expect(disabledButton.getAttribute('aria-expanded')).toBe('false');
+
+    disabledButton.click();
+    fixture.detectChanges();
+
+    expect(disabledButton.getAttribute('aria-expanded')).toBe('false');
+    expect(disabledPanel.hidden).toBe(true);
+  });
+
+  it('keeps closed content after first render when preserveContent is enabled', () => {
+    const [, settingsButton] = buttons();
+    const [, settingsPanel] = panels();
+
+    settingsButton.click();
+    fixture.detectChanges();
+    settingsButton.click();
+    fixture.detectChanges();
+
+    expect(settingsPanel.hidden).toBe(true);
+    expect(settingsPanel.textContent).toContain('Settings content');
+  });
+
+  it('moves focus between headers with arrow, Home, and End keys', () => {
+    const [profileButton, settingsButton] = buttons();
+
+    profileButton.focus();
+    profileButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(settingsButton);
+
+    settingsButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(settingsButton);
+
+    settingsButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+    expect(document.activeElement).toBe(profileButton);
+  });
+});

package/src/accordion/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -94,12 +94,17 @@ export class <%= classify(name) %> {
   }
 
   // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.
-  protected navigateHeaders(event: KeyboardEvent, index: number): void {
-    const buttons = this.headerButtons();
+  protected navigateHeaders(event: KeyboardEvent): void {
+    const buttons = this.headerButtons().filter((button) => !button.nativeElement.disabled);
     if (buttons.length === 0) {
       return;
     }
 
+    const index = buttons.findIndex((button) => button.nativeElement === event.currentTarget);
+    if (index === -1) {
+      return;
+    }
+
     let nextIndex: number;
     switch (event.key) {
       case 'ArrowDown':

package/src/accordion/index.js

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

package/src/accordion/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/accordion/index.ts

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

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

@@ -0,0 +1,27 @@
+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();
+  });
+
+  it('renders an assertive alert region', () => {
+    const alert = fixture.nativeElement.querySelector('[role="alert"]');
+
+    expect(alert).toBeTruthy();
+    expect(alert.textContent).toContain('Your changes have been saved.');
+    expect(fixture.nativeElement.querySelector('button').getAttribute('aria-label')).toBe('Dismiss');
+  });
+
+  it('dismisses the alert', () => {
+    fixture.nativeElement.querySelector('button').click();
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('[role="alert"]')).toBeNull();
+  });
+});

package/src/alert/index.js

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

package/src/alert/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/alert/index.ts

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

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

@@ -0,0 +1,66 @@
+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 dialog(): HTMLElement | null {
+    return fixture.nativeElement.querySelector('[role="alertdialog"]');
+  }
+
+  it('starts closed with a destructive-action trigger', () => {
+    expect(trigger().textContent?.trim()).toBe('Delete item');
+    expect(dialog()).toBeNull();
+  });
+
+  it('opens an alertdialog with modal, title, and description semantics', () => {
+    trigger().click();
+    fixture.detectChanges();
+
+    const element = dialog();
+    const title = fixture.nativeElement.querySelector('h2');
+    const description = fixture.nativeElement.querySelector(`#${element?.getAttribute('aria-describedby')}`);
+
+    expect(element).toBeTruthy();
+    expect(element?.getAttribute('aria-modal')).toBe('true');
+    expect(element?.getAttribute('aria-labelledby')).toBe(title.id);
+    expect(description?.textContent).toContain('This action cannot be undone.');
+  });
+
+  it('closes from Cancel and restores focus to the trigger', () => {
+    const button = trigger();
+    button.focus();
+    button.click();
+    fixture.detectChanges();
+
+    const cancelButton = Array.from(fixture.nativeElement.querySelectorAll('button'))[1] as HTMLButtonElement;
+    cancelButton.click();
+    fixture.detectChanges();
+
+    expect(dialog()).toBeNull();
+    expect(document.activeElement).toBe(button);
+  });
+
+  it('closes with Escape', () => {
+    trigger().click();
+    fixture.detectChanges();
+
+    dialog()?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(dialog()).toBeNull();
+  });
+});

package/src/alert-dialog/index.js

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

package/src/alert-dialog/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/alert-dialog/index.ts

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

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

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %>, <%= classify(name) %>Label, <%= classify(name) %>Leading, <%= classify(name) %>Trailing } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Label, <%= classify(name) %>Leading, <%= classify(name) %>Trailing],
+  template: `
+    <<%= selector %>
+      label="Save"
+      variant="danger"
+      size="lg"
+      [busy]="busy"
+      [disabled]="disabled"
+      [pressed]="pressed"
+      (buttonClick)="clicked = true"
+    >
+      <ng-template <%= camelize(name) %>Leading>Lead</ng-template>
+      <ng-template <%= camelize(name) %>Label>Projected label</ng-template>
+      <ng-template <%= camelize(name) %>Trailing>Trail</ng-template>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {
+  busy = false;
+  disabled = false;
+  pressed: boolean | null = true;
+  clicked = false;
+}
+
+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');
+  }
+
+  it('renders projected label, slots, classes, and pressed state', () => {
+    expect(button().textContent).toContain('Projected label');
+    expect(button().textContent).toContain('Lead');
+    expect(button().textContent).toContain('Trail');
+    expect(button().className).toContain('semmet-button--danger');
+    expect(button().className).toContain('semmet-button--lg');
+    expect(button().getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('emits buttonClick when enabled', () => {
+    button().click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.clicked).toBe(true);
+  });
+
+  it('blocks clicks when busy or disabled', () => {
+    fixture.componentInstance.busy = true;
+    fixture.componentInstance.clicked = false;
+    fixture.detectChanges();
+
+    button().click();
+    expect(fixture.componentInstance.clicked).toBe(false);
+    expect(button().disabled).toBe(true);
+    expect(button().getAttribute('aria-busy')).toBe('true');
+  });
+});

package/src/button/index.js

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

package/src/button/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/button/index.ts

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

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

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %>, <%= classify(name) %>Item, <%= classify(name) %>ItemTemplate } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>ItemTemplate],
+  template: `
+    <<%= selector %>
+      label="View period"
+      selectionMode="multiple"
+      [items]="items"
+      [(selectedIds)]="selectedIds"
+    >
+      <ng-template <%= camelize(name) %>Item let-item let-pressed="pressed">
+        {{ item.label }} {{ pressed ? 'on' : 'off' }}
+      </ng-template>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {
+  items: <%= classify(name) %>Item[] = [
+    { id: 'day', label: 'Day', pressed: true },
+    { id: 'week', label: 'Week' },
+    { id: 'month', label: 'Month', disabled: true },
+  ];
+  selectedIds = ['day'];
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+  });
+
+  function group(): HTMLElement {
+    return fixture.nativeElement.querySelector('[role="group"]');
+  }
+
+  function buttons(): HTMLButtonElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('button'));
+  }
+
+  it('renders grouped buttons with labels and pressed state', () => {
+    const [day, week, month] = buttons();
+
+    expect(group().getAttribute('aria-label')).toBe('View period');
+    expect(day.getAttribute('aria-pressed')).toBe('true');
+    expect(day.textContent).toContain('Day on');
+    expect(week.getAttribute('aria-pressed')).toBe('false');
+    expect(month.disabled).toBe(true);
+  });
+
+  it('updates selectedIds in multiple selection mode', () => {
+    buttons()[1].click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.selectedIds).toEqual(['day', 'week']);
+    expect(buttons()[1].getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('ignores disabled items', () => {
+    buttons()[2].click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.selectedIds).toEqual(['day']);
+  });
+});

package/src/button-group/index.js

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

package/src/button-group/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/button-group/index.ts

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

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

@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %>, <%= classify(name) %>Slide } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Slide],
+  template: `
+    <<%= selector %>>
+      <ng-template <%= camelize(name) %>Slide id="intro" label="Introduction">
+        <h2>Intro slide</h2>
+      </ng-template>
+      <ng-template <%= camelize(name) %>Slide id="summary" label="Summary">
+        <h2>Summary slide</h2>
+      </ng-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 carousel and active slide semantics', () => {
+    const carousel = host.querySelector<HTMLElement>('[aria-roledescription="carousel"]');
+    const slides = Array.from(host.querySelectorAll<HTMLElement>('[aria-roledescription="slide"]'));
+
+    expect(carousel?.getAttribute('aria-label')).toBe('Featured items');
+    expect(slides).toHaveLength(2);
+    expect(slides[0].hidden).toBe(false);
+    expect(slides[0].getAttribute('aria-label')).toBe('1 of 2: Introduction');
+    expect(slides[1].hidden).toBe(true);
+  });
+
+  it('moves between slides and wraps with previous/next buttons', () => {
+    const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>('button'));
+    const getSlides = () => Array.from(host.querySelectorAll<HTMLElement>('[aria-roledescription="slide"]'));
+
+    buttons.find((button) => button.getAttribute('aria-label') === 'Next slide')?.click();
+    fixture.detectChanges();
+
+    expect(getSlides()[0].hidden).toBe(true);
+    expect(getSlides()[1].hidden).toBe(false);
+    expect(host.textContent).toContain('Summary slide');
+
+    buttons.find((button) => button.getAttribute('aria-label') === 'Next slide')?.click();
+    fixture.detectChanges();
+
+    expect(getSlides()[0].hidden).toBe(false);
+    expect(getSlides()[1].hidden).toBe(true);
+
+    buttons.find((button) => button.getAttribute('aria-label') === 'Previous slide')?.click();
+    fixture.detectChanges();
+
+    expect(getSlides()[0].hidden).toBe(true);
+    expect(getSlides()[1].hidden).toBe(false);
+  });
+});

package/src/carousel/index.js

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

package/src/carousel/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/carousel/index.ts

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