semmet-angular 0.20.0 → 0.22.0

package/README.md

@@ -1,21 +1,44 @@
 # semmet-angular
 
-**Angular schematics that generate real, fully working, accessible components.**
+**Accessible UI Delivery Kit for Angular.**
 
-`ng generate semmet-angular:accordion my-faq` scaffolds a standalone, signals-based Angular component — `.ts`/`.html`/`.css` — that 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.
+`semmet-angular` is a delivery-focused schematic collection for Angular teams that want to ship accessible UI faster: components with real ARIA behavior, a consistent visual identity, and generated test files from the first command.
 
-## Relationship to Semmet
-
-[Semmet](https://github.com/daniloagostinho/semmet) is a VS Code extension that autocompletes the same W3C ARIA vocabulary as plain HTML — no CSS, no JS, framework-agnostic by design. semmet-angular draws from that same vocabulary as its source of truth, but takes the opposite approach on purpose: an Angular component isn't usable with markup alone, so everything generated here — state, event handlers, styling — is fully working from the start, not just structure.
+`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
 ```
 
-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` 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
+
+Every component schematic generates test files next to the component:
+
+```
+my-faq.ts
+my-faq.html
+my-faq.css
+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.
+
+After running `ng add semmet-angular`, use:
+
+```
+npm test
+npm run e2e
+npm run e2e:ui
+```
+
+`npm run e2e` runs Playwright against the Angular dev server configured by `playwright.config.ts`; `npm run e2e:ui` opens Playwright's interactive UI.
 
 ## Projected content containers
 
@@ -195,6 +218,7 @@ The smaller structural schematics keep their simple input APIs and add safe slot
 - Templates use the built-in control flow (`@for`, `@if`), not `*ngFor`/`*ngIf`.
 - No `.component` suffix on file names or class names (`accordion.ts`, `export class Accordion`), matching the current `ng generate component` convention.
 - A unique per-instance id (`<name>-0`, `<name>-1`, ...) so multiple instances of the same generated component never collide on `id`/`aria-controls`/`aria-labelledby`.
+- A generated unit test (`.spec.ts`) and Playwright e2e smoke test (`.e2e-spec.ts`) so the component starts life with a test surface.
 
 ## Visual identity
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "semmet-angular",
-  "version": "0.20.0",
-  "description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
+  "version": "0.22.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",
   "keywords": [
@@ -11,6 +11,8 @@
     "aria",
     "accessibility",
     "a11y",
+    "e2e",
+    "playwright",
     "standalone",
     "signals"
   ],

package/src/utils/component-test-files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -1,10 +1,15 @@
 import { expect, test } from '@playwright/test';
 
 test.describe('<%= classify(name) %>', () => {
-  test('is rendered and reachable by its Angular selector', async ({ page }) => {
+  test('is visible when mounted in the application', async ({ page }) => {
     await page.goto('/');
 
     const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e smoke test.'
+    );
+
     await expect(component).toBeVisible();
   });
 });