@manufac/general-tests 0.4.0 → 0.5.1

package/README.md

@@ -90,3 +90,47 @@ export default defineConfig<PageTestOptions>({
 - `ResponsiveLayoutTestMatch` runs `responsive-layout.spec.ts` — checked at whichever `viewport` each project sets, so add one project per breakpoint you care about (`ResponsiveLayoutBreakpoints.MobileL` / `.Tablet` / `.Desktop`).
 - `require.resolve` + `join(..., "..", "specs")` finds the package's built `specs` directory regardless of how it's installed (registry, `file:`, or a vendored tarball) — `testDir` must point there since these two spec files aren't re-exported any other way.
 - `PageTestOptions` (from `fixtures/index.js`) types the `use` block so `pages` (and `forms`, if you set it) are checked against the fixture's actual shape.
+
+## Storybook visual regression
+
+`VisualRegressionTestMatch` runs `visual-regression.spec.ts` — a single generic test that walks every story in a running Storybook instance and compares it against a baseline screenshot with Playwright's `toHaveScreenshot()`. No per-component spec files are needed; new stories are picked up automatically.
+
+It needs its own Playwright config, separate from the one above, since it runs against Storybook's dev server instead of the app itself:
+
+```ts
+// playwright.storybook.config.ts
+import { defineConfig, devices } from "@playwright/test";
+import { dirname, join } from "node:path";
+import { VisualRegressionTestMatch } from "@manufac/general-tests/config/projects.js";
+
+const GeneralTestsSpecsDir = join(dirname(require.resolve("@manufac/general-tests/config/projects.js")), "..", "specs");
+
+export default defineConfig({
+  testDir: GeneralTestsSpecsDir,
+  testMatch: VisualRegressionTestMatch,
+  // Relative, so Playwright resolves it against this config file's own directory (not
+  // testDir, which points into the installed package) — baselines stay in this repo.
+  snapshotPathTemplate: "e2e-visual/__screenshots__/{arg}{ext}",
+  reporter: [["html", { open: "never" }]],
+  expect: { toHaveScreenshot: { maxDiffPixelRatio: 0.001, animations: "disabled" } },
+  use: { ...devices["Desktop Chrome"], viewport: { width: 1366, height: 768 }, baseURL: "http://localhost:6006" },
+  webServer: {
+    command: "npm run start:sb -- --ci --port 6006",
+    url: "http://localhost:6006",
+    reuseExistingServer: true,
+  },
+});
+```
+
+Then add two scripts to the app's `package.json` (adjust `start:sb`/`build:sb` to however the app runs Storybook):
+
+```json
+{
+  "scripts": {
+    "test:visual": "npm run build:sb && playwright test -c playwright.storybook.config.ts",
+    "update:visual": "npm run build:sb && playwright test -c playwright.storybook.config.ts --update-snapshots"
+  }
+}
+```
+
+Baselines land in `e2e-visual/__screenshots__/<story-id>.png`, next to `playwright.storybook.config.ts`.

package/dist/config/projects.d.ts

@@ -35,3 +35,4 @@ export declare const ProjectTypes: {
 export declare const LoadingPageTestMatch = "loading-page.spec.js";
 export declare const ResponsiveLayoutTestMatch = "responsive-layout.spec.js";
 export declare const FormsTestMatch = "forms.spec.js";
+export declare const VisualRegressionTestMatch = "visual-regression.spec.js";

package/dist/config/projects.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormsTestMatch = exports.ResponsiveLayoutTestMatch = exports.LoadingPageTestMatch = exports.ProjectTypes = exports.ResponsiveLayoutBreakpoints = exports.DesktopBreakpoints = void 0;
+exports.VisualRegressionTestMatch = exports.FormsTestMatch = exports.ResponsiveLayoutTestMatch = exports.LoadingPageTestMatch = exports.ProjectTypes = exports.ResponsiveLayoutBreakpoints = exports.DesktopBreakpoints = void 0;
 // Section 3 of the Landing Page Test Plan — breakpoints / viewports.
 exports.DesktopBreakpoints = {
     Desktop: { name: "Desktop", width: 1440, height: 900 },
@@ -18,3 +18,4 @@ exports.ProjectTypes = {
 exports.LoadingPageTestMatch = "loading-page.spec.js";
 exports.ResponsiveLayoutTestMatch = "responsive-layout.spec.js";
 exports.FormsTestMatch = "forms.spec.js";
+exports.VisualRegressionTestMatch = "visual-regression.spec.js";

package/dist/schema/index.d.ts

@@ -93,4 +93,10 @@ export declare const ManufacTestConfigSchema: z.ZodObject<{
     }, z.core.$strip>>>>;
 }, z.core.$strip>;
 export type ManufacTestConfig = z.infer<typeof ManufacTestConfigSchema>;
+export declare const StorybookIndexSchema: z.ZodObject<{
+    entries: z.ZodRecord<z.ZodString, z.ZodObject<{
+        type: z.ZodString;
+        id: z.ZodString;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
 export {};

package/dist/schema/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManufacTestConfigSchema = exports.ManufacTestFormsSchema = exports.FieldInteractions = void 0;
+exports.StorybookIndexSchema = exports.ManufacTestConfigSchema = exports.ManufacTestFormsSchema = exports.FieldInteractions = void 0;
 const zod_1 = require("zod");
 /** Interaction kind for filling a form field. */
 exports.FieldInteractions = {
@@ -38,3 +38,9 @@ exports.ManufacTestConfigSchema = zod_1.z.object({
     pages: zod_1.z.array(zod_1.z.string()).min(1, "At least one page is required"),
     forms: zod_1.z.array(FormSchema).nullish(),
 });
+exports.StorybookIndexSchema = zod_1.z.object({
+    entries: zod_1.z.record(zod_1.z.string(), zod_1.z.object({
+        type: zod_1.z.string(),
+        id: zod_1.z.string(),
+    })),
+});

package/dist/specs/utils.js

@@ -910,6 +910,9 @@ async function fillField({ field, locator, page }) {
  */
 async function hasNativeValidationError(fieldLocator) {
     return await fieldLocator.evaluate((element) => {
-        return element instanceof HTMLInputElement && !element.checkValidity();
+        return ((element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement) &&
+            !element.checkValidity());
     });
 }

package/dist/specs/visual-regression.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/visual-regression.spec.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schema_1 = require("../schema");
+const test_1 = require("@playwright/test");
+(0, test_1.test)("storybook stories match their baseline screenshots", async ({ page }) => {
+    // index.json is generated at runtime by the Storybook dev server (resolved against
+    // baseURL in the consuming app's playwright.storybook.config.ts), not a file in the repo.
+    const response = await page.request.get("index.json");
+    const result = schema_1.StorybookIndexSchema.safeParse(await response.json());
+    if (!result.success) {
+        throw new Error(`Failed to parse Storybook index: ${result.error.message}`);
+    }
+    const storyIDs = Object.values(result.data.entries)
+        .filter((entry) => {
+        return entry.type === "story";
+    })
+        .map((entry) => {
+        return entry.id;
+    });
+    const errors = [];
+    for (const storyID of storyIDs) {
+        await test_1.test.step(storyID, async () => {
+            try {
+                await page.goto(`iframe.html?id=${storyID}&viewMode=story`);
+                await (0, test_1.expect)(page.locator("#storybook-root")).toBeVisible();
+                await (0, test_1.expect)(page.locator(".sb-preparing-story .sb-loader")).toBeHidden(); // Avoid screenshotting a half-rendered story
+                await (0, test_1.expect)(page).toHaveScreenshot(`${storyID}.png`, { fullPage: true, timeout: 10_000 });
+            }
+            catch (error) {
+                // Collect failures instead of stopping at the first broken story.
+                const message = error instanceof Error ? error.message : String(error);
+                errors.push(`Story ${storyID} failed: ${message}`);
+            }
+        });
+    }
+    (0, test_1.expect)(errors, `Visual regression failures:\n${errors.join("\n")}`).toHaveLength(0);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manufac/general-tests",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "A library for general tests for landing pages",
   "repository": {
     "type": "git",