vitest-plugin-vis 5.1.5 → 5.1.7

package/dist/client/external/vitest/vitest_suite_proxy.d.mts

@@ -1 +1,2 @@
+import "../../../shared/types.mjs";
 import "vitest";

package/dist/client/suite/auto_snapshot_matcher.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"auto_snapshot_matcher.d.mts","names":[],"sources":["../../../src/client/suite/auto_snapshot_matcher.ts"],"sourcesContent":[],"mappings":";;;;;iBASgB,+BAA+B,mDACpC;;EADK,aAAA,CAAA,UAUU,gBAVS,EAAA,UAUmB,MAVnB,CAAA,MAAA,EAAA,GAAA,CAAA,GAAA,OAAA,GAAA,OAAA,CAAA,CAAA,MAAA,EAWxB,MAXwB,CAAA,MAAA,EAAA,OAAA,GAAA,CAAA,CAAA,OAAA,EAaV,YAbU,CAaG,CAbH,CAAA,GAaQ,CAbR,GAaY,EAbZ,EAAA,GAamB,OAbnB,CAAA,OAAA,CAAA,GAasC,OAbtC,CAAA,IAAA,CAAA,GAAA,OAAA,GAAA,IAAA,CAAA,CAAA,EAAA,aAAA,CAAA,EAehB,IAfgB,CAeX,eAfW,CAeK,EAfL,CAAA,EAAA,uBAAA,CAAA,GAAA,SAAA,CAAA,EAAA,GAAA,GAe8C,OAf9C,CAAA,IAAA,CAAA;CAAY"}
+{"version":3,"file":"auto_snapshot_matcher.d.mts","names":[],"sources":["../../../src/client/suite/auto_snapshot_matcher.ts"],"sourcesContent":[],"mappings":";;;;;iBAUgB,+BAA+B,mDACpC;;EADK,aAAA,CAAA,UAUU,gBAVS,EAAA,UAUmB,MAVnB,CAAA,MAAA,EAAA,GAAA,CAAA,GAAA,OAAA,GAAA,OAAA,CAAA,CAAA,MAAA,EAWxB,MAXwB,CAAA,MAAA,EAAA,OAAA,GAAA,CAAA,CAAA,OAAA,EAaV,YAbU,CAaG,CAbH,CAAA,GAaQ,CAbR,GAaY,EAbZ,EAAA,GAamB,OAbnB,CAAA,OAAA,CAAA,GAasC,OAbtC,CAAA,IAAA,CAAA,GAAA,OAAA,GAAA,IAAA,CAAA,CAAA,EAAA,aAAA,CAAA,EAehB,IAfgB,CAeX,eAfW,CAeK,EAfL,CAAA,EAAA,uBAAA,CAAA,GAAA,SAAA,CAAA,EAAA,GAAA,GAe8C,OAf9C,CAAA,IAAA,CAAA;CAAY"}

package/dist/client/suite/auto_snapshot_matcher.mjs

@@ -2,6 +2,7 @@ import { extractAutoSnapshotOptions } from "../../auto_snapshots/_extract_auto_s
 import { shouldTakeSnapshot } from "../snapshot/should_take_snapshot.mjs";
 import { toTaskId } from "../task/task_id.mjs";
 import { ctx } from "./_ctx.mjs";
+import { resolveSubject } from "./resolve_subject.mjs";
 import dedent from "dedent";
 
 //#region src/client/suite/auto_snapshot_matcher.ts
@@ -22,7 +23,7 @@ function autoSnapshotMatcher(commands, expect) {
 					const theme = themes[themeId];
 					if ((typeof theme === "function" ? await theme(meta) : theme) === false) continue;
 					const effectiveCreateMissingBaseline = meta != null && Object.hasOwn(meta, "createMissingBaseline") ? meta.createMissingBaseline : suiteDefaults?.createMissingBaseline;
-					await expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
+					await expect(resolveSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
 						...meta,
 						snapshotKey: meta?.snapshotKey ?? themeId,
 						...effectiveCreateMissingBaseline !== void 0 ? { createMissingBaseline: effectiveCreateMissingBaseline } : {}
@@ -43,9 +44,6 @@ function autoSnapshotMatcher(commands, expect) {
 		}
 	};
 }
-function getSubject(selectors) {
-	return selectors ? document.querySelector(selectors) ?? document.body : document.body;
-}
 
 //#endregion
 export { autoSnapshotMatcher };

package/dist/client/suite/auto_snapshot_matcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"auto_snapshot_matcher.mjs","names":[],"sources":["../../../src/client/suite/auto_snapshot_matcher.ts"],"sourcesContent":["import dedent from 'dedent'\nimport { extractAutoSnapshotOptions } from '../../auto_snapshots/_extract_auto_snapshot_options.ts'\nimport type { SnapshotMeta } from '../../auto_snapshots/snapshot_meta.ts'\nimport type { SetupVisSuiteCommand } from '../../shared/commands.types.ts'\nimport type { ComparisonMethod, SetupVisOptions } from '../../shared/types.ts'\nimport { shouldTakeSnapshot } from '../snapshot/should_take_snapshot.ts'\nimport { toTaskId } from '../task/task_id.ts'\nimport { ctx } from './_ctx.ts'\n\nexport function autoSnapshotMatcher<GM extends Record<string, any> | unknown = unknown>(\n\tcommands: SetupVisSuiteCommand,\n\texpect: any,\n) {\n\tlet subject: string | undefined\n\n\treturn {\n\t\tasync setup() {\n\t\t\tsubject = (await commands.setupVisSuite()).subject\n\t\t},\n\t\tcreateMatcher<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(\n\t\t\tthemes: Record<\n\t\t\t\tstring,\n\t\t\t\tboolean | ((options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)\n\t\t\t>,\n\t\t\tsuiteDefaults?: Pick<SetupVisOptions<GM>, 'createMissingBaseline'> | undefined,\n\t\t) {\n\t\t\treturn async function matchImageSnapshot() {\n\t\t\t\tconst test = ctx.getCurrentTest()\n\n\t\t\t\tconst meta = extractAutoSnapshotOptions(test)\n\t\t\t\tif (!shouldTakeSnapshot(meta)) return\n\t\t\t\tconst errors: Array<[string, Error]> = []\n\t\t\t\tfor (const themeId in themes) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tawait new Promise((a) => setTimeout(a, 10))\n\t\t\t\t\t\tconst theme = themes[themeId]\n\t\t\t\t\t\tconst r = typeof theme === 'function' ? await theme(meta! as any) : theme\n\t\t\t\t\t\tif (r === false) continue\n\t\t\t\t\t\tconst effectiveCreateMissingBaseline =\n\t\t\t\t\t\t\tmeta != null && Object.hasOwn(meta as object, 'createMissingBaseline')\n\t\t\t\t\t\t\t\t? (meta as { createMissingBaseline?: boolean }).createMissingBaseline\n\t\t\t\t\t\t\t\t: suiteDefaults?.createMissingBaseline\n\t\t\t\t\t\tawait expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({\n\t\t\t\t\t\t\t...meta,\n\t\t\t\t\t\t\tsnapshotKey: meta?.snapshotKey ?? themeId,\n\t\t\t\t\t\t\t...(effectiveCreateMissingBaseline !== undefined\n\t\t\t\t\t\t\t\t? { createMissingBaseline: effectiveCreateMissingBaseline }\n\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t})\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\terrors.push([themeId, error as Error])\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (errors.length > 0) {\n\t\t\t\t\tif (errors.length === 1) throw errors[0]![1]\n\t\t\t\t\tconst taskId = toTaskId(test!)\n\t\t\t\t\tthrow new AggregateError(\n\t\t\t\t\t\terrors.map(([, e]) => e),\n\t\t\t\t\t\tdedent`Snapshot \\`${taskId}\\` mismatched\n\n\t\t\t\t\t${errors\n\t\t\t\t\t\t.map(([themeId, error]) => {\n\t\t\t\t\t\t\treturn `Theme \\`${themeId}\\` failed: ${error.message}`\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.join('\\n\\n')}`,\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t}\n}\n\nfunction getSubject(selectors: string | undefined) {\n\treturn selectors ? (document.querySelector(selectors) ?? document.body) : document.body\n}\n"],"mappings":";;;;;;;AASA,SAAgB,oBACf,UACA,QACC;CACD,IAAI;AAEJ,QAAO;EACN,MAAM,QAAQ;AACb,cAAW,MAAM,SAAS,eAAe,EAAE;;EAE5C,cACC,QAIA,eACC;AACD,UAAO,eAAe,qBAAqB;IAC1C,MAAM,OAAO,IAAI,gBAAgB;IAEjC,MAAM,OAAO,2BAA2B,KAAK;AAC7C,QAAI,CAAC,mBAAmB,KAAK,CAAE;IAC/B,MAAM,SAAiC,EAAE;AACzC,SAAK,MAAM,WAAW,OACrB,KAAI;AACH,WAAM,IAAI,SAAS,MAAM,WAAW,GAAG,GAAG,CAAC;KAC3C,MAAM,QAAQ,OAAO;AAErB,UADU,OAAO,UAAU,aAAa,MAAM,MAAM,KAAa,GAAG,WAC1D,MAAO;KACjB,MAAM,iCACL,QAAQ,QAAQ,OAAO,OAAO,MAAgB,wBAAwB,GAClE,KAA6C,wBAC9C,eAAe;AACnB,WAAM,OAAO,WAAW,MAAM,WAAW,QAAQ,CAAC,CAAC,qBAAqB;MACvE,GAAG;MACH,aAAa,MAAM,eAAe;MAClC,GAAI,mCAAmC,SACpC,EAAE,uBAAuB,gCAAgC,GACzD,EAAE;MACL,CAAC;aACM,OAAO;AACf,YAAO,KAAK,CAAC,SAAS,MAAe,CAAC;;AAGxC,QAAI,OAAO,SAAS,GAAG;AACtB,SAAI,OAAO,WAAW,EAAG,OAAM,OAAO,GAAI;KAC1C,MAAM,SAAS,SAAS,KAAM;AAC9B,WAAM,IAAI,eACT,OAAO,KAAK,GAAG,OAAO,EAAE,EACxB,MAAM,cAAc,OAAO;;OAE1B,OACA,KAAK,CAAC,SAAS,WAAW;AAC1B,aAAO,WAAW,QAAQ,aAAa,MAAM;OAC5C,CACD,KAAK,OAAO,GACb;;;;EAIJ;;AAGF,SAAS,WAAW,WAA+B;AAClD,QAAO,YAAa,SAAS,cAAc,UAAU,IAAI,SAAS,OAAQ,SAAS"}
+{"version":3,"file":"auto_snapshot_matcher.mjs","names":[],"sources":["../../../src/client/suite/auto_snapshot_matcher.ts"],"sourcesContent":["import dedent from 'dedent'\nimport { extractAutoSnapshotOptions } from '../../auto_snapshots/_extract_auto_snapshot_options.ts'\nimport type { SnapshotMeta } from '../../auto_snapshots/snapshot_meta.ts'\nimport type { SetupVisSuiteCommand } from '../../shared/commands.types.ts'\nimport type { ComparisonMethod, SetupVisOptions } from '../../shared/types.ts'\nimport { shouldTakeSnapshot } from '../snapshot/should_take_snapshot.ts'\nimport { toTaskId } from '../task/task_id.ts'\nimport { ctx } from './_ctx.ts'\nimport { resolveSubject } from './resolve_subject.ts'\n\nexport function autoSnapshotMatcher<GM extends Record<string, any> | unknown = unknown>(\n\tcommands: SetupVisSuiteCommand,\n\texpect: any,\n) {\n\tlet subject: string | undefined\n\n\treturn {\n\t\tasync setup() {\n\t\t\tsubject = (await commands.setupVisSuite()).subject\n\t\t},\n\t\tcreateMatcher<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(\n\t\t\tthemes: Record<\n\t\t\t\tstring,\n\t\t\t\tboolean | ((options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)\n\t\t\t>,\n\t\t\tsuiteDefaults?: Pick<SetupVisOptions<GM>, 'createMissingBaseline'> | undefined,\n\t\t) {\n\t\t\treturn async function matchImageSnapshot() {\n\t\t\t\tconst test = ctx.getCurrentTest()\n\n\t\t\t\tconst meta = extractAutoSnapshotOptions(test)\n\t\t\t\tif (!shouldTakeSnapshot(meta)) return\n\t\t\t\tconst errors: Array<[string, Error]> = []\n\t\t\t\tfor (const themeId in themes) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tawait new Promise((a) => setTimeout(a, 10))\n\t\t\t\t\t\tconst theme = themes[themeId]\n\t\t\t\t\t\tconst r = typeof theme === 'function' ? await theme(meta! as any) : theme\n\t\t\t\t\t\tif (r === false) continue\n\t\t\t\t\t\tconst effectiveCreateMissingBaseline =\n\t\t\t\t\t\t\tmeta != null && Object.hasOwn(meta as object, 'createMissingBaseline')\n\t\t\t\t\t\t\t\t? (meta as { createMissingBaseline?: boolean }).createMissingBaseline\n\t\t\t\t\t\t\t\t: suiteDefaults?.createMissingBaseline\n\t\t\t\t\t\tawait expect(resolveSubject(meta?.subject ?? subject)).toMatchImageSnapshot({\n\t\t\t\t\t\t\t...meta,\n\t\t\t\t\t\t\tsnapshotKey: meta?.snapshotKey ?? themeId,\n\t\t\t\t\t\t\t...(effectiveCreateMissingBaseline !== undefined\n\t\t\t\t\t\t\t\t? { createMissingBaseline: effectiveCreateMissingBaseline }\n\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t})\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\terrors.push([themeId, error as Error])\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (errors.length > 0) {\n\t\t\t\t\tif (errors.length === 1) throw errors[0]![1]\n\t\t\t\t\tconst taskId = toTaskId(test!)\n\t\t\t\t\tthrow new AggregateError(\n\t\t\t\t\t\terrors.map(([, e]) => e),\n\t\t\t\t\t\tdedent`Snapshot \\`${taskId}\\` mismatched\n\n\t\t\t\t\t${errors\n\t\t\t\t\t\t.map(([themeId, error]) => {\n\t\t\t\t\t\t\treturn `Theme \\`${themeId}\\` failed: ${error.message}`\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.join('\\n\\n')}`,\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t}\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,oBACf,UACA,QACC;CACD,IAAI;AAEJ,QAAO;EACN,MAAM,QAAQ;AACb,cAAW,MAAM,SAAS,eAAe,EAAE;;EAE5C,cACC,QAIA,eACC;AACD,UAAO,eAAe,qBAAqB;IAC1C,MAAM,OAAO,IAAI,gBAAgB;IAEjC,MAAM,OAAO,2BAA2B,KAAK;AAC7C,QAAI,CAAC,mBAAmB,KAAK,CAAE;IAC/B,MAAM,SAAiC,EAAE;AACzC,SAAK,MAAM,WAAW,OACrB,KAAI;AACH,WAAM,IAAI,SAAS,MAAM,WAAW,GAAG,GAAG,CAAC;KAC3C,MAAM,QAAQ,OAAO;AAErB,UADU,OAAO,UAAU,aAAa,MAAM,MAAM,KAAa,GAAG,WAC1D,MAAO;KACjB,MAAM,iCACL,QAAQ,QAAQ,OAAO,OAAO,MAAgB,wBAAwB,GAClE,KAA6C,wBAC9C,eAAe;AACnB,WAAM,OAAO,eAAe,MAAM,WAAW,QAAQ,CAAC,CAAC,qBAAqB;MAC3E,GAAG;MACH,aAAa,MAAM,eAAe;MAClC,GAAI,mCAAmC,SACpC,EAAE,uBAAuB,gCAAgC,GACzD,EAAE;MACL,CAAC;aACM,OAAO;AACf,YAAO,KAAK,CAAC,SAAS,MAAe,CAAC;;AAGxC,QAAI,OAAO,SAAS,GAAG;AACtB,SAAI,OAAO,WAAW,EAAG,OAAM,OAAO,GAAI;KAC1C,MAAM,SAAS,SAAS,KAAM;AAC9B,WAAM,IAAI,eACT,OAAO,KAAK,GAAG,OAAO,EAAE,EACxB,MAAM,cAAc,OAAO;;OAE1B,OACA,KAAK,CAAC,SAAS,WAAW;AAC1B,aAAO,WAAW,QAAQ,aAAa,MAAM;OAC5C,CACD,KAAK,OAAO,GACb;;;;EAIJ"}

package/dist/client/suite/resolve_subject.mjs

@@ -0,0 +1,34 @@
+//#region src/client/suite/resolve_subject.ts
+/**
+* Resolves the subject element of an auto snapshot from a CSS selector.
+*
+* When the selector matches multiple elements,
+* the first visible one is used,
+* so hidden matches elsewhere in the document (e.g. Storybook's own UI) do not shadow the rendered subject.
+*
+* If the selector is not provided or matches nothing, `document.body` is used.
+* If the selector only matches hidden elements, it throws right away instead of letting the screenshot wait until timeout.
+*/
+function resolveSubject(selector) {
+	if (!selector) return document.body;
+	const matches = Array.from(document.querySelectorAll(selector));
+	if (matches.length === 0) return document.body;
+	const visible = matches.find(isVisible);
+	if (visible) return visible;
+	throw new Error(`Snapshot subject \`${selector}\` is not visible: it matched ${matches.length} element(s), but none of them is visible.`);
+}
+/**
+* Same definition of visibility as Playwright:
+* the element has a non-empty bounding box and does not have `visibility: hidden`.
+*
+* @see https://playwright.dev/docs/actionability#visible
+*/
+function isVisible(element) {
+	const rect = element.getBoundingClientRect();
+	if (rect.width === 0 || rect.height === 0) return false;
+	return getComputedStyle(element).visibility !== "hidden";
+}
+
+//#endregion
+export { resolveSubject };
+//# sourceMappingURL=resolve_subject.mjs.map

package/dist/client/suite/resolve_subject.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve_subject.mjs","names":[],"sources":["../../../src/client/suite/resolve_subject.ts"],"sourcesContent":["/**\n * Resolves the subject element of an auto snapshot from a CSS selector.\n *\n * When the selector matches multiple elements,\n * the first visible one is used,\n * so hidden matches elsewhere in the document (e.g. Storybook's own UI) do not shadow the rendered subject.\n *\n * If the selector is not provided or matches nothing, `document.body` is used.\n * If the selector only matches hidden elements, it throws right away instead of letting the screenshot wait until timeout.\n */\nexport function resolveSubject(selector: string | undefined): Element {\n\tif (!selector) return document.body\n\tconst matches = Array.from(document.querySelectorAll(selector))\n\tif (matches.length === 0) return document.body\n\tconst visible = matches.find(isVisible)\n\tif (visible) return visible\n\tthrow new Error(\n\t\t`Snapshot subject \\`${selector}\\` is not visible: it matched ${matches.length} element(s), but none of them is visible.`,\n\t)\n}\n\n/**\n * Same definition of visibility as Playwright:\n * the element has a non-empty bounding box and does not have `visibility: hidden`.\n *\n * @see https://playwright.dev/docs/actionability#visible\n */\nfunction isVisible(element: Element) {\n\tconst rect = element.getBoundingClientRect()\n\tif (rect.width === 0 || rect.height === 0) return false\n\treturn getComputedStyle(element).visibility !== 'hidden'\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,eAAe,UAAuC;AACrE,KAAI,CAAC,SAAU,QAAO,SAAS;CAC/B,MAAM,UAAU,MAAM,KAAK,SAAS,iBAAiB,SAAS,CAAC;AAC/D,KAAI,QAAQ,WAAW,EAAG,QAAO,SAAS;CAC1C,MAAM,UAAU,QAAQ,KAAK,UAAU;AACvC,KAAI,QAAS,QAAO;AACpB,OAAM,IAAI,MACT,sBAAsB,SAAS,gCAAgC,QAAQ,OAAO,2CAC9E;;;;;;;;AASF,SAAS,UAAU,SAAkB;CACpC,MAAM,OAAO,QAAQ,uBAAuB;AAC5C,KAAI,KAAK,UAAU,KAAK,KAAK,WAAW,EAAG,QAAO;AAClD,QAAO,iBAAiB,QAAQ,CAAC,eAAe"}

package/dist/client/task/task_id.mjs

@@ -3,12 +3,19 @@ function toTaskId(task) {
 	const l = [];
 	let t = task;
 	while (t?.suite) {
-		l.unshift(t.suite.name.replace(/[^a-z0-9]/gi, "-").toLowerCase());
+		l.unshift(toTaskIdSegment(t.suite.name));
 		t = t.suite;
 	}
-	l.push(task.name.replace(/[^a-z0-9]/gi, "-").toLowerCase());
+	l.push(toTaskIdSegment(task.name));
 	return l.join("/");
 }
+/**
+* Leading and trailing whitespace is trimmed so it does not leak into the snapshot path.
+* e.g. Storybook appends two spaces to the `describe` title it generates for CSF Next `story.test()`.
+*/
+function toTaskIdSegment(name) {
+	return name.trim().replace(/[^a-z0-9]/gi, "-").toLowerCase();
+}
 
 //#endregion
 export { toTaskId };

package/dist/client/task/task_id.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"task_id.mjs","names":[],"sources":["../../../src/client/task/task_id.ts"],"sourcesContent":["type Task = {\n\tname: string\n\tsuite?: Task | undefined\n}\n\nexport function toTaskId(task: Task) {\n\tconst l: any[] = []\n\tlet t = task\n\twhile (t?.suite) {\n\t\tl.unshift(t.suite.name.replace(/[^a-z0-9]/gi, '-').toLowerCase())\n\t\tt = t.suite\n\t}\n\n\tl.push(task.name.replace(/[^a-z0-9]/gi, '-').toLowerCase())\n\treturn l.join('/')\n}\n"],"mappings":";AAKA,SAAgB,SAAS,MAAY;CACpC,MAAM,IAAW,EAAE;CACnB,IAAI,IAAI;AACR,QAAO,GAAG,OAAO;AAChB,IAAE,QAAQ,EAAE,MAAM,KAAK,QAAQ,eAAe,IAAI,CAAC,aAAa,CAAC;AACjE,MAAI,EAAE;;AAGP,GAAE,KAAK,KAAK,KAAK,QAAQ,eAAe,IAAI,CAAC,aAAa,CAAC;AAC3D,QAAO,EAAE,KAAK,IAAI"}
+{"version":3,"file":"task_id.mjs","names":[],"sources":["../../../src/client/task/task_id.ts"],"sourcesContent":["type Task = {\n\tname: string\n\tsuite?: Task | undefined\n}\n\nexport function toTaskId(task: Task) {\n\tconst l: any[] = []\n\tlet t = task\n\twhile (t?.suite) {\n\t\tl.unshift(toTaskIdSegment(t.suite.name))\n\t\tt = t.suite\n\t}\n\n\tl.push(toTaskIdSegment(task.name))\n\treturn l.join('/')\n}\n\n/**\n * Leading and trailing whitespace is trimmed so it does not leak into the snapshot path.\n * e.g. Storybook appends two spaces to the `describe` title it generates for CSF Next `story.test()`.\n */\nfunction toTaskIdSegment(name: string) {\n\treturn name\n\t\t.trim()\n\t\t.replace(/[^a-z0-9]/gi, '-')\n\t\t.toLowerCase()\n}\n"],"mappings":";AAKA,SAAgB,SAAS,MAAY;CACpC,MAAM,IAAW,EAAE;CACnB,IAAI,IAAI;AACR,QAAO,GAAG,OAAO;AAChB,IAAE,QAAQ,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACxC,MAAI,EAAE;;AAGP,GAAE,KAAK,gBAAgB,KAAK,KAAK,CAAC;AAClC,QAAO,EAAE,KAAK,IAAI;;;;;;AAOnB,SAAS,gBAAgB,MAAc;AACtC,QAAO,KACL,MAAM,CACN,QAAQ,eAAe,IAAI,CAC3B,aAAa"}

package/dist/server/snapshot_path.d.mts

@@ -1,3 +1,6 @@
+import "../config/types.mjs";
+import "./vis_server_context.types.mjs";
+
 //#region src/server/snapshot_path.d.ts
 
 /**

package/dist/server/snapshot_path.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot_path.d.mts","names":[],"sources":["../../src/server/snapshot_path.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;iBAgCgB,kBAAA"}
+{"version":3,"file":"snapshot_path.d.mts","names":[],"sources":["../../src/server/snapshot_path.ts"],"sourcesContent":[],"mappings":";;;;;;AAgCA;;;;;;;iBAAgB,kBAAA"}

package/dist/server/vis_options.d.mts

@@ -1,4 +1,5 @@
 import { PixelDiffOptions } from "../shared/types.mjs";
+import "../config/types.mjs";
 import { ExtendedBrowserCommandContext } from "./vis_server_context.types.mjs";
 import "../index.mjs";
 import * as ssim_js0 from "ssim.js";

package/dist/server/vis_options.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"vis_options.d.mts","names":[],"sources":["../../src/server/vis_options.ts"],"sourcesContent":[],"mappings":";;;;;;;;iBA6BgB,YAAA,UAAsB;;wBAA6B,QAAA,CAAA,OAAA"}
+{"version":3,"file":"vis_options.d.mts","names":[],"sources":["../../src/server/vis_options.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AA6BmE,iBAAnD,YAAA,CAAmD,OAAA,EAA7B,6BAA6B,CAAA,EAAA;;wBAAA,QAAA,CAAA,OAAA"}

package/dist/server/vis_server_context.types.d.mts

@@ -1,3 +1,4 @@
+import "../shared/types.mjs";
 import { BrowserCommandContext } from "vitest/node";
 
 //#region src/server/vis_server_context.types.d.ts

package/dist/server/vis_server_context.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"vis_server_context.types.d.mts","names":[],"sources":["../../src/server/vis_server_context.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;KA6CK,cAAc,KAAK,SAAS,mBACpB,IAAI,gBAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;KAGzC,6BAAA;QACL;WACG;UACD;YACE,YAAY;YACZ;WAED,MACR;;;;;;;;;;YAWS"}
+{"version":3,"file":"vis_server_context.types.d.mts","names":[],"sources":["../../src/server/vis_server_context.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;KA6CK,cAAc,KAAK,SAAS,mBACpB,IAAI,gBAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;KAGzC,6BAAA;QACL;WACG;UACD;YACE,YAAY;YACZ;WAED,MACR;;;;;;;;;;YAWS"}

package/dist/shared/commands.types.d.mts

@@ -1,6 +1,6 @@
 import { ImageSnapshotComparisonInfo, MatchImageSnapshotOptions } from "./types.mjs";
 import { VisOptions } from "../config/types.mjs";
-import { Pick } from "type-plus";
+import { ObjectPlus } from "type-plus";
 
 //#region src/shared/commands.types.d.ts
 interface PrepareImageSnapshotComparisonCommand {
@@ -17,7 +17,7 @@ interface SetupVisSuiteCommand {
    *
    * In subsequent runs, it will only remove the results and diffs directory of the current suite.
    */
-  setupVisSuite: () => Promise<Pick<VisOptions, 'comparisonMethod' | 'diffOptions' | 'failureThreshold' | 'failureThresholdType' | 'snapshotKey' | 'subject' | 'timeout'>>;
+  setupVisSuite: () => Promise<ObjectPlus.Pick<VisOptions, 'comparisonMethod' | 'diffOptions' | 'failureThreshold' | 'failureThresholdType' | 'snapshotKey' | 'subject' | 'timeout'>>;
 }
 interface LoadImageSnapshotResultsCommand {
   loadImageSnapshotResults(taskId: string): Promise<ImageSnapshotResult[]>;

package/dist/shared/commands.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"commands.types.d.mts","names":[],"sources":["../../src/shared/commands.types.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB,qCAAA;8EAIL,0CACN,QAAQ;AALd;AAIY,UAIK,yCAAA,CAJL;EACE,kCAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAMF,yBANE,GAAA,SAAA,EAAA,GAOR,OAPQ,CAOA,2BAPA,CAAA;;AAAD,UAUI,oBAAA,CAVJ;EAGI;;;;;AAOjB;;EASE,aAAA,EAAA,GAAA,GADoB,OACpB,CAAA,IAAA,CACC,UADD,EAAA,kBAAA,GAAA,aAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,SAAA,GAAA,SAAA,CAAA,CAAA;;AAD2B,UAcZ,+BAAA,CAdY;EAcZ,wBAAA,CAAA,MAAA,EAAA,MAA+B,CAAA,EACL,OAAQ,CAAA,mBAAR,EAAA,CAAA;AAG3C;AAgBiB,UAhBA,mBAAA,CAgBuB;EAIvB,QAAA,EAAA,MAAA;;;;;;;;;;;;;;UAJA,uBAAA;qEACmD;;UAGnD,6BAAA;;;;0CAIwB"}
+{"version":3,"file":"commands.types.d.mts","names":[],"sources":["../../src/shared/commands.types.ts"],"sourcesContent":[],"mappings":";;;;;UAIiB,qCAAA;8EAIL,0CACN,QAAQ;AALd;AAIY,UAIK,yCAAA,CAJL;EACE,kCAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAMF,yBANE,GAAA,SAAA,EAAA,GAOR,OAPQ,CAOA,2BAPA,CAAA;;AAAD,UAUI,oBAAA,CAVJ;EAGI;;;;;AAOjB;;EASE,aAAW,EAAA,GAAA,GADS,OACT,CAAX,UAAA,CAAW,IAAA,CACV,UADU,EAAA,kBAAA,GAAA,aAAA,GAAA,kBAAA,GAAA,sBAAA,GAAA,aAAA,GAAA,SAAA,GAAA,SAAA,CAAA,CAAA;;AADgB,UAcZ,+BAAA,CAdY;EAcZ,wBAAA,CAAA,MAAA,EAAA,MAA+B,CAAA,EACL,OAAQ,CAAA,mBAAR,EAAA,CAAA;AAG3C;AAgBiB,UAhBA,mBAAA,CAgBuB;EAIvB,QAAA,EAAA,MAAA;;;;;;;;;;;;;;UAJA,uBAAA;qEACmD;;UAGnD,6BAAA;;;;0CAIwB"}

package/dist/shared/types.d.mts

@@ -68,8 +68,10 @@ type ImageSnapshotSubjectOptions = {
   /**
    * Specify the query of the subject element.
    *
+   * If the query matches multiple elements, the first visible one is used.
    * If the test does not have an element with the specified query,
    * the `body` element will be used.
+   * If the query only matches hidden elements, the snapshot fails right away.
    */
   subject?: string | undefined;
 };

package/dist/shared/types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../../src/shared/types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,eAAe,IAAI,YAAY;UAE1B,2BAAA;EAFL;;;;;EAEK,OAAA,CAAA,EAAA,MAAA,GAAA,SAAA;AASjB;AAOY,UAPK,uBAAA,CAOW;EAEhB;AA6BZ;;EAKuB,WAAA,CAAA,EAAA,MAAA,GAAA,SAAA;;AAAD,KApCV,gBAAA,GAoCU,OAAA,GAAA,MAAA;AAKV,KAvCA,uBAAA,GAuCsB;EAQtB;AAEZ;;;;EACG,oBAAA,CAAA,EAAA,OAAA,GAAA,SAAA,GAAA,SAAA;EACuB;;;;AAG1B;AASA;;;;;;;AAmBA;AAIA;;;;;;EAGY,gBAAA,CAAA,EAAgB,MAAA,GAAA,SAAA;CAEJ;AAAb,KA9DC,qBA8DD,CAAA,IAAA,MAAA,CAAA,GAAA;EAAR,gBAAA,EA7DgB,CA6DhB;EAAI;AAIP;;EA+BC,WAAA,CAAA,EA5Fc,OA4Fd,CA5FsB,eA4FtB,CAAA,GAAA,SAAA;CACC;AAA8C,KAxFpC,sBAwFoC,CAAA,IAAA,OAAA,CAAA,GAAA;EAEpC,gBAAA,CAAA,EAzFQ,CAyFR,GAAA,SAAyB;EAAG;;;EAEhB,WAAA,CAAA,EAvFT,gBAuFS,GAAA,SAAA;AAOxB,CAAA;AAAuC,KA3F3B,gBAAA,GAAmB,UA2FQ,CAAA,OA3FU,UA2FV,CAAA,CAAA,CAAA,CAAA;AAGvB,KA5FJ,2BA4FI,CAAA,UA5FkC,gBA4FlC,GAAA,OAAA,CAAA,GAAA,CA5FiE,CA4FjE,SAAA,MAAA,GA3Fb,qBA2Fa,CA3FS,CA2FT,CAAA,GA1Fb,sBA0Fa,CA1FU,CA0FV,CAAA,CAAA,GAzFf,uBAyFe;AAA4B,KAvFhC,2BAAA,GAuFgC;EAClB;;;;;;EAKR,OAAA,CAAA,EAAA,MAAA,GAAA,SAAA;CAA4B;AAClB,KArFhB,2BAqFgB,CAAA,UArFsB,gBAqFtB,GAAA,OAAA,CAAA,GArFoD,2BAqFpD,GApF3B,uBAoF2B,GAnF3B,2BAmF2B,CAnFC,CAmFD,CAAA,GAAA;EAAb;;;;EACe,YAAA,CAAA,EAAA,OAAA,GAAA,SAAA;EAL1B;;;;;;;;;;UA9Da,wBAAA;;;KAIL,0CAA0C,8BAA8B,4BAA4B,KAC/G;KAEW,gBAAA;;KAET,IAAA,IAAQ,aAAa;;;KAIZ,2BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8BR,8BACH,2BACC,wBAAwB;KAEd,yBAAA,GAA4B,8BACvC,mCACA;;;;;;KAOW,2BAA2B;+BAGvB,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB,kCACxB,qCAGc,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB"}
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../src/shared/types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,eAAe,IAAI,YAAY;UAE1B,2BAAA;EAFL;;;;;EAEK,OAAA,CAAA,EAAA,MAAA,GAAA,SAAA;AASjB;AAOY,UAPK,uBAAA,CAOW;EAEhB;AA6BZ;;EAKuB,WAAA,CAAA,EAAA,MAAA,GAAA,SAAA;;AAAD,KApCV,gBAAA,GAoCU,OAAA,GAAA,MAAA;AAKV,KAvCA,uBAAA,GAuCsB;EAQtB;AAEZ;;;;EACG,oBAAA,CAAA,EAAA,OAAA,GAAA,SAAA,GAAA,SAAA;EACuB;;;;AAG1B;AAWA;;;;;;;AAmBA;AAIA;;;;;;EAGY,gBAAA,CAAA,EAAgB,MAAA,GAAA,SAAA;CAEJ;AAAb,KAhEC,qBAgED,CAAA,IAAA,MAAA,CAAA,GAAA;EAAR,gBAAA,EA/DgB,CA+DhB;EAAI;AAIP;;EA+BC,WAAA,CAAA,EA9Fc,OA8Fd,CA9FsB,eA8FtB,CAAA,GAAA,SAAA;CACC;AAA8C,KA1FpC,sBA0FoC,CAAA,IAAA,OAAA,CAAA,GAAA;EAEpC,gBAAA,CAAA,EA3FQ,CA2FR,GAAA,SAAyB;EAAG;;;EAEhB,WAAA,CAAA,EAzFT,gBAyFS,GAAA,SAAA;AAOxB,CAAA;AAAuC,KA7F3B,gBAAA,GAAmB,UA6FQ,CAAA,OA7FU,UA6FV,CAAA,CAAA,CAAA,CAAA;AAGvB,KA9FJ,2BA8FI,CAAA,UA9FkC,gBA8FlC,GAAA,OAAA,CAAA,GAAA,CA9FiE,CA8FjE,SAAA,MAAA,GA7Fb,qBA6Fa,CA7FS,CA6FT,CAAA,GA5Fb,sBA4Fa,CA5FU,CA4FV,CAAA,CAAA,GA3Ff,uBA2Fe;AAA4B,KAzFhC,2BAAA,GAyFgC;EAClB;;;;;;;;EAME,OAAA,CAAA,EAAA,MAAA,GAAA,SAAA;CAAb;AAAkB,KArFrB,2BAqFqB,CAAA,UArFiB,gBAqFjB,GAAA,OAAA,CAAA,GArF+C,2BAqF/C,GApFhC,uBAoFgC,GAnFhC,2BAmFgC,CAnFJ,CAmFI,CAAA,GAAA;EAAI;;;;EAJ3B,YAAA,CAAA,EAAA,OAAA,GAAA,SAAA;;;;;;;;;;;UA9DO,wBAAA;;;KAIL,0CAA0C,8BAA8B,4BAA4B,KAC/G;KAEW,gBAAA;;KAET,IAAA,IAAQ,aAAa;;;KAIZ,2BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8BR,8BACH,2BACC,wBAAwB;KAEd,yBAAA,GAA4B,8BACvC,mCACA;;;;;;KAOW,2BAA2B;+BAGvB,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB,kCACxB,qCAGc,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "5.1.5",
+  "version": "5.1.7",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -57,11 +57,11 @@
     "pngjs": "^7.0.0",
     "rimraf": "^6.1.3",
     "ssim.js": "^3.5.0",
-    "type-plus": "8.0.0-beta.10"
+    "type-plus": "8.0.0-beta.12"
   },
   "devDependencies": {
-    "@repobuddy/storybook": "^2.32.0",
-    "@repobuddy/typescript": "^2.1.0",
+    "@repobuddy/storybook": "^2.33.1",
+    "@repobuddy/typescript": "^2.2.0",
     "@storybook-community/storybook-dark-mode": "^7.1.3",
     "@storybook/addon-docs": "^10.5.10",
     "@storybook/addon-vitest": "^10.5.10",

package/src/auto_snapshots/auto_snapshot_options.mdx

@@ -54,6 +54,8 @@ setAutoSnapshotOptions(false)
 
 #### `subject` (string)
 Specifies the CSS selector for the element to snapshot. If not provided or element not found, defaults to `document.body`.
+If the selector matches multiple elements, the first visible one is used.
+If it only matches hidden elements, the snapshot fails right away with a "not visible" error instead of waiting until the timeout.
 
 ```ts
 // Snapshot a specific element

package/src/client/suite/auto_snapshot_matcher.ts

@@ -6,6 +6,7 @@ import type { ComparisonMethod, SetupVisOptions } from '../../shared/types.ts'
 import { shouldTakeSnapshot } from '../snapshot/should_take_snapshot.ts'
 import { toTaskId } from '../task/task_id.ts'
 import { ctx } from './_ctx.ts'
+import { resolveSubject } from './resolve_subject.ts'
 
 export function autoSnapshotMatcher<GM extends Record<string, any> | unknown = unknown>(
 	commands: SetupVisSuiteCommand,
@@ -40,7 +41,7 @@ export function autoSnapshotMatcher<GM extends Record<string, any> | unknown = u
 							meta != null && Object.hasOwn(meta as object, 'createMissingBaseline')
 								? (meta as { createMissingBaseline?: boolean }).createMissingBaseline
 								: suiteDefaults?.createMissingBaseline
-						await expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
+						await expect(resolveSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
 							...meta,
 							snapshotKey: meta?.snapshotKey ?? themeId,
 							...(effectiveCreateMissingBaseline !== undefined
@@ -69,7 +70,3 @@ export function autoSnapshotMatcher<GM extends Record<string, any> | unknown = u
 		},
 	}
 }
-
-function getSubject(selectors: string | undefined) {
-	return selectors ? (document.querySelector(selectors) ?? document.body) : document.body
-}

package/src/client/suite/resolve_subject.ts

@@ -0,0 +1,32 @@
+/**
+ * Resolves the subject element of an auto snapshot from a CSS selector.
+ *
+ * When the selector matches multiple elements,
+ * the first visible one is used,
+ * so hidden matches elsewhere in the document (e.g. Storybook's own UI) do not shadow the rendered subject.
+ *
+ * If the selector is not provided or matches nothing, `document.body` is used.
+ * If the selector only matches hidden elements, it throws right away instead of letting the screenshot wait until timeout.
+ */
+export function resolveSubject(selector: string | undefined): Element {
+	if (!selector) return document.body
+	const matches = Array.from(document.querySelectorAll(selector))
+	if (matches.length === 0) return document.body
+	const visible = matches.find(isVisible)
+	if (visible) return visible
+	throw new Error(
+		`Snapshot subject \`${selector}\` is not visible: it matched ${matches.length} element(s), but none of them is visible.`,
+	)
+}
+
+/**
+ * Same definition of visibility as Playwright:
+ * the element has a non-empty bounding box and does not have `visibility: hidden`.
+ *
+ * @see https://playwright.dev/docs/actionability#visible
+ */
+function isVisible(element: Element) {
+	const rect = element.getBoundingClientRect()
+	if (rect.width === 0 || rect.height === 0) return false
+	return getComputedStyle(element).visibility !== 'hidden'
+}

package/src/client/task/task_id.ts

@@ -7,10 +7,21 @@ export function toTaskId(task: Task) {
 	const l: any[] = []
 	let t = task
 	while (t?.suite) {
-		l.unshift(t.suite.name.replace(/[^a-z0-9]/gi, '-').toLowerCase())
+		l.unshift(toTaskIdSegment(t.suite.name))
 		t = t.suite
 	}
 
-	l.push(task.name.replace(/[^a-z0-9]/gi, '-').toLowerCase())
+	l.push(toTaskIdSegment(task.name))
 	return l.join('/')
 }
+
+/**
+ * Leading and trailing whitespace is trimmed so it does not leak into the snapshot path.
+ * e.g. Storybook appends two spaces to the `describe` title it generates for CSF Next `story.test()`.
+ */
+function toTaskIdSegment(name: string) {
+	return name
+		.trim()
+		.replace(/[^a-z0-9]/gi, '-')
+		.toLowerCase()
+}

package/src/shared/commands.types.ts

@@ -1,4 +1,4 @@
-import type { Pick } from 'type-plus'
+import type { ObjectPlus } from 'type-plus'
 import type { VisOptions } from '../config/types.ts'
 import type { ImageSnapshotComparisonInfo, MatchImageSnapshotOptions } from './types.ts'
 
@@ -26,7 +26,7 @@ export interface SetupVisSuiteCommand {
 	 * In subsequent runs, it will only remove the results and diffs directory of the current suite.
 	 */
 	setupVisSuite: () => Promise<
-		Pick<
+		ObjectPlus.Pick<
 			VisOptions,
 			| 'comparisonMethod'
 			| 'diffOptions'

package/src/shared/types.ts

@@ -81,8 +81,10 @@ export type ImageSnapshotSubjectOptions = {
 	/**
 	 * Specify the query of the subject element.
 	 *
+	 * If the query matches multiple elements, the first visible one is used.
 	 * If the test does not have an element with the specified query,
 	 * the `body` element will be used.
+	 * If the query only matches hidden elements, the snapshot fails right away.
 	 */
 	subject?: string | undefined
 }