@webjsdev/cli 0.10.7 → 0.10.8

package/lib/create.js

@@ -311,6 +311,10 @@ export async function scaffoldApp(name, cwd, opts = {}) {
       '@web/test-runner': '^0.20.0',
       '@web/test-runner-playwright': '^0.11.0',
       'playwright': '^1.59.0',
+      // The standard accessibility engine, used opt-in by the
+      // assertNoA11yViolations() test helper from @webjsdev/core/testing.
+      // Test-only: dynamically imported, never shipped to the app runtime.
+      'axe-core': '^4.10.0',
       // tsserver plugin for editor intelligence inside html`` templates.
       // @webjsdev/ts-plugin bundles ts-lit-plugin internally, so just one
       // plugin entry is needed in tsconfig (see below).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "type": "module",
   "description": "webjs CLI - dev, start, create, db",
   "bin": {

package/templates/AGENTS.md

@@ -469,7 +469,7 @@ import '@webjsdev/core/client-router';              // enable SPA nav
 import { unsafeHTML, live } from '@webjsdev/core/directives';
 import { createContext } from '@webjsdev/core/context';
 import { Task } from '@webjsdev/core/task';
-import { fixture, waitForUpdate } from '@webjsdev/core/testing';
+import { fixture, ssrFixture, waitForUpdate, assertNoA11yViolations } from '@webjsdev/core/testing';
 
 import { rateLimit, cors, cache, createAuth, Credentials, Session } from '@webjsdev/server';
 ```

package/templates/CONVENTIONS.md

@@ -442,6 +442,16 @@ test/
 | node (unit + integration) | `test/<feature>/*.test.ts` | Fast, no spawned process. Import server actions/queries/utilities and call them directly. Use `renderToString` for SSR HTML assertions. |
 | browser | `test/<feature>/browser/*.test.js` | Real Chromium via web-test-runner + Playwright. Shadow DOM, events, `adoptedStyleSheets`, `IntersectionObserver`. |
 | e2e | `test/<feature>/e2e/*.test.ts` | Boots the app and drives it through HTTP / a real browser. Gated behind `WEBJS_E2E=1` so it doesn't run on every `webjs test`. |
+
+For a browser component test, `ssrFixture(html\`<my-el></my-el>\`)` from
+`@webjsdev/core/testing` server-renders THEN hydrates the component, awaiting
+its native `updateComplete`, so the post-hydration DOM is observable and an
+SSR-vs-hydrate mismatch shows up (contrast `fixture()`, which only waits two
+macrotasks). `assertNoA11yViolations(el)` is the OPT-IN axe-core accessibility
+assertion: axe-core is a test-only devDependency, dynamically imported, never
+shipped to the app runtime, and the assertion is never an automatic gate.
+Install it once with `npm install -D axe-core` (the scaffold already lists it).
+The scaffold's `test/hello/browser/hello.test.js` demonstrates both.
 | smoke | `test/<feature>/smoke/*.test.ts` | Fast deploy-time sanity check (single critical path; "does this surface still return 200"). |
 
 ### Running

package/templates/test/hello/browser/hello.test.js

@@ -8,6 +8,9 @@
  * adoptedStyleSheets, IntersectionObserver, events, etc.
  */
 
+import { html } from '@webjsdev/core';
+import { ssrFixture, assertNoA11yViolations } from '@webjsdev/core/testing';
+
 const assert = {
   ok: (v, msg) => { if (!v) throw new Error(msg || `Expected truthy`); },
   equal: (a, b, msg) => { if (a !== b) throw new Error(msg || `Expected ${b}, got ${a}`); },
@@ -29,12 +32,30 @@ suite('Example browser tests', () => {
     assert.ok(!host.querySelector('p'), 'Shadow content not in light DOM');
   });
 
+  // ssrFixture() server-renders a template THEN hydrates it in this real
+  // browser, awaiting the component's native updateComplete (the real
+  // render-cycle promise), so the post-hydration DOM is observable. Use it
+  // for any component test where the SSR-then-hydrate round-trip matters.
+  test('ssrFixture hydrates a server-rendered button', async () => {
+    const el = await ssrFixture(html`<button type="button">Save</button>`);
+    assert.equal(el.tagName, 'BUTTON', 'button hydrated');
+    assert.ok(el.textContent.includes('Save'), 'rendered label survives hydration');
+  });
+
+  // assertNoA11yViolations() is the OPT-IN accessibility assertion. It runs
+  // the standard axe-core engine against the element subtree (axe-core is a
+  // test-only devDependency, dynamically imported, never shipped to the app
+  // runtime). Resolves on a clean element, throws a named violation otherwise.
+  test('a button with an accessible name has no a11y violations', async () => {
+    const el = await ssrFixture(html`<button type="button">Submit form</button>`);
+    await assertNoA11yViolations(el);
+  });
+
   // Replace with your component tests:
-  // test('my-widget renders correctly', () => {
-  //   import('../../components/my-widget.ts');
-  //   const el = document.createElement('my-widget');
-  //   document.body.appendChild(el);
-  //   assert.ok(el.shadowRoot);
-  //   el.remove();
+  // test('my-widget renders correctly', async () => {
+  //   await import('../../components/my-widget.ts');
+  //   const el = await ssrFixture(html`<my-widget></my-widget>`);
+  //   assert.ok(el.shadowRoot ?? el.firstElementChild);
+  //   await assertNoA11yViolations(el);   // opt-in a11y check
   // });
 });