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.
Files changed (45) hide show
  1. package/esm/client/ctx.d.ts +2 -0
  2. package/esm/client/ctx.d.ts.map +1 -1
  3. package/esm/client/ctx.js +5 -1
  4. package/esm/client/should_take_snapshot.d.ts +2 -2
  5. package/esm/client/should_take_snapshot.d.ts.map +1 -1
  6. package/esm/client/should_take_snapshot.js +2 -2
  7. package/esm/client/snapshot_options.d.ts +2 -0
  8. package/esm/client/snapshot_options.d.ts.map +1 -1
  9. package/esm/client/snapshot_options.js +25 -1
  10. package/esm/client/vitest_suite_proxy.d.ts +1 -0
  11. package/esm/client/vitest_suite_proxy.d.ts.map +1 -1
  12. package/esm/client/vitest_suite_proxy.js +1 -0
  13. package/esm/client.d.ts +1 -1
  14. package/esm/client.d.ts.map +1 -1
  15. package/esm/client.js +1 -1
  16. package/esm/config/types.d.ts +1 -1
  17. package/esm/config/types.d.ts.map +1 -1
  18. package/esm/index.d.ts +1 -1
  19. package/esm/index.d.ts.map +1 -1
  20. package/esm/index.js +1 -1
  21. package/esm/presets/enable.d.ts +3 -0
  22. package/esm/presets/enable.d.ts.map +1 -0
  23. package/esm/presets/enable.js +4 -0
  24. package/esm/server/vis_context.d.ts +4 -4
  25. package/esm/server/vis_context.logic.d.ts +4 -4
  26. package/esm/setup/create_vis.d.ts +15 -2
  27. package/esm/setup/create_vis.d.ts.map +1 -1
  28. package/esm/setup/create_vis.js +7 -28
  29. package/esm/setup/vis.d.ts +1 -14
  30. package/esm/setup/vis.d.ts.map +1 -1
  31. package/package.json +10 -6
  32. package/readme.md +49 -16
  33. package/src/client/ctx.ts +5 -1
  34. package/src/client/should_take_snapshot.ts +2 -3
  35. package/src/client/snapshot_options.ts +30 -1
  36. package/src/client/vitest_suite_proxy.ts +1 -0
  37. package/src/client.ts +1 -1
  38. package/src/config/types.ts +1 -1
  39. package/src/index.ts +1 -1
  40. package/src/presets/enable.ts +5 -0
  41. package/src/setup/create_vis.ts +61 -29
  42. package/esm/client/snapshot_options.internal.d.ts +0 -3
  43. package/esm/client/snapshot_options.internal.d.ts.map +0 -1
  44. package/esm/client/snapshot_options.internal.js +0 -20
  45. package/src/client/snapshot_options.internal.ts +0 -22
@@ -1,5 +1,7 @@
1
1
  export declare const ctx: {
2
+ autoEnabled: boolean;
2
3
  getCurrentTest: () => import("vitest").RunnerTestCase<object> | undefined;
4
+ getCurrentSuite: () => import("vitest").SuiteCollector<object>;
3
5
  __test__reset(): void;
4
6
  };
5
7
  //# sourceMappingURL=ctx.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ctx.d.ts","sourceRoot":"","sources":["../../src/client/ctx.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG;;;CAKf,CAAA"}
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 { SnapshotMeta } from './snapshot_options.ts';
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":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,SAAS,WAGtE"}
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.internal.js";
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 !== false;
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 ? [ctx.getCurrentTest(), parseMeta(args[0])] : [args[0], parseMeta(args[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,2 +1,3 @@
1
1
  export declare const getCurrentTest: () => import("vitest").RunnerTestCase<object> | undefined;
2
+ export declare const getCurrentSuite: () => import("vitest").SuiteCollector<object>;
2
3
  //# sourceMappingURL=vitest_suite_proxy.d.ts.map
@@ -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"}
@@ -5,3 +5,4 @@ if (globalThis.__vitest_browser__) {
5
5
  });
6
6
  }
7
7
  export const getCurrentTest = () => vitestSuite?.getCurrentTest();
8
+ export const getCurrentSuite = () => vitestSuite?.getCurrentSuite();
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 * from './client/snapshot_options.ts';
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
@@ -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,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,mBAAmB,mBAAmB,CAAA"}
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 * from "./client/snapshot_options.js";
4
+ export { setAutoSnapshotOptions } from "./client/snapshot_options.js";
5
5
  export * from "./client/task_id.js";
@@ -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;IAC/C;;;;;;;;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"}
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
@@ -1,4 +1,4 @@
1
1
  import './client/expect/augment.ts';
2
2
  import './client/page/augment.ts';
3
- export * from './client/snapshot_options.ts';
3
+ export { type MetaTask, type SnapshotMeta, setAutoSnapshotOptions } from './client/snapshot_options.ts';
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -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,cAAc,8BAA8B,CAAA"}
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
@@ -1,4 +1,4 @@
1
1
  // `vitest-plugin-vis` provides code that can be used in test files.
2
2
  import "./client/expect/augment.js";
3
3
  import "./client/page/augment.js";
4
- export * from "./client/snapshot_options.js";
4
+ export { setAutoSnapshotOptions } from "./client/snapshot_options.js";
@@ -0,0 +1,3 @@
1
+ import '../client/expect/extend.ts';
2
+ import '../client/page/extend.ts';
3
+ //# sourceMappingURL=enable.d.ts.map
@@ -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"}
@@ -0,0 +1,4 @@
1
+ import { vis } from "../setup/vis.js";
2
+ import "../client/expect/extend.js";
3
+ import "../client/page/extend.js";
4
+ vis.presets.enable();
@@ -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
- export declare function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand): {
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 manual visual testing.
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,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"}
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"}
@@ -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 '../client/snapshot_options.internal.js';
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
- * Enable manual visual testing.
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));
@@ -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
@@ -1 +1 @@
1
- {"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/setup/vis.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,GAAG;;;;;;;;;;;;;CAAsB,CAAA"}
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.1.0",
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.5",
80
- "@vitest/coverage-istanbul": "^3.0.5",
81
- "@vitest/coverage-v8": "^3.0.5",
82
- "@vitest/expect": "^3.0.5",
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.5",
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 enable `auto` or `manual` setup here
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
- // or capture image snapshot for all rendering tests
129
- // for multiple themes (light and dark in this example)
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 Snapshot
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 Snapshot
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 some negative test.
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.internal.ts'
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 !== false
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 ? [ctx.getCurrentTest(), parseMeta(args[0])] : [args[0], parseMeta(args[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
+ }
@@ -7,3 +7,4 @@ if ((globalThis as any).__vitest_browser__) {
7
7
  }
8
8
 
9
9
  export const getCurrentTest = () => vitestSuite?.getCurrentTest()
10
+ export const getCurrentSuite = () => vitestSuite?.getCurrentSuite()
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 * from './client/snapshot_options.ts'
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'
@@ -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
@@ -2,4 +2,4 @@
2
2
  import './client/expect/augment.ts'
3
3
  import './client/page/augment.ts'
4
4
 
5
- export * from './client/snapshot_options.ts'
5
+ export { type MetaTask, type SnapshotMeta, setAutoSnapshotOptions } from './client/snapshot_options.ts'
@@ -0,0 +1,5 @@
1
+ import { vis } from '../setup/vis.ts'
2
+ import '../client/expect/extend.ts'
3
+ import '../client/page/extend.ts'
4
+
5
+ vis.presets.enable()
@@ -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.internal.js'
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
- * Visual test configuration on the client side.
13
- */
14
- const vis = {
63
+
64
+ const vis: VisClientConfigurator<M> = {
15
65
  presets: {
16
- /**
17
- * Enable manual visual testing.
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,3 +0,0 @@
1
- import type { MetaTask, SnapshotMeta } from './snapshot_options.ts';
2
- export declare function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined;
3
- //# sourceMappingURL=snapshot_options.internal.d.ts.map
@@ -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
- }