vitest-plugin-vis 2.4.3 → 3.0.0

package/esm/client/actions/has_image_snapshot_action.d.ts

@@ -0,0 +1,4 @@
+import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../commands.ts';
+import type { ImageSnapshotKeyOptions } from '../../shared/types.ts';
+export declare function hasImageSnapshotAction(commands: ImageSnapshotNextIndexCommand & HasImageSnapshotCommand, taskId: string, options?: ImageSnapshotKeyOptions | undefined): Promise<boolean>;
+//# sourceMappingURL=has_image_snapshot_action.d.ts.map

package/esm/client/actions/has_image_snapshot_action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"has_image_snapshot_action.d.ts","sourceRoot":"","sources":["../../../src/client/actions/has_image_snapshot_action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAA;AAC/F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAEpE,wBAAgB,sBAAsB,CACrC,QAAQ,EAAE,6BAA6B,GAAG,uBAAuB,EACjE,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,uBAAuB,GAAG,SAAS,oBAO7C"}

package/esm/client/actions/has_image_snapshot_action.js

@@ -0,0 +1,6 @@
+export function hasImageSnapshotAction(commands, taskId, options) {
+    if (options?.snapshotKey?.includes('-')) {
+        throw new Error('Snapshot key cannot contain dash');
+    }
+    return commands.hasImageSnapshot(taskId, options?.snapshotKey);
+}

package/esm/client/actions/load_image_snapshot_results_action.d.ts

@@ -0,0 +1,3 @@
+import type { LoadImageSnapshotResultsCommand } from '../../server/commands/load_image_snapshot_results.ts';
+export declare function loadImageSnapshotResultsAction(commands: LoadImageSnapshotResultsCommand, taskId: string): Promise<import("../../server/commands/load_image_snapshot_results.ts").ImageSnapshotResult[]>;
+//# sourceMappingURL=load_image_snapshot_results_action.d.ts.map

package/esm/client/actions/load_image_snapshot_results_action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"load_image_snapshot_results_action.d.ts","sourceRoot":"","sources":["../../../src/client/actions/load_image_snapshot_results_action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,sDAAsD,CAAA;AAE3G,wBAAgB,8BAA8B,CAAC,QAAQ,EAAE,+BAA+B,EAAE,MAAM,EAAE,MAAM,iGAEvG"}

package/esm/client/actions/load_image_snapshot_results_action.js

@@ -0,0 +1,3 @@
+export function loadImageSnapshotResultsAction(commands, taskId) {
+    return commands.loadImageSnapshotResults(taskId);
+}

package/esm/client/actions/match_image_snapshot_action.d.ts

@@ -0,0 +1,6 @@
+import type { BrowserCommands } from '@vitest/browser/context';
+import type { ImageSnapshotNextIndexCommand } from '../../commands.ts';
+import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts';
+import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts';
+export declare function matchImageSnapshotAction(commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand, taskId: string, subject: any, options?: ToMatchImageSnapshotOptions<any>): Promise<void>;
+//# sourceMappingURL=match_image_snapshot_action.d.ts.map

package/esm/client/actions/match_image_snapshot_action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match_image_snapshot_action.d.ts","sourceRoot":"","sources":["../../../src/client/actions/match_image_snapshot_action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,4DAA4D,CAAA;AAGvH,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAA;AAIxE,wBAAsB,wBAAwB,CAC7C,QAAQ,EAAE,eAAe,GAAG,qCAAqC,GAAG,6BAA6B,EACjG,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EACZ,OAAO,CAAC,EAAE,2BAA2B,CAAC,GAAG,CAAC,iBAS1C"}

package/esm/client/actions/match_image_snapshot_action.js

@@ -0,0 +1,20 @@
+import { assertSnapshotKeyWithoutDash } from "../../shared/asserts.js";
+import { isBase64String } from "../../shared/base64.js";
+import { compareImageSnapshot } from "../compare_image_snapshot.js";
+import { convertElementToCssSelector } from "../selector.js";
+export async function matchImageSnapshotAction(commands, taskId, subject, options) {
+    assertSnapshotKeyWithoutDash(options?.snapshotKey);
+    const info = await commands.prepareImageSnapshotComparison(taskId, parseImageSnapshotSubject(subject), options);
+    if (!info)
+        return;
+    return compareImageSnapshot(commands, taskId, info, options);
+}
+function parseImageSnapshotSubject(subject) {
+    if (subject instanceof Element)
+        return convertElementToCssSelector(subject);
+    if (subject?.['selector'])
+        return subject['selector'];
+    if (isBase64String(subject))
+        return subject;
+    throw new Error(`'toMatchImageSnapshot()' expects the subject to be an element, locator, or image encoded in base64 string, but got: ${subject}`);
+}

package/esm/client/actions/match_page_image_snapshot_action.d.ts

@@ -0,0 +1,6 @@
+import type { BrowserCommands } from '@vitest/browser/context';
+import type { ImageSnapshotNextIndexCommand } from '../../commands.ts';
+import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts';
+import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts';
+export declare function matchPageImageSnapshotAction(commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand, taskId: string, options?: ToMatchImageSnapshotOptions<any>): Promise<void>;
+//# sourceMappingURL=match_page_image_snapshot_action.d.ts.map

package/esm/client/actions/match_page_image_snapshot_action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match_page_image_snapshot_action.d.ts","sourceRoot":"","sources":["../../../src/client/actions/match_page_image_snapshot_action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,4DAA4D,CAAA;AAEvH,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAA;AAGxE,wBAAsB,4BAA4B,CACjD,QAAQ,EAAE,eAAe,GAAG,qCAAqC,GAAG,6BAA6B,EACjG,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,2BAA2B,CAAC,GAAG,CAAC,iBAS1C"}

package/esm/client/actions/match_page_image_snapshot_action.js

@@ -0,0 +1,9 @@
+import { assertSnapshotKeyWithoutDash } from "../../shared/asserts.js";
+import { compareImageSnapshot } from "../compare_image_snapshot.js";
+export async function matchPageImageSnapshotAction(commands, taskId, options) {
+    assertSnapshotKeyWithoutDash(options?.snapshotKey);
+    const info = await commands.preparePageImageSnapshotComparison(taskId, options);
+    if (!info)
+        return;
+    return compareImageSnapshot(commands, taskId, info, options);
+}

package/esm/client/auto_snapshot_options.d.ts

@@ -0,0 +1,29 @@
+import type { ComparisonMethod } from '../shared/types.ts';
+import type { SnapshotMeta } from './snapshot_meta.ts';
+type Suite = {
+    meta: Record<string, any>;
+    suite?: Suite | undefined;
+};
+export type MetaTask = {
+    file?: {
+        meta: Record<string, any>;
+    } | undefined;
+    suite?: Suite | undefined;
+    meta: Record<string, any>;
+} | undefined;
+/**
+ * Set the snapshot options for auto snapshot.
+ *
+ * ```ts
+ * beforeAll(() => setAutoSnapshotOptions(...))
+ * beforeEach(() => setAutoSnapshotOptions(...))
+ *
+ * it('...', () => {
+ *   setAutoSnapshotOptions(...)
+ * })
+ * ```
+ */
+export declare function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void;
+export declare function extractAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined;
+export {};
+//# sourceMappingURL=auto_snapshot_options.d.ts.map

package/esm/client/auto_snapshot_options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto_snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/auto_snapshot_options.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtD,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,CAAA;AAErE,MAAM,MAAM,QAAQ,GACjB;IACA,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAE,GAAG,SAAS,CAAA;IAChD,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACxB,GACD,SAAS,CAAA;AAEZ;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,IAAI,CAYxG;AAUD,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,EACzF,IAAI,EAAE,QAAQ,GACZ,CAAC,GAAG,SAAS,CAkBf"}

package/esm/client/auto_snapshot_options.js

@@ -0,0 +1,49 @@
+import { assertSnapshotKeyWithoutDash } from "../shared/asserts.js";
+import { NAME } from "../shared/constants.js";
+import { ctx } from "./ctx.js";
+/**
+ * Set the snapshot options for auto snapshot.
+ *
+ * ```ts
+ * beforeAll(() => setAutoSnapshotOptions(...))
+ * beforeEach(() => setAutoSnapshotOptions(...))
+ *
+ * it('...', () => {
+ *   setAutoSnapshotOptions(...)
+ * })
+ * ```
+ */
+export function setAutoSnapshotOptions(meta) {
+    if (typeof meta === 'object') {
+        assertSnapshotKeyWithoutDash(meta.snapshotKey);
+    }
+    const task = getTask();
+    if (!task)
+        return;
+    task.meta[NAME] = {
+        ...task.meta[NAME],
+        ...parseMeta(meta),
+    };
+}
+function getTask() {
+    return ctx.getCurrentTest() ?? ctx.getCurrentSuite()?.tasks?.[0]?.file;
+}
+function parseMeta(meta) {
+    return typeof meta === 'boolean' ? { enable: meta } : { enable: true, ...meta };
+}
+export function extractAutoSnapshotOptions(task) {
+    if (!task)
+        return;
+    const list = [];
+    let current = task;
+    while (current?.suite) {
+        list.unshift(current.suite.meta);
+        current = current.suite;
+    }
+    list.unshift(task.file?.meta);
+    list.push(task.meta);
+    return list.reduce((acc, cur) => {
+        const meta = cur?.[NAME];
+        return meta ? Object.assign({}, acc, meta) : acc;
+    }, { enable: false });
+}

package/esm/client/compare_image_snapshot.d.ts

@@ -0,0 +1,6 @@
+import type { BrowserCommands } from '@vitest/browser/context';
+import type { ImageSnapshotNextIndexCommand } from '../commands.ts';
+import type { ImageSnapshotComparisonInfo, PrepareImageSnapshotComparisonCommand } from '../server/commands/prepare_image_snapshot_comparison.ts';
+import type { ToMatchImageSnapshotOptions } from '../shared/types.ts';
+export declare function compareImageSnapshot(commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand, taskId: string, info: ImageSnapshotComparisonInfo, options?: ToMatchImageSnapshotOptions<any>): Promise<void>;
+//# sourceMappingURL=compare_image_snapshot.d.ts.map

package/esm/client/compare_image_snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare_image_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/compare_image_snapshot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAG9D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,KAAK,EACX,2BAA2B,EAC3B,qCAAqC,EACrC,MAAM,yDAAyD,CAAA;AAEhE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAA;AAMrE,wBAAsB,oBAAoB,CACzC,QAAQ,EAAE,eAAe,GAAG,qCAAqC,GAAG,6BAA6B,EACjG,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,2BAA2B,EACjC,OAAO,CAAC,EAAE,2BAA2B,CAAC,GAAG,CAAC,iBA2D1C"}

package/esm/client/compare_image_snapshot.js

@@ -0,0 +1,52 @@
+import dedent from 'dedent';
+import { resolve } from 'pathe';
+import { compareImage } from "../shared/compare_image.js";
+import { alignImagesToSameSize } from "./align_images.js";
+import { prettifyOptions } from "./compare_image_snapshot.logic.js";
+import { toDataURL, toImageData } from "./image_data.js";
+import { server } from "./vitest_browser_context_proxy.js";
+export async function compareImageSnapshot(commands, taskId, info, options) {
+    options = { ...info, ...options };
+    const baselineImage = await toImageData(info.baseline);
+    const resultImage = await toImageData(info.result);
+    const [baselineAlignedImage, resultAlignedImage] = alignImagesToSameSize(baselineImage, resultImage);
+    const { width, height } = baselineAlignedImage;
+    const diffImage = new ImageData(width, height);
+    const { pass, diffAmount } = compareImage(baselineAlignedImage.data, resultAlignedImage.data, diffImage.data, width, height, options);
+    if (pass) {
+        if (options?.expectToFail) {
+            throw new Error(dedent `Snapshot \`${taskId}\` matched but expected to fail.
+
+							Options:    ${prettifyOptions(options)}
+							Diff:       ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
+
+							Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+							Actual:     ${resolve(info.projectRoot, info.resultPath)}`);
+        }
+        return;
+    }
+    if (server.config.snapshotOptions.updateSnapshot === 'all' && !options?.expectToFail) {
+        await writeSnapshot(commands, resolve(info.projectRoot, info.baselinePath), resultImage);
+        return;
+    }
+    await writeSnapshot(commands, resolve(info.projectRoot, info.diffPath), diffImage);
+    throw new Error(dedent `Snapshot \`${taskId}\` mismatched
+
+					${options?.failureThreshold
+        ? options?.failureThresholdType === 'percent'
+            ? `Expected image to match within ${options.failureThreshold}% but was differ by ${diffAmount}%.`
+            : `Expected image to match within ${options.failureThreshold} pixels but was differ by ${diffAmount} pixels.`
+        : `Expected image to match but was differ by ${options?.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}.`}${baselineImage.width !== resultImage.width || baselineImage.height !== resultImage.height
+        ? `\nThe image size changed from ${baselineImage.width}x${baselineImage.height} to ${resultImage.width}x${resultImage.height}.`
+        : ''}
+
+					Options:    ${prettifyOptions(options)}
+
+					Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+					Actual:     ${resolve(info.projectRoot, info.resultPath)}
+					Difference: ${resolve(info.projectRoot, info.diffPath)}`);
+}
+async function writeSnapshot(commands, path, image) {
+    const content = (await toDataURL(image)).split(',')[1];
+    return commands.writeFile(path, content, { encoding: 'base64' });
+}

package/esm/client/{image_snapshot_matcher.logic.d.ts → compare_image_snapshot.logic.d.ts}

@@ -1,3 +1,3 @@
 import type { ToMatchImageSnapshotOptions } from '../shared/types.ts';
 export declare function prettifyOptions(options: ToMatchImageSnapshotOptions<any> | undefined): string;
-//# sourceMappingURL=image_snapshot_matcher.logic.d.ts.map
+//# sourceMappingURL=compare_image_snapshot.logic.d.ts.map

package/esm/client/compare_image_snapshot.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare_image_snapshot.logic.d.ts","sourceRoot":"","sources":["../../src/client/compare_image_snapshot.logic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAA;AAErE,wBAAgB,eAAe,CAAC,OAAO,EAAE,2BAA2B,CAAC,GAAG,CAAC,GAAG,SAAS,UAWpF"}

package/esm/client/expect/to_match_image_snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"to_match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAA;AAKxE,wBAAgB,oBAAoB;AACnC;;;GAGG;AACH,OAAO,EAAE,GAAG,EACZ,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAC/C,sBAAsB,CAcxB"}
+{"version":3,"file":"to_match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAA;AAMxE,wBAAgB,oBAAoB;AACnC;;;GAGG;AACH,OAAO,EAAE,GAAG,EACZ,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAC/C,sBAAsB,CAcxB"}

package/esm/client/expect/to_match_image_snapshot.js

@@ -1,6 +1,7 @@
 import { commands } from '@vitest/browser/context';
+import { matchImageSnapshotAction } from "../actions/match_image_snapshot_action.js";
 import { ctx } from "../ctx.js";
-import { imageSnapshotMatcher } from "../image_snapshot_matcher.js";
+import { toTaskId } from "../task_id.js";
 import { success } from "./expectation_result.js";
 export function toMatchImageSnapshot(
 /**
@@ -14,7 +15,7 @@ subject, options) {
     }
     if (test.concurrent) {
         throw new Error('`toMatchImageSnapshot()` cannot be called in a concurrent test because ' +
-            "concurrent tests run at the same time in the same iframe and affect each other's environment. ");
+            "concurrent tests run at the same time in the same iframe and affect each other's environment.");
     }
-    return imageSnapshotMatcher(commands)(test, subject, options).then(() => success);
+    return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success);
 }

package/esm/client/image_resizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image_resizer.d.ts","sourceRoot":"","sources":["../../src/client/image_resizer.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,sBACV;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,aAC7C,SAAS,cA2BhB,CAAA;AAGF,eAAO,MAAM,mBAAmB,sBACX;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,aAC7C,SAAS,cAsBhB,CAAA"}
+{"version":3,"file":"image_resizer.d.ts","sourceRoot":"","sources":["../../src/client/image_resizer.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,GAC7B,mBAAmB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,MACpD,OAAO,SAAS,cA2BhB,CAAA;AAGF,eAAO,MAAM,mBAAmB,GAC9B,mBAAmB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,MACpD,OAAO,SAAS,cAsBhB,CAAA"}

package/esm/client/image_snapshot_options.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image_snapshot_options.d.ts.map

package/esm/client/image_snapshot_options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image_snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/image_snapshot_options.ts"],"names":[],"mappings":""}

package/esm/client/image_snapshot_options.js

@@ -0,0 +1,6 @@
+// import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
+export {};
+// export function parseImageSnapshotOptions(taskId: string, options: ToMatchImageSnapshotOptions<any> | undefined) {
+// 	const { snapshotKey, ...rest } = options ?? {}
+// 	return snapshotKey ? { ...options, snapshotFileId: `${taskId}-${snapshotKey}` } : rest
+// }

package/esm/client/page/augment.d.ts

@@ -1,6 +1,7 @@
 import type { HasImageSnapshotAction } from './has_image_snapshot.ts';
+import type { ToMatchImageSnapshotAction } from './to_match_image_snapshot.ts';
 declare module '@vitest/browser/context' {
-    interface BrowserPage extends HasImageSnapshotAction {
+    interface BrowserPage extends HasImageSnapshotAction, ToMatchImageSnapshotAction {
     }
 }
 //# sourceMappingURL=augment.d.ts.map

package/esm/client/page/augment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"augment.d.ts","sourceRoot":"","sources":["../../../src/client/page/augment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAErE,OAAO,QAAQ,yBAAyB,CAAC;IACxC,UAAU,WAAY,SAAQ,sBAAsB;KAAG;CACvD"}
+{"version":3,"file":"augment.d.ts","sourceRoot":"","sources":["../../../src/client/page/augment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AACrE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AAE9E,OAAO,QAAQ,yBAAyB,CAAC;IACxC,UAAU,WAAY,SAAQ,sBAAsB,EAAE,0BAA0B;KAAG;CACnF"}

package/esm/client/page/extend.js

@@ -1,4 +1,5 @@
 import { page } from '@vitest/browser/context';
 import "./augment.js";
 import { hasImageSnapshot } from "./has_image_snapshot.js";
-page.extend({ hasImageSnapshot });
+import { toMatchImageSnapshot } from "./to_match_image_snapshot.js";
+page.extend({ hasImageSnapshot, toMatchImageSnapshot });

package/esm/client/page/has_image_snapshot.d.ts

@@ -1,10 +1,10 @@
 import { type BrowserPage } from '@vitest/browser/context';
-import type { ImageSnapshotIdOptions } from '../../shared/types.ts';
+import type { ImageSnapshotKeyOptions } from '../../shared/types.ts';
 export interface HasImageSnapshotAction {
-    hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotIdOptions | undefined): Promise<boolean>;
+    /**
+     * Check if the snapshot image exists.
+     */
+    hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotKeyOptions | undefined): Promise<boolean>;
 }
-/**
- * Check if the snapshot image exists.
- */
-export declare function hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotIdOptions | undefined): Promise<boolean>;
+export declare function hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotKeyOptions | undefined): Promise<boolean>;
 //# sourceMappingURL=has_image_snapshot.d.ts.map

package/esm/client/page/has_image_snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"has_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/page/has_image_snapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,yBAAyB,CAAA;AACpE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAInE,MAAM,WAAW,sBAAsB;IACtC,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,sBAAsB,GAAG,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;CACnG;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,sBAAsB,GAAG,SAAS,oBA2B/F"}
+{"version":3,"file":"has_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/page/has_image_snapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAY,MAAM,yBAAyB,CAAA;AACpE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAKpE,MAAM,WAAW,sBAAsB;IACtC;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;CACpG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,SAAS,oBAahG"}

package/esm/client/page/has_image_snapshot.js

@@ -1,9 +1,7 @@
 import { commands } from '@vitest/browser/context';
+import { hasImageSnapshotAction } from "../actions/has_image_snapshot_action.js";
 import { ctx } from "../ctx.js";
 import { toTaskId } from "../task_id.js";
-/**
- * Check if the snapshot image exists.
- */
 export function hasImageSnapshot(options) {
     const test = ctx.getCurrentTest();
     if (!test) {
@@ -13,12 +11,5 @@ export function hasImageSnapshot(options) {
         throw new Error('`hasImageSnapshot()` cannot be called in a concurrent test because ' +
             "concurrent tests run at the same time in the same iframe and affect each other's environment. ");
     }
-    const taskId = toTaskId(test);
-    const isAutoSnapshot = !!test.meta.vis?.isAutoSnapshot;
-    if (options?.customizeSnapshotId) {
-        return commands
-            .imageSnapshotNextIndex(taskId)
-            .then((index) => commands.hasImageSnapshot(taskId, options.customizeSnapshotId({ id: taskId, index, isAutoSnapshot }), isAutoSnapshot));
-    }
-    return commands.hasImageSnapshot(taskId, undefined, isAutoSnapshot);
+    return hasImageSnapshotAction(commands, toTaskId(test), options);
 }

package/esm/client/page/to_match_image_snapshot.d.ts

@@ -0,0 +1,8 @@
+import type { PageImageSnapshotOptions, ToMatchImageSnapshotOptions } from '../../shared/types.ts';
+export interface ToMatchPageImageSnapshotOptions extends ToMatchImageSnapshotOptions, PageImageSnapshotOptions {
+}
+export interface ToMatchImageSnapshotAction {
+    toMatchImageSnapshot(options?: ToMatchPageImageSnapshotOptions | undefined): Promise<void>;
+}
+export declare function toMatchImageSnapshot(options?: ToMatchPageImageSnapshotOptions | undefined): Promise<void>;
+//# sourceMappingURL=to_match_image_snapshot.d.ts.map

package/esm/client/page/to_match_image_snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to_match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/client/page/to_match_image_snapshot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAA;AAKlG,MAAM,WAAW,+BAAgC,SAAQ,2BAA2B,EAAE,wBAAwB;CAAG;AAEjH,MAAM,WAAW,0BAA0B;IAC1C,oBAAoB,CAAC,OAAO,CAAC,EAAE,+BAA+B,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC1F;AAED,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,+BAA+B,GAAG,SAAS,iBAczF"}

package/esm/client/page/to_match_image_snapshot.js

@@ -0,0 +1,15 @@
+import { commands } from '@vitest/browser/context';
+import { matchPageImageSnapshotAction } from "../actions/match_page_image_snapshot_action.js";
+import { ctx } from "../ctx.js";
+import { toTaskId } from "../task_id.js";
+export function toMatchImageSnapshot(options) {
+    const test = ctx.getCurrentTest();
+    if (!test) {
+        throw new Error('`toMatchImageSnapshot()` must be called in a test.');
+    }
+    if (test.concurrent) {
+        throw new Error('`toMatchImageSnapshot()` cannot be called in a concurrent test because ' +
+            "concurrent tests run at the same time in the same iframe and affect each other's environment.");
+    }
+    return matchPageImageSnapshotAction(commands, toTaskId(test), options);
+}

package/esm/client/setup/create_vis.d.ts

@@ -0,0 +1,96 @@
+import type { SetupVisSuiteCommand } from '../../server/commands/setup_vis_suite.ts';
+import type { ComparisonMethod } from '../../shared/types.ts';
+import type { SnapshotMeta } from '../snapshot_meta.ts';
+/**
+ * Visual test configuration on the client side.
+ */
+export type VisClientConfigurator<GM extends Record<string, any> | unknown = unknown> = {
+    /**
+     * Setup the visual test configuration.
+     *
+     * @example
+     * ```ts
+     * // Setup with auto snapshot enabled
+     * vis().setup({ auto: true })
+     *
+     * // Setup with auto snapshot disabled
+     * vis().setup({ auto: false })
+     *
+     * // Same as `vis.setup({ auto: false })`
+     * vis.setup()
+     *
+     * // Setup with auto snapshot determined by the test meta
+     * vis.setup({
+     * 	auto: async ({ meta }) => meta['darkOnly'],
+     * })
+     *
+     * // Setup with multiple auto snapshots
+     * vis.setup({
+     *   auto: {
+     *     async light() { document.body.classList.remove('dark') },
+     *     async dark() { document.body.classList.add('dark') },
+     *   }
+     * })
+     * ```
+     */
+    setup(options?: {
+        auto?: boolean | (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(options: SnapshotMeta<C> & M & GM) => boolean | Promise<boolean>) | Record<string, boolean | (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(options: SnapshotMeta<C> & M & GM) => boolean | Promise<boolean>)>;
+    }): void;
+    /**
+     * @deprecated Use `vis.setup()` instead.
+     */
+    presets: {
+        /**
+         * @deprecated Use `vis.setup()` instead.
+         *
+         * Enable visual testing.
+         *
+         * auto snapshot is turned off by default.
+         * You can specify the test to take a snapshot during `afterEach()` hook with `setAutoSnapshotOptions()`.
+         */
+        enable(): void;
+        /**
+         * @deprecated Use `vis.setup()` instead.
+         *
+         * Enable visual testing.
+         *
+         * `setAutoSnapshotOptions` will have no effect in this preset.
+         */
+        manual(): void;
+        /**
+         * @deprecated Use `vis.setup()` instead.
+         *
+         * Enable automatic visual testing.
+         *
+         * This will take a snapshot after each test.
+         */
+        auto(): void;
+        /**
+         * @deprecated Use `vis.setup()` instead.
+         *
+         * Enable automatic visual testing with multiple themes.
+         *
+         * This will take a snapshot after each test for each theme.
+         *
+         * @param themes A record of theme names and their setup functions.
+         *
+         * @example
+         * ```ts
+         * vis().presets.theme({
+         *  light() { document.body.classList.add('light') },
+         *  dark() { document.body.classList.add('dark') },
+         * })
+         * ```
+         */
+        theme<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(themes: Record<string, boolean | ((options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)>): void;
+    };
+    beforeAll: {
+        setup(): Promise<void>;
+    };
+    afterEach: {
+        matchImageSnapshot(): Promise<void>;
+        matchPerTheme<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(themes: Record<string, boolean | ((options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)>): () => Promise<void>;
+    };
+};
+export declare function createVis<GM extends Record<string, any> | unknown = unknown>(commands: SetupVisSuiteCommand): VisClientConfigurator<GM>;
+//# sourceMappingURL=create_vis.d.ts.map

package/esm/client/setup/create_vis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../../src/client/setup/create_vis.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AACpF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAI7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAGvD;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,OAAO,IAAI;IACvF;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE;QACf,IAAI,CAAC,EACF,OAAO,GACP,CAAC,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,OAAO,EAC/E,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,KAC5B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,GAChC,MAAM,CACN,MAAM,EACJ,OAAO,GACP,CAAC,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,OAAO,EAC/E,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,KAC5B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CACjC,CAAA;KACJ,GAAG,IAAI,CAAA;IACR;;OAEG;IACH,OAAO,EAAE;QACR;;;;;;;WAOG;QACH,MAAM,IAAI,IAAI,CAAA;QACd;;;;;;WAMG;QACH,MAAM,IAAI,IAAI,CAAA;QACd;;;;;;WAMG;QACH,IAAI,IAAI,IAAI,CAAA;QACZ;;;;;;;;;;;;;;;;WAgBG;QACH,KAAK,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,OAAO,EAClF,MAAM,EAAE,MAAM,CACb,MAAM,EACN,OAAO,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,CACpG,GACC,IAAI,CAAA;KACP,CAAA;IACD,SAAS,EAAE;QACV,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;KACtB,CAAA;IACD,SAAS,EAAE;QACV,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;QACnC,aAAa,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,OAAO,EAC1F,MAAM,EAAE,MAAM,CACb,MAAM,EACN,OAAO,GAAG,CAAC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,CACpG,GACC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;KACtB,CAAA;CACD,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,oBAAoB,6BAmG3G"}

package/esm/{setup → client/setup}/create_vis.js

@@ -1,12 +1,34 @@
 import dedent from 'dedent';
 import { afterEach, beforeAll } from 'vitest';
-import { toTaskId } from "../client.js";
-import { ctx } from "../client/ctx.js";
-import { shouldTakeSnapshot } from "../client/should_take_snapshot.js";
-import { enableAuto, extractAutoSnapshotOptions } from "../client/snapshot_options.js";
+import { extractAutoSnapshotOptions, setAutoSnapshotOptions } from "../auto_snapshot_options.js";
+import { ctx } from "../ctx.js";
+import { shouldTakeSnapshot } from "../should_take_snapshot.js";
+import { toTaskId } from "../task_id.js";
 export function createVis(commands) {
-    let subjectDataTestId;
+    let subject;
     const vis = {
+        setup(options) {
+            if (!options || options.auto === false) {
+                beforeAll(vis.beforeAll.setup);
+            }
+            else {
+                beforeAll(async () => {
+                    await vis.beforeAll.setup();
+                    setAutoSnapshotOptions(true);
+                });
+            }
+            if (typeof options?.auto === 'function') {
+                afterEach(vis.afterEach.matchPerTheme({
+                    auto: options.auto,
+                }));
+            }
+            else if (typeof options?.auto === 'object') {
+                afterEach(vis.afterEach.matchPerTheme(options.auto));
+            }
+            else {
+                afterEach(vis.afterEach.matchImageSnapshot);
+            }
+        },
         presets: {
             enable() {
                 beforeAll(vis.beforeAll.setup);
@@ -16,30 +38,28 @@ export function createVis(commands) {
                 beforeAll(vis.beforeAll.setup);
             },
             auto() {
-                beforeAll(vis.beforeAll.setup);
+                beforeAll(async () => {
+                    await vis.beforeAll.setup();
+                    setAutoSnapshotOptions(true);
+                });
                 afterEach(vis.afterEach.matchImageSnapshot);
-                enableAuto();
             },
             theme(themes) {
-                beforeAll(vis.beforeAll.setup);
+                beforeAll(async () => {
+                    await vis.beforeAll.setup();
+                    setAutoSnapshotOptions(true);
+                });
                 afterEach(vis.afterEach.matchPerTheme(themes));
             },
         },
         beforeAll: {
             async setup() {
-                subjectDataTestId = (await commands.setupVisSuite()).subjectDataTestId;
+                subject = (await commands.setupVisSuite()).subject;
             },
         },
         afterEach: {
             async matchImageSnapshot() {
-                const test = ctx.getCurrentTest();
-                if ((test?.result?.errors?.length ?? 0) > 0)
-                    return;
-                const meta = extractAutoSnapshotOptions(test);
-                if (!shouldTakeSnapshot(meta))
-                    return;
-                test.meta.vis = { ...test.meta.vis, isAutoSnapshot: true };
-                await test.context.expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId)).toMatchImageSnapshot(meta);
+                return vis.afterEach.matchPerTheme({ async auto() { } })();
             },
             matchPerTheme(themes) {
                 return async function matchImageSnapshot() {
@@ -53,16 +73,13 @@ export function createVis(commands) {
                     for (const themeId in themes) {
                         try {
                             await new Promise((a) => setTimeout(a, 10));
-                            const r = await themes[themeId](meta);
+                            const theme = themes[themeId];
+                            const r = typeof theme === 'function' ? await theme(meta) : theme;
                             if (r === false)
                                 continue;
-                            await test.context
-                                .expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId))
-                                .toMatchImageSnapshot({
+                            await test.context.expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
                                 ...meta,
-                                customizeSnapshotId: meta?.customizeSnapshotId
-                                    ? ({ id, index }) => `${meta.customizeSnapshotId({ id, index, isAutoSnapshot: true })}-${themeId}`
-                                    : ({ id }) => `${id}-${themeId}`,
+                                snapshotKey: meta?.snapshotKey ?? themeId,
                             });
                         }
                         catch (error) {
@@ -87,11 +104,6 @@ export function createVis(commands) {
     };
     return vis;
 }
-function getSubject(subjectDataTestId) {
-    if (subjectDataTestId) {
-        const subject = document.querySelector(`[data-testid="${subjectDataTestId}"]`);
-        if (subject)
-            return subject;
-    }
-    return document.body;
+function getSubject(selectors) {
+    return selectors ? (document.querySelector(selectors) ?? document.body) : document.body;
 }