vitest-plugin-vis 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/client/ctx.d.ts +2 -0
- package/esm/client/ctx.d.ts.map +1 -1
- package/esm/client/ctx.js +5 -1
- package/esm/client/should_take_snapshot.d.ts +2 -2
- package/esm/client/should_take_snapshot.d.ts.map +1 -1
- package/esm/client/should_take_snapshot.js +2 -2
- package/esm/client/snapshot_options.d.ts +2 -0
- package/esm/client/snapshot_options.d.ts.map +1 -1
- package/esm/client/snapshot_options.js +25 -1
- package/esm/client/vitest_suite_proxy.d.ts +1 -0
- package/esm/client/vitest_suite_proxy.d.ts.map +1 -1
- package/esm/client/vitest_suite_proxy.js +1 -0
- package/esm/client.d.ts +1 -1
- package/esm/client.d.ts.map +1 -1
- package/esm/client.js +1 -1
- package/esm/config/types.d.ts +1 -1
- package/esm/config/types.d.ts.map +1 -1
- package/esm/index.d.ts +1 -1
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -1
- package/esm/presets/enable.d.ts +3 -0
- package/esm/presets/enable.d.ts.map +1 -0
- package/esm/presets/enable.js +4 -0
- package/esm/server/vis_context.d.ts +4 -4
- package/esm/server/vis_context.logic.d.ts +4 -4
- package/esm/setup/create_vis.d.ts +15 -2
- package/esm/setup/create_vis.d.ts.map +1 -1
- package/esm/setup/create_vis.js +7 -28
- package/esm/setup/vis.d.ts +1 -14
- package/esm/setup/vis.d.ts.map +1 -1
- package/package.json +10 -6
- package/readme.md +49 -16
- package/src/client/ctx.ts +5 -1
- package/src/client/should_take_snapshot.ts +2 -3
- package/src/client/snapshot_options.ts +30 -1
- package/src/client/vitest_suite_proxy.ts +1 -0
- package/src/client.ts +1 -1
- package/src/config/types.ts +1 -1
- package/src/index.ts +1 -1
- package/src/presets/enable.ts +5 -0
- package/src/setup/create_vis.ts +61 -29
- package/esm/client/snapshot_options.internal.d.ts +0 -3
- package/esm/client/snapshot_options.internal.d.ts.map +0 -1
- package/esm/client/snapshot_options.internal.js +0 -20
- package/src/client/snapshot_options.internal.ts +0 -22
package/esm/client/ctx.d.ts
CHANGED
package/esm/client/ctx.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ctx.d.ts","sourceRoot":"","sources":["../../src/client/ctx.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG
|
|
1
|
+
{"version":3,"file":"ctx.d.ts","sourceRoot":"","sources":["../../src/client/ctx.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG;;;;;CASf,CAAA"}
|
package/esm/client/ctx.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import { getCurrentTest } from "./vitest_suite_proxy.js";
|
|
1
|
+
import { getCurrentSuite, getCurrentTest } from "./vitest_suite_proxy.js";
|
|
2
2
|
export const ctx = {
|
|
3
|
+
autoEnabled: false,
|
|
3
4
|
getCurrentTest,
|
|
5
|
+
getCurrentSuite,
|
|
4
6
|
__test__reset() {
|
|
5
7
|
ctx.getCurrentTest = getCurrentTest;
|
|
8
|
+
ctx.getCurrentSuite = getCurrentSuite;
|
|
9
|
+
ctx.autoEnabled = false;
|
|
6
10
|
},
|
|
7
11
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type SnapshotMeta } from './snapshot_options.ts';
|
|
2
2
|
/**
|
|
3
3
|
* Determine should snapshot be taken.
|
|
4
4
|
*
|
|
@@ -6,5 +6,5 @@ import type { SnapshotMeta } from './snapshot_options.ts';
|
|
|
6
6
|
* no `snapshot` tag: false
|
|
7
7
|
* disabled by `!snapshot` tag: false
|
|
8
8
|
*/
|
|
9
|
-
export declare function shouldTakeSnapshot(meta?: SnapshotMeta<any> | undefined): boolean;
|
|
9
|
+
export declare function shouldTakeSnapshot(meta?: SnapshotMeta<any> | undefined): boolean | undefined;
|
|
10
10
|
//# sourceMappingURL=should_take_snapshot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"should_take_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/should_take_snapshot.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"should_take_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/should_take_snapshot.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAA0B,MAAM,uBAAuB,CAAA;AAEjF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,SAAS,uBAGtE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ctx } from "./ctx.js";
|
|
2
|
-
import { getAutoSnapshotOptions } from "./snapshot_options.
|
|
2
|
+
import { getAutoSnapshotOptions } from "./snapshot_options.js";
|
|
3
3
|
/**
|
|
4
4
|
* Determine should snapshot be taken.
|
|
5
5
|
*
|
|
@@ -9,5 +9,5 @@ import { getAutoSnapshotOptions } from "./snapshot_options.internal.js";
|
|
|
9
9
|
*/
|
|
10
10
|
export function shouldTakeSnapshot(meta) {
|
|
11
11
|
const m = meta ?? getAutoSnapshotOptions(ctx.getCurrentTest());
|
|
12
|
-
return document.body.childElementCount > 0 && m?.enable
|
|
12
|
+
return document.body.childElementCount > 0 && m?.enable;
|
|
13
13
|
}
|
|
@@ -15,6 +15,7 @@ export type MetaTask = {
|
|
|
15
15
|
suite?: Suite | undefined;
|
|
16
16
|
meta: Record<string, any>;
|
|
17
17
|
} | undefined;
|
|
18
|
+
export declare function enableAuto(): void;
|
|
18
19
|
/**
|
|
19
20
|
* Set the snapshot options for auto snapshot.
|
|
20
21
|
*
|
|
@@ -32,5 +33,6 @@ export type MetaTask = {
|
|
|
32
33
|
*/
|
|
33
34
|
export declare function setAutoSnapshotOptions<M extends ComparisonMethod>(task: MetaTask, meta: SnapshotMeta<M> | boolean): void;
|
|
34
35
|
export declare function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void;
|
|
36
|
+
export declare function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined;
|
|
35
37
|
export {};
|
|
36
38
|
//# sourceMappingURL=snapshot_options.d.ts.map
|
|
@@ -1 +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;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"}
|
|
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;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,wBAAgB,UAAU,SAEzB;AAED;;;;;;;;;;;;;;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;AAwBzG,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS,CAqBrH"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { NAME } from "../shared/constants.js";
|
|
2
2
|
import { ctx } from "./ctx.js";
|
|
3
|
+
export function enableAuto() {
|
|
4
|
+
ctx.autoEnabled = true;
|
|
5
|
+
}
|
|
3
6
|
export function setAutoSnapshotOptions(...args) {
|
|
4
7
|
const [task, meta] = parseArgs(args);
|
|
5
8
|
if (task)
|
|
@@ -9,8 +12,29 @@ export function setAutoSnapshotOptions(...args) {
|
|
|
9
12
|
};
|
|
10
13
|
}
|
|
11
14
|
function parseArgs(args) {
|
|
12
|
-
return args.length === 1
|
|
15
|
+
return args.length === 1
|
|
16
|
+
? [ctx.getCurrentTest() ?? ctx.getCurrentSuite().tasks?.[0]?.file, parseMeta(args[0])]
|
|
17
|
+
: [args[0], parseMeta(args[1])];
|
|
13
18
|
}
|
|
14
19
|
function parseMeta(meta) {
|
|
15
20
|
return typeof meta === 'boolean' ? { enable: meta } : { enable: true, ...meta };
|
|
16
21
|
}
|
|
22
|
+
export function getAutoSnapshotOptions(task) {
|
|
23
|
+
if (!task)
|
|
24
|
+
return;
|
|
25
|
+
const list = [];
|
|
26
|
+
let current = task;
|
|
27
|
+
while (current?.suite) {
|
|
28
|
+
list.unshift(current.suite.meta);
|
|
29
|
+
current = current.suite;
|
|
30
|
+
}
|
|
31
|
+
list.unshift(task.file?.meta);
|
|
32
|
+
list.push(task.meta);
|
|
33
|
+
return list.reduce((acc, cur) => {
|
|
34
|
+
if (cur?.[NAME]) {
|
|
35
|
+
const { [NAME]: meta } = cur;
|
|
36
|
+
return Object.assign({}, acc, meta);
|
|
37
|
+
}
|
|
38
|
+
return acc;
|
|
39
|
+
}, { enable: ctx.autoEnabled });
|
|
40
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vitest_suite_proxy.d.ts","sourceRoot":"","sources":["../../src/client/vitest_suite_proxy.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc,2DAAsC,CAAA"}
|
|
1
|
+
{"version":3,"file":"vitest_suite_proxy.d.ts","sourceRoot":"","sources":["../../src/client/vitest_suite_proxy.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc,2DAAsC,CAAA;AACjE,eAAO,MAAM,eAAe,+CAAuC,CAAA"}
|
package/esm/client.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export * from './client/expect/expectation_result.ts';
|
|
|
2
2
|
export type * from './client/expect/to_match_image_snapshot.types.ts';
|
|
3
3
|
export * from './client/image_snapshot_matcher.ts';
|
|
4
4
|
export * from './client/should_take_snapshot.ts';
|
|
5
|
-
export
|
|
5
|
+
export { type MetaTask, type SnapshotMeta, setAutoSnapshotOptions } from './client/snapshot_options.ts';
|
|
6
6
|
export * from './client/task_id.ts';
|
|
7
7
|
export type * from './shared/types.ts';
|
|
8
8
|
//# sourceMappingURL=client.d.ts.map
|
package/esm/client.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAA;AACrD,mBAAmB,kDAAkD,CAAA;AACrE,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAA;AACrD,mBAAmB,kDAAkD,CAAA;AACrE,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AACvG,cAAc,qBAAqB,CAAA;AACnC,mBAAmB,mBAAmB,CAAA"}
|
package/esm/client.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "./client/expect/expectation_result.js";
|
|
2
2
|
export * from "./client/image_snapshot_matcher.js";
|
|
3
3
|
export * from "./client/should_take_snapshot.js";
|
|
4
|
-
export
|
|
4
|
+
export { setAutoSnapshotOptions } from "./client/snapshot_options.js";
|
|
5
5
|
export * from "./client/task_id.js";
|
package/esm/config/types.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTime
|
|
|
4
4
|
/**
|
|
5
5
|
* Loads the `test.setupFiles` of the specified preset.
|
|
6
6
|
*/
|
|
7
|
-
preset?: 'manual' | 'auto' | 'none' | undefined;
|
|
7
|
+
preset?: 'enable' | 'manual' | 'auto' | 'none' | undefined;
|
|
8
8
|
/**
|
|
9
9
|
* The name of the subdirectory that the baseline snapshots get saved in.
|
|
10
10
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,mBAAmB,EACnB,gBAAgB,EAChB,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,oBAAoB,CAAA;AAE3B,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,2BAA2B,GACzF,sBAAsB,GACtB,2BAA2B,CAAC,CAAC,CAAC,GAC9B,mBAAmB,GAAG;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,mBAAmB,EACnB,gBAAgB,EAChB,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,oBAAoB,CAAA;AAE3B,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,2BAA2B,GACzF,sBAAsB,GACtB,2BAA2B,CAAC,CAAC,CAAC,GAC9B,mBAAmB,GAAG;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC1D;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B;;;;OAIG;IACH,eAAe,CAAC,EACb,MAAM,GACN,CAAC,CAAC,OAAO,EAAE;QACX,EAAE,EAAE,OAAO,CAAA;QACX,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,MAAM,CAAA;QAChB,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAA;QACvC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAA;KACtC,KAAK,MAAM,CAAC,GACb,SAAS,CAAA;IACZ;;;;;;;;;;;;;;;;;;;OAmBG;IACH,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CACtD,CAAA"}
|
package/esm/index.d.ts
CHANGED
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,YAAY,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA"}
|
package/esm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"enable.d.ts","sourceRoot":"","sources":["../../src/presets/enable.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA"}
|
|
@@ -11,15 +11,17 @@ export declare const visContext: {
|
|
|
11
11
|
resultPath: string;
|
|
12
12
|
diffPath: string;
|
|
13
13
|
timeout?: number | undefined | undefined;
|
|
14
|
-
comparisonMethod: any;
|
|
15
|
-
diffOptions?: Partial<import("ssim.js").Options> | undefined;
|
|
16
14
|
failureThresholdType?: "pixel" | "percent" | undefined | undefined;
|
|
17
15
|
failureThreshold?: number | undefined | undefined;
|
|
16
|
+
comparisonMethod: any;
|
|
17
|
+
diffOptions?: Partial<import("ssim.js").Options> | undefined;
|
|
18
18
|
} | {
|
|
19
19
|
baselinePath: string;
|
|
20
20
|
resultPath: string;
|
|
21
21
|
diffPath: string;
|
|
22
22
|
timeout?: number | undefined | undefined;
|
|
23
|
+
failureThresholdType?: "pixel" | "percent" | undefined | undefined;
|
|
24
|
+
failureThreshold?: number | undefined | undefined;
|
|
23
25
|
comparisonMethod?: any;
|
|
24
26
|
diffOptions?: {
|
|
25
27
|
threshold?: number | undefined;
|
|
@@ -30,8 +32,6 @@ export declare const visContext: {
|
|
|
30
32
|
diffColorAlt?: [number, number, number] | undefined;
|
|
31
33
|
diffMask?: boolean | undefined;
|
|
32
34
|
} | undefined;
|
|
33
|
-
failureThresholdType?: "pixel" | "percent" | undefined | undefined;
|
|
34
|
-
failureThreshold?: number | undefined | undefined;
|
|
35
35
|
};
|
|
36
36
|
getTaskCount(testPath: string, taskId: string): number;
|
|
37
37
|
hasImageSnapshot(testPath: string, taskId: string, snapshotFileId: string | undefined): Promise<boolean>;
|
|
@@ -18,15 +18,17 @@ export declare function createVisContext(): {
|
|
|
18
18
|
resultPath: string;
|
|
19
19
|
diffPath: string;
|
|
20
20
|
timeout?: number | undefined | undefined;
|
|
21
|
-
comparisonMethod: any;
|
|
22
|
-
diffOptions?: Partial<import("ssim.js").Options> | undefined;
|
|
23
21
|
failureThresholdType?: "pixel" | "percent" | undefined | undefined;
|
|
24
22
|
failureThreshold?: number | undefined | undefined;
|
|
23
|
+
comparisonMethod: any;
|
|
24
|
+
diffOptions?: Partial<import("ssim.js").Options> | undefined;
|
|
25
25
|
} | {
|
|
26
26
|
baselinePath: string;
|
|
27
27
|
resultPath: string;
|
|
28
28
|
diffPath: string;
|
|
29
29
|
timeout?: number | undefined | undefined;
|
|
30
|
+
failureThresholdType?: "pixel" | "percent" | undefined | undefined;
|
|
31
|
+
failureThreshold?: number | undefined | undefined;
|
|
30
32
|
comparisonMethod?: any;
|
|
31
33
|
diffOptions?: {
|
|
32
34
|
threshold?: number | undefined;
|
|
@@ -37,8 +39,6 @@ export declare function createVisContext(): {
|
|
|
37
39
|
diffColorAlt?: [number, number, number] | undefined;
|
|
38
40
|
diffMask?: boolean | undefined;
|
|
39
41
|
} | undefined;
|
|
40
|
-
failureThresholdType?: "pixel" | "percent" | undefined | undefined;
|
|
41
|
-
failureThreshold?: number | undefined | undefined;
|
|
42
42
|
};
|
|
43
43
|
getTaskCount(testPath: string, taskId: string): number;
|
|
44
44
|
hasImageSnapshot(testPath: string, taskId: string, snapshotFileId: string | undefined): Promise<boolean>;
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
import { type SnapshotMeta } from '../client.ts';
|
|
2
2
|
import type { SetupVisSuiteCommand } from '../server/commands/setup_vis_suite.ts';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Visual test configuration on the client side.
|
|
5
|
+
*/
|
|
6
|
+
export type VisClientConfigurator<M extends SnapshotMeta<any>> = {
|
|
4
7
|
presets: {
|
|
5
8
|
/**
|
|
6
|
-
* Enable
|
|
9
|
+
* Enable visual testing.
|
|
10
|
+
*
|
|
11
|
+
* auto snapshot is turned off by default.
|
|
12
|
+
* You can specify the test to take a snapshot during `afterEach()` hook with `setAutoSnapshotOptions()`.
|
|
13
|
+
*/
|
|
14
|
+
enable(): void;
|
|
15
|
+
/**
|
|
16
|
+
* Enable visual testing.
|
|
17
|
+
*
|
|
18
|
+
* `setAutoSnapshotOptions` will have no effect in this preset.
|
|
7
19
|
*/
|
|
8
20
|
manual(): void;
|
|
9
21
|
/**
|
|
@@ -37,4 +49,5 @@ export declare function createVis<M extends SnapshotMeta<any>>(commands: SetupVi
|
|
|
37
49
|
matchPerTheme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
|
|
38
50
|
};
|
|
39
51
|
};
|
|
52
|
+
export declare function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand): VisClientConfigurator<M>;
|
|
40
53
|
//# sourceMappingURL=create_vis.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../src/setup/create_vis.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,
|
|
1
|
+
{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../src/setup/create_vis.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAoC,MAAM,cAAc,CAAA;AAIlF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAEjF;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,IAAI;IAChE,OAAO,EAAE;QACR;;;;;WAKG;QACH,MAAM,IAAI,IAAI,CAAA;QACd;;;;WAIG;QACH,MAAM,IAAI,IAAI,CAAA;QACd;;;;WAIG;QACH,IAAI,IAAI,IAAI,CAAA;QACZ;;;;;;;;;;;;;;WAcG;QACH,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;KACtG,CAAA;IACD,SAAS,EAAE;QACV,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;KACtB,CAAA;IACD,SAAS,EAAE;QACV,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;QACnC,aAAa,CACZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,GACvF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;KACtB,CAAA;CACD,CAAA;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB,4BAkFpF"}
|
package/esm/setup/create_vis.js
CHANGED
|
@@ -1,46 +1,25 @@
|
|
|
1
1
|
import dedent from 'dedent';
|
|
2
2
|
import { afterEach, beforeAll } from 'vitest';
|
|
3
|
-
import { toTaskId } from "../client.js";
|
|
3
|
+
import { setAutoSnapshotOptions, toTaskId } from "../client.js";
|
|
4
4
|
import { ctx } from "../client/ctx.js";
|
|
5
5
|
import { shouldTakeSnapshot } from "../client/should_take_snapshot.js";
|
|
6
|
-
import { getAutoSnapshotOptions } from
|
|
6
|
+
import { enableAuto, getAutoSnapshotOptions } from "../client/snapshot_options.js";
|
|
7
7
|
export function createVis(commands) {
|
|
8
8
|
let subjectDataTestId;
|
|
9
|
-
/**
|
|
10
|
-
* Visual test configuration on the client side.
|
|
11
|
-
*/
|
|
12
9
|
const vis = {
|
|
13
10
|
presets: {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
enable() {
|
|
12
|
+
beforeAll(vis.beforeAll.setup);
|
|
13
|
+
afterEach(vis.afterEach.matchImageSnapshot);
|
|
14
|
+
},
|
|
17
15
|
manual() {
|
|
18
16
|
beforeAll(vis.beforeAll.setup);
|
|
19
17
|
},
|
|
20
|
-
/**
|
|
21
|
-
* Enable automatic visual testing.
|
|
22
|
-
*
|
|
23
|
-
* This will take a snapshot after each test.
|
|
24
|
-
*/
|
|
25
18
|
auto() {
|
|
26
19
|
beforeAll(vis.beforeAll.setup);
|
|
27
20
|
afterEach(vis.afterEach.matchImageSnapshot);
|
|
21
|
+
enableAuto();
|
|
28
22
|
},
|
|
29
|
-
/**
|
|
30
|
-
* Enable automatic visual testing with multiple themes.
|
|
31
|
-
*
|
|
32
|
-
* This will take a snapshot after each test for each theme.
|
|
33
|
-
*
|
|
34
|
-
* @param themes A record of theme names and their setup functions.
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```ts
|
|
38
|
-
* vis().presets.theme({
|
|
39
|
-
* light() { document.body.classList.add('light') },
|
|
40
|
-
* dark() { document.body.classList.add('dark') },
|
|
41
|
-
* })
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
23
|
theme(themes) {
|
|
45
24
|
beforeAll(vis.beforeAll.setup);
|
|
46
25
|
afterEach(vis.afterEach.matchPerTheme(themes));
|
package/esm/setup/vis.d.ts
CHANGED
|
@@ -1,18 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Visual test configuration on the client side.
|
|
3
3
|
*/
|
|
4
|
-
export declare const vis:
|
|
5
|
-
presets: {
|
|
6
|
-
manual(): void;
|
|
7
|
-
auto(): void;
|
|
8
|
-
theme(themes: Record<string, (options: import("../client.ts").SnapshotMeta<any>) => Promise<boolean> | Promise<void> | boolean | void>): void;
|
|
9
|
-
};
|
|
10
|
-
beforeAll: {
|
|
11
|
-
setup(): Promise<void>;
|
|
12
|
-
};
|
|
13
|
-
afterEach: {
|
|
14
|
-
matchImageSnapshot(): Promise<void>;
|
|
15
|
-
matchPerTheme(themes: Record<string, (options: import("../client.ts").SnapshotMeta<any>) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
4
|
+
export declare const vis: import("./create_vis.ts").VisClientConfigurator<import("../index.ts").SnapshotMeta<any>>;
|
|
18
5
|
//# sourceMappingURL=vis.d.ts.map
|
package/esm/setup/vis.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/setup/vis.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,GAAG
|
|
1
|
+
{"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/setup/vis.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,GAAG,0FAAsB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vitest-plugin-vis",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Vitest visual testing plugin",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"image-snapshot",
|
|
@@ -40,6 +40,10 @@
|
|
|
40
40
|
"types": "./esm/presets/auto.d.ts",
|
|
41
41
|
"default": "./esm/presets/auto.js"
|
|
42
42
|
},
|
|
43
|
+
"./presets/enable": {
|
|
44
|
+
"types": "./esm/presets/enable.d.ts",
|
|
45
|
+
"default": "./esm/presets/enable.js"
|
|
46
|
+
},
|
|
43
47
|
"./presets/manual": {
|
|
44
48
|
"types": "./esm/presets/manual.d.ts",
|
|
45
49
|
"default": "./esm/presets/manual.js"
|
|
@@ -76,10 +80,10 @@
|
|
|
76
80
|
"@types/is-ci": "^3.0.4",
|
|
77
81
|
"@types/pngjs": "^6.0.5",
|
|
78
82
|
"@types/react": "^19.0.2",
|
|
79
|
-
"@vitest/browser": "^3.0.
|
|
80
|
-
"@vitest/coverage-istanbul": "^3.0.
|
|
81
|
-
"@vitest/coverage-v8": "^3.0.
|
|
82
|
-
"@vitest/expect": "^3.0.
|
|
83
|
+
"@vitest/browser": "^3.0.6",
|
|
84
|
+
"@vitest/coverage-istanbul": "^3.0.6",
|
|
85
|
+
"@vitest/coverage-v8": "^3.0.6",
|
|
86
|
+
"@vitest/expect": "^3.0.6",
|
|
83
87
|
"cross-env": "^7.0.3",
|
|
84
88
|
"never-fail": "^1.1.4",
|
|
85
89
|
"npm-run-all2": "^7.0.2",
|
|
@@ -88,7 +92,7 @@
|
|
|
88
92
|
"react-dom": "^19.0.0",
|
|
89
93
|
"typescript": "^5.7.2",
|
|
90
94
|
"vite": "^6.0.9",
|
|
91
|
-
"vitest": "^3.0.
|
|
95
|
+
"vitest": "^3.0.6",
|
|
92
96
|
"vitest-browser-react": "^0.1.0",
|
|
93
97
|
"webdriverio": "latest"
|
|
94
98
|
},
|
package/readme.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
# Vitest Visual Testing Plugin
|
|
2
2
|
|
|
3
|
+
[![NPM version][npm_image]][npm_url]
|
|
4
|
+
[![NPM downloads][downloads_image]][npm_url]
|
|
5
|
+
|
|
3
6
|
Vitest visual testing plugin allowing you to capture and compare image snapshots automatically and manually.
|
|
4
7
|
|
|
5
8
|
It requires [Vitest Browser Mode][vitest-browser-mode] to work.
|
|
@@ -80,7 +83,7 @@ export default defineConfig({
|
|
|
80
83
|
}) => `__vis__/${ci ? platform : 'local'}`,
|
|
81
84
|
platform: '...', // {process.platform} or `local` (deprecated use `snapshotRootDir` instead)
|
|
82
85
|
customizeSnapshotSubpath: (subpath) => trimCommonFolder(subpath),
|
|
83
|
-
customizeSnapshotId: (id, index) => `${id}-${index}`,
|
|
86
|
+
customizeSnapshotId: ({ id, index }) => `${id}-${index}`,
|
|
84
87
|
// set a default subject (e.g. 'subject') to capture image snapshot
|
|
85
88
|
subjectDataTestId: undefined,
|
|
86
89
|
comparisonMethod: 'pixel',
|
|
@@ -91,7 +94,7 @@ export default defineConfig({
|
|
|
91
94
|
failureThreshold: 0,
|
|
92
95
|
})
|
|
93
96
|
],
|
|
94
|
-
test:{
|
|
97
|
+
test: {
|
|
95
98
|
browser: {/* ... */}
|
|
96
99
|
}
|
|
97
100
|
})
|
|
@@ -110,8 +113,8 @@ export default defineConfig({
|
|
|
110
113
|
plugins: [
|
|
111
114
|
vis({ preset: 'none' })
|
|
112
115
|
],
|
|
113
|
-
test:{
|
|
114
|
-
browser:{/* ... */},
|
|
116
|
+
test: {
|
|
117
|
+
browser: {/* ... */},
|
|
115
118
|
setupFiles: ['vitest.setup.ts']
|
|
116
119
|
}
|
|
117
120
|
})
|
|
@@ -120,13 +123,21 @@ export default defineConfig({
|
|
|
120
123
|
import { vis } from 'vitest-plugin-vis/setup'
|
|
121
124
|
|
|
122
125
|
// if you set `preset: none` in `vitest.config.ts`,
|
|
123
|
-
// you can
|
|
126
|
+
// you can use a preset manually here.
|
|
127
|
+
|
|
128
|
+
// Take snapshot at the end of each rendering test.
|
|
124
129
|
vis.presets.auto()
|
|
130
|
+
// Enable snapshot testing for manual snapshot only.
|
|
125
131
|
vis.presets.manual()
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
//
|
|
132
|
+
// Enable snapshot testing, allow auto snapshot with `setAutoSnapshotOptions()`
|
|
133
|
+
vis.presets.enable()
|
|
134
|
+
|
|
135
|
+
// Take image snapshot for each rendering test,
|
|
136
|
+
// one snapshot per theme (light and dark in this example).
|
|
137
|
+
//
|
|
138
|
+
// Note that this changes the theme in the `afterEach` hook.
|
|
139
|
+
// If you want to capture manual snapshots in different themes,
|
|
140
|
+
// configure Vitest to run the tests in different themes.
|
|
130
141
|
vis.presets.theme({
|
|
131
142
|
async light() { document.body.classList.remove('dark') },
|
|
132
143
|
async dark() { document.body.classList.add('dark') },
|
|
@@ -153,10 +164,10 @@ To address this, you can add the following to your `tsconfig.json`:
|
|
|
153
164
|
|
|
154
165
|
## Usage
|
|
155
166
|
|
|
156
|
-
### Auto
|
|
167
|
+
### Auto Preset
|
|
157
168
|
|
|
158
169
|
By default, the plugin will use the `auto` preset,
|
|
159
|
-
which will take a snapshot at the end of each test.
|
|
170
|
+
which will take a snapshot at the end of each rendering test.
|
|
160
171
|
|
|
161
172
|
You can control how the auto snapshot is taken using the `setAutoSnapshotOptions` function:
|
|
162
173
|
|
|
@@ -167,6 +178,8 @@ import { beforeEach, it } from 'vitest'
|
|
|
167
178
|
beforeAll((suite) => {
|
|
168
179
|
// Apply options to all tests in the current suite (file)
|
|
169
180
|
setAutoSnapshotOptions(suite, /* options */)
|
|
181
|
+
// or
|
|
182
|
+
setAutoSnapshotOptions(/* options */)
|
|
170
183
|
})
|
|
171
184
|
|
|
172
185
|
beforeEach(({ task }) => {
|
|
@@ -204,7 +217,7 @@ setAutoSnapshotOptions(true /* or false */)
|
|
|
204
217
|
setAutoSnapshotOptions({
|
|
205
218
|
enable: true,
|
|
206
219
|
comparisonMethod: 'pixel',
|
|
207
|
-
customizeSnapshotId: (id, index) => `${id}-custom-${index}`,
|
|
220
|
+
customizeSnapshotId: ({ id, index }) => `${id}-custom-${index}`,
|
|
208
221
|
// pixelmatch or ssim.js options, depending on `comparisonMethod`.
|
|
209
222
|
diffOptions: { threshold: 0.01 },
|
|
210
223
|
failureThreshold: 0.01,
|
|
@@ -229,7 +242,7 @@ vis.presets.theme({
|
|
|
229
242
|
})
|
|
230
243
|
```
|
|
231
244
|
|
|
232
|
-
### Manual
|
|
245
|
+
### Manual Preset
|
|
233
246
|
|
|
234
247
|
You can also set the preset to `manual` and compare snapshots manually:
|
|
235
248
|
|
|
@@ -242,7 +255,7 @@ export default defineConfig({
|
|
|
242
255
|
vis({ preset: 'manual' })
|
|
243
256
|
],
|
|
244
257
|
test:{
|
|
245
|
-
browser:{/* ... */}
|
|
258
|
+
browser: {/* ... */}
|
|
246
259
|
}
|
|
247
260
|
})
|
|
248
261
|
|
|
@@ -272,7 +285,7 @@ it('manual snapshot with options', async ({ expect }) => {
|
|
|
272
285
|
page.render(<div data-testid="subject">hello world</div>)
|
|
273
286
|
const subject = page.getByTestId('subject')
|
|
274
287
|
await expect(subject).toMatchImageSnapshot({
|
|
275
|
-
customizeSnapshotId: (id, index) => `${id}-custom-${index}`,
|
|
288
|
+
customizeSnapshotId: ({ id, index }) => `${id}-custom-${index}`,
|
|
276
289
|
failureThreshold: 0.01,
|
|
277
290
|
failureThresholdType: 'percent',
|
|
278
291
|
diffOptions: {
|
|
@@ -283,6 +296,23 @@ it('manual snapshot with options', async ({ expect }) => {
|
|
|
283
296
|
})
|
|
284
297
|
```
|
|
285
298
|
|
|
299
|
+
### Enable Preset
|
|
300
|
+
|
|
301
|
+
The `enable` preset allows you to take manual snapshot,
|
|
302
|
+
as well as auto snapshot at the end on a rendering test using the `setAutoSnapshotOptions` function:
|
|
303
|
+
|
|
304
|
+
```ts
|
|
305
|
+
import { setAutoSnapshotOptions } from 'vitest-plugin-vis'
|
|
306
|
+
import { beforeEach, it } from 'vitest'
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
it('take snapshot', async () => {
|
|
310
|
+
setAutoSnapshotOptions(/* options */) // e.g. `true`
|
|
311
|
+
|
|
312
|
+
// ...your test...
|
|
313
|
+
})
|
|
314
|
+
```
|
|
315
|
+
|
|
286
316
|
### Has Snapshot
|
|
287
317
|
|
|
288
318
|
While less common, you can also check if a snapshot exists:
|
|
@@ -302,7 +332,7 @@ it('Has Snapshot', async ({ expect }) => {
|
|
|
302
332
|
})
|
|
303
333
|
```
|
|
304
334
|
|
|
305
|
-
This is useful when you are performing
|
|
335
|
+
This is useful when you are performing negative test.
|
|
306
336
|
|
|
307
337
|
## Git Ignore
|
|
308
338
|
|
|
@@ -340,8 +370,11 @@ This is because through our own usage, we do not found a good use case for them.
|
|
|
340
370
|
|
|
341
371
|
If you have a good use case for these features, please open an issue or PR.
|
|
342
372
|
|
|
373
|
+
[downloads_image]: https://img.shields.io/npm/dm/vitest-plugin-vis.svg?style=flat
|
|
343
374
|
[firefox]: https://www.mozilla.org/en-US/firefox/
|
|
344
375
|
[jest-image-snapshot]: https://github.com/americanexpress/jest-image-snapshot
|
|
376
|
+
[npm_image]: https://img.shields.io/npm/v/vitest-plugin-vis.svg?style=flat
|
|
377
|
+
[npm_url]: https://npmjs.org/package/vitest-plugin-vis
|
|
345
378
|
[storybook-addon-vis]: https://github.com/repobuddy/storybook-addon-vis
|
|
346
379
|
[vitest-browser-mode]: https://vitest.dev/guide/browser/
|
|
347
380
|
[vitest-plugin-vis]: https://www.npmjs.com/package/vitest-plugin-vis
|
package/src/client/ctx.ts
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import { getCurrentTest } from './vitest_suite_proxy.ts'
|
|
1
|
+
import { getCurrentSuite, getCurrentTest } from './vitest_suite_proxy.ts'
|
|
2
2
|
|
|
3
3
|
export const ctx = {
|
|
4
|
+
autoEnabled: false,
|
|
4
5
|
getCurrentTest,
|
|
6
|
+
getCurrentSuite,
|
|
5
7
|
__test__reset() {
|
|
6
8
|
ctx.getCurrentTest = getCurrentTest
|
|
9
|
+
ctx.getCurrentSuite = getCurrentSuite
|
|
10
|
+
ctx.autoEnabled = false
|
|
7
11
|
},
|
|
8
12
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ctx } from './ctx.ts'
|
|
2
|
-
import { getAutoSnapshotOptions } from './snapshot_options.
|
|
3
|
-
import type { SnapshotMeta } from './snapshot_options.ts'
|
|
2
|
+
import { type SnapshotMeta, getAutoSnapshotOptions } from './snapshot_options.ts'
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* Determine should snapshot be taken.
|
|
@@ -11,5 +10,5 @@ import type { SnapshotMeta } from './snapshot_options.ts'
|
|
|
11
10
|
*/
|
|
12
11
|
export function shouldTakeSnapshot(meta?: SnapshotMeta<any> | undefined) {
|
|
13
12
|
const m = meta ?? getAutoSnapshotOptions(ctx.getCurrentTest())
|
|
14
|
-
return document.body.childElementCount > 0 && m?.enable
|
|
13
|
+
return document.body.childElementCount > 0 && m?.enable
|
|
15
14
|
}
|
|
@@ -19,6 +19,10 @@ export type MetaTask =
|
|
|
19
19
|
}
|
|
20
20
|
| undefined
|
|
21
21
|
|
|
22
|
+
export function enableAuto() {
|
|
23
|
+
ctx.autoEnabled = true
|
|
24
|
+
}
|
|
25
|
+
|
|
22
26
|
/**
|
|
23
27
|
* Set the snapshot options for auto snapshot.
|
|
24
28
|
*
|
|
@@ -53,9 +57,34 @@ export function setAutoSnapshotOptions<M extends ComparisonMethod>(
|
|
|
53
57
|
function parseArgs<M extends ComparisonMethod>(
|
|
54
58
|
args: [task: MetaTask, meta: SnapshotMeta<M> | boolean] | [meta: boolean | SnapshotMeta<M>],
|
|
55
59
|
): [MetaTask | undefined, SnapshotMeta<M>] {
|
|
56
|
-
return args.length === 1
|
|
60
|
+
return args.length === 1
|
|
61
|
+
? [ctx.getCurrentTest() ?? (ctx.getCurrentSuite().tasks?.[0] as any)?.file, parseMeta(args[0])]
|
|
62
|
+
: [args[0], parseMeta(args[1])]
|
|
57
63
|
}
|
|
58
64
|
|
|
59
65
|
function parseMeta<M extends ComparisonMethod>(meta: boolean | SnapshotMeta<M>): SnapshotMeta<M> {
|
|
60
66
|
return typeof meta === 'boolean' ? ({ enable: meta } as any) : { enable: true, ...meta }
|
|
61
67
|
}
|
|
68
|
+
|
|
69
|
+
export function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined {
|
|
70
|
+
if (!task) return
|
|
71
|
+
|
|
72
|
+
const list: any[] = []
|
|
73
|
+
let current = task
|
|
74
|
+
while (current?.suite) {
|
|
75
|
+
list.unshift(current.suite.meta)
|
|
76
|
+
current = current.suite
|
|
77
|
+
}
|
|
78
|
+
list.unshift(task.file?.meta)
|
|
79
|
+
list.push(task.meta)
|
|
80
|
+
return list.reduce(
|
|
81
|
+
(acc, cur) => {
|
|
82
|
+
if (cur?.[NAME]) {
|
|
83
|
+
const { [NAME]: meta } = cur
|
|
84
|
+
return Object.assign({}, acc, meta)
|
|
85
|
+
}
|
|
86
|
+
return acc
|
|
87
|
+
},
|
|
88
|
+
{ enable: ctx.autoEnabled },
|
|
89
|
+
)
|
|
90
|
+
}
|
package/src/client.ts
CHANGED
|
@@ -2,6 +2,6 @@ export * from './client/expect/expectation_result.ts'
|
|
|
2
2
|
export type * from './client/expect/to_match_image_snapshot.types.ts'
|
|
3
3
|
export * from './client/image_snapshot_matcher.ts'
|
|
4
4
|
export * from './client/should_take_snapshot.ts'
|
|
5
|
-
export
|
|
5
|
+
export { type MetaTask, type SnapshotMeta, setAutoSnapshotOptions } from './client/snapshot_options.ts'
|
|
6
6
|
export * from './client/task_id.ts'
|
|
7
7
|
export type * from './shared/types.ts'
|
package/src/config/types.ts
CHANGED
|
@@ -15,7 +15,7 @@ export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTime
|
|
|
15
15
|
/**
|
|
16
16
|
* Loads the `test.setupFiles` of the specified preset.
|
|
17
17
|
*/
|
|
18
|
-
preset?: 'manual' | 'auto' | 'none' | undefined
|
|
18
|
+
preset?: 'enable' | 'manual' | 'auto' | 'none' | undefined
|
|
19
19
|
/**
|
|
20
20
|
* The name of the subdirectory that the baseline snapshots get saved in.
|
|
21
21
|
*
|
package/src/index.ts
CHANGED
package/src/setup/create_vis.ts
CHANGED
|
@@ -1,48 +1,80 @@
|
|
|
1
1
|
import dedent from 'dedent'
|
|
2
2
|
import { afterEach, beforeAll } from 'vitest'
|
|
3
|
-
import { type SnapshotMeta, toTaskId } from '../client.ts'
|
|
3
|
+
import { type SnapshotMeta, setAutoSnapshotOptions, toTaskId } from '../client.ts'
|
|
4
4
|
import { ctx } from '../client/ctx.ts'
|
|
5
5
|
import { shouldTakeSnapshot } from '../client/should_take_snapshot.ts'
|
|
6
|
-
import { getAutoSnapshotOptions } from '../client/snapshot_options.
|
|
6
|
+
import { enableAuto, getAutoSnapshotOptions } from '../client/snapshot_options.ts'
|
|
7
7
|
import type { SetupVisSuiteCommand } from '../server/commands/setup_vis_suite.ts'
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Visual test configuration on the client side.
|
|
11
|
+
*/
|
|
12
|
+
export type VisClientConfigurator<M extends SnapshotMeta<any>> = {
|
|
13
|
+
presets: {
|
|
14
|
+
/**
|
|
15
|
+
* Enable visual testing.
|
|
16
|
+
*
|
|
17
|
+
* auto snapshot is turned off by default.
|
|
18
|
+
* You can specify the test to take a snapshot during `afterEach()` hook with `setAutoSnapshotOptions()`.
|
|
19
|
+
*/
|
|
20
|
+
enable(): void
|
|
21
|
+
/**
|
|
22
|
+
* Enable visual testing.
|
|
23
|
+
*
|
|
24
|
+
* `setAutoSnapshotOptions` will have no effect in this preset.
|
|
25
|
+
*/
|
|
26
|
+
manual(): void
|
|
27
|
+
/**
|
|
28
|
+
* Enable automatic visual testing.
|
|
29
|
+
*
|
|
30
|
+
* This will take a snapshot after each test.
|
|
31
|
+
*/
|
|
32
|
+
auto(): void
|
|
33
|
+
/**
|
|
34
|
+
* Enable automatic visual testing with multiple themes.
|
|
35
|
+
*
|
|
36
|
+
* This will take a snapshot after each test for each theme.
|
|
37
|
+
*
|
|
38
|
+
* @param themes A record of theme names and their setup functions.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```ts
|
|
42
|
+
* vis().presets.theme({
|
|
43
|
+
* light() { document.body.classList.add('light') },
|
|
44
|
+
* dark() { document.body.classList.add('dark') },
|
|
45
|
+
* })
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
theme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>): void
|
|
49
|
+
}
|
|
50
|
+
beforeAll: {
|
|
51
|
+
setup(): Promise<void>
|
|
52
|
+
}
|
|
53
|
+
afterEach: {
|
|
54
|
+
matchImageSnapshot(): Promise<void>
|
|
55
|
+
matchPerTheme(
|
|
56
|
+
themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>,
|
|
57
|
+
): () => Promise<void>
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
9
61
|
export function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand) {
|
|
10
62
|
let subjectDataTestId: string | undefined
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
*/
|
|
14
|
-
const vis = {
|
|
63
|
+
|
|
64
|
+
const vis: VisClientConfigurator<M> = {
|
|
15
65
|
presets: {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
66
|
+
enable() {
|
|
67
|
+
beforeAll(vis.beforeAll.setup)
|
|
68
|
+
afterEach(vis.afterEach.matchImageSnapshot)
|
|
69
|
+
},
|
|
19
70
|
manual() {
|
|
20
71
|
beforeAll(vis.beforeAll.setup)
|
|
21
72
|
},
|
|
22
|
-
/**
|
|
23
|
-
* Enable automatic visual testing.
|
|
24
|
-
*
|
|
25
|
-
* This will take a snapshot after each test.
|
|
26
|
-
*/
|
|
27
73
|
auto() {
|
|
28
74
|
beforeAll(vis.beforeAll.setup)
|
|
29
75
|
afterEach(vis.afterEach.matchImageSnapshot)
|
|
76
|
+
enableAuto()
|
|
30
77
|
},
|
|
31
|
-
/**
|
|
32
|
-
* Enable automatic visual testing with multiple themes.
|
|
33
|
-
*
|
|
34
|
-
* This will take a snapshot after each test for each theme.
|
|
35
|
-
*
|
|
36
|
-
* @param themes A record of theme names and their setup functions.
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```ts
|
|
40
|
-
* vis().presets.theme({
|
|
41
|
-
* light() { document.body.classList.add('light') },
|
|
42
|
-
* dark() { document.body.classList.add('dark') },
|
|
43
|
-
* })
|
|
44
|
-
* ```
|
|
45
|
-
*/
|
|
46
78
|
theme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>) {
|
|
47
79
|
beforeAll(vis.beforeAll.setup)
|
|
48
80
|
afterEach(vis.afterEach.matchPerTheme(themes))
|
|
@@ -1 +0,0 @@
|
|
|
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,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS,CAkBrH"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { NAME } from "../shared/constants.js";
|
|
2
|
-
export function getAutoSnapshotOptions(task) {
|
|
3
|
-
if (!task)
|
|
4
|
-
return;
|
|
5
|
-
const list = [];
|
|
6
|
-
let current = task;
|
|
7
|
-
while (current?.suite) {
|
|
8
|
-
list.unshift(current.suite.meta);
|
|
9
|
-
current = current.suite;
|
|
10
|
-
}
|
|
11
|
-
list.unshift(task.file?.meta);
|
|
12
|
-
list.push(task.meta);
|
|
13
|
-
return list.reduce((acc, cur) => {
|
|
14
|
-
if (cur?.[NAME]) {
|
|
15
|
-
const { [NAME]: meta } = cur;
|
|
16
|
-
return Object.assign({}, acc, meta);
|
|
17
|
-
}
|
|
18
|
-
return acc;
|
|
19
|
-
}, {});
|
|
20
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { NAME } from '../shared/constants.ts'
|
|
2
|
-
import type { MetaTask, SnapshotMeta } from './snapshot_options.ts'
|
|
3
|
-
|
|
4
|
-
export function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined {
|
|
5
|
-
if (!task) return
|
|
6
|
-
|
|
7
|
-
const list: any[] = []
|
|
8
|
-
let current = task
|
|
9
|
-
while (current?.suite) {
|
|
10
|
-
list.unshift(current.suite.meta)
|
|
11
|
-
current = current.suite
|
|
12
|
-
}
|
|
13
|
-
list.unshift(task.file?.meta)
|
|
14
|
-
list.push(task.meta)
|
|
15
|
-
return list.reduce((acc, cur) => {
|
|
16
|
-
if (cur?.[NAME]) {
|
|
17
|
-
const { [NAME]: meta } = cur
|
|
18
|
-
return Object.assign({}, acc, meta)
|
|
19
|
-
}
|
|
20
|
-
return acc
|
|
21
|
-
}, {})
|
|
22
|
-
}
|