vitest-plugin-vis 1.2.0 → 1.3.0

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

@@ -0,0 +1,8 @@
+import type { ImageSnapshotMatcher } from './to_match_image_snapshot.types.ts';
+declare global {
+    namespace jest {
+        interface Matchers<R, T> extends ImageSnapshotMatcher {
+        }
+    }
+}
+//# sourceMappingURL=augment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"augment.d.ts","sourceRoot":"","sources":["../../../src/client/expect/augment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAE9E,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,IAAI,CAAC;QAEd,UAAU,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,oBAAoB;SAAG;KACxD;CACD"}

package/esm/client/expect/augment.js

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

package/esm/client/expect/extend.d.ts

@@ -1,8 +1,2 @@
-import type { ImageSnapshotMatcher } from './to_match_image_snapshot.types.ts';
-declare global {
-    namespace jest {
-        interface Matchers<R, T> extends ImageSnapshotMatcher {
-        }
-    }
-}
+import './augment.ts';
 //# sourceMappingURL=extend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"extend.d.ts","sourceRoot":"","sources":["../../../src/client/expect/extend.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAE9E,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,IAAI,CAAC;QAEd,UAAU,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,oBAAoB;SAAG;KACxD;CACD"}
+{"version":3,"file":"extend.d.ts","sourceRoot":"","sources":["../../../src/client/expect/extend.ts"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAA"}

package/esm/client/expect/extend.js

@@ -1,3 +1,4 @@
 import { expect } from 'vitest';
 import { toMatchImageSnapshot } from "./to_match_image_snapshot.js";
+import "./augment.js";
 expect.extend({ toMatchImageSnapshot });

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":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAI5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAA;AAErF,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;AAI5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAA;AAErF,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,5 +1,6 @@
+import { commands } from '@vitest/browser/context';
 import { ctx } from "../ctx.js";
-import { matchImageSnapshot } from "../match_image_snapshot.js";
+import { imageSnapshotMatcher } from "../match_image_snapshot.js";
 import { success } from "./expectation_result.js";
 export function toMatchImageSnapshot(
 /**
@@ -15,5 +16,5 @@ subject, options) {
         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 matchImageSnapshot(test, subject, options).then(() => success);
+    return imageSnapshotMatcher(commands)(test, subject, options).then(() => success);
 }

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

@@ -3,5 +3,10 @@ export interface ImageSnapshotMatcher {
     toMatchImageSnapshot(options?: ToMatchImageSnapshotOptions | undefined): Promise<void>;
 }
 export interface ToMatchImageSnapshotOptions extends ImageSnapshotTimeoutOptions, ImageSnapshotIdOptions, ImageSnapshotCompareOptions {
+    /**
+     * Expect the matcher to fail.
+     * If it passes, it will throw an error with details.
+     */
+    expectToFail?: boolean | undefined;
 }
 //# sourceMappingURL=to_match_image_snapshot.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"to_match_image_snapshot.types.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,oBAAoB;IACpC,oBAAoB,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACtF;AAED,MAAM,WAAW,2BAChB,SAAQ,2BAA2B,EAClC,sBAAsB,EACtB,2BAA2B;CAAG"}
+{"version":3,"file":"to_match_image_snapshot.types.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,oBAAoB;IACpC,oBAAoB,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACtF;AAED,MAAM,WAAW,2BAChB,SAAQ,2BAA2B,EAClC,sBAAsB,EACtB,2BAA2B;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAClC"}

package/esm/client/match_image_snapshot.d.ts

@@ -1,6 +1,9 @@
 import type { Task } from 'vitest';
+import type { ImageSnapshotNextIndexCommand } from '../commands.ts';
+import type { PrepareImageSnapshotComparisonCommand } from '../server/commands/prepare_image_snapshot_comparison.ts';
+import type { WriteImageSnapshotCommand } from '../server/commands/write_image_snapshot.ts';
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
-export declare function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions): Promise<void>;
+export declare function imageSnapshotMatcher(commands: PrepareImageSnapshotComparisonCommand & WriteImageSnapshotCommand & ImageSnapshotNextIndexCommand): (test: Task, subject: any, options?: ToMatchImageSnapshotOptions) => Promise<void>;
 /**
  * @deprecated internalized. Use `matchImageSnapshot` directly instead.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/match_image_snapshot.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAIlC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAO5F,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,2BAA2B,iBAgDvG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,GAAG,OAOrD"}
+{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/match_image_snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,yDAAyD,CAAA;AACpH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAI3F,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAO5F,wBAAgB,oBAAoB,CACnC,QAAQ,EAAE,qCAAqC,GAAG,yBAAyB,GAAG,6BAA6B,UAE5D,IAAI,WAAW,GAAG,YAAY,2BAA2B,mBA8DxG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,GAAG,OAOrD"}

package/esm/client/match_image_snapshot.js

@@ -1,4 +1,3 @@
-import { commands } from '@vitest/browser/context';
 import dedent from 'dedent';
 import { resolve } from 'pathe';
 import { isBase64String } from "../shared/base64.js";
@@ -9,37 +8,49 @@ import { prettifyOptions } from "./match_image_snapshot.logic.js";
 import { convertElementToCssSelector } from "./selector.js";
 import { toTaskId } from "./task_id.js";
 import { server } from "./vitest_browser_context_proxy.js";
-export async function matchImageSnapshot(test, subject, options) {
-    const taskId = toTaskId(test);
-    const info = await commands.prepareImageSnapshotComparison(taskId, parseImageSnapshotSubject(subject), options?.customizeSnapshotId ? await parseImageSnapshotOptions(taskId, options) : options);
-    if (!info)
-        return;
-    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)
-        return;
-    if (server.config.snapshotOptions.updateSnapshot === 'all') {
-        await writeSnapshot(info.baselinePath, resultImage);
-        return;
-    }
-    await writeSnapshot(info.diffPath, diffImage);
-    throw new Error(dedent `Snapshot \`${taskId}\` mismatched
+export function imageSnapshotMatcher(commands) {
+    return async function matchImageSnapshot(test, subject, options) {
+        const taskId = toTaskId(test);
+        const info = await commands.prepareImageSnapshotComparison(taskId, parseImageSnapshotSubject(subject), options?.customizeSnapshotId ? await parseImageSnapshotOptions(commands, taskId, options) : options);
+        if (!info)
+            return;
+        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?.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`}.`}
+							Options:    ${prettifyOptions(options)}
+							DiffAmount: ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
 
-			Options:    ${prettifyOptions(options)}
+							Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+							Actual:     ${resolve(info.projectRoot, info.resultPath)}`);
+            }
+            return;
+        }
+        if (server.config.snapshotOptions.updateSnapshot === 'all') {
+            await writeSnapshot(commands, info.baselinePath, resultImage);
+            return;
+        }
+        await writeSnapshot(commands, info.diffPath, diffImage);
+        throw new Error(dedent `Snapshot \`${taskId}\` mismatched
 
-			Expected:   ${resolve(info.projectRoot, info.baselinePath)}
-			Actual:     ${resolve(info.projectRoot, info.resultPath)}
-			Difference: ${resolve(info.projectRoot, info.diffPath)}`);
+					${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`}.`}
+
+					Options:    ${prettifyOptions(options)}
+
+					Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+					Actual:     ${resolve(info.projectRoot, info.resultPath)}
+					Difference: ${resolve(info.projectRoot, info.diffPath)}`);
+    };
 }
 /**
  * @deprecated internalized. Use `matchImageSnapshot` directly instead.
@@ -53,11 +64,11 @@ export function parseImageSnapshotSubject(subject) {
         return subject;
     throw new Error(`'toMatchImageSnapshot()' expects the subject to be an element, locator, or image encoded in base64 string, but got: ${subject}`);
 }
-async function writeSnapshot(path, image) {
+async function writeSnapshot(commands, path, image) {
     const content = (await toDataURL(image)).split(',')[1];
     return commands.writeImageSnapshot(path, content);
 }
-async function parseImageSnapshotOptions(taskId, options) {
+async function parseImageSnapshotOptions(commands, taskId, options) {
     const index = await commands.imageSnapshotNextIndex(taskId);
     const { customizeSnapshotId, ...rest } = options;
     const snapshotFileId = customizeSnapshotId(taskId, index);

package/esm/client/match_image_snapshot.logic.js

@@ -2,7 +2,7 @@ export function prettifyOptions(options) {
     if (!options)
         return 'none';
     return [
-        `failureThreshold: ${options.failureThreshold ?? 0} ${options.failureThresholdType ?? 'pixel'}`,
+        `failureThreshold: ${options.failureThreshold ?? 0} ${options.failureThresholdType ?? 'pixels'}`,
         options.diffOptions ? `diffOptions: ${JSON.stringify(options.diffOptions)}` : '',
         options.timeout ? `timeout: ${options.timeout} ms` : '',
     ]

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

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

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

@@ -0,0 +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"}

package/esm/client/page/augment.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"extend.d.ts","sourceRoot":"","sources":["../../../src/client/page/extend.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,sBAAsB,EAAoB,MAAM,yBAAyB,CAAA;AAEvF,OAAO,QAAQ,yBAAyB,CAAC;IACxC,UAAU,WAAY,SAAQ,sBAAsB;KAAG;CACvD"}
+{"version":3,"file":"extend.d.ts","sourceRoot":"","sources":["../../../src/client/page/extend.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAA"}

package/esm/client/page/extend.js

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

package/esm/client/selector.d.ts

@@ -3,7 +3,5 @@
  *
  * @see https://github.com/vitest-dev/vitest/blob/main/packages/browser/src/client/utils.ts
  */
-import type { Locator } from '@vitest/browser/context';
-export declare function convertToSelector(elementOrLocator: Element | Locator): string;
 export declare function convertElementToCssSelector(element: Element): string;
 //# sourceMappingURL=selector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../src/client/selector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEtD,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAW7E;AACD,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,OAAO,UAM3D"}
+{"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../src/client/selector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,OAAO,UAM3D"}

package/esm/client/selector.js

@@ -1,15 +1,8 @@
-export function convertToSelector(elementOrLocator) {
-    if (!elementOrLocator) {
-        throw new Error('Expected element or locator to be defined.');
-    }
-    if (elementOrLocator instanceof Element) {
-        return convertElementToCssSelector(elementOrLocator);
-    }
-    if ('selector' in elementOrLocator) {
-        return elementOrLocator.selector;
-    }
-    throw new Error('Expected element or locator to be an instance of Element or Locator.');
-}
+/**
+ * Most of the code in this file is copied from Vitest.
+ *
+ * @see https://github.com/vitest-dev/vitest/blob/main/packages/browser/src/client/utils.ts
+ */
 export function convertElementToCssSelector(element) {
     if (!element || !(element instanceof Element)) {
         throw new Error(`Expected DOM element to be an instance of Element, received ${typeof element}`);

package/esm/commands.d.ts

@@ -2,4 +2,6 @@ export * from './server/commands/has_image_snapshot.ts';
 export * from './server/commands/image_snapshot_next_index.ts';
 export * from './server/commands/match_image_snapshot.ts';
 export * from './server/commands/setup_vis_suite.ts';
+export * from './server/commands/prepare_image_snapshot_comparison.ts';
+export * from './server/commands/write_image_snapshot.ts';
 //# sourceMappingURL=commands.d.ts.map

package/esm/commands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../src/commands.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAA;AACvD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,2CAA2C,CAAA;AACzD,cAAc,sCAAsC,CAAA"}
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../src/commands.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAA;AACvD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,2CAA2C,CAAA;AACzD,cAAc,sCAAsC,CAAA;AACpD,cAAc,wDAAwD,CAAA;AACtE,cAAc,2CAA2C,CAAA"}

package/esm/commands.js

@@ -2,3 +2,5 @@ export * from "./server/commands/has_image_snapshot.js";
 export * from "./server/commands/image_snapshot_next_index.js";
 export * from "./server/commands/match_image_snapshot.js";
 export * from "./server/commands/setup_vis_suite.js";
+export * from "./server/commands/prepare_image_snapshot_comparison.js";
+export * from "./server/commands/write_image_snapshot.js";

package/esm/index.d.ts

@@ -1,2 +1,4 @@
+import './client/expect/augment.ts';
+import './client/page/augment.ts';
 export * from './client/snapshot_options.ts';
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,cAAc,8BAA8B,CAAA"}

package/esm/index.js

@@ -1,2 +1,4 @@
 // `vitest-plugin-vis` provides code that can be used in test files.
+import "./client/expect/augment.js";
+import "./client/page/augment.js";
 export * from "./client/snapshot_options.js";

package/esm/presets/auto.d.ts

@@ -1,2 +1,3 @@
-export {};
+import '../client/expect/extend.ts';
+import '../client/page/extend.ts';
 //# sourceMappingURL=auto.d.ts.map

package/esm/presets/auto.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto.d.ts","sourceRoot":"","sources":["../../src/presets/auto.ts"],"names":[],"mappings":""}
+{"version":3,"file":"auto.d.ts","sourceRoot":"","sources":["../../src/presets/auto.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA"}

package/esm/presets/auto.js

@@ -1,2 +1,4 @@
 import { vis } from "../setup/vis.js";
+import "../client/expect/extend.js";
+import "../client/page/extend.js";
 vis.presets.auto();

package/esm/presets/manual.d.ts

@@ -1,2 +1,3 @@
-export {};
+import '../client/expect/extend.ts';
+import '../client/page/extend.ts';
 //# sourceMappingURL=manual.d.ts.map

package/esm/presets/manual.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manual.d.ts","sourceRoot":"","sources":["../../src/presets/manual.ts"],"names":[],"mappings":""}
+{"version":3,"file":"manual.d.ts","sourceRoot":"","sources":["../../src/presets/manual.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA"}

package/esm/presets/manual.js

@@ -1,2 +1,4 @@
 import { vis } from "../setup/vis.js";
+import "../client/expect/extend.js";
+import "../client/page/extend.js";
 vis.presets.manual();

package/esm/server/vis_context.logic.d.ts

@@ -50,7 +50,6 @@ export declare function createVisContext(): {
         };
     };
 };
-export declare function getSuiteId(state: VisState, testPath: string, options: VisOptions): string;
 export declare function createSuite(state: VisState, testPath: string, options: VisOptions): {
     suiteId: string;
     suite: {
@@ -60,4 +59,5 @@ export declare function createSuite(state: VisState, testPath: string, options:
         tasks: {};
     };
 };
+export declare function getSuiteId(state: VisState, testPath: string, options: VisOptions): string;
 //# sourceMappingURL=vis_context.logic.d.ts.map

package/esm/server/vis_context.logic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vis_context.logic.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.logic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAKpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE;QACR,MAAM,EAAE;YACP,IAAI,EAAE,MAAM,CAAA;YACZ,eAAe,EAAE;gBAChB,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;aACtC,CAAA;YACD,WAAW,EAAE,MAAM,CAAA;YACnB,WAAW,EAAE,MAAM,CAAA;SACnB,CAAA;KACD,CAAA;IACD,QAAQ,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,gBAAgB;yBAMV,UAAU;;;;IAY9B;;;;OAIG;wBACuB,4BAA4B;8BAY5B,MAAM,QAAQ,MAAM,YAAY;QAAE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;;;;;2BAiB1E,MAAM,UAAU,MAAM;+BAGlB,MAAM,UAAU,MAAM,kBAAkB,MAAM,GAAG,SAAS;8BAI3D;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,kBAAkB,MAAM,GAAG,SAAS;2BAMlF,MAAM,UAAU,MAAM;;;;;;;;;;EAe9C;AAuBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,UAEhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;;;;;;;;EAWjF"}
+{"version":3,"file":"vis_context.logic.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.logic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAKpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE;QACR,MAAM,EAAE;YACP,IAAI,EAAE,MAAM,CAAA;YACZ,eAAe,EAAE;gBAChB,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;aACtC,CAAA;YACD,WAAW,EAAE,MAAM,CAAA;YACnB,WAAW,EAAE,MAAM,CAAA;SACnB,CAAA;KACD,CAAA;IACD,QAAQ,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,gBAAgB;yBAMV,UAAU;;;;IAY9B;;;;OAIG;wBACuB,4BAA4B;8BAY5B,MAAM,QAAQ,MAAM,YAAY;QAAE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;;;;;2BAiB1E,MAAM,UAAU,MAAM;+BAGlB,MAAM,UAAU,MAAM,kBAAkB,MAAM,GAAG,SAAS;8BAI3D;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,kBAAkB,MAAM,GAAG,SAAS;2BAMlF,MAAM,UAAU,MAAM;;;;;;;;;;EAe9C;AAuBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;;;;;;;;EAWjF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,UAEhF"}

package/esm/server/vis_context.logic.js

@@ -99,9 +99,6 @@ async function setupState(suite, visOptions) {
     await Promise.allSettled([ctx.rimraf(join(state.snapshotDiffDir)), ctx.rimraf(join(state.snapshotResultDir))]);
     return state;
 }
-export function getSuiteId(state, testPath, options) {
-    return getSnapshotSubpath(relative(state.projectPath, testPath), options);
-}
 export function createSuite(state, testPath, options) {
     const suiteId = getSuiteId(state, testPath, options);
     return {
@@ -114,3 +111,6 @@ export function createSuite(state, testPath, options) {
         },
     };
 }
+export function getSuiteId(state, testPath, options) {
+    return getSnapshotSubpath(relative(state.projectPath, testPath), options);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",

package/readme.md

@@ -111,6 +111,24 @@ vis.presets.theme({
 })
 ```
 
+### TypeScript Configuration
+
+The main usage of this addon is to use the `toMatchImageSnapshot` matcher.
+
+Since it is exposed under the `expect` object of `vitest`,
+you typically do not need to import `storybook-addon-vis` directly.
+
+Because of this, TypeScript may not recognize the matcher.
+To address this, you can add the following to your `tsconfig.json`:
+
+```json
+{
+	"compilerOptions": {
+		"types": ["vitest-plugin-vis"]
+	}
+}
+```
+
 ## Usage
 
 ### Auto Snapshot

package/src/client/expect/augment.ts

@@ -0,0 +1,8 @@
+import type { ImageSnapshotMatcher } from './to_match_image_snapshot.types.ts'
+
+declare global {
+	namespace jest {
+		// biome-ignore lint/correctness/noUnusedVariables: augmentation must have matching type params.
+		interface Matchers<R, T> extends ImageSnapshotMatcher {}
+	}
+}

package/src/client/expect/extend.ts

@@ -1,12 +1,5 @@
 import { expect } from 'vitest'
 import { toMatchImageSnapshot } from './to_match_image_snapshot.ts'
-import type { ImageSnapshotMatcher } from './to_match_image_snapshot.types.ts'
-
-declare global {
-	namespace jest {
-		// biome-ignore lint/correctness/noUnusedVariables: augmentation must have matching type params.
-		interface Matchers<R, T> extends ImageSnapshotMatcher {}
-	}
-}
+import './augment.ts'
 
 expect.extend({ toMatchImageSnapshot })

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,6 +1,7 @@
+import { commands } from '@vitest/browser/context'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import { ctx } from '../ctx.ts'
-import { matchImageSnapshot } from '../match_image_snapshot.ts'
+import { imageSnapshotMatcher } from '../match_image_snapshot.ts'
 import { success } from './expectation_result.ts'
 import type { ToMatchImageSnapshotOptions } from './to_match_image_snapshot.types.ts'
 
@@ -24,5 +25,5 @@ export function toMatchImageSnapshot(
 		)
 	}
 
-	return matchImageSnapshot(test, subject, options).then(() => success)
+	return imageSnapshotMatcher(commands)(test, subject, options).then(() => success)
 }

package/src/client/expect/to_match_image_snapshot.types.ts

@@ -11,4 +11,10 @@ export interface ImageSnapshotMatcher {
 export interface ToMatchImageSnapshotOptions
 	extends ImageSnapshotTimeoutOptions,
 		ImageSnapshotIdOptions,
-		ImageSnapshotCompareOptions {}
+		ImageSnapshotCompareOptions {
+	/**
+	 * Expect the matcher to fail.
+	 * If it passes, it will throw an error with details.
+	 */
+	expectToFail?: boolean | undefined
+}

package/src/client/match_image_snapshot.logic.ts

@@ -4,7 +4,7 @@ export function prettifyOptions(options: ToMatchImageSnapshotOptions | undefined
 	if (!options) return 'none'
 
 	return [
-		`failureThreshold: ${options.failureThreshold ?? 0} ${options.failureThresholdType ?? 'pixel'}`,
+		`failureThreshold: ${options.failureThreshold ?? 0} ${options.failureThresholdType ?? 'pixels'}`,
 		options.diffOptions ? `diffOptions: ${JSON.stringify(options.diffOptions)}` : '',
 		options.timeout ? `timeout: ${options.timeout} ms` : '',
 	]

package/src/client/match_image_snapshot.ts

@@ -1,7 +1,9 @@
-import { commands } from '@vitest/browser/context'
 import dedent from 'dedent'
 import { resolve } from 'pathe'
 import type { Task } from 'vitest'
+import type { ImageSnapshotNextIndexCommand } from '../commands.ts'
+import type { PrepareImageSnapshotComparisonCommand } from '../server/commands/prepare_image_snapshot_comparison.ts'
+import type { WriteImageSnapshotCommand } from '../server/commands/write_image_snapshot.ts'
 import { isBase64String } from '../shared/base64.ts'
 import { compareImage } from '../shared/compare_image.ts'
 import { alignImagesToSameSize } from './align_images.ts'
@@ -12,54 +14,71 @@ import { convertElementToCssSelector } from './selector.ts'
 import { toTaskId } from './task_id.ts'
 import { server } from './vitest_browser_context_proxy.ts'
 
-export async function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions) {
-	const taskId = toTaskId(test)
-	const info = await commands.prepareImageSnapshotComparison(
-		taskId,
-		parseImageSnapshotSubject(subject),
-		options?.customizeSnapshotId ? await parseImageSnapshotOptions(taskId, options) : options,
-	)
+export function imageSnapshotMatcher(
+	commands: PrepareImageSnapshotComparisonCommand & WriteImageSnapshotCommand & ImageSnapshotNextIndexCommand,
+) {
+	return async function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions) {
+		const taskId = toTaskId(test)
+		const info = await commands.prepareImageSnapshotComparison(
+			taskId,
+			parseImageSnapshotSubject(subject),
+			options?.customizeSnapshotId ? await parseImageSnapshotOptions(commands, taskId, options) : options,
+		)
 
-	if (!info) return
+		if (!info) return
 
-	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) return
-	if (server.config.snapshotOptions.updateSnapshot === 'all') {
-		await writeSnapshot(info.baselinePath, resultImage)
-		return
-	}
+		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.
 
-	await writeSnapshot(info.diffPath, diffImage)
-
-	throw new Error(
-		dedent`Snapshot \`${taskId}\` mismatched
+							Options:    ${prettifyOptions(options)}
+							DiffAmount: ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
 
-			${
-				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`}.`
+							Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+							Actual:     ${resolve(info.projectRoot, info.resultPath)}`,
+				)
 			}
+			return
+		}
+		if (server.config.snapshotOptions.updateSnapshot === 'all') {
+			await writeSnapshot(commands, info.baselinePath, resultImage)
+			return
+		}
 
-			Options:    ${prettifyOptions(options)}
+		await writeSnapshot(commands, info.diffPath, diffImage)
 
-			Expected:   ${resolve(info.projectRoot, info.baselinePath)}
-			Actual:     ${resolve(info.projectRoot, info.resultPath)}
-			Difference: ${resolve(info.projectRoot, info.diffPath)}`,
-	)
+		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`}.`
+					}
+
+					Options:    ${prettifyOptions(options)}
+
+					Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+					Actual:     ${resolve(info.projectRoot, info.resultPath)}
+					Difference: ${resolve(info.projectRoot, info.diffPath)}`,
+		)
+	}
 }
 
 /**
@@ -74,12 +93,16 @@ export function parseImageSnapshotSubject(subject: any) {
 	)
 }
 
-async function writeSnapshot(path: string, image: ImageData) {
+async function writeSnapshot(commands: WriteImageSnapshotCommand, path: string, image: ImageData) {
 	const content = (await toDataURL(image)).split(',')[1]!
 	return commands.writeImageSnapshot(path, content)
 }
 
-async function parseImageSnapshotOptions(taskId: string, options: ToMatchImageSnapshotOptions) {
+async function parseImageSnapshotOptions(
+	commands: ImageSnapshotNextIndexCommand,
+	taskId: string,
+	options: ToMatchImageSnapshotOptions,
+) {
 	const index = await commands.imageSnapshotNextIndex(taskId)
 	const { customizeSnapshotId, ...rest } = options
 	const snapshotFileId = customizeSnapshotId!(taskId, index)

package/src/client/page/augment.ts

@@ -0,0 +1,5 @@
+import type { HasImageSnapshotAction } from './has_image_snapshot.ts'
+
+declare module '@vitest/browser/context' {
+	interface BrowserPage extends HasImageSnapshotAction {}
+}

package/src/client/page/extend.ts

@@ -1,8 +1,5 @@
 import { page } from '@vitest/browser/context'
-import { type HasImageSnapshotAction, hasImageSnapshot } from './has_image_snapshot.ts'
-
-declare module '@vitest/browser/context' {
-	interface BrowserPage extends HasImageSnapshotAction {}
-}
+import './augment.ts'
+import { hasImageSnapshot } from './has_image_snapshot.ts'
 
 page.extend({ hasImageSnapshot })

package/src/client/selector.ts

@@ -3,20 +3,7 @@
  *
  * @see https://github.com/vitest-dev/vitest/blob/main/packages/browser/src/client/utils.ts
  */
-import type { Locator } from '@vitest/browser/context'
 
-export function convertToSelector(elementOrLocator: Element | Locator): string {
-	if (!elementOrLocator) {
-		throw new Error('Expected element or locator to be defined.')
-	}
-	if (elementOrLocator instanceof Element) {
-		return convertElementToCssSelector(elementOrLocator)
-	}
-	if ('selector' in elementOrLocator) {
-		return (elementOrLocator as any).selector
-	}
-	throw new Error('Expected element or locator to be an instance of Element or Locator.')
-}
 export function convertElementToCssSelector(element: Element) {
 	if (!element || !(element instanceof Element)) {
 		throw new Error(`Expected DOM element to be an instance of Element, received ${typeof element}`)

package/src/commands.ts

@@ -2,3 +2,5 @@ export * from './server/commands/has_image_snapshot.ts'
 export * from './server/commands/image_snapshot_next_index.ts'
 export * from './server/commands/match_image_snapshot.ts'
 export * from './server/commands/setup_vis_suite.ts'
+export * from './server/commands/prepare_image_snapshot_comparison.ts'
+export * from './server/commands/write_image_snapshot.ts'

package/src/index.ts

@@ -1,2 +1,5 @@
 // `vitest-plugin-vis` provides code that can be used in test files.
+import './client/expect/augment.ts'
+import './client/page/augment.ts'
+
 export * from './client/snapshot_options.ts'

package/src/presets/auto.ts

@@ -1,3 +1,5 @@
 import { vis } from '../setup/vis.ts'
+import '../client/expect/extend.ts'
+import '../client/page/extend.ts'
 
 vis.presets.auto()

package/src/presets/manual.ts

@@ -1,3 +1,5 @@
 import { vis } from '../setup/vis.ts'
+import '../client/expect/extend.ts'
+import '../client/page/extend.ts'
 
 vis.presets.manual()

package/src/server/vis_context.logic.ts

@@ -123,10 +123,6 @@ async function setupState(suite: PartialBrowserCommandContext, visOptions: VisOp
 	return state
 }
 
-export function getSuiteId(state: VisState, testPath: string, options: VisOptions) {
-	return getSnapshotSubpath(relative(state.projectPath, testPath), options)
-}
-
 export function createSuite(state: VisState, testPath: string, options: VisOptions) {
 	const suiteId = getSuiteId(state, testPath, options)
 	return {
@@ -139,3 +135,7 @@ export function createSuite(state: VisState, testPath: string, options: VisOptio
 		},
 	}
 }
+
+export function getSuiteId(state: VisState, testPath: string, options: VisOptions) {
+	return getSnapshotSubpath(relative(state.projectPath, testPath), options)
+}