vitest-plugin-vis 1.6.5 → 1.7.0

package/esm/client/snapshot_options.d.ts

@@ -2,6 +2,7 @@ import type { AutoSnapshotOptions, ComparisonMethod } from '../shared/types.ts';
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> & AutoSnapshotOptions & {
     enable?: boolean | undefined;
+    [key: string]: unknown;
 };
 type Suite = {
     meta: Record<string, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,gBAAgB,IAAI,2BAA2B,CAAC,CAAC,CAAC,GACpF,mBAAmB,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5B,CAAA;AAEF,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;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAChE,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAC7B,IAAI,CAAA;AACP,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,IAAI,CAAA"}
+{"version":3,"file":"snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,gBAAgB,IAAI,2BAA2B,CAAC,CAAC,CAAC,GACpF,mBAAmB,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACtB,CAAA;AAEF,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;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAChE,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAC7B,IAAI,CAAA;AACP,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,IAAI,CAAA"}

package/esm/client/snapshot_options.internal.d.ts

@@ -1,3 +1,3 @@
 import type { MetaTask, SnapshotMeta } from './snapshot_options.ts';
-export declare function getAutoSnapshotOptions(task: MetaTask): SnapshotMeta<any> | undefined;
+export declare function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined;
 //# sourceMappingURL=snapshot_options.internal.d.ts.map

package/esm/client/snapshot_options.internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot_options.internal.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.internal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEnE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,SAAS,CAkBpF"}
+{"version":3,"file":"snapshot_options.internal.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.internal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEnE,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS,CAkBrH"}

package/esm/setup/create_vis.d.ts

@@ -1,5 +1,6 @@
+import { type SnapshotMeta } from '../client.ts';
 import type { SetupVisSuiteCommand } from '../server/commands/setup_vis_suite.ts';
-export declare function createVis(commands: SetupVisSuiteCommand): {
+export declare function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand): {
     presets: {
         /**
          * Enable manual visual testing.
@@ -26,14 +27,14 @@ export declare function createVis(commands: SetupVisSuiteCommand): {
          * })
          * ```
          */
-        theme(themes: Record<string, () => void | Promise<void>>): void;
+        theme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>): void;
     };
     beforeAll: {
         setup(): Promise<void>;
     };
     afterEach: {
         matchImageSnapshot(): Promise<void>;
-        matchPerTheme(themes: Record<string, () => Promise<void> | void>): () => Promise<void>;
+        matchPerTheme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
     };
 };
 //# sourceMappingURL=create_vis.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../src/setup/create_vis.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAEjF,wBAAgB,SAAS,CAAC,QAAQ,EAAE,oBAAoB;;QAOrD;;WAEG;;QAIH;;;;WAIG;;QAKH;;;;;;;;;;;;;;WAcG;sBACW,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;;;;;;;8BAqBlC,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;;EA0ClE"}
+{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../src/setup/create_vis.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,cAAc,CAAA;AAI1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAEjF,wBAAgB,SAAS,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB;;QAOlF;;WAEG;;QAIH;;;;WAIG;;QAKH;;;;;;;;;;;;;;WAcG;sBACW,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;;;;;;;8BAqBzE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;;EA4CzG"}

package/esm/setup/create_vis.js

@@ -72,7 +72,10 @@ export function createVis(commands) {
                     const errors = [];
                     for (const themeId in themes) {
                         try {
-                            await new Promise((a) => setTimeout(() => a(themes[themeId]()), 10));
+                            await new Promise((a) => setTimeout(a, 10));
+                            const r = await themes[themeId](meta);
+                            if (r === false)
+                                continue;
                             await test.context
                                 .expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId))
                                 .toMatchImageSnapshot({

package/esm/setup/vis.d.ts

@@ -5,14 +5,14 @@ export declare const vis: {
     presets: {
         manual(): void;
         auto(): void;
-        theme(themes: Record<string, () => void | Promise<void>>): void;
+        theme(themes: Record<string, (options: import("../client.ts").SnapshotMeta<any>) => Promise<boolean> | Promise<void> | boolean | void>): void;
     };
     beforeAll: {
         setup(): Promise<void>;
     };
     afterEach: {
         matchImageSnapshot(): Promise<void>;
-        matchPerTheme(themes: Record<string, () => Promise<void> | void>): () => Promise<void>;
+        matchPerTheme(themes: Record<string, (options: import("../client.ts").SnapshotMeta<any>) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
     };
 };
 //# sourceMappingURL=vis.d.ts.map

package/package.json

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

package/readme.md

@@ -123,7 +123,7 @@ vis.presets.theme({
 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.
+you typically do not need to import `vitest-plugin-vis` directly.
 
 Because of this, TypeScript may not recognize the matcher.
 To address this, you can add the following to your `tsconfig.json`:
@@ -198,6 +198,22 @@ setAutoSnapshotOptions({
 })
 ```
 
+You can also provide additional options, which you can use during theme to enable/disable snapshot for each theme:
+
+```ts
+setAutoSnapshotOptions({
+	skipDark: true
+})
+
+// in vitest.setup.ts
+vis.presets.theme({
+	async dark(options) {
+		if (options.skipDark) return false
+		document.body.classList.add('dark')
+	},
+})
+```
+
 ### Manual Snapshot
 
 You can also set the preset to `manual` and compare snapshots manually:
@@ -218,9 +234,9 @@ export default defineConfig({
 // some.test.ts
 import 'vitest-browser-react' // do this in your setup file to get `page.render`
 import { page } from '@vitest/browser/context'
-import { expect, it } from 'vitest'
+import { it } from 'vitest'
 
-it('manual snapshot', async () => {
+it('manual snapshot', async ({ expect }) => {
 	page.render(<div data-testid="subject">hello world</div>)
 	await expect(document.body).toMatchImageSnapshot(/* options */)
 	// or
@@ -235,9 +251,9 @@ You can customize the snapshot comparison options per assertion:
 // some.test.ts
 import 'vitest-browser-react' // do this in your setup file to get `page.render`
 import { page } from '@vitest/browser/context'
-import { expect, it } from 'vitest'
+import { it } from 'vitest'
 
-it('manual snapshot with options', async () => {
+it('manual snapshot with options', async ({ expect }) => {
 	page.render(<div data-testid="subject">hello world</div>)
 	const subject = page.getByTestId('subject')
 	await expect(subject).toMatchImageSnapshot({
@@ -258,9 +274,9 @@ While less common, you can also check if a snapshot exists:
 
 ```ts
 import { page } from '@vitest/browser/context'
-import { expect, it } from 'vitest'
+import { it } from 'vitest'
 
-it('Has Snapshot', async () => {
+it('Has Snapshot', async ({ expect }) => {
 	const hasSnapshot = await page.hasImageSnapshot(/* options */)
 	if (!hasSnapshot) {
 		// do something

package/src/client/snapshot_options.internal.ts

@@ -1,7 +1,7 @@
 import { NAME } from '../shared/constants.ts'
 import type { MetaTask, SnapshotMeta } from './snapshot_options.ts'
 
-export function getAutoSnapshotOptions(task: MetaTask): SnapshotMeta<any> | undefined {
+export function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined {
 	if (!task) return
 
 	const list: any[] = []

package/src/client/snapshot_options.ts

@@ -6,6 +6,7 @@ import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapsh
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> &
 	AutoSnapshotOptions & {
 		enable?: boolean | undefined
+		[key: string]: unknown
 	}
 
 type Suite = { meta: Record<string, any>; suite?: Suite | undefined }

package/src/setup/create_vis.ts

@@ -1,12 +1,12 @@
 import dedent from 'dedent'
 import { afterEach, beforeAll } from 'vitest'
-import { toTaskId } from '../client.ts'
+import { type SnapshotMeta, toTaskId } from '../client.ts'
 import { ctx } from '../client/ctx.ts'
 import { shouldTakeSnapshot } from '../client/should_take_snapshot.ts'
 import { getAutoSnapshotOptions } from '../client/snapshot_options.internal.js'
 import type { SetupVisSuiteCommand } from '../server/commands/setup_vis_suite.ts'
 
-export function createVis(commands: SetupVisSuiteCommand) {
+export function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand) {
 	let subjectDataTestId: string | undefined
 	/**
 	 * Visual test configuration on the client side.
@@ -43,7 +43,7 @@ export function createVis(commands: SetupVisSuiteCommand) {
 			 * })
 			 * ```
 			 */
-			theme(themes: Record<string, () => void | Promise<void>>) {
+			theme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>) {
 				beforeAll(vis.beforeAll.setup)
 				afterEach(vis.afterEach.matchPerTheme(themes))
 			},
@@ -64,17 +64,19 @@ export function createVis(commands: SetupVisSuiteCommand) {
 
 				await test!.context.expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId)).toMatchImageSnapshot(meta)
 			},
-			matchPerTheme(themes: Record<string, () => Promise<void> | void>) {
+			matchPerTheme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>) {
 				return async function matchImageSnapshot() {
 					const test = ctx.getCurrentTest()
 					if ((test?.result?.errors?.length ?? 0) > 0) return
 
-					const meta = getAutoSnapshotOptions(test)
+					const meta = getAutoSnapshotOptions<M>(test)
 					if (!shouldTakeSnapshot(meta)) return
 					const errors: any[] = []
 					for (const themeId in themes) {
 						try {
-							await new Promise((a) => setTimeout(() => a(themes[themeId]!()), 10))
+							await new Promise((a) => setTimeout(a, 10))
+							const r = await themes[themeId]!(meta!)
+							if (r === false) continue
 							await test!.context
 								.expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId))
 								.toMatchImageSnapshot({