vitest-plugin-vis 3.5.1 → 4.1.0

package/src/client/page/_ctx.ts

@@ -0,0 +1,12 @@
+import { type BrowserPage, commands } from 'vitest/browser'
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export type { BrowserPage }
+
+export const ctx = {
+	commands,
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/page/extend.ts

@@ -1,4 +1,4 @@
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import './augment.ts'
 import { hasImageSnapshot } from './has_image_snapshot.ts'
 import { toMatchImageSnapshot } from './to_match_image_snapshot.ts'

package/src/client/page/has_image_snapshot.mdx

@@ -11,7 +11,7 @@ This method allows you to conditionally execute code based on whether a snapshot
 ## Basic Usage
 
 ```ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 
 it('should check if snapshot exists', async ({ expect }) => {
 	const hasSnapshot = await page.hasImageSnapshot()

package/src/client/page/has_image_snapshot.ts

@@ -1,8 +1,8 @@
-import { type BrowserPage, commands } from '@vitest/browser/context'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 import { hasImageSnapshotAction } from '../actions/has_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import type { BrowserPage } from './_ctx.ts'
+import { ctx } from './_ctx.ts'
 
 export interface HasImageSnapshotAction {
 	/**
@@ -23,5 +23,5 @@ export function hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotKeyOp
 				"concurrent tests run at the same time in the same iframe and affect each other's environment. ",
 		)
 	}
-	return hasImageSnapshotAction(commands, toTaskId(test), options)
+	return hasImageSnapshotAction(ctx.commands, toTaskId(test), options)
 }

package/src/client/page/to_match_image_snapshot.mdx

@@ -11,7 +11,7 @@ Unlike `expect().toMatchImageSnapshot()` which targets specific elements, `page.
 ## Basic Usage
 
 ```ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 
 it('should take a page snapshot', async () => {
 	// Your test setup here

package/src/client/page/to_match_image_snapshot.ts

@@ -1,8 +1,7 @@
-import { commands } from '@vitest/browser/context'
 import type { ComparisonMethod, ToMatchPageImageSnapshotOptions } from '../../shared/types.ts'
 import { matchPageImageSnapshotAction } from '../actions/match_page_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
 
 export interface ToMatchImageSnapshotAction {
 	toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
@@ -25,5 +24,5 @@ export function toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
 		)
 	}
 
-	return matchPageImageSnapshotAction(commands, toTaskId(test), options)
+	return matchPageImageSnapshotAction(ctx.commands, toTaskId(test), options)
 }

package/src/client/{compare_image_snapshot.logic.ts → snapshot/compare_image_snapshot.logic.ts}

@@ -1,4 +1,4 @@
-import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
+import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 
 export function prettifyOptions(options: ToMatchImageSnapshotOptions<any> | undefined) {
 	if (!options) return 'none'

package/src/client/{compare_image_snapshot.ts → snapshot/compare_image_snapshot.ts}

@@ -1,17 +1,16 @@
-import type { BrowserCommands } from '@vitest/browser/context'
 import dedent from 'dedent'
 import { resolve } from 'pathe'
-import type { ImageSnapshotNextIndexCommand } from '../commands.ts'
+import type { BrowserCommands } from 'vitest/browser'
 import type {
-	ImageSnapshotComparisonInfo,
+	ImageSnapshotNextIndexCommand,
 	PrepareImageSnapshotComparisonCommand,
-} from '../server/commands/prepare_image_snapshot_comparison.ts'
-import { compareImage } from '../shared/compare_image.ts'
-import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
-import { alignImagesToSameSize } from './align_images.ts'
+} from '../../shared/commands.types.ts'
+import { compareImage } from '../../shared/compare_image.ts'
+import type { ImageSnapshotComparisonInfo, ToMatchImageSnapshotOptions } from '../../shared/types.ts'
+import { toDataURL, toImageData } from '../external/browser/image_data.ts'
+import { server } from '../external/vitest/vitest_browser_context_proxy.ts'
+import { alignImagesToSameSize } from '../image/align_images.ts'
 import { prettifyOptions } from './compare_image_snapshot.logic.ts'
-import { toDataURL, toImageData } from './image_data.ts'
-import { server } from './vitest_browser_context_proxy.ts'
 
 export async function compareImageSnapshot(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/snapshot/should_take_snapshot.ts

@@ -0,0 +1,6 @@
+import { hasRenderContent } from '../external/browser/has_render_content.ts'
+import type { SnapshotMeta } from '../task/snapshot_meta.ts'
+
+export function shouldTakeSnapshot(meta: SnapshotMeta<any> | undefined) {
+	return hasRenderContent() && meta?.enable
+}

package/src/client/suite/_ctx.ts

@@ -0,0 +1,8 @@
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export const ctx = {
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/suite/auto_snapshot_matcher.ts

@@ -0,0 +1,68 @@
+import dedent from 'dedent'
+import type { SetupVisSuiteCommand } from '../../shared/commands.types.ts'
+import type { ComparisonMethod } from '../../shared/types.ts'
+import { shouldTakeSnapshot } from '../snapshot/should_take_snapshot.ts'
+import { extractAutoSnapshotOptions } from '../task/auto_snapshot_options.ts'
+import type { SnapshotMeta } from '../task/snapshot_meta.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
+
+export function autoSnapshotMatcher<GM extends Record<string, any> | unknown = unknown>(
+	commands: SetupVisSuiteCommand,
+	expect: any,
+) {
+	let subject: string | undefined
+
+	return {
+		async setup() {
+			subject = (await commands.setupVisSuite()).subject
+		},
+		createMatcher<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)
+			>,
+		) {
+			return async function matchImageSnapshot() {
+				const test = ctx.getCurrentTest()
+				if ((test?.result?.errors?.length ?? 0) > 0) return
+
+				const meta = extractAutoSnapshotOptions(test)
+				if (!shouldTakeSnapshot(meta)) return
+				const errors: Array<[string, Error]> = []
+				for (const themeId in themes) {
+					try {
+						await new Promise((a) => setTimeout(a, 10))
+						const theme = themes[themeId]
+						const r = typeof theme === 'function' ? await theme(meta! as any) : theme
+						if (r === false) continue
+						await expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
+							...meta,
+							snapshotKey: meta?.snapshotKey ?? themeId,
+						})
+					} catch (error) {
+						errors.push([themeId, error as Error])
+					}
+				}
+				if (errors.length > 0) {
+					if (errors.length === 1) throw errors[0]![1]
+					const taskId = toTaskId(test!)
+					throw new AggregateError(
+						errors,
+						dedent`Snapshot \`${taskId}\` mismatched
+
+					${errors
+						.map(([themeId, error]) => {
+							return `Theme \`${themeId}\` failed: ${error.message}`
+						})
+						.join('\n\n')}`,
+					)
+				}
+			}
+		},
+	}
+}
+
+function getSubject(selectors: string | undefined) {
+	return selectors ? (document.querySelector(selectors) ?? document.body) : document.body
+}

package/src/client/{ctx.ts → task/_ctx.ts}

@@ -1,12 +1,10 @@
-import { getCurrentSuite, getCurrentTest } from './vitest_suite_proxy.ts'
+import { getCurrentSuite, getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
 
 export const ctx = {
-	autoEnabled: undefined as boolean | undefined,
 	getCurrentTest,
 	getCurrentSuite,
 	__test__reset() {
 		ctx.getCurrentTest = getCurrentTest
 		ctx.getCurrentSuite = getCurrentSuite
-		ctx.autoEnabled = undefined
 	},
 }

package/src/client/{auto_snapshot_options.ts → task/auto_snapshot_options.ts}

@@ -1,7 +1,7 @@
-import { assertSnapshotKeyWithoutDash } from '../shared/asserts.ts'
-import { NAME } from '../shared/constants.ts'
-import type { ComparisonMethod } from '../shared/types.ts'
-import { ctx } from './ctx.ts'
+import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
+import { NAME } from '../../shared/constants.ts'
+import type { ComparisonMethod } from '../../shared/types.ts'
+import { ctx } from './_ctx.ts'
 import type { SnapshotMeta } from './snapshot_meta.ts'
 
 type Suite = { meta: Record<string, any>; suite?: Suite | undefined }
@@ -17,6 +17,21 @@ export type MetaTask =
 /**
  * Set the snapshot options for auto snapshot.
  *
+ * You can use it in beforeAll, beforeEach, or individual test cases.
+ *
+ * @param meta - The snapshot options to set.
+ * You can pass a boolean to enable/disable the snapshot, or an object with the snapshot options.
+ * When passing an object, the `enable` property will be set to `true` by default unless you explicitly set it to `false`.
+ * @param meta.enable - Whether to enable the snapshot.
+ * @param meta.snapshotKey - The key to use for the snapshot.
+ * @param meta.comparisonMethod - The comparison method to use for the snapshot.
+ * @param meta.diffOptions - The diff options to use for the snapshot.
+ * @param meta.failureThreshold - The failure threshold to use for the snapshot.
+ * @param meta.failureThresholdType - The failure threshold type to use for the snapshot.
+ * @param meta.timeout - The timeout to use for the snapshot.
+ *
+ * @example
+ *
  * ```ts
  * beforeAll(() => setAutoSnapshotOptions(...))
  * beforeEach(() => setAutoSnapshotOptions(...))
@@ -26,7 +41,7 @@ export type MetaTask =
  * })
  * ```
  */
-export function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void {
+export function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: boolean | SnapshotMeta<M>): void {
 	if (typeof meta === 'object') {
 		assertSnapshotKeyWithoutDash(meta.snapshotKey)
 	}

package/src/client/{snapshot_meta.ts → task/snapshot_meta.ts}

@@ -1,7 +1,12 @@
-import type { ComparisonMethod, ImageSnapshotSubjectOptions, ToMatchImageSnapshotOptions } from '../shared/types.ts'
+import type { ComparisonMethod, ImageSnapshotSubjectOptions, ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> &
 	ImageSnapshotSubjectOptions & {
+		/**
+		 * Whether to enable the snapshot.
+		 *
+		 * Default: `true`
+		 */
 		enable?: boolean | undefined
 		[key: string]: unknown
 	}

package/src/client-api.ts

@@ -4,9 +4,10 @@ export * from './client/actions/has_image_snapshot_action.ts'
 export * from './client/actions/load_image_snapshot_results_action.ts'
 export * from './client/actions/match_image_snapshot_action.ts'
 export * from './client/actions/match_page_image_snapshot_action.ts'
-export { setAutoSnapshotOptions, type MetaTask } from './client/auto_snapshot_options.ts'
 export * from './client/expect/expectation_result.ts'
 export type * from './client/expect/to_match_image_snapshot.types.ts'
-export * from './client/task_id.ts'
+export * from './client/suite/auto_snapshot_matcher.ts'
+export { setAutoSnapshotOptions, type MetaTask } from './client/task/auto_snapshot_options.ts'
+export * from './client/task/task_id.ts'
 export * from './shared/constants.ts'
 export type * from './shared/types.ts'

package/src/config/vis.ts

@@ -1,4 +1,4 @@
-import type { PluginOption } from 'vite'
+import type { Plugin } from 'vitest/config'
 import { commands } from '../server/commands/commands.ts'
 import { setVisOption } from '../server/vis_options.ts'
 import { NAME } from '../shared/constants.ts'
@@ -20,12 +20,12 @@ export function vis<M extends ComparisonMethod = 'pixel'>(options: VisOptions<M>
 			return {
 				test: {
 					browser: {
-						name: undefined as unknown as string,
-						commands,
+						name: undefined,
+						commands: commands as any,
 					},
 					setupFiles: preset && preset !== 'none' && preset !== 'custom' ? [`vitest-plugin-vis/presets/${preset}`] : [],
 				},
 			}
 		},
-	} satisfies PluginOption
+	} satisfies Plugin
 }

package/src/index.ts

@@ -2,5 +2,5 @@
 import './client/expect/augment.ts'
 import './client/page/augment.ts'
 
-export { setAutoSnapshotOptions, type MetaTask } from './client/auto_snapshot_options.ts'
+export { setAutoSnapshotOptions, type MetaTask } from './client/task/auto_snapshot_options.ts'
 export type * from './shared/types.ts'

package/src/server/browser_provider/browser_api.ts

@@ -1,8 +1,8 @@
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import { playwright } from './playwright.ts'
 import { webdriverio } from './webdriverio.ts'
 
-export function browserApi(context: BrowserCommandContext) {
+export function browserApi(context: ExtendedBrowserCommandContext) {
 	if (context.provider.name === 'playwright') {
 		return playwright(context)
 	}

package/src/server/browser_provider/playwright.ts

@@ -1,18 +1,20 @@
 import { resolve } from 'pathe'
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import type { BrowserApi } from './types.ts'
 
-export function playwright(context: BrowserCommandContext): BrowserApi {
+export function playwright(context: ExtendedBrowserCommandContext): BrowserApi {
+	const { page, iframe } = context
+
 	return {
 		async takeScreenshot(projectRoot, relativeFilePath, selector, options) {
-			const subject = context.iframe.locator(selector)
+			const subject = iframe.locator(selector)
 			return subject.screenshot({
 				path: resolve(projectRoot, relativeFilePath),
 				...options,
 			})
 		},
 		async takePageScreenshot(projectRoot, relativeFilePath, options) {
-			return context.page.screenshot({
+			return page.screenshot({
 				path: resolve(projectRoot, relativeFilePath),
 				...options,
 			})

package/src/server/browser_provider/webdriverio.ts

@@ -1,8 +1,8 @@
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import type { BrowserApi } from './types.ts'
 
-export function webdriverio(context: BrowserCommandContext): BrowserApi {
-	const browser = context.browser
+export function webdriverio(context: ExtendedBrowserCommandContext): BrowserApi {
+	const { browser } = context
 	return {
 		async takeScreenshot(_projectRoot, relativeFilePath, selector) {
 			const element = await browser.$(`${selector}`)

package/src/server/commands/_assertions.ts

@@ -1,11 +1,11 @@
 import { isAbsolute } from 'pathe'
 import type { RequiredPick } from 'type-plus'
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 
 export function assertTestPathDefined(
-	context: BrowserCommandContext,
+	context: ExtendedBrowserCommandContext,
 	commandName: string,
-): asserts context is RequiredPick<BrowserCommandContext, 'testPath'> {
+): asserts context is RequiredPick<ExtendedBrowserCommandContext, 'testPath'> {
 	if (!context.testPath) {
 		throw new Error(`'commands.${commandName}' requires testPath to be defined`)
 	}

package/src/server/commands/augment.ts

@@ -1,11 +1,13 @@
-import type { HasImageSnapshotCommand } from './has_image_snapshot.ts'
-import type { ImageSnapshotNextIndexCommand } from './image_snapshot_next_index.ts'
-import type { LoadImageSnapshotResultsCommand } from './load_image_snapshot_results.ts'
-import type { PrepareImageSnapshotComparisonCommand } from './prepare_image_snapshot_comparison.ts'
-import type { PreparePageImageSnapshotComparisonCommand } from './prepare_page_image_snapshot_comparison.ts'
-import type { SetupVisSuiteCommand } from './setup_vis_suite.ts'
+import type {
+	HasImageSnapshotCommand,
+	ImageSnapshotNextIndexCommand,
+	LoadImageSnapshotResultsCommand,
+	PrepareImageSnapshotComparisonCommand,
+	PreparePageImageSnapshotComparisonCommand,
+	SetupVisSuiteCommand,
+} from '../../shared/commands.types.ts'
 
-declare module '@vitest/browser/context' {
+declare module 'vitest/browser' {
 	interface BrowserCommands
 		extends SetupVisSuiteCommand,
 			ImageSnapshotNextIndexCommand,

package/src/server/commands/has_image_snapshot.ts

@@ -1,12 +1,9 @@
-import type { BrowserCommand } from 'vitest/node'
+import type { HasImageSnapshotCommand } from '../../shared/commands.types.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface HasImageSnapshotCommand {
-	hasImageSnapshot(taskId: string, snapshotKey: string | undefined): Promise<boolean>
-}
-
-export const hasImageSnapshot: BrowserCommand<Parameters<HasImageSnapshotCommand['hasImageSnapshot']>> = async (
+export const hasImageSnapshot: ExtendedBrowserCommand<Parameters<HasImageSnapshotCommand['hasImageSnapshot']>> = async (
 	context,
 	taskId,
 	snapshotKey,

package/src/server/commands/image_snapshot_next_index.ts

@@ -1,15 +1,9 @@
-import type { BrowserCommand } from 'vitest/node'
+import type { ImageSnapshotNextIndexCommand } from '../../shared/commands.types.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface ImageSnapshotNextIndexCommand {
-	/**
-	 * Get the index of the snapshot image to be created.
-	 */
-	imageSnapshotNextIndex(taskId: string): Promise<number>
-}
-
-export const imageSnapshotNextIndex: BrowserCommand<
+export const imageSnapshotNextIndex: ExtendedBrowserCommand<
 	Parameters<ImageSnapshotNextIndexCommand['imageSnapshotNextIndex']>
 > = async (context, taskId) => {
 	assertTestPathDefined(context, 'imageSnapshotNextIndex')

package/src/server/commands/load_image_snapshot_results.ts

@@ -1,32 +1,12 @@
-import type { BrowserCommand } from 'vitest/node'
+import type { ImageSnapshotResult } from '../../shared/commands.types.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface ImageSnapshotResult {
-	filename: string
-	/**
-	 * The base64 encoded image of the baseline snapshot.
-	 */
-	baseline?: string | undefined
-	/**
-	 * The base64 encoded image of the result snapshot.
-	 */
-	result?: string | undefined
-	/**
-	 * The base64 encoded image of the diff snapshot.
-	 */
-	diff?: string | undefined
-}
-
-export interface LoadImageSnapshotResultsCommand {
-	loadImageSnapshotResults(taskId: string): Promise<ImageSnapshotResult[]>
-}
-
-export const loadImageSnapshotResults: BrowserCommand<[taskId: string]> = async (
+export const loadImageSnapshotResults: ExtendedBrowserCommand<[taskId: string]> = async (
 	context,
 	taskId,
 ): Promise<ImageSnapshotResult[]> => {
 	assertTestPathDefined(context, 'loadImageSnapshotResults')
-
 	return visServerContext.getSnapshotResults(context, taskId)
 }

package/src/server/commands/prepare_image_snapshot_comparison.ts

@@ -1,62 +1,16 @@
 import { resolve } from 'pathe'
-import type { BrowserCommand } from 'vitest/node'
 import { isBase64String } from '../../shared/base64.ts'
-import type {
-	FailureThresholdOptions,
-	ImageSnapshotTimeoutOptions,
-	PixelComparisonOptions,
-	SsimComparisonOptions,
-} from '../../shared/types.ts'
+import type { PrepareImageSnapshotComparisonCommand } from '../../shared/commands.types.ts'
+import type { ImageSnapshotComparisonInfo } from '../../shared/types.ts'
 import { file } from '../externals/file.ts'
 import { getProjectRoot } from '../project.ts'
 import { takeSnapshot, takeSnapshotByBrowser } from '../snapshot.ts'
 import { snapshotWriter } from '../snapshot_writer.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
-import type { MatchImageSnapshotOptions } from './types.ts'
 
-export type ImageSnapshotComparisonInfo = {
-	/**
-	 * Path to the project root.
-	 */
-	projectRoot: string
-	/**
-	 * Path to the baseline image relative to the project root.
-	 */
-	baselinePath: string
-	/**
-	 * Path to the result image relative to the project root.
-	 */
-	resultPath: string
-	/**
-	 * Path to the diff image relative to the project root.
-	 */
-	diffPath: string
-	/**
-	 * Base64 encoded baseline image.
-	 */
-	baseline: string
-	/**
-	 * Base64 encoded result image.
-	 */
-	result: string
-	/**
-	 * Base64 encoded diff image.
-	 */
-	diff?: string | undefined
-} & ImageSnapshotTimeoutOptions &
-	FailureThresholdOptions &
-	(SsimComparisonOptions | PixelComparisonOptions)
-
-export interface PrepareImageSnapshotComparisonCommand {
-	prepareImageSnapshotComparison: (
-		taskId: string,
-		subject: string,
-		options?: MatchImageSnapshotOptions | undefined,
-	) => Promise<ImageSnapshotComparisonInfo | undefined>
-}
-
-export const prepareImageSnapshotComparison: BrowserCommand<
+export const prepareImageSnapshotComparison: ExtendedBrowserCommand<
 	Parameters<PrepareImageSnapshotComparisonCommand['prepareImageSnapshotComparison']>
 > = async (context, taskId, subject, options): Promise<ImageSnapshotComparisonInfo | undefined> => {
 	assertTestPathDefined(context, 'prepareImageSnapshotComparison')

package/src/server/commands/prepare_page_image_snapshot_comparison.ts

@@ -1,55 +1,13 @@
 import { resolve } from 'pathe'
-import type { BrowserCommand } from 'vitest/node'
-import type {
-	FailureThresholdOptions,
-	ImageSnapshotTimeoutOptions,
-	PixelComparisonOptions,
-	SsimComparisonOptions,
-} from '../../shared/types.ts'
+import type { PreparePageImageSnapshotComparisonCommand } from '../../shared/commands.types.ts'
 import { file } from '../externals/file.ts'
 import { getProjectRoot } from '../project.ts'
 import { takePageSnapshot } from '../snapshot.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
-import type { MatchImageSnapshotOptions } from './types.ts'
 
-type ImageSnapshotComparisonInfo = {
-	/**
-	 * Path to the project root.
-	 */
-	projectRoot: string
-	/**
-	 * Path to the baseline image relative to the project root.
-	 */
-	baselinePath: string
-	/**
-	 * Path to the result image relative to the project root.
-	 */
-	resultPath: string
-	/**
-	 * Path to the diff image relative to the project root.
-	 */
-	diffPath: string
-	/**
-	 * Base64 encoded baseline image.
-	 */
-	baseline: string
-	/**
-	 * Base64 encoded result image.
-	 */
-	result: string
-} & ImageSnapshotTimeoutOptions &
-	FailureThresholdOptions &
-	(SsimComparisonOptions | PixelComparisonOptions)
-
-export interface PreparePageImageSnapshotComparisonCommand {
-	preparePageImageSnapshotComparison: (
-		taskId: string,
-		options?: MatchImageSnapshotOptions | undefined,
-	) => Promise<ImageSnapshotComparisonInfo | undefined>
-}
-
-export const preparePageImageSnapshotComparison: BrowserCommand<
+export const preparePageImageSnapshotComparison: ExtendedBrowserCommand<
 	Parameters<PreparePageImageSnapshotComparisonCommand['preparePageImageSnapshotComparison']>
 > = async (context, taskId, options) => {
 	assertTestPathDefined(context, 'preparePageImageSnapshotComparison')

package/src/server/commands/setup_vis_suite.ts

@@ -1,32 +1,8 @@
-import type { Pick } from 'type-plus'
-import type { BrowserCommand } from 'vitest/node'
-import type { VisOptions } from '../../config/types.ts'
 import { setupSuite } from '../suite.ts'
+import type { ExtendedBrowserCommand, ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface SetupVisSuiteCommand {
-	/**
-	 * Sets up the visual testing suite by cleaning up previous snapshot and diff output directories.
-	 * When this command is run for the first time,
-	 * it will remove the results and diffs directory of all suites.
-	 *
-	 * 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'
-		>
-	>
-}
-
-export const setupVisSuite: BrowserCommand<[]> = async (context): Promise<{ subject: string | undefined }> => {
+export const setupVisSuite: ExtendedBrowserCommand<[]> = async (context): Promise<{ subject: string | undefined }> => {
 	assertTestPathDefined(context, 'setupVisSuite')
-	return setupSuite(context)
+	return setupSuite(context as unknown as ExtendedBrowserCommandContext)
 }