@chromatic-com/vitest 0.0.0 → 0.12.8

package/dist/bin/archive-storybook.cjs

@@ -0,0 +1,210 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../shared/dist/archive-storybook/index.mjs
+var import_child_process = require("child_process");
+var import_path = __toESM(require("path"), 1);
+var import_fs = require("fs");
+var import_promises = require("fs/promises");
+var L = Object.defineProperty;
+var r = /* @__PURE__ */ __name((t, e) => L(t, "name", { value: e, configurable: true }), "r");
+var u = ((t) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(t, { get: (e, o) => (typeof require < "u" ? require : e)[o] }) : t)(function(t) {
+  if (typeof require < "u")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + t + '" is not supported');
+});
+function V() {
+  return process.cwd();
+}
+__name(V, "V");
+r(V, "rootDir");
+function B() {
+  let { CHROMATIC_ARCHIVE_LOCATION: t } = process.env;
+  return t;
+}
+__name(B, "B");
+r(B, "outputDirOverride");
+function c(t) {
+  let e = B() || t;
+  return import_path.default.resolve(V(), e, "chromatic-archives");
+}
+__name(c, "c");
+r(c, "archivesDir");
+function f(t) {
+  return import_path.default.resolve(c(t), "archive");
+}
+__name(f, "f");
+r(f, "assetsDir");
+function h(t) {
+  let e = c(t);
+  if (!(0, import_fs.existsSync)(e))
+    throw new Error(`Chromatic archives directory cannot be found: ${e}
+
+Please make sure that you have run your E2E tests, or have set the CHROMATIC_ARCHIVE_LOCATION env var if the output directory for the tests is not in the standard location.`);
+}
+__name(h, "h");
+r(h, "checkArchivesDirExists");
+function O(t) {
+  (0, import_fs.existsSync)(t) || (0, import_fs.mkdirSync)(t, { recursive: true });
+}
+__name(O, "O");
+r(O, "ensureDir");
+async function $(t, e) {
+  return O(import_path.default.dirname(t)), (0, import_promises.writeFile)(t, e, { mode: 511 });
+}
+__name($, "$");
+r($, "outputFile");
+async function w(t, e) {
+  return $(t, JSON.stringify(e));
+}
+__name(w, "w");
+r(w, "outputJSONFile");
+async function x(t) {
+  let e = await (0, import_promises.readFile)(t);
+  return JSON.parse(e.toString());
+}
+__name(x, "x");
+r(x, "readJSONFile");
+function a(t) {
+  return `w${t.width}h${t.height}`;
+}
+__name(a, "a");
+r(a, "viewportToString");
+function N(t) {
+  let e = t.match(/w(\d+)h(\d+)/);
+  return { width: Number(e[1]), height: Number(e[2]) };
+}
+__name(N, "N");
+r(N, "parseViewport");
+var M = "snapshot.json";
+function F(t) {
+  let e = t.split(".");
+  return e.slice(0, e.length - 3).join(".");
+}
+__name(F, "F");
+r(F, "snapshotIdFromFileName");
+function v(t) {
+  let e = t.split("."), o = e[e.length - 3];
+  return N(o);
+}
+__name(v, "v");
+r(v, "viewportFromFileName");
+async function y(t) {
+  return (await (0, import_promises.readdir)(t)).filter((o) => o.endsWith(`.${M}`));
+}
+__name(y, "y");
+r(y, "listSnapshotFiles");
+var J = "stories.json";
+function S(t, e) {
+  let { stories: o } = t, n = o.map((i) => {
+    let p = i.parameters.server.id, s = e[p];
+    return { ...i, parameters: { ...i.parameters, chromatic: { ...i.parameters.chromatic, modes: R(s) }, viewport: { viewports: X(s), defaultViewport: a(W(s)) } } };
+  });
+  return { ...t, stories: n };
+}
+__name(S, "S");
+r(S, "addViewportsToStories");
+async function E(t) {
+  return (await (0, import_promises.readdir)(t)).filter((o) => o.endsWith(`.${J}`));
+}
+__name(E, "E");
+r(E, "listStoriesFiles");
+function R(t) {
+  return t.reduce((e, o) => {
+    let n = a(o);
+    return e[n] = { viewport: n }, e;
+  }, {});
+}
+__name(R, "R");
+r(R, "buildStoryModesConfig");
+function X(t) {
+  return t.reduce((e, o) => {
+    let n = a(o);
+    return e[n] = { name: n, styles: { width: `${o.width}px`, height: `${o.height}px` } }, e;
+  }, {});
+}
+__name(X, "X");
+r(X, "buildStoryViewportsConfig");
+function W(t) {
+  let e = r((o, n) => o.width < n.width ? 1 : o.width > n.width ? -1 : 0, "compareFn");
+  return t.sort(e)[0];
+}
+__name(W, "W");
+r(W, "findDefaultViewport");
+async function l(t) {
+  let e = f(t), o = await y(e), n = G(o), i = c(t), p = (await E(i)).map((s) => import_path.default.resolve(i, s));
+  await Promise.all(p.map(async (s) => {
+    let b = await x(s), A = S(b, n);
+    await w(s, A);
+  }));
+}
+__name(l, "l");
+r(l, "addViewportsToStoriesFiles");
+function G(t) {
+  let e = {};
+  return t.forEach((o) => {
+    let n = F(o), i = e[n] || [];
+    i.push(v(o)), e[n] = i;
+  }), e;
+}
+__name(G, "G");
+r(G, "buildSnapshotViewportsLookup");
+function It(t, e, o) {
+  h(o), l(o).then(() => {
+    (0, import_child_process.execFileSync)("node", [T(), "dev", ...t, "-c", e], { stdio: "inherit" });
+  });
+}
+__name(It, "It");
+r(It, "archiveStorybook");
+function kt(t, e, o) {
+  h(o), l(o).then(() => {
+    (0, import_child_process.execFileSync)("node", [T(), "build", ...t, "-c", e], { stdio: "inherit" });
+  });
+}
+__name(kt, "kt");
+r(kt, "buildArchiveStorybook");
+function T() {
+  let t = u("storybook/package.json");
+  return (0, import_path.resolve)((0, import_path.dirname)(u.resolve("storybook/package.json")), t.bin.storybook);
+}
+__name(T, "T");
+r(T, "binPath");
+
+// src/bin/archive-storybook.ts
+var import_path2 = __toESM(require("path"), 1);
+
+// src/constants.ts
+var DEFAULT_OUTPUT_DIR = process.cwd();
+
+// src/bin/archive-storybook.ts
+var args = process.argv.slice(2);
+var configDir = import_path2.default.resolve(__dirname, "../storybook-config");
+try {
+  It(args, configDir, DEFAULT_OUTPUT_DIR);
+} catch (err) {
+  console.error(err.message);
+  process.exitCode = 1;
+}

package/dist/bin/build-archive-storybook.cjs

@@ -0,0 +1,210 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../shared/dist/archive-storybook/index.mjs
+var import_child_process = require("child_process");
+var import_path = __toESM(require("path"), 1);
+var import_fs = require("fs");
+var import_promises = require("fs/promises");
+var L = Object.defineProperty;
+var r = /* @__PURE__ */ __name((t, e) => L(t, "name", { value: e, configurable: true }), "r");
+var u = ((t) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(t, { get: (e, o) => (typeof require < "u" ? require : e)[o] }) : t)(function(t) {
+  if (typeof require < "u")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + t + '" is not supported');
+});
+function V() {
+  return process.cwd();
+}
+__name(V, "V");
+r(V, "rootDir");
+function B() {
+  let { CHROMATIC_ARCHIVE_LOCATION: t } = process.env;
+  return t;
+}
+__name(B, "B");
+r(B, "outputDirOverride");
+function c(t) {
+  let e = B() || t;
+  return import_path.default.resolve(V(), e, "chromatic-archives");
+}
+__name(c, "c");
+r(c, "archivesDir");
+function f(t) {
+  return import_path.default.resolve(c(t), "archive");
+}
+__name(f, "f");
+r(f, "assetsDir");
+function h(t) {
+  let e = c(t);
+  if (!(0, import_fs.existsSync)(e))
+    throw new Error(`Chromatic archives directory cannot be found: ${e}
+
+Please make sure that you have run your E2E tests, or have set the CHROMATIC_ARCHIVE_LOCATION env var if the output directory for the tests is not in the standard location.`);
+}
+__name(h, "h");
+r(h, "checkArchivesDirExists");
+function O(t) {
+  (0, import_fs.existsSync)(t) || (0, import_fs.mkdirSync)(t, { recursive: true });
+}
+__name(O, "O");
+r(O, "ensureDir");
+async function $(t, e) {
+  return O(import_path.default.dirname(t)), (0, import_promises.writeFile)(t, e, { mode: 511 });
+}
+__name($, "$");
+r($, "outputFile");
+async function w(t, e) {
+  return $(t, JSON.stringify(e));
+}
+__name(w, "w");
+r(w, "outputJSONFile");
+async function x(t) {
+  let e = await (0, import_promises.readFile)(t);
+  return JSON.parse(e.toString());
+}
+__name(x, "x");
+r(x, "readJSONFile");
+function a(t) {
+  return `w${t.width}h${t.height}`;
+}
+__name(a, "a");
+r(a, "viewportToString");
+function N(t) {
+  let e = t.match(/w(\d+)h(\d+)/);
+  return { width: Number(e[1]), height: Number(e[2]) };
+}
+__name(N, "N");
+r(N, "parseViewport");
+var M = "snapshot.json";
+function F(t) {
+  let e = t.split(".");
+  return e.slice(0, e.length - 3).join(".");
+}
+__name(F, "F");
+r(F, "snapshotIdFromFileName");
+function v(t) {
+  let e = t.split("."), o = e[e.length - 3];
+  return N(o);
+}
+__name(v, "v");
+r(v, "viewportFromFileName");
+async function y(t) {
+  return (await (0, import_promises.readdir)(t)).filter((o) => o.endsWith(`.${M}`));
+}
+__name(y, "y");
+r(y, "listSnapshotFiles");
+var J = "stories.json";
+function S(t, e) {
+  let { stories: o } = t, n = o.map((i) => {
+    let p = i.parameters.server.id, s = e[p];
+    return { ...i, parameters: { ...i.parameters, chromatic: { ...i.parameters.chromatic, modes: R(s) }, viewport: { viewports: X(s), defaultViewport: a(W(s)) } } };
+  });
+  return { ...t, stories: n };
+}
+__name(S, "S");
+r(S, "addViewportsToStories");
+async function E(t) {
+  return (await (0, import_promises.readdir)(t)).filter((o) => o.endsWith(`.${J}`));
+}
+__name(E, "E");
+r(E, "listStoriesFiles");
+function R(t) {
+  return t.reduce((e, o) => {
+    let n = a(o);
+    return e[n] = { viewport: n }, e;
+  }, {});
+}
+__name(R, "R");
+r(R, "buildStoryModesConfig");
+function X(t) {
+  return t.reduce((e, o) => {
+    let n = a(o);
+    return e[n] = { name: n, styles: { width: `${o.width}px`, height: `${o.height}px` } }, e;
+  }, {});
+}
+__name(X, "X");
+r(X, "buildStoryViewportsConfig");
+function W(t) {
+  let e = r((o, n) => o.width < n.width ? 1 : o.width > n.width ? -1 : 0, "compareFn");
+  return t.sort(e)[0];
+}
+__name(W, "W");
+r(W, "findDefaultViewport");
+async function l(t) {
+  let e = f(t), o = await y(e), n = G(o), i = c(t), p = (await E(i)).map((s) => import_path.default.resolve(i, s));
+  await Promise.all(p.map(async (s) => {
+    let b = await x(s), A = S(b, n);
+    await w(s, A);
+  }));
+}
+__name(l, "l");
+r(l, "addViewportsToStoriesFiles");
+function G(t) {
+  let e = {};
+  return t.forEach((o) => {
+    let n = F(o), i = e[n] || [];
+    i.push(v(o)), e[n] = i;
+  }), e;
+}
+__name(G, "G");
+r(G, "buildSnapshotViewportsLookup");
+function It(t, e, o) {
+  h(o), l(o).then(() => {
+    (0, import_child_process.execFileSync)("node", [T(), "dev", ...t, "-c", e], { stdio: "inherit" });
+  });
+}
+__name(It, "It");
+r(It, "archiveStorybook");
+function kt(t, e, o) {
+  h(o), l(o).then(() => {
+    (0, import_child_process.execFileSync)("node", [T(), "build", ...t, "-c", e], { stdio: "inherit" });
+  });
+}
+__name(kt, "kt");
+r(kt, "buildArchiveStorybook");
+function T() {
+  let t = u("storybook/package.json");
+  return (0, import_path.resolve)((0, import_path.dirname)(u.resolve("storybook/package.json")), t.bin.storybook);
+}
+__name(T, "T");
+r(T, "binPath");
+
+// src/bin/build-archive-storybook.ts
+var import_path2 = __toESM(require("path"), 1);
+
+// src/constants.ts
+var DEFAULT_OUTPUT_DIR = process.cwd();
+
+// src/bin/build-archive-storybook.ts
+var args = process.argv.slice(2);
+var configDir = import_path2.default.resolve(__dirname, "../storybook-config");
+try {
+  kt(args, configDir, DEFAULT_OUTPUT_DIR);
+} catch (err) {
+  console.error(err.message);
+  process.exitCode = 1;
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Take visual regression snapshot of the current state of the DOM.
+ */
+declare function takeSnapshot(name?: string): Promise<void>;
+
+/**
+ * Disable automatic test snapshotting
+ * - When called within `test()`, it disables snapshotting for that test.
+ * - When called within `describe()`, it disables snapshotting for all tests within that describe block.
+ * - When called at the top level, it disables snapshotting for all tests in the file.
+ */
+declare function disableAutoSnapshot(): void;
+
+/**
+ * Wait for network to be idle, meaning no new network requests for at least `idleNetworkInterval` ms.
+ *
+ * The `idleNetworkInterval` can be configured via the Chromatic plugin's options.
+ *
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [chromaticPlugin({ idleNetworkInterval: 50 })]
+ * });
+ * ```
+ *
+ * Use `timeout` argument to reject if network doesn't become idle within given time.
+ */
+declare function waitForIdleNetwork(timeout: number): Promise<void>;
+
+export { disableAutoSnapshot, takeSnapshot, waitForIdleNetwork };

package/dist/index.mjs

@@ -0,0 +1,95 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/browser/public/takeSnapshot.ts
+import { assert } from "vitest";
+import { commands } from "vitest/browser";
+import { snapshot } from "@chromaui/rrweb-snapshot";
+
+// src/browser/getCurrentTest.ts
+import * as vitest from "vitest";
+var hooks = vitest.TestRunner ? vitest.TestRunner : await import("vitest/suite");
+function getCurrentTest() {
+  return hooks.getCurrentTest();
+}
+__name(getCurrentTest, "getCurrentTest");
+
+// src/browser/public/takeSnapshot.ts
+async function takeSnapshot(name) {
+  const test = getCurrentTest();
+  assert(test, "takeSnapshot() must be called within a test()");
+  test.meta.__chromatic_isTakeSnapshotCalled = true;
+  if (!test.meta.__chromatic_isRegistered) {
+    throw new Error("takeSnapshot() cannot be called in a test that is not registered for Chromatic plugin");
+  }
+  const domSnapshot = snapshot(document, {
+    recordCanvas: true
+  });
+  assert(domSnapshot, "Failed to capture DOM snapshot");
+  await replaceBlobUrls(domSnapshot);
+  await commands.__chromatic_uploadDOMSnapshot(test.id, domSnapshot, name);
+}
+__name(takeSnapshot, "takeSnapshot");
+async function replaceBlobUrls(node) {
+  if (!("childNodes" in node)) {
+    return;
+  }
+  await Promise.all(node.childNodes.map(async (childNode) => {
+    if ("tagName" in childNode && childNode.tagName === "img" && typeof childNode.attributes.src === "string" && childNode.attributes.src?.startsWith("blob:")) {
+      const base64Url = await toDataURL(childNode.attributes.src);
+      childNode.attributes.src = base64Url;
+    }
+    if ("childNodes" in childNode && childNode.childNodes?.length) {
+      await replaceBlobUrls(childNode);
+    }
+  }));
+}
+__name(replaceBlobUrls, "replaceBlobUrls");
+async function toDataURL(url) {
+  const blob = await fetch(url).then((res) => res.blob());
+  return new Promise((resolveFileRead, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolveFileRead(reader.result?.toString() || "");
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+__name(toDataURL, "toDataURL");
+
+// src/browser/public/autoSnapshot.ts
+import { beforeAll } from "vitest";
+function disableAutoSnapshot() {
+  const test = getCurrentTest();
+  if (test) {
+    test.meta.__chromatic_autoSnapshot = false;
+    return;
+  }
+  beforeAll(({}, suite) => {
+    traverseTests(suite);
+    function traverseTests(task) {
+      if (task.type === "test") {
+        task.meta.__chromatic_autoSnapshot = false;
+        return;
+      }
+      task.tasks.forEach(traverseTests);
+    }
+    __name(traverseTests, "traverseTests");
+  });
+}
+__name(disableAutoSnapshot, "disableAutoSnapshot");
+
+// src/browser/public/waitForIdleNetwork.ts
+import { assert as assert2 } from "vitest";
+import { commands as commands2 } from "vitest/browser";
+async function waitForIdleNetwork(timeout) {
+  const test = getCurrentTest();
+  assert2(test, "waitForIdleNetwork() must be called within a test()");
+  assert2(test.meta.__chromatic_isRegistered, "Cannot call waitForIdleNetwork for a test that hasn't been registered with the Chromatic plugin");
+  return await commands2.__chromatic_waitForIdleNetwork(test.id, timeout);
+}
+__name(waitForIdleNetwork, "waitForIdleNetwork");
+export {
+  disableAutoSnapshot,
+  takeSnapshot,
+  waitForIdleNetwork
+};

package/dist/plugin.d.ts

@@ -0,0 +1,49 @@
+import { Vite } from 'vitest/node';
+
+interface ChromaticConfig {
+    delay?: number;
+    diffIncludeAntiAliasing?: boolean;
+    diffThreshold?: number;
+    disableAutoSnapshot?: boolean;
+    forcedColors?: string;
+    pauseAnimationAtEnd?: boolean;
+    prefersReducedMotion?: string;
+    resourceArchiveTimeout?: number;
+    assetDomains?: string[];
+    cropToViewport?: boolean;
+    ignoreSelectors?: string[];
+}
+
+/**
+ * Options for the Chromatic Vitest plugin
+ */
+interface Options extends ChromaticConfig {
+    /**
+     * Tags used to register tests for visual regression tracking.
+     * If specified, only tests with at least one matching tag will be registered for visual regression tracking.
+     * Tests without any of the specified tags will be ignored and won't have snapshots taken, even if `disableAutoSnapshot` is false.
+     *
+     * @default none (all tests are registered)
+     */
+    tags?: string[];
+    /**
+     * Directory where temporary archives and snapshots will be stored.
+     *
+     * Defaults to `chromatic-archives` in the current working directory.
+     */
+    outputDirectory?: string;
+    /**
+     * Time in milliseconds to determine whether network is idle.
+     * The network is considered idle if there are no new network requests for at least this duration.
+     *
+     * @default 100
+     */
+    idleNetworkInterval?: number;
+}
+
+/**
+ * Vitest plugin for integrating with Chromatic's visual regression testing.
+ */
+declare function chromaticPlugin(userOptions?: Options): Vite.Plugin;
+
+export { chromaticPlugin };