@argos-ci/storybook 2.1.7 → 3.0.1

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 (6) hide show
  1. package/dist/test-runner.js +21 -16
  2. package/dist/vitest-plugin.js +22 -16
  3. package/package.json +47 -31
  4. package/dist/index.cjs +0 -5
  5. package/dist/index.d.ts +0 -57
  6. package/dist/index.js +0 -134
package/dist/test-runner.js CHANGED
@@ -70,7 +70,7 @@ function getFitToContentFromParameters(parameters) {
70
70
  }
71
71
 
72
72
  // src/utils/screenshot.ts
73
- async function storybookArgosScreenshot(page, context, options) {
73
+ async function storybookArgosScreenshot(handler, context, options) {
74
74
  const argosOptions = {
75
75
  ...options,
76
76
  // Disable aria-busy stabilization by default
@@ -81,12 +81,12 @@ async function storybookArgosScreenshot(page, context, options) {
81
81
  };
82
82
  const version = await getArgosStorybookVersion();
83
83
  const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
84
- DO_NOT_USE_setMetadataConfig({
84
+ const metadata = {
85
85
  sdk: { name: "@argos-ci/storybook", version },
86
86
  playwrightLibraries: context.playwrightLibraries,
87
87
  url: storyUrl,
88
88
  test: context.test
89
- });
89
+ };
90
90
  const argosParameters = getArgosParameters(context.story.parameters);
91
91
  const modes = argosParameters?.modes;
92
92
  const allAttachments = [];
@@ -96,10 +96,11 @@ async function storybookArgosScreenshot(page, context, options) {
96
96
  continue;
97
97
  }
98
98
  const attachments = await runHooksAndScreenshot({
99
- page,
99
+ handler,
100
100
  context,
101
+ metadata,
101
102
  options: argosOptions,
102
- suffix: ` ${name}`,
103
+ suffix: ` mode-[${name}]`,
103
104
  globals: {
104
105
  ...context.story.globals,
105
106
  ...globals
@@ -109,8 +110,9 @@ async function storybookArgosScreenshot(page, context, options) {
109
110
  }
110
111
  } else {
111
112
  const attachments = await runHooksAndScreenshot({
112
- page,
113
+ handler,
113
114
  context,
115
+ metadata,
114
116
  options: argosOptions,
115
117
  globals: context.story.globals ?? {}
116
118
  });
@@ -119,16 +121,16 @@ async function storybookArgosScreenshot(page, context, options) {
119
121
  await context.setViewportSize("default");
120
122
  if (context.applyGlobals) {
121
123
  await context.applyGlobals({
122
- handler: page,
124
+ handler,
123
125
  globals: {}
124
126
  });
125
127
  }
126
- await setStorybookGlobals({ page, globals: {} });
128
+ await setStorybookGlobals({ handler, globals: {} });
127
129
  return allAttachments;
128
130
  }
129
131
  async function setStorybookGlobals(args) {
130
- const { page, globals } = args;
131
- await page.evaluate((globals2) => {
132
+ const { handler, globals } = args;
133
+ await handler.evaluate((globals2) => {
132
134
  const channel = (() => {
133
135
  if ("__STORYBOOK_PREVIEW__" in globalThis) {
134
136
  return globalThis.__STORYBOOK_PREVIEW__.channel;
@@ -150,33 +152,36 @@ async function setStorybookGlobals(args) {
150
152
  }, globals);
151
153
  }
152
154
  async function runHooksAndScreenshot(args) {
153
- const { page, context, options, globals } = args;
155
+ const { handler, context, options, globals, metadata } = args;
154
156
  if (context.applyGlobals) {
155
157
  await context.applyGlobals({
156
- handler: page,
158
+ handler,
157
159
  globals
158
160
  });
159
161
  }
160
- await setStorybookGlobals({ page, globals });
162
+ await setStorybookGlobals({ handler, globals });
161
163
  const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
162
164
  const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
163
165
  await context.setViewportSize(viewport);
166
+ DO_NOT_USE_setMetadataConfig({
167
+ ...metadata,
168
+ viewport: viewport && viewport !== "default" ? viewport : void 0
169
+ });
164
170
  return argosPlaywrightScreenshot(
165
- page,
171
+ handler,
166
172
  context.name + (args.suffix ?? ""),
167
173
  options
168
174
  );
169
175
  }
170
176
 
171
177
  // src/test-runner.ts
172
- import { join } from "node:path";
173
178
  async function argosScreenshot(page, context, options) {
174
179
  const storyContext = await getStoryContext(page, context);
175
180
  const fitToContent = getFitToContentFromParameters(storyContext.parameters);
176
181
  await storybookArgosScreenshot(
177
182
  page,
178
183
  {
179
- name: join(context.title, context.name),
184
+ name: storyContext.id,
180
185
  playwrightLibraries: ["@storybook/test-runner"],
181
186
  applyGlobals: async ({ handler }) => {
182
187
  await waitForPageReady(handler);
package/dist/vitest-plugin.js CHANGED
@@ -67,7 +67,7 @@ function getFitToContentFromParameters(parameters) {
67
67
  }
68
68
 
69
69
  // src/utils/screenshot.ts
70
- async function storybookArgosScreenshot(page, context, options) {
70
+ async function storybookArgosScreenshot(handler, context, options) {
71
71
  const argosOptions = {
72
72
  ...options,
73
73
  // Disable aria-busy stabilization by default
@@ -78,12 +78,12 @@ async function storybookArgosScreenshot(page, context, options) {
78
78
  };
79
79
  const version = await getArgosStorybookVersion();
80
80
  const storyUrl = `http://localhost:6006/?path=/story/${context.story.id}`;
81
- DO_NOT_USE_setMetadataConfig({
81
+ const metadata = {
82
82
  sdk: { name: "@argos-ci/storybook", version },
83
83
  playwrightLibraries: context.playwrightLibraries,
84
84
  url: storyUrl,
85
85
  test: context.test
86
- });
86
+ };
87
87
  const argosParameters = getArgosParameters(context.story.parameters);
88
88
  const modes = argosParameters?.modes;
89
89
  const allAttachments = [];
@@ -93,10 +93,11 @@ async function storybookArgosScreenshot(page, context, options) {
93
93
  continue;
94
94
  }
95
95
  const attachments = await runHooksAndScreenshot({
96
- page,
96
+ handler,
97
97
  context,
98
+ metadata,
98
99
  options: argosOptions,
99
- suffix: ` ${name}`,
100
+ suffix: ` mode-[${name}]`,
100
101
  globals: {
101
102
  ...context.story.globals,
102
103
  ...globals
@@ -106,8 +107,9 @@ async function storybookArgosScreenshot(page, context, options) {
106
107
  }
107
108
  } else {
108
109
  const attachments = await runHooksAndScreenshot({
109
- page,
110
+ handler,
110
111
  context,
112
+ metadata,
111
113
  options: argosOptions,
112
114
  globals: context.story.globals ?? {}
113
115
  });
@@ -116,16 +118,16 @@ async function storybookArgosScreenshot(page, context, options) {
116
118
  await context.setViewportSize("default");
117
119
  if (context.applyGlobals) {
118
120
  await context.applyGlobals({
119
- handler: page,
121
+ handler,
120
122
  globals: {}
121
123
  });
122
124
  }
123
- await setStorybookGlobals({ page, globals: {} });
125
+ await setStorybookGlobals({ handler, globals: {} });
124
126
  return allAttachments;
125
127
  }
126
128
  async function setStorybookGlobals(args) {
127
- const { page, globals } = args;
128
- await page.evaluate((globals2) => {
129
+ const { handler, globals } = args;
130
+ await handler.evaluate((globals2) => {
129
131
  const channel = (() => {
130
132
  if ("__STORYBOOK_PREVIEW__" in globalThis) {
131
133
  return globalThis.__STORYBOOK_PREVIEW__.channel;
@@ -147,19 +149,23 @@ async function setStorybookGlobals(args) {
147
149
  }, globals);
148
150
  }
149
151
  async function runHooksAndScreenshot(args) {
150
- const { page, context, options, globals } = args;
152
+ const { handler, context, options, globals, metadata } = args;
151
153
  if (context.applyGlobals) {
152
154
  await context.applyGlobals({
153
- handler: page,
155
+ handler,
154
156
  globals
155
157
  });
156
158
  }
157
- await setStorybookGlobals({ page, globals });
159
+ await setStorybookGlobals({ handler, globals });
158
160
  const viewportFromGlobals = globals.viewport ? getViewport(context.story.parameters, globals.viewport) : null;
159
161
  const viewport = viewportFromGlobals ?? getDefaultViewport(context.story.parameters) ?? "default";
160
162
  await context.setViewportSize(viewport);
163
+ DO_NOT_USE_setMetadataConfig({
164
+ ...metadata,
165
+ viewport: viewport && viewport !== "default" ? viewport : void 0
166
+ });
161
167
  return argosPlaywrightScreenshot(
162
- page,
168
+ handler,
163
169
  context.name + (args.suffix ?? ""),
164
170
  options
165
171
  );
@@ -259,8 +265,8 @@ function applyFitToContent(options, fitToContent) {
259
265
  const { padding, zoom } = fitToContent;
260
266
  return {
261
267
  ...options,
262
- element: "body > div:not(.sb-wrapper)",
263
- argosCSS: `body > div:not(.sb-wrapper) { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
268
+ element: "body > div:nth-child(5)",
269
+ argosCSS: `body > div:nth-child(5) { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
264
270
  };
265
271
  }
266
272
  var cwd = process.cwd();
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@argos-ci/storybook",
3
3
  "description": "Visual testing for Storybook test runner.",
4
- "version": "2.1.7",
4
+ "version": "3.0.1",
5
5
  "author": "Smooth Code",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -27,59 +27,75 @@
27
27
  "type": "module",
28
28
  "types": "./dist/index.d.ts",
29
29
  "exports": {
30
- ".": {
31
- "types": "./dist/index.d.ts",
32
- "import": "./dist/index.js",
33
- "require": "./dist/index.cjs",
34
- "default": "./dist/index.cjs"
30
+ "./test-runner": {
31
+ "types": "./dist/test-runner.d.ts",
32
+ "import": "./dist/test-runner.js",
33
+ "require": "./dist/test-runner.cjs",
34
+ "default": "./dist/test-runner.cjs"
35
35
  },
36
+ "./vitest": {
37
+ "types": "./dist/vitest.d.ts",
38
+ "import": "./dist/vitest.js",
39
+ "default": "./dist/vitest.js"
40
+ },
41
+ "./vitest-plugin": {
42
+ "types": "./dist/vitest-plugin.d.ts",
43
+ "import": "./dist/vitest-plugin.js",
44
+ "default": "./dist/vitest-plugin.js"
45
+ },
46
+ "./internal/vitest-setup-file": "./dist/vitest-setup-file.js",
36
47
  "./package.json": "./package.json"
37
48
  },
38
49
  "engines": {
39
50
  "node": ">=18.16.0"
40
51
  },
41
52
  "dependencies": {
42
- "@argos-ci/playwright": "5.0.9",
43
- "@argos-ci/util": "2.3.2"
44
- },
45
- "peerDependencies": {
46
- "@storybook/test-runner": "*",
47
- "playwright": "*"
53
+ "@argos-ci/playwright": "5.0.11",
54
+ "@argos-ci/util": "2.3.3"
48
55
  },
49
56
  "devDependencies": {
50
- "@argos-ci/cli": "2.5.8",
57
+ "@argos-ci/cli": "2.5.10",
58
+ "@argos-ci/core": "3.2.3",
51
59
  "@argos-ci/util": "workspace:*",
52
- "@storybook/addon-essentials": "^8.6.9",
53
- "@storybook/addon-interactions": "^8.6.9",
54
- "@storybook/addon-links": "^8.6.9",
55
- "@storybook/addon-themes": "^8.6.11",
56
- "@storybook/addon-viewport": "^8.6.11",
57
- "@storybook/blocks": "^8.6.9",
58
- "@storybook/react": "^8.6.9",
59
- "@storybook/react-vite": "^8.6.9",
60
- "@storybook/test": "^8.6.9",
61
- "@storybook/test-runner": "^0.22.0",
60
+ "@storybook/addon-docs": "^9.0.18",
61
+ "@storybook/addon-links": "^9.0.18",
62
+ "@storybook/addon-themes": "^9.0.18",
63
+ "@storybook/addon-vitest": "^9.0.18",
64
+ "@storybook/react-vite": "^9.0.18",
65
+ "@storybook/test-runner": "^0.23.0",
66
+ "@types/react": "^19.1.0",
67
+ "@types/react-dom": "^19.1.0",
68
+ "@vitest/browser": "^3.2.4",
69
+ "@vitest/coverage-v8": "^3.2.4",
70
+ "@vitest/ui": "^3.2.4",
62
71
  "http-server": "^14.1.1",
63
72
  "playwright": "^1.51.1",
64
73
  "prop-types": "^15.8.1",
65
- "storybook": "^8.6.9",
74
+ "react": "^19.1.0",
75
+ "react-dom": "^19.1.0",
76
+ "storybook": "^9.0.18",
77
+ "vitest": "catalog:",
66
78
  "wait-on": "^8.0.3"
67
79
  },
68
80
  "scripts": {
69
- "build": "tsup && cp ./src/index.cjs ./dist",
81
+ "build": "tsup && cp ./src/test-runner.cjs ./dist",
70
82
  "storybook": "storybook dev -p 6006",
71
83
  "build-storybook": "storybook build",
72
- "test-storybook": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules test-storybook",
84
+ "test-storybook": "cross-env NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules test-storybook",
73
85
  "install-playwright": "playwright install chromium --with-deps",
74
- "argos-upload": "argos upload screenshots --build-name \"argos-storybook-e2e-node-$NODE_VERSION-$OS\"",
86
+ "argos-upload-runner": "argos upload screenshots --build-name \"argos-storybook-test-runner-e2e-node-$NODE_VERSION-$OS\"",
75
87
  "serve-storybook": "http-server storybook-static --port 6006 --silent",
76
88
  "wait-storybook": "wait-on tcp:127.0.0.1:6006",
77
- "build-e2e": "pnpm run build-storybook --quiet && pnpm run install-playwright",
78
- "test-e2e": "pnpm run test-storybook && pnpm run argos-upload",
79
- "e2e": "pnpm dlx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run serve-storybook\" \"pnpm run wait-storybook && pnpm run test-e2e\"",
89
+ "build-e2e-runner": "pnpm run build-storybook --quiet && pnpm run install-playwright",
90
+ "build-e2e": "pnpm run build-e2e-runner",
91
+ "test-e2e-runner": "pnpm run test-storybook && pnpm run argos-upload-runner",
92
+ "test-e2e-vitest": "vitest run",
93
+ "e2e-runner": "pnpm dlx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run serve-storybook\" \"pnpm run wait-storybook && pnpm run test-e2e-runner\"",
94
+ "e2e-vitest": "cross-env BUILD_NAME=\"argos-storybook-vitest-e2e-node-$NODE_VERSION-$OS\" UPLOAD_TO_ARGOS=true pnpm run test-e2e-vitest",
95
+ "e2e": "pnpm run e2e-runner && rm -rf ./screenshots && pnpm run e2e-vitest",
80
96
  "check-types": "tsc",
81
97
  "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
82
98
  "lint": "eslint ."
83
99
  },
84
- "gitHead": "899956c05cad3211eb2dd030a214a2e0af12e27d"
100
+ "gitHead": "c54dac3320a10630c31549153473b70a2b42c2b6"
85
101
  }
package/dist/index.cjs DELETED
@@ -1,5 +0,0 @@
1
- const argosScreenshot = async (...args) => {
2
- const { argosScreenshot } = await import("./index.js");
3
- return argosScreenshot(...args);
4
- };
5
- exports.argosScreenshot = argosScreenshot;
package/dist/index.d.ts DELETED
@@ -1,57 +0,0 @@
1
- import { TestContext } from '@storybook/test-runner';
2
- import { ArgosScreenshotOptions as ArgosScreenshotOptions$1 } from '@argos-ci/playwright';
3
- import { Page } from 'playwright';
4
-
5
- /**
6
- * Storybook mode.
7
- */
8
- type StorybookGlobals = Record<string, any>;
9
- /**
10
- * Argos parameters in Storybook.
11
- */
12
- interface ArgosStorybookParameters {
13
- /**
14
- * Modes for the story.
15
- */
16
- modes?: Record<string, StorybookGlobals>;
17
- }
18
- type ArgosScreenshotOptions = {
19
- /**
20
- * Fit the screenshot to the content size.
21
- * @default true
22
- */
23
- fitToContent?: boolean | {
24
- /**
25
- * Padding around the content in pixels.
26
- * @default 16
27
- */
28
- padding?: number;
29
- /**
30
- * Zoom level.
31
- * @default 2
32
- */
33
- zoom?: number;
34
- };
35
- } & ArgosScreenshotOptions$1;
36
- /**
37
- * Stabilize the UI and takes a screenshot of the application under test.
38
- *
39
- * @example
40
- * argosScreenshot(page, "my-screenshot")
41
- * @see https://argos-ci.com/docs/playwright#api-overview
42
- */
43
- declare function argosScreenshot(
44
- /**
45
- * Playwright `page` object.
46
- */
47
- page: Page,
48
- /**
49
- * Context of the test.
50
- */
51
- context: TestContext,
52
- /**
53
- * Options for the screenshot.
54
- */
55
- options?: ArgosScreenshotOptions): Promise<void>;
56
-
57
- export { type ArgosScreenshotOptions, type ArgosStorybookParameters, argosScreenshot };
package/dist/index.js DELETED
@@ -1,134 +0,0 @@
1
- // src/index.ts
2
- import { getStoryContext, waitForPageReady } from "@storybook/test-runner";
3
- import {
4
- argosScreenshot as argosPlaywrightScreenshot,
5
- DO_NOT_USE_setMetadataConfig
6
- } from "@argos-ci/playwright";
7
- import { join } from "node:path";
8
-
9
- // src/metadata.ts
10
- import { readVersionFromPackage } from "@argos-ci/util";
11
- import { createRequire } from "node:module";
12
- var require2 = createRequire(import.meta.url);
13
- async function getArgosStorybookVersion() {
14
- const pkgPath = require2.resolve("@argos-ci/storybook/package.json");
15
- return readVersionFromPackage(pkgPath);
16
- }
17
-
18
- // src/index.ts
19
- async function argosScreenshot(page, context, options) {
20
- const { fitToContent = true, ...screenshotOptions } = options ?? {};
21
- const fitToContentOptions = (() => {
22
- if (options?.element || !fitToContent) {
23
- return {};
24
- }
25
- const { padding = 16, zoom = 2 } = fitToContent === true ? {} : fitToContent;
26
- return {
27
- element: "#storybook-root",
28
- argosCSS: `#storybook-root { padding: ${padding}px; width: fit-content; height: fit-content; zoom: ${zoom}; }` + (options?.argosCSS ?? "")
29
- };
30
- })();
31
- const argosOptions = {
32
- ...screenshotOptions,
33
- // Disable aria-busy stabilization by default
34
- stabilize: screenshotOptions.stabilize ?? {
35
- waitForAriaBusy: false,
36
- ...typeof screenshotOptions.stabilize === "object" ? screenshotOptions.stabilize : {}
37
- },
38
- ...fitToContentOptions
39
- };
40
- const [version, storyContext] = await Promise.all([
41
- getArgosStorybookVersion(),
42
- getStoryContext(page, context)
43
- ]);
44
- const defaultViewport = getDefaultViewport(storyContext.parameters);
45
- if (defaultViewport) {
46
- await page.setViewportSize(defaultViewport);
47
- } else {
48
- await page.setViewportSize({ width: 1280, height: 720 });
49
- }
50
- DO_NOT_USE_setMetadataConfig({
51
- sdk: { name: "@argos-ci/storybook", version },
52
- playwrightLibraries: ["@storybook/test-runner"]
53
- });
54
- const argosParameters = getArgosParameters(storyContext.parameters);
55
- const modes = argosParameters?.modes;
56
- if (modes) {
57
- for (const [name, globals] of Object.entries(modes)) {
58
- if (globals.disabled) {
59
- continue;
60
- }
61
- await setStorybookGlobals({ page, globals });
62
- if (globals.viewport) {
63
- const viewport = getViewport(storyContext.parameters, globals.viewport);
64
- if (viewport) {
65
- await page.setViewportSize(viewport);
66
- }
67
- }
68
- await stabilizeAndScreenshot({
69
- page,
70
- context,
71
- options: argosOptions,
72
- suffix: ` ${name}`
73
- });
74
- }
75
- } else {
76
- await stabilizeAndScreenshot({ page, context, options: argosOptions });
77
- }
78
- }
79
- async function setStorybookGlobals(args) {
80
- const { page, globals } = args;
81
- await page.evaluate((globals2) => {
82
- const channel = globalThis.__STORYBOOK_PREVIEW__.channel;
83
- channel.emit("updateGlobals", {
84
- globals: {
85
- ...channel.last("globalsUpdated")?.[0].initialGlobals,
86
- ...globals2
87
- }
88
- });
89
- }, globals);
90
- }
91
- async function stabilizeAndScreenshot(args) {
92
- const { page, context, options } = args;
93
- await waitForPageReady(page);
94
- return argosPlaywrightScreenshot(
95
- page,
96
- join(context.title, context.name) + (args.suffix ?? ""),
97
- options
98
- );
99
- }
100
- function getDefaultViewport(parameters) {
101
- const defaultViewport = parameters?.viewport?.defaultViewport;
102
- if (defaultViewport) {
103
- return getViewport(parameters, defaultViewport);
104
- }
105
- return null;
106
- }
107
- function getViewport(parameters, viewportName) {
108
- if (typeof viewportName === "number") {
109
- return { width: viewportName, height: 720 };
110
- }
111
- const viewports = parameters?.viewport?.viewports;
112
- if (viewports && viewportName in viewports) {
113
- if ("styles" in viewports[viewportName] && viewports[viewportName].styles) {
114
- const width = parseInt(viewports[viewportName].styles.width, 10);
115
- const height = parseInt(viewports[viewportName].styles.height, 10);
116
- if (!isNaN(width) && !isNaN(height)) {
117
- return { width, height };
118
- }
119
- }
120
- }
121
- return null;
122
- }
123
- function getArgosParameters(parameters) {
124
- if ("argos" in parameters && parameters.argos && typeof parameters.argos === "object") {
125
- return parameters.argos;
126
- }
127
- if ("chromatic" in parameters && parameters.chromatic && typeof parameters.chromatic === "object") {
128
- return parameters.chromatic;
129
- }
130
- return null;
131
- }
132
- export {
133
- argosScreenshot
134
- };