vitest-plugin-vis 2.4.3 → 3.0.0

package/src/client/image_snapshot_matcher.ts

@@ -1,121 +0,0 @@
-import type { BrowserCommands } from '@vitest/browser/context'
-import dedent from 'dedent'
-import { resolve } from 'pathe'
-import type { ImageSnapshotNextIndexCommand } from '../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../server/commands/prepare_image_snapshot_comparison.ts'
-import { isBase64String } from '../shared/base64.ts'
-import { compareImage } from '../shared/compare_image.ts'
-import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
-import { alignImagesToSameSize } from './align_images.ts'
-import { toDataURL, toImageData } from './image_data.ts'
-import { prettifyOptions } from './image_snapshot_matcher.logic.ts'
-import { convertElementToCssSelector } from './selector.ts'
-import { toTaskId } from './task_id.ts'
-import { server } from './vitest_browser_context_proxy.ts'
-import type { CurrentTest } from './vitest_suite_proxy.ts'
-
-export function imageSnapshotMatcher(
-	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,
-) {
-	return async function matchImageSnapshot(
-		test: CurrentTest & {},
-		subject: any,
-		options?: ToMatchImageSnapshotOptions<any>,
-	) {
-		const isAutoSnapshot = !!test.meta.vis?.isAutoSnapshot
-		const taskId = toTaskId(test)
-		const info = await commands.prepareImageSnapshotComparison(
-			taskId,
-			parseImageSnapshotSubject(subject),
-			isAutoSnapshot,
-			options?.customizeSnapshotId
-				? await parseImageSnapshotOptions(commands, taskId, isAutoSnapshot, options)
-				: options,
-		)
-
-		if (!info) return
-
-		options = { ...info, ...options } as any
-
-		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`}.`
-					}
-
-					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.
- */
-export function parseImageSnapshotSubject(subject: any) {
-	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}`,
-	)
-}
-
-async function writeSnapshot(commands: BrowserCommands, path: string, image: ImageData) {
-	const content = (await toDataURL(image)).split(',')[1]!
-	return commands.writeFile(path, content, { encoding: 'base64' })
-}
-
-async function parseImageSnapshotOptions(
-	commands: ImageSnapshotNextIndexCommand,
-	taskId: string,
-	isAutoSnapshot: boolean,
-	options: ToMatchImageSnapshotOptions<any>,
-) {
-	const index = await commands.imageSnapshotNextIndex(taskId)
-	const { customizeSnapshotId, ...rest } = options
-	const snapshotFileId = customizeSnapshotId!({ id: taskId, index, isAutoSnapshot })
-	return { ...rest, snapshotFileId }
-}

package/src/client/snapshot_options.ts

@@ -1,82 +0,0 @@
-import { NAME } from '../shared/constants.ts'
-import type { ComparisonMethod, SnapshotMeta } from '../shared/types.ts'
-import { ctx } from './ctx.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
-
-export function enableAuto() {
-	ctx.autoEnabled = true
-}
-
-/**
- * Set the snapshot options for auto snapshot.
- *
- * ```ts
- * beforeAll((suite) => setAutoSnapshotOptions(suite, ...))
- * beforeEach(({ task }) => setAutoSnapshotOptions(task, ...))
- *
- * it('...', ({ task }) => {
- *   setAutoSnapshotOptions(task, ...)
- * })
- * ```
- *
- * @param task Optional. Suite or task to set the options.
- * If not provided, it will set the options for the current test.
- */
-export function setAutoSnapshotOptions<M extends ComparisonMethod>(
-	task: MetaTask,
-	meta: SnapshotMeta<M> | boolean,
-): void
-export function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void
-export function setAutoSnapshotOptions<M extends ComparisonMethod>(
-	...args: [task: MetaTask, meta: SnapshotMeta<M> | boolean] | [meta: SnapshotMeta<M> | boolean]
-): void {
-	const [task, meta] = parseArgs(args)
-	if (task)
-		task.meta[NAME] = {
-			...task.meta[NAME],
-			...meta,
-		}
-}
-
-function parseArgs<M extends ComparisonMethod>(
-	args: [task: MetaTask, meta: SnapshotMeta<M> | boolean] | [meta: boolean | SnapshotMeta<M>],
-): [MetaTask | undefined, SnapshotMeta<M>] {
-	return args.length === 1
-		? [ctx.getCurrentTest() ?? (ctx.getCurrentSuite()?.tasks?.[0] as any)?.file, parseMeta(args[0])]
-		: [args[0], parseMeta(args[1])]
-}
-
-function parseMeta<M extends ComparisonMethod>(meta: boolean | SnapshotMeta<M>): SnapshotMeta<M> {
-	return typeof meta === 'boolean' ? ({ enable: meta } as any) : { enable: true, ...meta }
-}
-
-export function extractAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(
-	task: MetaTask,
-): M | undefined {
-	if (!task) return
-
-	const list: any[] = []
-	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: ctx.autoEnabled },
-	)
-}

package/src/client.ts

@@ -1,7 +0,0 @@
-export * from './client/expect/expectation_result.ts'
-export type * from './client/expect/to_match_image_snapshot.types.ts'
-export * from './client/image_snapshot_matcher.ts'
-export * from './client/should_take_snapshot.ts'
-export { setAutoSnapshotOptions, type MetaTask } from './client/snapshot_options.ts'
-export * from './client/task_id.ts'
-export type * from './shared/types.ts'

package/src/server/commands/extend.ts

@@ -1,25 +0,0 @@
-import { type HasImageSnapshotCommand, hasImageSnapshot } from './has_image_snapshot.ts'
-import { type ImageSnapshotNextIndexCommand, imageSnapshotNextIndex } from './image_snapshot_next_index.ts'
-import { type MatchImageSnapshotCommand, matchImageSnapshot } from './match_image_snapshot.ts'
-import {
-	type PrepareImageSnapshotComparisonCommand,
-	prepareImageSnapshotComparison,
-} from './prepare_image_snapshot_comparison.ts'
-import { type SetupVisSuiteCommand, setupVisSuite } from './setup_vis_suite.ts'
-
-declare module '@vitest/browser/context' {
-	interface BrowserCommands
-		extends SetupVisSuiteCommand,
-			ImageSnapshotNextIndexCommand,
-			HasImageSnapshotCommand,
-			PrepareImageSnapshotComparisonCommand,
-			MatchImageSnapshotCommand {}
-}
-
-export const commands = {
-	setupVisSuite,
-	imageSnapshotNextIndex,
-	hasImageSnapshot,
-	matchImageSnapshot,
-	prepareImageSnapshotComparison,
-}

package/src/server/commands/match_image_snapshot.ts

@@ -1,128 +0,0 @@
-import dedent from 'dedent'
-import { resolve } from 'pathe'
-import { PNG } from 'pngjs'
-import type { BrowserCommand } from 'vitest/node'
-import { isBase64String } from '../../shared/base64.ts'
-import { compareImage } from '../../shared/compare_image.ts'
-import { getMaxSize } from '../../shared/get_max_size.ts'
-import { isSameSize } from '../../shared/is_same_size.ts'
-import type {
-	ImageSnapshotCompareOptions,
-	ImageSnapshotIdOptions,
-	ImageSnapshotTimeoutOptions,
-} from '../../shared/types.ts'
-import { file } from '../file.ts'
-import { takeSnapshot, takeSnapshotByBrowser, writeSnapshot, writeSnapshotBuffer } from '../snapshot.ts'
-import { visContext } from '../vis_context.ts'
-import { assertTestPathDefined } from './_assertions.ts'
-
-export interface MatchImageSnapshotCommand {
-	matchImageSnapshot: (
-		taskId: string | undefined,
-		subject: string,
-		isAutoSnapshot: boolean,
-		options?: MatchImageSnapshotOptions | undefined,
-	) => Promise<void>
-}
-
-export type MatchImageSnapshotOptions = ImageSnapshotTimeoutOptions &
-	ImageSnapshotIdOptions &
-	ImageSnapshotCompareOptions<any> & {
-		/**
-		 * The snapshot file id calculated on the client side.
-		 */
-		snapshotFileId?: string | undefined
-	}
-
-export const matchImageSnapshot: BrowserCommand<
-	[taskId: string, subject: string, isAutoSnapshot: boolean, options?: MatchImageSnapshotOptions | undefined]
-> = async (context, taskId, subject, isAutoSnapshot, options) => {
-	assertTestPathDefined(context, 'matchImageSnapshot')
-
-	// vitest:browser passes in `null` when not defined
-	if (!options) options = {}
-	options.timeout = options.timeout ?? 30000
-
-	const info = await visContext.getSnapshotInfo(context as any, taskId, isAutoSnapshot, options)
-	const baselineBuffer = await file.tryReadFile(info.baselinePath)
-	if (!baselineBuffer) {
-		if (isBase64String(subject)) {
-			await writeSnapshot(info.baselinePath, subject)
-		} else {
-			await takeSnapshotByBrowser(context, info.baselinePath, subject, options)
-		}
-		return
-	}
-
-	const resultBuffer = await takeSnapshot(context, info.resultPath, subject, options)
-	const baselineImage = PNG.sync.read(baselineBuffer, { skipRescale: true, checkCRC: false })
-	const resultImage = PNG.sync.read(resultBuffer, { skipRescale: true, checkCRC: false })
-	const [baselineAlignedImage, resultAlignedImage] = alignImageSizes(baselineImage, resultImage)
-	const { width, height } = baselineAlignedImage
-	const diffImage = new PNG({ width, height })
-	const { pass, diffAmount } = compareImage(
-		baselineAlignedImage.data,
-		resultAlignedImage.data,
-		diffImage.data,
-		width,
-		height,
-		options,
-	)
-	if (pass) {
-		if (sizeNotChanged(baselineImage, baselineAlignedImage) && sizeNotChanged(resultImage, resultAlignedImage)) {
-			return
-		}
-		throw new Error(
-			dedent`Snapshot \`${taskId}\` mismatched
-
-				The image size changed form ${baselineImage.width}x${baselineImage.height} to ${resultImage.width}x${resultImage.height}
-
-				Expected:   ${resolve(context.project.config.root, info.baselinePath)}
-				Actual:     ${resolve(context.project.config.root, info.resultPath)}`,
-		)
-	}
-
-	if (context.project.config.snapshotOptions.updateSnapshot === 'all') {
-		await writeSnapshotBuffer(info.baselinePath, resultImage.data)
-		return
-	}
-
-	await writeSnapshotBuffer(info.diffPath, diffImage.data)
-
-	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:    ${JSON.stringify(options)}
-
-			Expected:   ${resolve(context.project.config.root, info.baselinePath)}
-			Actual:     ${resolve(context.project.config.root, info.resultPath)}
-			Difference: ${resolve(context.project.config.root, info.diffPath)}`,
-	)
-}
-
-function alignImageSizes(baseline: PNG, result: PNG) {
-	if (isSameSize(baseline, result)) return [baseline, result] as const
-
-	const size = getMaxSize(baseline, result)
-	return [resizeImage(baseline, size), resizeImage(result, size)] as const
-}
-
-function resizeImage(image: PNG, size: { width: number; height: number }) {
-	if (isSameSize(image, size)) return image
-
-	const resized = new PNG(size)
-	PNG.bitblt(image, resized, 0, 0, image.width, image.height)
-	return resized
-}
-
-function sizeNotChanged(baselineImage: PNG, baselineAlignedImage: PNG) {
-	return baselineImage === baselineAlignedImage
-}

package/src/server/file.ts

@@ -1,13 +0,0 @@
-import { readFile, stat, writeFile } from 'node:fs/promises'
-
-export const file = {
-	async tryReadFile(filePath: string): Promise<Buffer | undefined> {
-		return readFile(filePath).catch(() => undefined)
-	},
-	writeFile,
-	existFile(filePath: string) {
-		return stat(filePath)
-			.then((s) => s.isFile())
-			.catch(() => false)
-	},
-}

package/src/server/vis_context.logic.ts

@@ -1,198 +0,0 @@
-import { join, relative, resolve } from 'pathe'
-import { pick } from 'type-plus'
-import type { VisOptions } from '../config/types.ts'
-import { BASELINE_DIR, DIFF_DIR, RESULT_DIR } from '../shared/constants.ts'
-import { getProjectName } from './commands/browser_command_context.ts'
-import { file } from './file.ts'
-import { getSnapshotSubpath, resolveSnapshotRootDir } from './snapshot_path.ts'
-import { ctx } from './vis_context.ctx.ts'
-import type { PartialBrowserCommandContext, VisProjectState, VisState } from './vis_context.types.ts'
-
-export function createVisContext() {
-	let visOptionsRecord: Record<string, VisOptions<any>> = {}
-	let state: VisState = {}
-
-	const context = {
-		setOptions<M extends 'pixel' | 'ssim'>(projectName: string | undefined, options: VisOptions<M> = {} as any) {
-			visOptionsRecord[projectName ?? '__default'] = options
-		},
-		__test__getOptions(projectName: string) {
-			return visOptionsRecord[projectName]
-		},
-		__test__reset() {
-			visOptionsRecord = {}
-			state = {}
-		},
-		__test__getState(context: PartialBrowserCommandContext) {
-			return state[getProjectId(context)]!
-		},
-		/**
-		 * Setup suite is called on each test file's beforeAll hook.
-		 * Test files include vitest test files and storybook story files.
-		 * It needs to make sure there is no race condition between the test files.
-		 */
-		async setupSuite(browserContext: PartialBrowserCommandContext) {
-			const projectId = getProjectId(browserContext)
-
-			const visOptions = getVisOptions(visOptionsRecord, browserContext)
-			if (!state[projectId]) {
-				state[projectId] = setupState(browserContext, visOptions)
-			}
-
-			const projectState = await state[projectId]
-
-			const { suiteId, suite } = createSuite(projectState, browserContext.testPath, visOptions)
-			projectState.suites[suiteId] = suite
-
-			await Promise.allSettled([ctx.rimraf(suite.diffDir), ctx.rimraf(suite.resultDir)])
-			return pick(projectState, 'subjectDataTestId')
-		},
-		async getSnapshotInfo(
-			browserContext: PartialBrowserCommandContext,
-			name: string,
-			isAutoSnapshot: boolean,
-			options?: { snapshotFileId?: string | undefined },
-		) {
-			const suiteInfo = await context.getSuiteInfo(browserContext, name)
-			const snapshotFilename = context.getSnapshotFilename(
-				browserContext,
-				suiteInfo,
-				options?.snapshotFileId,
-				isAutoSnapshot,
-			)
-
-			const { baselineDir, resultDir, diffDir, task } = suiteInfo
-
-			task.count = task.count + 1
-			const baselinePath = join(baselineDir, snapshotFilename)
-			const resultPath = join(resultDir, snapshotFilename)
-			const diffPath = join(diffDir, snapshotFilename)
-
-			return {
-				...pick(
-					getVisOptions(visOptionsRecord, browserContext),
-					'comparisonMethod',
-					'diffOptions',
-					'failureThreshold',
-					'failureThresholdType',
-					'timeout',
-				),
-				baselinePath,
-				resultPath,
-				diffPath,
-			}
-		},
-		async getTaskCount(browserContext: PartialBrowserCommandContext, taskId: string) {
-			return (await context.getSuiteInfo(browserContext, taskId)).task.count
-		},
-		async hasImageSnapshot(
-			browserContext: PartialBrowserCommandContext,
-			taskId: string,
-			snapshotFileId: string | undefined,
-			isAutoSnapshot: boolean,
-		) {
-			const info = await context.getSuiteInfo(browserContext, taskId)
-
-			return file.existFile(
-				resolve(
-					info.projectRoot,
-					info.baselineDir,
-					context.getSnapshotFilename(browserContext, info, snapshotFileId, isAutoSnapshot),
-				),
-			)
-		},
-		getSnapshotFilename(
-			browserContext: PartialBrowserCommandContext,
-			info: { taskId: string; task: { count: number } },
-			snapshotFileId: string | undefined,
-			isAutoSnapshot: boolean,
-		) {
-			if (snapshotFileId) return `${snapshotFileId}.png`
-			const customizeSnapshotId =
-				getVisOptions(visOptionsRecord, browserContext).customizeSnapshotId ?? (({ id, index }) => `${id}-${index}`)
-			return `${customizeSnapshotId({
-				id: info.taskId,
-				index: info.task.count,
-				isAutoSnapshot,
-			})}.png`
-		},
-		async getSuiteInfo(browserContext: PartialBrowserCommandContext, taskId: string) {
-			const projectId = getProjectId(browserContext)
-			const projectState = await state[projectId]!
-			const visOptions = getVisOptions(visOptionsRecord, browserContext)
-			const suiteId = getSuiteId(projectState, browserContext.testPath, visOptions)
-			const suite = projectState.suites[suiteId]!
-			const task = (suite.tasks[taskId] = suite.tasks[taskId] ?? { count: 1 })
-			return {
-				projectRoot: projectState.projectRoot,
-				suiteId,
-				taskId,
-				baselineDir: suite.baselineDir,
-				resultDir: suite.resultDir,
-				diffDir: suite.diffDir,
-				task,
-			}
-		},
-	}
-	return context
-}
-
-async function setupState(
-	browserContext: PartialBrowserCommandContext,
-	visOptions: Pick<VisOptions, 'snapshotRootDir' | 'platform' | 'subjectDataTestId'>,
-) {
-	const snapshotRootDir = resolveSnapshotRootDir(browserContext, visOptions)
-	const projectRoot = getProjectRoot(browserContext)
-
-	const state = {
-		projectRoot,
-		testTimeout: browserContext.project.config.testTimeout,
-		hookTimeout: browserContext.project.config.hookTimeout,
-		snapshotRootDir,
-		snapshotBaselineDir: join(snapshotRootDir, BASELINE_DIR),
-		snapshotResultDir: join(snapshotRootDir, RESULT_DIR),
-		snapshotDiffDir: join(snapshotRootDir, DIFF_DIR),
-		snapshotRootPath: join(projectRoot, snapshotRootDir),
-		subjectDataTestId: visOptions.subjectDataTestId,
-		suites: {},
-	}
-	await Promise.allSettled([ctx.rimraf(join(state.snapshotDiffDir)), ctx.rimraf(join(state.snapshotResultDir))])
-	return state
-}
-
-export function createSuite(
-	state: VisProjectState,
-	testPath: string,
-	options: Pick<VisOptions, 'customizeSnapshotSubpath'>,
-) {
-	const suiteId = getSuiteId(state, testPath, options)
-	return {
-		suiteId,
-		suite: {
-			baselineDir: join(state.snapshotBaselineDir, suiteId),
-			resultDir: join(state.snapshotResultDir, suiteId),
-			diffDir: join(state.snapshotDiffDir, suiteId),
-			tasks: {},
-		},
-	}
-}
-
-export function getSuiteId(
-	state: VisProjectState,
-	testPath: string,
-	options: Pick<VisOptions, 'customizeSnapshotSubpath'>,
-) {
-	return getSnapshotSubpath(relative(state.projectRoot, testPath), options)
-}
-
-function getVisOptions(visOptionsRecord: Record<string, VisOptions<any>>, context: PartialBrowserCommandContext) {
-	return visOptionsRecord[getProjectName(context) ?? '__default'] ?? {}
-}
-
-function getProjectRoot(context: PartialBrowserCommandContext) {
-	return context.project.config.root
-}
-
-function getProjectId(context: PartialBrowserCommandContext) {
-	return `${context.project.config.root}/${context.project.config.name}`
-}

package/src/server/vis_context.ts

@@ -1,3 +0,0 @@
-import { createVisContext } from './vis_context.logic.ts'
-
-export const visContext = createVisContext()