@smi-digital/create-smi-app 2.13.0 → 2.14.0

package/dist/index.js

@@ -513,6 +513,36 @@ async function createApps(projectRoot, targets) {
         )
       );
     }
+    if (target.framework === "astro") {
+      await runStep(
+        "Adding the unit test toolchain",
+        async () => runCommandQuiet(
+          "npm",
+          [
+            "install",
+            "--save-dev",
+            "vitest",
+            "jsdom",
+            "@testing-library/react",
+            "@testing-library/user-event",
+            "@testing-library/jest-dom"
+          ],
+          join4(projectRoot, target.directory)
+        )
+      );
+      await runStep("Adding the test scripts", async () => {
+        await runCommandQuiet(
+          "npm",
+          ["pkg", "set", "scripts.test=vitest run"],
+          join4(projectRoot, target.directory)
+        );
+        await runCommandQuiet(
+          "npm",
+          ["pkg", "set", "scripts.test:watch=vitest"],
+          join4(projectRoot, target.directory)
+        );
+      });
+    }
     await runSequentially(index + 1);
   };
   await runSequentially(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smi-digital/create-smi-app",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "",
   "main": "dist/index.js",
   "bin": {

package/templates/integrations/strapi-astro/AGENTS.md.template

@@ -0,0 +1,118 @@
+# Working in this project
+
+Most of the code here is written by an agent that reads this file at the start
+of every session, and by a human who read it once. It is written for the first
+reader: concrete steps, in the order they are done, with the reason attached
+where the reason is what makes the step correct.
+
+## The two checks that gate a pull request
+
+**The A/B visual check** builds the frontend twice — once from the merge-base,
+once from your branch — against identical content, and diffs the rendered HTML,
+screenshots, hydration probes and console output.
+
+It **fails** only when no source changed, because then a difference can only
+have come from a dependency. On a pull request that touches `src/`, it drops to
+**report-only**: a source change is supposed to change the page, so its diff is
+review material rather than a verdict.
+
+**The unit tests** cover exactly the case the A/B check cannot. On a feature
+branch they are the only thing gating behaviour, which is why the rules below
+are structural rather than advisory.
+
+## Adding an island
+
+An island is an interactive component under `src/components/islands/<Name>/`.
+
+1. Write the test first, at `src/components/islands/<Name>/<Name>.test.tsx`.
+   Follow `ExampleCounter` — it is a worked example, not a placeholder, and its
+   test lists what to assert and what not to.
+2. Write the component.
+3. Run `npm test`.
+
+**Every island directory must contain a test file.** This is checked against the
+file tree on every pull request, not against your diff — so it asks nothing of
+a copy edit, and it cannot be satisfied by touching an unrelated test.
+
+Islands that predate the rule are listed in `test/islands-without-tests.json`.
+That list only ever shrinks. Adding a line to make CI pass defeats the rule;
+write the test instead.
+
+### What to assert
+
+- it renders the props it was given
+- the interaction responds — the click changes what the click should change
+- it honours `prefers-reduced-motion` wherever it branches on it
+- it survives the CMS returning nothing, or a field left empty
+
+### What not to assert
+
+Markup snapshots and styling. Both change for good reasons and become churn,
+and the A/B check already covers them against a real browser.
+
+### Two failures worth knowing about in advance
+
+**Reading `prefers-reduced-motion` in an effect.** An effect runs after the
+first render, so an entrance animation has already started by the time the flag
+arrives — it is then abandoned part way, leaving the element at neither its
+start nor its end state. Read the preference synchronously in a lazy
+`useState` initialiser if anything animates on mount. This has happened here
+before.
+
+**Throwing when a CMS list is empty.** `list[activeIndex]` is `undefined` for
+an empty list, and an island that throws during render takes the whole page
+down with it. Return `null` instead. This has happened here before, in three
+islands at once.
+
+## Adding a page
+
+Nothing to configure. The A/B check **derives** its route list from
+`src/pages/**`, so a new page is in the gate the moment it exists.
+
+`test/visual.config.json` holds only the exceptions:
+
+- `exclude` — a route to keep out of the gate, **with a reason written next to
+  it**. The usual grounds are content that legitimately differs between two
+  builds minutes apart: live third-party data, a feed, a map. Excluding
+  anything else hides it.
+- `statusOverrides` — both an expected status and a way to add a path that is
+  not a file under `src/pages`, such as the 404 probe.
+- `include` — a stable CMS slug standing in for a dynamic route. Dynamic
+  `[param]` routes are skipped by discovery, because a path that exists today
+  may not next month and the status assert is absolute.
+
+## Adding something that animates forever
+
+A logo marquee, a ticker, an autoplaying carousel — anything JavaScript moves
+on every animation frame never reaches a final state, so each A/B run
+photographs it at a different offset and the diff is noise that buries real
+findings.
+
+Add its selector to `freeze` in `test/visual.config.json`. Two mechanisms need
+it, and they are not interchangeable:
+
+- a **transform** stepped per frame (framer-motion's `useAnimationFrame`)
+- **`scrollLeft`** stepped per frame on a container
+
+The element is still captured and compared; freezing only pins where it sits.
+
+## Adding a hydration probe
+
+A screenshot cannot tell you an island stopped mounting — the server-rendered
+markup is identical either way. The probes in `interactions` are the only thing
+that catches a dead island across a framework major.
+
+The shared ones are `faq-accordion`, `mobile-nav` and `consent-banner`. Remove
+any this project does not have: a probe that never matches anything is reported
+as a configuration error rather than passing quietly. A project-specific probe
+means extending the shared action in `ci-library`.
+
+## Running things
+
+```bash
+npm test          # unit tests, once
+npm run test:watch
+npm run lint
+npx astro check   # types, including .astro files
+npm run build
+```

package/templates/integrations/strapi-astro/frontend/src/components/islands/ExampleCounter/ExampleCounter.test.tsx.template

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ExampleCounter from "./ExampleCounter";
+import { REDUCED_MOTION, setMediaQuery } from "../../../../test/setup";
+
+/**
+ * The worked example. Copy its shape for real islands, then delete this
+ * directory — island and test together, since the island-has-a-test check
+ * counts directories.
+ *
+ * WHY these tests exist at all. The A/B visual check drops to report-only the
+ * moment a pull request touches source — correctly, since a source change is
+ * supposed to change the page — so on a feature branch these are the only
+ * thing gating behaviour. They cover what a screenshot cannot: that the island
+ * mounted, that clicking it does what clicking it should, and that it honours
+ * a stated preference.
+ *
+ * WHAT to assert, in roughly this order:
+ *
+ *   1. it renders the props it was given
+ *   2. the interaction responds — the click changes what the click should
+ *   3. it honours `prefers-reduced-motion` wherever it branches on it
+ *   4. it survives the CMS returning nothing, or a field left empty
+ *
+ * WHAT NOT to assert: markup snapshots and styling. Both change for good
+ * reasons and turn into churn, and the A/B check already covers them against a
+ * real browser rather than jsdom's approximation of one.
+ */
+describe("ExampleCounter", () => {
+  it("renders the label it was given", () => {
+    render(<ExampleCounter label="Zähler erhöhen" />);
+
+    expect(screen.getByRole("button", { name: "Zähler erhöhen" })).toBeDefined();
+  });
+
+  it("starts at zero", () => {
+    render(<ExampleCounter label="Zähler erhöhen" />);
+
+    expect(screen.getByRole("status").textContent).toBe("0");
+  });
+
+  it("counts up when clicked", async () => {
+    const user = userEvent.setup();
+    render(<ExampleCounter label="Zähler erhöhen" />);
+
+    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("status").textContent).toBe("2");
+  });
+
+  it("counts by the step it was given", async () => {
+    const user = userEvent.setup();
+    render(<ExampleCounter label="Zähler erhöhen" step={5} />);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("status").textContent).toBe("5");
+  });
+
+  it("stops announcing every change under reduced motion", async () => {
+    // `setMediaQuery` is backed by a real preference the stub reports, so this
+    // asserts that the component HONOURS the query rather than merely
+    // surviving it.
+    setMediaQuery(REDUCED_MOTION, true);
+    render(<ExampleCounter label="Zähler erhöhen" />);
+
+    expect(screen.getByRole("status").getAttribute("aria-live")).toBe("off");
+  });
+
+  it("announces changes when motion is allowed", () => {
+    render(<ExampleCounter label="Zähler erhöhen" />);
+
+    expect(screen.getByRole("status").getAttribute("aria-live")).toBe("polite");
+  });
+});

package/templates/integrations/strapi-astro/frontend/src/components/islands/ExampleCounter/ExampleCounter.tsx.template

@@ -0,0 +1,47 @@
+import { useEffect, useState, type ReactElement } from "react";
+
+interface ExampleCounterProps {
+  label: string;
+  step?: number;
+}
+
+/**
+ * A worked example of the shape every island in this project follows, and the
+ * thing its test is written against. Delete both once you have a real island —
+ * but delete them together, because the island-has-a-test check counts
+ * directories, not files.
+ *
+ * It is deliberately small and deliberately not decorative: it holds state,
+ * responds to a click, reads a media query, and reports its state to assistive
+ * technology. Those four are what the tests next door assert, and they are the
+ * four things a framework major most often breaks.
+ */
+export default function ExampleCounter({
+  label,
+  step = 1,
+}: ExampleCounterProps): ReactElement {
+  const [count, setCount] = useState(0);
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  // Read once on mount and then on change. Reading it in an effect is fine
+  // HERE because nothing animates before the flag is known — an island that
+  // starts an entrance animation must read the preference synchronously on the
+  // first render instead, or it begins the animation for someone who asked not
+  // to have one and then abandons it half way.
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = (): void => setReducedMotion(query.matches);
+    sync();
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, []);
+
+  return (
+    <div>
+      <output aria-live={reducedMotion ? "off" : "polite"}>{count}</output>
+      <button type="button" onClick={() => setCount((n) => n + step)}>
+        {label}
+      </button>
+    </div>
+  );
+}

package/templates/integrations/strapi-astro/frontend/test/islands-without-tests.json.template

@@ -0,0 +1,5 @@
+{
+  "_comment": "Islands that predate the island-has-a-test rule. A new project has none, and that is the state to keep it in — every island here is one a change can break with nothing to notice.",
+  "_ratchet": "This list only ever SHRINKS. Deleting a line is the unit of progress. Adding one to make CI pass defeats the rule the file exists to phase out, so add a test instead. The check also warns when an entry has since gained a test, or names a directory that no longer exists — a stale exemption is one a later regression inherits for a reason that expired.",
+  "grandfathered": []
+}

package/templates/integrations/strapi-astro/frontend/test/jsdom-ssr.ts.template

@@ -0,0 +1,24 @@
+/**
+ * jsdom, but with modules resolved the way the server resolves them.
+ *
+ * Astro's Vite plugin compiles a `.astro` file two different ways and picks
+ * between them by Vite environment name: the server build is a component
+ * factory, the client build is a stub that throws "Astro components cannot be
+ * used in the browser". Vitest's `jsdom` environment asks Vite for the client
+ * build, so `container.renderToString(Component)` receives the stub — and
+ * reports it as a component with no matching renderer, which reads like a
+ * missing framework integration and is nothing of the kind.
+ *
+ * `viteEnvironment: "ssr"` changes which build of a module is loaded. It does
+ * not change where the test runs: the environment is still jsdom's, `document`
+ * is still there, and DOM behaviour is still exercised against it.
+ *
+ * Point `test.environment` at this file rather than at "jsdom".
+ */
+import { builtinEnvironments } from 'vitest/runtime';
+
+export default {
+    name: 'jsdom-ssr',
+    viteEnvironment: 'ssr' as const,
+    setup: builtinEnvironments.jsdom.setup,
+};

package/templates/integrations/strapi-astro/frontend/test/render-astro.ts.template

@@ -0,0 +1,28 @@
+/**
+ * Render a real `.astro` component into the test document.
+ *
+ * Islands here are a `.astro` file that emits markup plus a `.ts` module that
+ * wires behaviour to it by selector. Testing the module against a hand-written
+ * fixture would test the fixture: the selectors would agree with each other and
+ * both could disagree with what ships. Astro's container API renders the
+ * component the build renders, so a class renamed in the template breaks the
+ * test that depends on it, which is the whole point.
+ *
+ * The container does NOT run the component's `<script>` tag — that is a client
+ * bundle, and jsdom is not running the bundler. So a test imports the init
+ * function and calls it itself, which is also what makes the call explicit and
+ * lets a test assert what happens before it.
+ */
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+
+export async function renderIsland(
+    component: Parameters<AstroContainer['renderToString']>[0],
+    options: Parameters<AstroContainer['renderToString']>[1] = {},
+): Promise<HTMLElement> {
+    const container = await AstroContainer.create();
+    document.body.innerHTML = await container.renderToString(
+        component,
+        options,
+    );
+    return document.body;
+}

package/templates/integrations/strapi-astro/frontend/test/setup.ts.template

@@ -0,0 +1,164 @@
+/**
+ * Test environment setup, loaded before every test file.
+ *
+ * jsdom implements the DOM, not the browser. Several things components here
+ * rely on are simply absent from it, and each one throws on first use rather
+ * than degrading — so without these stubs a test fails for a reason that has
+ * nothing to do with the component.
+ *
+ * These are stubs with behaviour, not silencers: `matchMedia` is backed by a
+ * settable preference, so a test can assert that a component honours
+ * `prefers-reduced-motion` instead of merely surviving the query.
+ */
+import { beforeEach, vi } from 'vitest';
+
+/** Media queries currently reported as matching. Reset before every test. */
+let matchingQueries = new Set<string>();
+
+const listeners = new Map<string, Set<(e: MediaQueryListEvent) => void>>();
+
+export const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+
+/**
+ * Make a media query match for the current test.
+ *
+ * Pass the query exactly as the component writes it — matching is by string,
+ * not by parsing, which keeps the stub honest: a test that claims to exercise
+ * reduced motion has to name the query the component actually asks about.
+ */
+export function setMediaQuery(query: string, matches: boolean): void {
+    if (matches) matchingQueries.add(query);
+    else matchingQueries.delete(query);
+    for (const listener of listeners.get(query) ?? []) {
+        listener({ matches, media: query } as MediaQueryListEvent);
+    }
+}
+
+/**
+ * Reports every observed element as intersecting, on the next task.
+ *
+ * jsdom has no layout, so a real implementation could only ever report
+ * "not intersecting" — every scroll-revealed section would stay hidden and
+ * every test of one would assert against an empty container. Deferred rather
+ * than synchronous because callers observe during setup and expect the callback
+ * no earlier than the next task, as the real observer guarantees.
+ *
+ * Same tradeoff the A/B capture makes, and for the same reason: reveal logic is
+ * covered by the browser, not by jsdom.
+ */
+class ImmediateIntersectionObserver implements IntersectionObserver {
+    readonly root: Element | Document | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    private readonly callback: IntersectionObserverCallback;
+
+    constructor(
+        callback: IntersectionObserverCallback,
+        options: IntersectionObserverInit = {},
+    ) {
+        this.callback = callback;
+        this.root = options.root ?? null;
+        this.rootMargin = options.rootMargin ?? '0px';
+        this.thresholds = [options.threshold ?? 0].flat();
+    }
+
+    observe(target: Element): void {
+        setTimeout(() => {
+            const rect = target.getBoundingClientRect();
+            this.callback(
+                [
+                    {
+                        target,
+                        isIntersecting: true,
+                        intersectionRatio: 1,
+                        boundingClientRect: rect,
+                        intersectionRect: rect,
+                        rootBounds: null,
+                        time: 0,
+                    } as IntersectionObserverEntry,
+                ],
+                this,
+            );
+        }, 0);
+    }
+
+    unobserve(): void {}
+    disconnect(): void {}
+    takeRecords(): IntersectionObserverEntry[] {
+        return [];
+    }
+}
+
+function installGlobals(): void {
+    vi.stubGlobal('matchMedia', (query: string): MediaQueryList => {
+        const register = (fn: (e: MediaQueryListEvent) => void) => {
+            if (!listeners.has(query)) listeners.set(query, new Set());
+            listeners.get(query)!.add(fn);
+        };
+        return {
+            get matches() {
+                return matchingQueries.has(query);
+            },
+            media: query,
+            onchange: null,
+            addEventListener: (_: string, fn: EventListener) =>
+                register(fn as never),
+            removeEventListener: (_: string, fn: EventListener) =>
+                listeners.get(query)?.delete(fn as never),
+            // Deprecated pair, still used by some libraries.
+            addListener: (fn: never) => register(fn),
+            removeListener: (fn: never) => listeners.get(query)?.delete(fn),
+            dispatchEvent: () => true,
+        } as MediaQueryList;
+    });
+
+    vi.stubGlobal('IntersectionObserver', ImmediateIntersectionObserver);
+
+    /** Never fires: jsdom elements never resize, so a callback would be a lie. */
+    vi.stubGlobal(
+        'ResizeObserver',
+        class {
+            observe(): void {}
+            unobserve(): void {}
+            disconnect(): void {}
+        },
+    );
+
+    vi.stubGlobal('scrollTo', () => {});
+
+    /**
+     * Drive requestAnimationFrame from a timer rather than jsdom's default.
+     *
+     * Animation loops here are `const step = () => { …; requestAnimationFrame(step) }`.
+     * Under fake timers jsdom's rAF never fires and the loop stalls; under real
+     * timers it fires as fast as it can and a runaway loop hangs the test file.
+     * A setTimeout-backed frame is advanceable by `vi.advanceTimersByTime`, so a
+     * test can step an animation deliberately and assert what it did.
+     */
+    vi.stubGlobal('requestAnimationFrame', (fn: FrameRequestCallback) =>
+        setTimeout(() => fn(performance.now()), 16),
+    );
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
+}
+
+// Installed at module load AND before every test, and it has to be both.
+//
+// At module load, because libraries reach for these while they are being
+// imported — GSAP's ScrollTrigger calls `window.matchMedia` from
+// `ScrollTrigger.register`, which runs at import time, long before any hook.
+//
+// Before every test, because a test that stubs a global of its own and tidies
+// up with `vi.unstubAllGlobals()` removes EVERY stub, including these — so the
+// next test in the file would run against a jsdom with no `matchMedia` and
+// fail with "matchMedia is not a function", nowhere near the cause.
+installGlobals();
+
+beforeEach(() => {
+    matchingQueries = new Set();
+    listeners.clear();
+    installGlobals();
+});
+
+// jsdom throws "Not implemented" on this. Assigned to the prototype rather than
+// stubbed as a global, so it survives an unstubAllGlobals in any test.
+Element.prototype.scrollIntoView = () => {};

package/templates/integrations/strapi-astro/frontend/test/visual.config.json.template

@@ -1,7 +1,17 @@
 {
-  "_comment": "Config for the A/B check in the shared CI pipeline. Both sides of every dependency PR are built and compared against this list, so it is what makes a bump verifiable. Starts with '/' only — extend it as the site grows. Aim for one route per page TYPE, not per page; five to ten is the useful range. A route is either \"/path\" (must answer 200) or {\"path\": \"/x\", \"status\": 404} for pages that legitimately do not. Listing a route that does not exist yet fails the check, so add them as you build them.",
-  "routes": ["/"],
+  "_comment": "Exceptions only. The A/B check DERIVES the route list from src/pages, so adding a page adds it to the gate automatically and there is no list here to keep in sync. This file exists for the cases the rule cannot know about.",
+  "_dynamic_routes": "Discovery skips `[param]` routes, because they resolve from Strapi — a path that exists today may not next month, and the status assert is absolute. Pin the ones worth covering under `include`, one per page TYPE rather than one per page.",
+  "_exclude": "Remove a route from the gate ONLY with a reason written next to it. The usual grounds are content that legitimately differs between two builds minutes apart — live third-party data, a feed, a map — which would otherwise report as a regression on every run. A stale entry here silently drops a page from the gate, so the check warns when an excluded path is not a route.",
+  "exclude": {},
+  "_statusOverrides": "Both a status expectation and a way in: a path that is not a file under src/pages is added by listing it here. The 404 below is the standard case — a 404 page is a page and belongs in the comparison.",
+  "statusOverrides": {
+    "/nicht-vorhanden": 404
+  },
+  "_include": "Extra paths to cover, typically a stable CMS slug standing in for a dynamic route.",
+  "include": [],
   "viewports": [375, 1440],
-  "_interactions": "Hydration probes. A screenshot cannot tell you an island stopped mounting — the server markup is identical either way — so these are the only thing that catches a dead island across a framework major. Supported: faq-accordion, mobile-nav, consent-banner. Remove any that this project does not have; a probe that never matches anything is reported as a configuration error rather than passing silently.",
-  "interactions": ["mobile-nav"]
+  "_interactions": "Hydration probes. A screenshot cannot tell you an island stopped mounting — the server markup is identical either way — so these are the only thing that catches a dead island across a framework major. Supported: faq-accordion, mobile-nav, consent-banner. Remove any this project does not have; a probe that never matches anything is reported as a configuration error rather than passing silently.",
+  "interactions": ["mobile-nav"],
+  "_freeze": "Selectors for elements JavaScript moves on every animation frame — a logo marquee is the standard case. They never reach a final state, so each run photographs a different offset and the diff is noise. Two mechanisms need listing here: a transform stepped per frame (framer-motion's useAnimationFrame) and `scrollLeft` stepped per frame. The element is still captured and compared; this only pins where it sits.",
+  "freeze": []
 }

package/templates/integrations/strapi-astro/frontend/vitest.config.ts.template

@@ -0,0 +1,53 @@
+/// <reference types="vitest/config" />
+/**
+ * Unit test configuration.
+ *
+ * `getViteConfig` rather than a standalone Vite config: it loads this project's
+ * astro.config.mjs, so tests resolve `@/` aliases, `.scss` and integrations
+ * exactly as the build does. A hand-rolled config would be a second, drifting
+ * description of how this project resolves modules, and the first symptom would
+ * be a test importing something subtly different from what ships.
+ *
+ * Why these tests exist at all: the A/B visual check drops to report-only as
+ * soon as a pull request touches source, which is precisely when source is most
+ * likely to be broken. These are the only behavioural gate a feature branch has.
+ */
+import { getViteConfig } from 'astro/config';
+
+export default getViteConfig({
+    test: {
+        // Not "jsdom" — see test/jsdom-ssr.ts. Same environment, but modules
+        // are resolved as the server resolves them, which is what makes Astro's
+        // container API able to render a real `.astro` component here.
+        environment: './test/jsdom-ssr.ts',
+        globals: true,
+        setupFiles: ['./test/setup.ts'],
+        include: ['src/**/*.{test,spec}.{ts,tsx}'],
+        // CSS is deliberately NOT processed. Tests here assert behaviour and
+        // text, never styling — that is the A/B check's job, and it does it
+        // against a real browser rather than jsdom's approximation of one.
+        // Leaving it off also keeps a Sass compile out of every test run.
+        css: false,
+        // Restricted deliberately. Vitest's default set includes
+        // `queueMicrotask`, and faking that deadlocks anything awaiting a
+        // promise — `userEvent` hangs until the test times out, five seconds
+        // later, with no indication that the timers were the cause.
+        //
+        // `performance` is faked so the fake clock is the only source of time
+        // a test has to reason about. Note it does NOT make an eased animation
+        // reach its target: advancing timers steps the frames, but the elapsed
+        // time those frames read does not keep up, so a `performance.now()`
+        // easing stalls part way however far the clock is moved. Assert that
+        // such an animation RUNS, and assert its result through the state it
+        // writes rather than through the number it is easing towards.
+        fakeTimers: {
+            toFake: [
+                'setTimeout',
+                'clearTimeout',
+                'setInterval',
+                'clearInterval',
+                'Date',
+            ],
+        },
+    },
+});

package/templates/integrations/strapi-astro/integration.config.json

@@ -50,6 +50,38 @@
     {
       "template": "frontend/test/visual.config.json.template",
       "target": "frontend/test/visual.config.json"
+    },
+    {
+      "template": "frontend/test/islands-without-tests.json.template",
+      "target": "frontend/test/islands-without-tests.json"
+    },
+    {
+      "template": "frontend/test/setup.ts.template",
+      "target": "frontend/test/setup.ts"
+    },
+    {
+      "template": "frontend/test/jsdom-ssr.ts.template",
+      "target": "frontend/test/jsdom-ssr.ts"
+    },
+    {
+      "template": "frontend/test/render-astro.ts.template",
+      "target": "frontend/test/render-astro.ts"
+    },
+    {
+      "template": "frontend/vitest.config.ts.template",
+      "target": "frontend/vitest.config.ts"
+    },
+    {
+      "template": "frontend/src/components/islands/ExampleCounter/ExampleCounter.tsx.template",
+      "target": "frontend/src/components/islands/ExampleCounter/ExampleCounter.tsx"
+    },
+    {
+      "template": "frontend/src/components/islands/ExampleCounter/ExampleCounter.test.tsx.template",
+      "target": "frontend/src/components/islands/ExampleCounter/ExampleCounter.test.tsx"
+    },
+    {
+      "template": "AGENTS.md.template",
+      "target": "AGENTS.md"
     }
   ],
   "cdFiles": [