diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index a4cedde66608..24f90201dce8 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -79,10 +79,10 @@ const config: StorybookConfig = {
directory: '../addons/interactions/src',
titlePrefix: 'addons/interactions',
},
- // {
- // directory: '../addons/interactions/template/stories',
- // titlePrefix: 'addons/interactions',
- // },
+ {
+ directory: '../addons/interactions/template/stories',
+ titlePrefix: 'addons/interactions/tests',
+ },
],
addons: [
'@storybook/addon-links',
diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 1f366074846f..7730317876dc 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -135,7 +135,9 @@ export const loaders = [
* The DocsContext will then be added via the decorator below.
*/
async ({ parameters: { relativeCsfPaths, attached = true } }) => {
- if (!relativeCsfPaths) {
+ // TODO bring a better way to skip tests when running as part of the vitest plugin instead of __STORYBOOK_URL__
+ // eslint-disable-next-line no-underscore-dangle
+ if (!relativeCsfPaths || (import.meta as any).env?.__STORYBOOK_URL__) {
return {};
}
const csfFiles = await Promise.all(
@@ -358,3 +360,5 @@ export const parameters = {
},
},
};
+
+export const tags = ['test', 'vitest'];
diff --git a/code/.storybook/vitest.config.ts b/code/.storybook/vitest.config.ts
index 25a83b4396ea..412e84c61c2d 100644
--- a/code/.storybook/vitest.config.ts
+++ b/code/.storybook/vitest.config.ts
@@ -19,11 +19,15 @@ if (process.env.INSPECT === 'true') {
export default mergeConfig(
vitestCommonConfig,
+ // @ts-expect-error added this because of testNamePattern below
defineProject({
plugins: [
import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
storybookTest({
configDir: process.cwd(),
+ tags: {
+ include: ['vitest'],
+ },
})
),
...extraPlugins,
@@ -31,17 +35,23 @@ export default mergeConfig(
test: {
name: 'storybook-ui',
include: [
- // TODO: test all core and addon stories later
- // './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
- '../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+ '../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+ '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+ '../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+ '../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+ '../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
],
exclude: [
...defaultExclude,
'../node_modules/**',
'**/__mockdata__/**',
+ '../**/__mockdata__/**',
// expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
'**/Zoom.stories.tsx',
],
+ // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
+ // @ts-expect-error this type does not exist but the property does!
+ testNamePattern: /^(?!.*(UseState)).*$/,
browser: {
enabled: true,
name: 'chromium',
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index 2e07b7c0e624..2db5f0e016f3 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -115,10 +115,17 @@ const UserEventSetup = {
{ keys: '[TouchA>]', target: canvas.getByRole('textbox') },
{ keys: '[/TouchA]' },
]);
- await user.tab();
- await user.keyboard('{enter}');
const submitButton = await canvas.findByRole('button');
- await expect(submitButton).toHaveFocus();
+
+ if (navigator.userAgent.toLowerCase().includes('firefox')) {
+ // user event has a few issues on firefox, therefore we do it differently
+ await fireEvent.click(submitButton);
+ } else {
+ await user.tab();
+ await user.keyboard('{enter}');
+ await expect(submitButton).toHaveFocus();
+ }
+
await expect(args.onSuccess).toHaveBeenCalled();
});
},
diff --git a/code/addons/test/package.json b/code/addons/test/package.json
index ab78d5cc6840..4072e0a766f0 100644
--- a/code/addons/test/package.json
+++ b/code/addons/test/package.json
@@ -70,20 +70,28 @@
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
},
"dependencies": {
- "@storybook/csf": "^0.1.11"
+ "@storybook/csf": "^0.1.11",
+ "@storybook/icons": "^1.2.10",
+ "chalk": "^5.3.0"
},
"devDependencies": {
"@types/semver": "^7",
- "@vitest/browser": "^2.0.0",
+ "@vitest/browser": "^2.1.1",
+ "@vitest/runner": "^2.1.1",
"boxen": "^8.0.1",
+ "execa": "^8.0.1",
"find-up": "^7.0.0",
+ "lodash": "^4.17.21",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
"semver": "^7.6.3",
"tinyrainbow": "^1.2.0",
"ts-dedent": "^2.2.0",
- "vitest": "^2.0.0"
+ "vitest": "^2.1.1"
},
"peerDependencies": {
- "@vitest/browser": "^2.0.0",
+ "@vitest/browser": "^2.1.1",
+ "@vitest/runner": "^2.1.1",
"storybook": "workspace:^",
"vitest": "^2.0.0"
},
@@ -103,7 +111,8 @@
"./src/preset.ts",
"./src/vitest-plugin/index.ts",
"./src/vitest-plugin/global-setup.ts",
- "./src/postinstall.ts"
+ "./src/postinstall.ts",
+ "./src/node/vitest.ts"
]
}
}
diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts
index d0a3762620c9..ebc63021f0a4 100644
--- a/code/addons/test/src/constants.ts
+++ b/code/addons/test/src/constants.ts
@@ -1 +1,2 @@
-export const ADDON_ID = 'storybook/vitest';
+export const ADDON_ID = 'storybook/test';
+export const TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
diff --git a/code/addons/test/src/logger.ts b/code/addons/test/src/logger.ts
new file mode 100644
index 000000000000..24289135495c
--- /dev/null
+++ b/code/addons/test/src/logger.ts
@@ -0,0 +1,7 @@
+import chalk from 'chalk';
+
+import { ADDON_ID } from './constants';
+
+export const log = (message: any) => {
+ console.log(`${chalk.magenta(ADDON_ID)}: ${message.toString().trim()}`);
+};
diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx
index 8d706325046a..b7744659eff5 100644
--- a/code/addons/test/src/manager.tsx
+++ b/code/addons/test/src/manager.tsx
@@ -1,5 +1,17 @@
-import { type API, addons } from 'storybook/internal/manager-api';
+import React from 'react';
-import { ADDON_ID } from './constants';
+import { addons } from 'storybook/internal/manager-api';
+import { Addon_TypesEnum } from 'storybook/internal/types';
-addons.register(ADDON_ID, () => {});
+import { PointerHandIcon } from '@storybook/icons';
+
+import { ADDON_ID, TEST_PROVIDER_ID } from './constants';
+
+addons.register(ADDON_ID, () => {
+ addons.add(TEST_PROVIDER_ID, {
+ type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+ icon: ,
+ title: 'Component tests',
+ description: () => 'Not yet run',
+ });
+});
diff --git a/code/addons/test/src/node/boot-test-runner.test.ts b/code/addons/test/src/node/boot-test-runner.test.ts
new file mode 100644
index 000000000000..5ea559cb15df
--- /dev/null
+++ b/code/addons/test/src/node/boot-test-runner.test.ts
@@ -0,0 +1,145 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Channel, type ChannelTransport } from '@storybook/core/channels';
+
+import {
+ TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+ TESTING_MODULE_RUN_ALL_REQUEST,
+ TESTING_MODULE_RUN_PROGRESS_RESPONSE,
+ TESTING_MODULE_RUN_REQUEST,
+ TESTING_MODULE_WATCH_MODE_REQUEST,
+} from '@storybook/core/core-events';
+
+import { execaNode } from 'execa';
+
+import { log } from '../logger';
+import { bootTestRunner } from './boot-test-runner';
+
+let stdout: (chunk: any) => void;
+let stderr: (chunk: any) => void;
+let message: (event: any) => void;
+
+const child = vi.hoisted(() => ({
+ stdout: {
+ on: vi.fn((event, callback) => {
+ stdout = callback;
+ }),
+ },
+ stderr: {
+ on: vi.fn((event, callback) => {
+ stderr = callback;
+ }),
+ },
+ on: vi.fn((event, callback) => {
+ message = callback;
+ }),
+ send: vi.fn(),
+ kill: vi.fn(),
+}));
+
+vi.mock('execa', () => ({
+ execaNode: vi.fn().mockReturnValue(child),
+}));
+
+vi.mock('../logger', () => ({
+ log: vi.fn(),
+}));
+
+beforeEach(() => {
+ vi.useFakeTimers();
+});
+
+afterEach(() => {
+ vi.useRealTimers();
+});
+
+const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport;
+const mockChannel = new Channel({ transport });
+
+describe('bootTestRunner', () => {
+ it('should execute vitest.js', async () => {
+ bootTestRunner(mockChannel);
+ expect(execaNode).toHaveBeenCalledWith(expect.stringMatching(/vitest\.js$/));
+ });
+
+ it('should log stdout and stderr', async () => {
+ bootTestRunner(mockChannel);
+ stdout('foo');
+ stderr('bar');
+ expect(log).toHaveBeenCalledWith('foo');
+ expect(log).toHaveBeenCalledWith('bar');
+ });
+
+ it('should wait for vitest to be ready', async () => {
+ let ready;
+ const promise = bootTestRunner(mockChannel).then(() => {
+ ready = true;
+ });
+ expect(ready).toBeUndefined();
+ message({ type: 'ready' });
+ await expect(promise).resolves.toBeUndefined();
+ expect(ready).toBe(true);
+ });
+
+ it('should abort if vitest doesn’t become ready in time', async () => {
+ const promise = bootTestRunner(mockChannel);
+ vi.advanceTimersByTime(10000);
+ await expect(promise).rejects.toThrow();
+ });
+
+ it('should abort if vitest fails to start repeatedly', async () => {
+ const promise = bootTestRunner(mockChannel);
+ message({ type: 'error' });
+ vi.advanceTimersByTime(1000);
+ message({ type: 'error' });
+ vi.advanceTimersByTime(1000);
+ message({ type: 'error' });
+ await expect(promise).rejects.toThrow();
+ });
+
+ it('should forward channel events', async () => {
+ bootTestRunner(mockChannel);
+ message({ type: 'ready' });
+
+ message({ type: TESTING_MODULE_RUN_PROGRESS_RESPONSE, args: ['foo'] });
+ expect(mockChannel.last(TESTING_MODULE_RUN_PROGRESS_RESPONSE)).toEqual(['foo']);
+
+ mockChannel.emit(TESTING_MODULE_RUN_REQUEST, 'foo');
+ expect(child.send).toHaveBeenCalledWith({
+ args: ['foo'],
+ from: 'server',
+ type: TESTING_MODULE_RUN_REQUEST,
+ });
+
+ mockChannel.emit(TESTING_MODULE_RUN_ALL_REQUEST, 'bar');
+ expect(child.send).toHaveBeenCalledWith({
+ args: ['bar'],
+ from: 'server',
+ type: TESTING_MODULE_RUN_ALL_REQUEST,
+ });
+
+ mockChannel.emit(TESTING_MODULE_WATCH_MODE_REQUEST, 'baz');
+ expect(child.send).toHaveBeenCalledWith({
+ args: ['baz'],
+ from: 'server',
+ type: TESTING_MODULE_WATCH_MODE_REQUEST,
+ });
+
+ mockChannel.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, 'qux');
+ expect(child.send).toHaveBeenCalledWith({
+ args: ['qux'],
+ from: 'server',
+ type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+ });
+ });
+
+ it('should resend init event', async () => {
+ bootTestRunner(mockChannel, 'init', ['foo']);
+ message({ type: 'ready' });
+ expect(child.send).toHaveBeenCalledWith({
+ args: ['foo'],
+ from: 'server',
+ type: 'init',
+ });
+ });
+});
diff --git a/code/addons/test/src/node/boot-test-runner.ts b/code/addons/test/src/node/boot-test-runner.ts
new file mode 100644
index 000000000000..6a018dc57c0b
--- /dev/null
+++ b/code/addons/test/src/node/boot-test-runner.ts
@@ -0,0 +1,115 @@
+import { type ChildProcess } from 'node:child_process';
+import { join } from 'node:path';
+
+import type { Channel } from 'storybook/internal/channels';
+import {
+ TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+ TESTING_MODULE_CRASH_REPORT,
+ TESTING_MODULE_RUN_ALL_REQUEST,
+ TESTING_MODULE_RUN_REQUEST,
+ TESTING_MODULE_WATCH_MODE_REQUEST,
+} from 'storybook/internal/core-events';
+
+import { execaNode } from 'execa';
+
+import { log } from '../logger';
+
+const MAX_START_ATTEMPTS = 3;
+const MAX_START_TIME = 8000;
+
+// This path is a bit confusing, but essentially `boot-test-runner` gets bundled into the preset bundle
+// which is at the root. Then, from the root, we want to load `node/vitest.js`
+const vitestModulePath = join(__dirname, 'node', 'vitest.js');
+
+export const bootTestRunner = async (channel: Channel, initEvent?: string, initArgs?: any[]) => {
+ let aborted = false;
+ let child: null | ChildProcess;
+
+ const forwardRun = (...args: any[]) =>
+ child?.send({ args, from: 'server', type: TESTING_MODULE_RUN_REQUEST });
+ const forwardRunAll = (...args: any[]) =>
+ child?.send({ args, from: 'server', type: TESTING_MODULE_RUN_ALL_REQUEST });
+ const forwardWatchMode = (...args: any[]) =>
+ child?.send({ args, from: 'server', type: TESTING_MODULE_WATCH_MODE_REQUEST });
+ const forwardCancel = (...args: any[]) =>
+ child?.send({ args, from: 'server', type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST });
+
+ const killChild = () => {
+ channel.off(TESTING_MODULE_RUN_REQUEST, forwardRun);
+ channel.off(TESTING_MODULE_RUN_ALL_REQUEST, forwardRunAll);
+ channel.off(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
+ channel.off(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
+ child?.kill();
+ child = null;
+ };
+
+ const exit = (code = 0) => {
+ killChild();
+ process.exit(code);
+ };
+
+ process.on('exit', exit);
+ process.on('SIGINT', () => exit(0));
+ process.on('SIGTERM', () => exit(0));
+
+ const startChildProcess = (attempt = 1) =>
+ new Promise((resolve, reject) => {
+ child = execaNode(vitestModulePath);
+ child.stdout?.on('data', log);
+ child.stderr?.on('data', (data) => {
+ const message = data.toString();
+ // TODO: improve this error handling. Example use case is Playwright is not installed
+ if (message.includes('Error: browserType.launch')) {
+ channel.emit(TESTING_MODULE_CRASH_REPORT, message);
+ }
+
+ log(data);
+ });
+
+ child.on('message', (result: any) => {
+ if (result.type === 'ready') {
+ // Resend the event that triggered the boot sequence, now that the child is ready to handle it
+ if (initEvent && initArgs) {
+ child?.send({ type: initEvent, args: initArgs, from: 'server' });
+ }
+
+ // Forward all events from the channel to the child process
+ channel.on(TESTING_MODULE_RUN_REQUEST, forwardRun);
+ channel.on(TESTING_MODULE_RUN_ALL_REQUEST, forwardRunAll);
+ channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
+ channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
+
+ resolve();
+ } else if (result.type === 'error') {
+ killChild();
+
+ if (result.message) {
+ log(result.message);
+ }
+ if (result.error) {
+ log(result.error);
+ }
+
+ if (attempt >= MAX_START_ATTEMPTS) {
+ log(`Aborting test runner process after ${attempt} restart attempts`);
+ reject();
+ } else if (!aborted) {
+ log(`Restarting test runner process (attempt ${attempt}/${MAX_START_ATTEMPTS})`);
+ setTimeout(() => startChildProcess(attempt + 1).then(resolve, reject), 1000);
+ }
+ } else {
+ channel.emit(result.type, ...result.args);
+ }
+ });
+ });
+
+ const timeout = new Promise((_, reject) =>
+ setTimeout(reject, MAX_START_TIME, new Error('Aborting test runner process due to timeout'))
+ );
+
+ await Promise.race([startChildProcess(), timeout]).catch((e) => {
+ log(e.message);
+ aborted = true;
+ throw e;
+ });
+};
diff --git a/code/addons/test/src/node/reporter.ts b/code/addons/test/src/node/reporter.ts
new file mode 100644
index 000000000000..b993868bc273
--- /dev/null
+++ b/code/addons/test/src/node/reporter.ts
@@ -0,0 +1,197 @@
+import type { TaskState } from 'vitest';
+import type { Vitest } from 'vitest/node';
+import { type Reporter } from 'vitest/reporters';
+
+import type {
+ TestingModuleRunAssertionResultPayload,
+ TestingModuleRunProgressPayload,
+ TestingModuleRunResponsePayload,
+ TestingModuleRunTestResultPayload,
+} from 'storybook/internal/core-events';
+
+import type { API_StatusUpdate } from '@storybook/types';
+
+import type { Suite } from '@vitest/runner';
+// TODO
+// We can theoretically avoid the `@vitest/runner` dependency by copying over the necessary
+// functions from the `@vitest/runner` package. It is not complex and does not have
+// any significant dependencies.
+import { getTests } from '@vitest/runner/utils';
+import throttle from 'lodash/throttle.js';
+
+import { TEST_PROVIDER_ID } from '../constants';
+import type { TestManager } from './test-manager';
+
+type Status = 'passed' | 'failed' | 'skipped' | 'pending' | 'todo' | 'disabled';
+
+function isDefined(value: any): value is NonNullable {
+ return value !== undefined && value !== null;
+}
+
+const StatusMap: Record = {
+ fail: 'failed',
+ only: 'pending',
+ pass: 'passed',
+ run: 'pending',
+ skip: 'skipped',
+ todo: 'todo',
+};
+
+export class StorybookReporter implements Reporter {
+ testStatusData: API_StatusUpdate = {};
+
+ start = 0;
+
+ ctx!: Vitest;
+
+ sendReport: (payload: TestingModuleRunProgressPayload) => void;
+
+ constructor(private testManager: TestManager) {
+ this.sendReport = throttle((payload) => this.testManager.sendProgressReport(payload), 200);
+ }
+
+ onInit(ctx: Vitest) {
+ this.ctx = ctx;
+ this.start = Date.now();
+ }
+
+ getProgressReport(): TestingModuleRunResponsePayload {
+ const files = this.ctx.state.getFiles();
+ const fileTests = getTests(files);
+ // The number of total tests is dynamic and can change during the run
+ const numTotalTests = fileTests.length;
+
+ const numFailedTests = fileTests.filter((t) => t.result?.state === 'fail').length;
+ const numPassedTests = fileTests.filter((t) => t.result?.state === 'pass').length;
+ const numPendingTests = fileTests.filter(
+ (t) => t.result?.state === 'run' || t.mode === 'skip' || t.result?.state === 'skip'
+ ).length;
+ const testResults: Array = [];
+
+ for (const file of files) {
+ const tests = getTests([file]);
+ let startTime = tests.reduce(
+ (prev, next) => Math.min(prev, next.result?.startTime ?? Number.POSITIVE_INFINITY),
+ Number.POSITIVE_INFINITY
+ );
+ if (startTime === Number.POSITIVE_INFINITY) {
+ startTime = this.start;
+ }
+
+ const endTime = tests.reduce(
+ (prev, next) =>
+ Math.max(prev, (next.result?.startTime ?? 0) + (next.result?.duration ?? 0)),
+ startTime
+ );
+
+ const assertionResults: TestingModuleRunAssertionResultPayload[] = tests
+ .map((t) => {
+ const ancestorTitles: string[] = [];
+ let iter: Suite | undefined = t.suite;
+ while (iter) {
+ ancestorTitles.push(iter.name);
+ iter = iter.suite;
+ }
+ ancestorTitles.reverse();
+
+ const status = StatusMap[t.result?.state || t.mode] || 'skipped';
+
+ if (status === 'passed' || status === 'pending') {
+ return {
+ status,
+ duration: t.result?.duration || 0,
+ storyId: (t.meta as any).storyId,
+ };
+ }
+
+ if (status === 'failed') {
+ return {
+ status,
+ duration: t.result?.duration || 0,
+ failureMessages: t.result?.errors?.map((e) => e.stack || e.message) || [],
+ storyId: (t.meta as any).storyId,
+ };
+ }
+
+ return null;
+ })
+ .filter(isDefined);
+
+ const hasFailedTests = tests.some((t) => t.result?.state === 'fail');
+
+ testResults.push({
+ results: assertionResults,
+ startTime,
+ endTime,
+ status: file.result?.state === 'fail' || hasFailedTests ? 'failed' : 'passed',
+ message: file.result?.errors?.[0]?.message,
+ });
+ }
+
+ return {
+ numFailedTests,
+ numPassedTests,
+ numPendingTests,
+ numTotalTests,
+ testResults,
+ success: true,
+ // TODO
+ // It is not simply (numPassedTests + numFailedTests) / numTotalTests
+ // because numTotalTests is dyanmic and can change during the run
+ // We need to calculate the progress based on the number of tests that have been run
+ progress: 0,
+ startTime: this.start,
+ };
+ }
+
+ async onTaskUpdate() {
+ try {
+ const progress = this.getProgressReport();
+
+ this.sendReport({
+ status: 'success',
+ payload: progress,
+ providerId: TEST_PROVIDER_ID,
+ });
+ } catch (e) {
+ if (e instanceof Error) {
+ this.sendReport({
+ status: 'failed',
+ providerId: TEST_PROVIDER_ID,
+ error: {
+ name: 'Failed to gather test results',
+ message: e.message,
+ stack: e.stack,
+ },
+ });
+ } else {
+ this.sendReport({
+ status: 'failed',
+ providerId: TEST_PROVIDER_ID,
+ error: {
+ name: 'Failed to gather test results',
+ message: String(e),
+ stack: undefined,
+ },
+ });
+ }
+ }
+ }
+
+ // TODO
+ // Clearing the whole internal state of Vitest might be too aggressive
+ // Essentially, we want to reset the calculated total number of tests and the
+ // test results when a new test run starts, so that the getProgressReport
+ // method can calculate the correct values
+ async clearVitestState() {
+ this.ctx.state.filesMap.clear();
+ this.ctx.state.pathsSet.clear();
+ this.ctx.state.idMap.clear();
+ this.ctx.state.errorsSet.clear();
+ this.ctx.state.processTimeoutCauses.clear();
+ }
+
+ async onFinished() {
+ this.clearVitestState();
+ }
+}
diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts
new file mode 100644
index 000000000000..1b87bdedf0a5
--- /dev/null
+++ b/code/addons/test/src/node/test-manager.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createVitest } from 'vitest/node';
+
+import { Channel, type ChannelTransport } from '@storybook/core/channels';
+
+import path from 'path';
+
+import { TEST_PROVIDER_ID } from '../constants';
+import { TestManager } from './test-manager';
+
+const vitest = vi.hoisted(() => ({
+ projects: [{}],
+ init: vi.fn(),
+ close: vi.fn(),
+ runFiles: vi.fn(),
+ cancelCurrentRun: vi.fn(),
+ globTestSpecs: vi.fn(),
+}));
+
+vi.mock('vitest/node', () => ({
+ createVitest: vi.fn(() => Promise.resolve(vitest)),
+}));
+
+const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport;
+const mockChannel = new Channel({ transport });
+
+const tests = [
+ {
+ project: { config: { env: { __STORYBOOK_URL__: 'http://localhost:6006' } } },
+ moduleId: path.join(process.cwd(), 'path/to/file'),
+ },
+ {
+ project: { config: { env: { __STORYBOOK_URL__: 'http://localhost:6006' } } },
+ moduleId: path.join(process.cwd(), 'path/to/another/file'),
+ },
+];
+
+describe('TestManager', () => {
+ it('should create a vitest instance', async () => {
+ new TestManager(mockChannel);
+ await new Promise((r) => setTimeout(r, 1000));
+ expect(createVitest).toHaveBeenCalled();
+ });
+
+ it('should call onReady callback', async () => {
+ const onReady = vi.fn();
+ new TestManager(mockChannel, { onReady });
+ await new Promise((r) => setTimeout(r, 1000));
+ expect(onReady).toHaveBeenCalled();
+ });
+
+ it('TestManager.start should start vitest and resolve when ready', async () => {
+ const testManager = await TestManager.start(mockChannel);
+ expect(testManager).toBeInstanceOf(TestManager);
+ expect(createVitest).toHaveBeenCalled();
+ });
+
+ it('should handle watch mode request', async () => {
+ const testManager = await TestManager.start(mockChannel);
+ expect(testManager.watchMode).toBe(false);
+ expect(createVitest).toHaveBeenCalledTimes(1);
+
+ await testManager.handleWatchModeRequest({ providerId: TEST_PROVIDER_ID, watchMode: true });
+ expect(testManager.watchMode).toBe(true);
+ expect(createVitest).toHaveBeenCalledTimes(2);
+ });
+
+ it('should handle run request', async () => {
+ vitest.globTestSpecs.mockImplementation(() => tests);
+ const testManager = await TestManager.start(mockChannel);
+ expect(createVitest).toHaveBeenCalledTimes(1);
+
+ await testManager.handleRunRequest({
+ providerId: TEST_PROVIDER_ID,
+ payload: [
+ {
+ stories: [],
+ importPath: 'path/to/file',
+ componentPath: 'path/to/component',
+ },
+ {
+ stories: [],
+ importPath: 'path/to/another/file',
+ componentPath: 'path/to/another/component',
+ },
+ ],
+ });
+ expect(createVitest).toHaveBeenCalledTimes(1);
+ expect(vitest.runFiles).toHaveBeenCalledWith(tests, true);
+ });
+
+ it('should filter tests', async () => {
+ vitest.globTestSpecs.mockImplementation(() => tests);
+ const testManager = await TestManager.start(mockChannel);
+
+ await testManager.handleRunRequest({
+ providerId: TEST_PROVIDER_ID,
+ payload: [
+ {
+ stories: [],
+ importPath: 'path/to/unknown/file',
+ componentPath: 'path/to/unknown/component',
+ },
+ ],
+ });
+ expect(vitest.runFiles).toHaveBeenCalledWith([], true);
+
+ await testManager.handleRunRequest({
+ providerId: TEST_PROVIDER_ID,
+ payload: [
+ {
+ stories: [],
+ importPath: 'path/to/file',
+ componentPath: 'path/to/component',
+ },
+ ],
+ });
+ expect(vitest.runFiles).toHaveBeenCalledWith(tests.slice(0, 1), true);
+ });
+
+ it('should handle run all request', async () => {
+ const testManager = await TestManager.start(mockChannel);
+ expect(createVitest).toHaveBeenCalledTimes(1);
+
+ await testManager.handleRunAllRequest({ providerId: TEST_PROVIDER_ID });
+ expect(createVitest).toHaveBeenCalledTimes(1);
+ expect(vitest.runFiles).toHaveBeenCalledWith(tests, true);
+ });
+});
diff --git a/code/addons/test/src/node/test-manager.ts b/code/addons/test/src/node/test-manager.ts
new file mode 100644
index 000000000000..5f5c9264f03f
--- /dev/null
+++ b/code/addons/test/src/node/test-manager.ts
@@ -0,0 +1,100 @@
+import type { Channel } from 'storybook/internal/channels';
+import {
+ TESTING_MODULE_RUN_ALL_REQUEST,
+ TESTING_MODULE_RUN_PROGRESS_RESPONSE,
+ TESTING_MODULE_RUN_REQUEST,
+ TESTING_MODULE_WATCH_MODE_REQUEST,
+ type TestingModuleRunAllRequestPayload,
+ type TestingModuleRunProgressPayload,
+ type TestingModuleRunRequestPayload,
+ type TestingModuleWatchModeRequestPayload,
+} from 'storybook/internal/core-events';
+
+import { TEST_PROVIDER_ID } from '../constants';
+import { VitestManager } from './vitest-manager';
+
+export class TestManager {
+ private vitestManager: VitestManager;
+
+ watchMode = false;
+
+ constructor(
+ private channel: Channel,
+ private options: {
+ onError?: (message: string, error: Error) => void;
+ onReady?: () => void;
+ } = {}
+ ) {
+ this.vitestManager = new VitestManager(channel, this);
+
+ this.channel.on(TESTING_MODULE_RUN_REQUEST, this.handleRunRequest.bind(this));
+ this.channel.on(TESTING_MODULE_RUN_ALL_REQUEST, this.handleRunAllRequest.bind(this));
+ this.channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, this.handleWatchModeRequest.bind(this));
+
+ this.vitestManager.startVitest().then(() => options.onReady?.());
+ }
+
+ async restartVitest(watchMode = false) {
+ await this.vitestManager.closeVitest();
+ await this.vitestManager.startVitest(watchMode);
+ }
+
+ async handleWatchModeRequest(request: TestingModuleWatchModeRequestPayload) {
+ try {
+ if (request.providerId !== TEST_PROVIDER_ID) {
+ return;
+ }
+
+ if (this.watchMode !== request.watchMode) {
+ this.watchMode = request.watchMode;
+ await this.restartVitest(this.watchMode);
+ }
+ } catch (e) {
+ this.reportFatalError('Failed to change watch mode', e);
+ }
+ }
+
+ async handleRunRequest(request: TestingModuleRunRequestPayload) {
+ try {
+ if (request.providerId !== TEST_PROVIDER_ID) {
+ return;
+ }
+
+ await this.vitestManager.runTests(request.payload);
+ } catch (e) {
+ this.reportFatalError('Failed to run tests', e);
+ }
+ }
+
+ async handleRunAllRequest(request: TestingModuleRunAllRequestPayload) {
+ try {
+ if (request.providerId !== TEST_PROVIDER_ID) {
+ return;
+ }
+
+ await this.vitestManager.runAllTests();
+ } catch (e) {
+ this.reportFatalError('Failed to run all tests', e);
+ }
+ }
+
+ async sendProgressReport(payload: TestingModuleRunProgressPayload) {
+ this.channel.emit(TESTING_MODULE_RUN_PROGRESS_RESPONSE, payload);
+ }
+
+ async reportFatalError(message: string, error: Error | any) {
+ this.options.onError?.(message, error);
+ }
+
+ static async start(channel: Channel, options: typeof TestManager.prototype.options = {}) {
+ return new Promise((resolve) => {
+ const testManager = new TestManager(channel, {
+ ...options,
+ onReady: () => {
+ resolve(testManager);
+ options.onReady?.();
+ },
+ });
+ });
+ }
+}
diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts
new file mode 100644
index 000000000000..5b6f136040bd
--- /dev/null
+++ b/code/addons/test/src/node/vitest-manager.ts
@@ -0,0 +1,103 @@
+import path from 'node:path';
+
+import type { TestProject, TestSpecification, Vitest, WorkspaceProject } from 'vitest/node';
+
+import type { Channel } from 'storybook/internal/channels';
+import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events';
+
+import { StorybookReporter } from './reporter';
+import type { TestManager } from './test-manager';
+
+export class VitestManager {
+ vitest: Vitest | null = null;
+
+ vitestStartupCounter = 0;
+
+ constructor(
+ private channel: Channel,
+ private testManager: TestManager
+ ) {}
+
+ async startVitest(watchMode = false) {
+ const { createVitest } = await import('vitest/node');
+
+ this.vitest = await createVitest('test', {
+ watch: watchMode,
+ passWithNoTests: true,
+ standalone: true,
+ changed: watchMode,
+ // TODO:
+ // Do we want to enable Vite's default reporter?
+ // The output in the terminal might be too spamy and it might be better to
+ // find a way to just show errors and warnings for example
+ // Otherwise it might be hard for the user to discover Storybook related logs
+ reporters: ['default', new StorybookReporter(this.testManager)],
+ coverage: {
+ enabled: false,
+ },
+ });
+
+ // TODO what should happen if there's no projects?
+ if (this.vitest?.projects.length) {
+ await this.vitest.init();
+ }
+ }
+
+ async runAllTests() {
+ if (!this.vitest) {
+ await this.startVitest();
+ }
+
+ const tests = await this.getStorybookTestSpecs();
+ await this.cancelCurrentRun();
+ await this.vitest!.runFiles(tests, true);
+ }
+
+ async runTests(testPayload: TestingModuleRunRequestPayload['payload']) {
+ if (!this.vitest) {
+ await this.startVitest();
+ }
+
+ // This list contains all the test files (story files) that need to be run
+ // based on the test files that are passed in the tests array
+ // This list does NOT contain any filtering of specific
+ // test cases (story) within the test files
+ const testList: TestSpecification[] = [];
+
+ const storybookTests = await this.getStorybookTestSpecs();
+
+ for (const storybookTest of storybookTests) {
+ const match = testPayload.find((test) => {
+ const absoluteImportPath = path.join(process.cwd(), test.importPath);
+ return absoluteImportPath === storybookTest.moduleId;
+ });
+ if (match) {
+ testList.push(storybookTest);
+ }
+ }
+
+ await this.cancelCurrentRun();
+ await this.vitest!.runFiles(testList, true);
+ }
+
+ async cancelCurrentRun() {
+ await this.vitest?.cancelCurrentRun('keyboard-input');
+ await this.vitest?.runningPromise;
+ }
+
+ async closeVitest() {
+ await this.vitest?.close();
+ }
+
+ async getStorybookTestSpecs() {
+ const globTestSpecs = (await this.vitest?.globTestSpecs()) ?? [];
+ return (
+ globTestSpecs.filter((workspaceSpec) => this.isStorybookProject(workspaceSpec.project)) ?? []
+ );
+ }
+
+ isStorybookProject(project: TestProject | WorkspaceProject) {
+ // eslint-disable-next-line no-underscore-dangle
+ return !!project.config.env?.__STORYBOOK_URL__;
+ }
+}
diff --git a/code/addons/test/src/node/vitest.ts b/code/addons/test/src/node/vitest.ts
new file mode 100644
index 000000000000..c4a4cb30bada
--- /dev/null
+++ b/code/addons/test/src/node/vitest.ts
@@ -0,0 +1,49 @@
+import process from 'node:process';
+
+import { Channel } from 'storybook/internal/channels';
+
+import { TestManager } from './test-manager';
+
+process.env.TEST = 'true';
+process.env.VITEST = 'true';
+process.env.NODE_ENV ??= 'test';
+
+const channel: Channel = new Channel({
+ async: true,
+ transport: {
+ send: (event) => {
+ process.send?.(event);
+ },
+ setHandler: (handler) => {
+ process.on('message', handler);
+ },
+ },
+});
+
+new TestManager(channel, {
+ onError: (message, error) => {
+ process.send?.({ type: 'error', message, error: error.stack ?? error });
+ },
+ onReady: () => {
+ process.send?.({ type: 'ready' });
+ },
+});
+
+const exit = (code = 0) => {
+ channel?.removeAllListeners();
+ process.exit(code);
+};
+
+process.on('exit', exit);
+process.on('SIGINT', () => exit(0));
+process.on('SIGTERM', () => exit(0));
+
+process.on('uncaughtException', (err) => {
+ process.send?.({ type: 'error', message: 'Uncaught exception', error: err.stack });
+ exit(1);
+});
+
+process.on('unhandledRejection', (reason) => {
+ process.send?.({ type: 'error', message: 'Unhandled rejection', error: reason });
+ exit(1);
+});
diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts
index 8b4bc31a9013..83e4cde6eba9 100644
--- a/code/addons/test/src/preset.ts
+++ b/code/addons/test/src/preset.ts
@@ -1,7 +1,47 @@
import type { Channel } from 'storybook/internal/channels';
+import {
+ TESTING_MODULE_RUN_ALL_REQUEST,
+ TESTING_MODULE_RUN_REQUEST,
+ TESTING_MODULE_WATCH_MODE_REQUEST,
+} from 'storybook/internal/core-events';
import type { Options } from 'storybook/internal/types';
+import { bootTestRunner } from './node/boot-test-runner';
+
// eslint-disable-next-line @typescript-eslint/naming-convention
export const experimental_serverChannel = async (channel: Channel, options: Options) => {
+ let booting = false;
+ let booted = false;
+ const start =
+ (eventName: string) =>
+ (...args: any[]) => {
+ if (!booted && !booting) {
+ booting = true;
+ bootTestRunner(channel, eventName, args)
+ .then(() => {
+ booted = true;
+ })
+ .catch(() => {
+ booted = false;
+ })
+ .finally(() => {
+ booting = false;
+ });
+ }
+ };
+
+ channel.on(TESTING_MODULE_RUN_ALL_REQUEST, start(TESTING_MODULE_RUN_ALL_REQUEST));
+ channel.on(TESTING_MODULE_RUN_REQUEST, start(TESTING_MODULE_RUN_REQUEST));
+ channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, (payload) => {
+ if (payload.watchMode) {
+ start(TESTING_MODULE_WATCH_MODE_REQUEST)(payload);
+ }
+ });
+
return channel;
};
+
+// TODO:
+// 1 - Do not boot Vitest on Storybook boot, but rather on the first test run
+// 2 - Handle cases where Vitest is already booted, so we dont boot it again
+// 3 - Upon crash, provide a notification to the user
diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx
index 5e23fd7ecb7b..b45d82ed8529 100644
--- a/code/core/src/components/components/tabs/tabs.stories.tsx
+++ b/code/core/src/components/components/tabs/tabs.stories.tsx
@@ -178,13 +178,15 @@ const customViewports = {
};
export const StatefulDynamicWithOpenTooltip = {
+ // TODO VITEST INTEGRATION: remove this when we support new viewport global format in the vitest integration
+ tags: ['!vitest'],
parameters: {
viewport: {
- viewports: customViewports,
+ options: customViewports,
},
chromatic: { viewports: [380] },
},
- globals: { sb_theme: 'light', viewport: 'sized' },
+ globals: { sb_theme: 'light', viewport: { value: 'sized' } },
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@@ -222,6 +224,8 @@ export const StatefulDynamicWithOpenTooltip = {
export const StatefulDynamicWithSelectedAddon = {
...StatefulDynamicWithOpenTooltip,
+ // TODO VITEST INTEGRATION: remove this when we support new viewport global format in the vitest integration
+ tags: ['!vitest'],
play: async (context) => {
await StatefulDynamicWithOpenTooltip.play(context);
const canvas = within(context.canvasElement);
diff --git a/code/core/src/core-events/data/testing-module.ts b/code/core/src/core-events/data/testing-module.ts
new file mode 100644
index 000000000000..fa83bc6dd6d9
--- /dev/null
+++ b/code/core/src/core-events/data/testing-module.ts
@@ -0,0 +1,87 @@
+export type ProviderId = string;
+
+export type TestingModuleRunRequestStories = {
+ id: string;
+ name: string;
+};
+
+export type TestingModuleRunRequestPayload = {
+ providerId: ProviderId;
+ payload: {
+ stories: TestingModuleRunRequestStories[];
+ importPath: string;
+ componentPath: string;
+ }[];
+};
+
+export type TestingModuleRunAllRequestPayload = {
+ providerId: ProviderId;
+};
+
+export type TestingModuleRunProgressPayload =
+ | {
+ providerId: ProviderId;
+ payload: TestingModuleRunResponsePayload;
+ status: 'success' | 'pending';
+ }
+ | {
+ providerId: ProviderId;
+ error: {
+ name: string;
+ message: string;
+ stack?: string;
+ };
+ status: 'failed';
+ };
+
+export type TestingModuleRunResponsePayload = {
+ numTotalTests: number;
+ numPassedTests: number;
+ numFailedTests: number;
+ numPendingTests: number;
+ progress: number;
+ startTime: number;
+ success: boolean;
+ testResults: TestingModuleRunTestResultPayload[];
+};
+
+export type TestingModuleRunTestResultPayload = {
+ results: TestingModuleRunAssertionResultPayload[];
+ startTime: number;
+ endTime: number;
+ status: 'passed' | 'failed';
+ message?: string;
+};
+
+export type TestingModuleRunAssertionResultPayload =
+ | {
+ status: 'success' | 'pending';
+ duration: number;
+ storyId: string;
+ }
+ | {
+ status: 'failed';
+ duration: number;
+ failureMessages: string[];
+ storyId: string;
+ };
+
+export type Status = 'success' | 'failed' | 'pending';
+
+export type TestingModuleCancelTestRunRequestPayload = {
+ providerId: ProviderId;
+};
+
+export type TestingModuleCancelTestRunResponsePayload =
+ | {
+ status: 'success';
+ }
+ | {
+ status: 'failed';
+ message: string;
+ };
+
+export type TestingModuleWatchModeRequestPayload = {
+ providerId: ProviderId;
+ watchMode: boolean;
+};
diff --git a/code/core/src/core-events/index.ts b/code/core/src/core-events/index.ts
index 90eed7b0d5b6..086590bd6df6 100644
--- a/code/core/src/core-events/index.ts
+++ b/code/core/src/core-events/index.ts
@@ -84,6 +84,14 @@ enum events {
ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse',
CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest',
CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse',
+
+ TESTING_MODULE_CRASH_REPORT = 'testingModuleCrashReport',
+ TESTING_MODULE_RUN_REQUEST = 'testingModuleRunRequest',
+ TESTING_MODULE_RUN_PROGRESS_RESPONSE = 'testingModuleRunProgressResponse',
+ TESTING_MODULE_RUN_ALL_REQUEST = 'testingModuleRunAllRequest',
+ TESTING_MODULE_CANCEL_TEST_RUN_REQUEST = 'testingModuleCancelTestRunRequest',
+ TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE = 'testingModuleCancelTestRunResponse',
+ TESTING_MODULE_WATCH_MODE_REQUEST = 'testingModuleWatchModeRequest',
}
// Enables: `import Events from ...`
@@ -147,6 +155,13 @@ export const {
SAVE_STORY_RESPONSE,
ARGTYPES_INFO_REQUEST,
ARGTYPES_INFO_RESPONSE,
+ TESTING_MODULE_CRASH_REPORT,
+ TESTING_MODULE_RUN_REQUEST,
+ TESTING_MODULE_RUN_PROGRESS_RESPONSE,
+ TESTING_MODULE_RUN_ALL_REQUEST,
+ TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+ TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE,
+ TESTING_MODULE_WATCH_MODE_REQUEST,
} = events;
export * from './data/create-new-story';
@@ -155,3 +170,4 @@ export * from './data/argtypes-info';
export * from './data/request-response';
export * from './data/save-story';
export * from './data/whats-new';
+export * from './data/testing-module';
diff --git a/code/core/src/manager-api/lib/addons.ts b/code/core/src/manager-api/lib/addons.ts
index c937c0508a2b..a7aa438e0863 100644
--- a/code/core/src/manager-api/lib/addons.ts
+++ b/code/core/src/manager-api/lib/addons.ts
@@ -8,6 +8,7 @@ import type {
Addon_PageType,
Addon_SidebarBottomType,
Addon_SidebarTopType,
+ Addon_TestProviderType,
Addon_Type,
Addon_Types,
Addon_TypesMapping,
@@ -70,7 +71,8 @@ export class AddonStore {
| Addon_Types
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
- | Addon_TypesEnum.experimental_SIDEBAR_TOP,
+ | Addon_TypesEnum.experimental_SIDEBAR_TOP
+ | Addon_TypesEnum.experimental_TEST_PROVIDER,
>(type: T): Addon_Collection | any {
if (!this.elements[type]) {
this.elements[type] = {};
@@ -91,6 +93,7 @@ export class AddonStore {
| Addon_BaseType
| Omit
| Omit
+ | Omit
| Omit
| Omit
): void {
diff --git a/code/core/src/manager-api/tests/addons.test.js b/code/core/src/manager-api/tests/addons.test.js
index 4d64ecc95224..c4f5c46d41df 100644
--- a/code/core/src/manager-api/tests/addons.test.js
+++ b/code/core/src/manager-api/tests/addons.test.js
@@ -19,11 +19,21 @@ const PANELS = {
},
};
+const TEST_PROVIDERS = {
+ 'storybook/test/test-provider': {
+ id: 'storybook/test/test-provider',
+ title: 'Component tests',
+ },
+};
+
const provider = {
getElements(type) {
if (type === types.PANEL) {
return PANELS;
}
+ if (type === types.experimental_TEST_PROVIDER) {
+ return TEST_PROVIDERS;
+ }
return null;
},
};
@@ -38,14 +48,13 @@ const store = {
describe('Addons API', () => {
describe('#getElements', () => {
it('should return provider elements', () => {
- // given
const { api } = initAddons({ provider, store });
- // when
const panels = api.getElements(types.PANEL);
-
- // then
expect(panels).toBe(PANELS);
+
+ const testProviders = api.getElements(types.experimental_TEST_PROVIDER);
+ expect(testProviders).toBe(TEST_PROVIDERS);
});
});
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index 972606b79598..30be9d3e9bf5 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -41,6 +41,7 @@ const managerContext: any = {
getShortcutKeys: fn(() => ({ search: ['control', 'shift', 's'] })).mockName(
'api::getShortcutKeys'
),
+ getChannel: fn().mockName('api::getChannel'),
selectStory: fn().mockName('api::selectStory'),
experimental_setFilter: fn().mockName('api::experimental_setFilter'),
},
@@ -177,6 +178,8 @@ export const WithRefsNarrow: Story = {
value: 'narrow',
},
},
+ // TODO VITEST INTEGRATION: remove this when we support new viewport global format in the vitest integration
+ tags: ['!vitest'],
};
export const LoadingWithRefs: Story = {
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index e937012c43e6..f658f00e4bf8 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -1,10 +1,16 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
-import { ScrollArea, Spaced } from '@storybook/core/components';
+import { Button, ScrollArea, Spaced } from '@storybook/core/components';
import { styled } from '@storybook/core/theming';
import type { API_LoadedRefData, Addon_SidebarTopType } from '@storybook/core/types';
-import type { State } from '@storybook/core/manager-api';
+import {
+ TESTING_MODULE_RUN_ALL_REQUEST,
+ TESTING_MODULE_WATCH_MODE_REQUEST,
+ type TestingModuleRunAllRequestPayload,
+ type TestingModuleWatchModeRequestPayload,
+} from '@storybook/core/core-events';
+import { type State, useStorybookApi } from '@storybook/core/manager-api';
import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
import { Explorer } from './Explorer';
@@ -13,6 +19,7 @@ import { Heading } from './Heading';
import { Search } from './Search';
import { SearchResults } from './SearchResults';
import { SidebarBottom } from './SidebarBottom';
+import { TEST_PROVIDER_ID } from './Tree';
import type { CombinedDataset, Selection } from './types';
import { useLastViewed } from './useLastViewed';
@@ -133,6 +140,15 @@ export const Sidebar = React.memo(function Sidebar({
const dataset = useCombination(index, indexError, previewInitialized, status, refs);
const isLoading = !index && !indexError;
const lastViewedProps = useLastViewed(selected);
+ const api = useStorybookApi();
+ const [watchMode, setWatchMode] = useState(false);
+
+ useEffect(() => {
+ api.emit(TESTING_MODULE_WATCH_MODE_REQUEST, {
+ providerId: TEST_PROVIDER_ID,
+ watchMode,
+ } as TestingModuleWatchModeRequestPayload);
+ }, [api, watchMode]);
return (
@@ -188,6 +204,19 @@ export const Sidebar = React.memo(function Sidebar({
{isLoading ? null : (
+
+
)}
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index 7b126968963f..290e44ac8f6a 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -1,14 +1,20 @@
import React, { useCallback, useEffect } from 'react';
import { styled } from '@storybook/core/theming';
-import type { API_FilterFunction } from '@storybook/types';
+import type { API_FilterFunction, API_StatusUpdate, API_StatusValue } from '@storybook/types';
+import {
+ TESTING_MODULE_RUN_PROGRESS_RESPONSE,
+ type TestingModuleRunProgressPayload,
+ type TestingModuleRunResponsePayload,
+} from '@storybook/core/core-events';
import {
type API,
type State,
useStorybookApi,
useStorybookState,
} from '@storybook/core/manager-api';
+import { useChannel } from '@storybook/core/preview-api';
import { FilterToggle } from './FilterToggle';
@@ -45,6 +51,30 @@ interface SidebarBottomProps {
status: State['status'];
}
+const statusMap: Record = {
+ failed: 'error',
+ passed: 'success',
+ pending: 'pending',
+};
+
+function processTestReport(payload: TestingModuleRunResponsePayload) {
+ const result: API_StatusUpdate = {};
+
+ payload.testResults.forEach((testResult: any) => {
+ testResult.results.forEach(({ storyId, status, failureMessages }: any) => {
+ if (storyId) {
+ result[storyId] = {
+ title: 'Vitest',
+ status: statusMap[status],
+ description: failureMessages?.length ? failureMessages.join('\n') : '',
+ };
+ }
+ });
+ });
+
+ return result;
+}
+
export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {
const [showWarnings, setShowWarnings] = React.useState(false);
const [showErrors, setShowErrors] = React.useState(false);
@@ -99,5 +129,18 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {
export const SidebarBottom = () => {
const api = useStorybookApi();
const { status } = useStorybookState();
+
+ useEffect(() => {
+ api.getChannel()?.on(TESTING_MODULE_RUN_PROGRESS_RESPONSE, (data) => {
+ if ('payload' in data) {
+ // console.log('progress', data);
+ // TODO clear statuses
+ api.experimental_updateStatus('figure-out-id', processTestReport(data.payload));
+ } else {
+ // console.log('error', data);
+ }
+ });
+ }, [api]);
+
return ;
};
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 4f542d3140a7..0d5c990cb595 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -6,14 +6,21 @@ import { styled, useTheme } from '@storybook/core/theming';
import {
CollapseIcon as CollapseIconSvg,
ExpandAltIcon,
+ PlayIcon,
StatusFailIcon,
StatusPassIcon,
StatusWarnIcon,
SyncIcon,
} from '@storybook/icons';
-import type { API_StatusValue, StoryId } from '@storybook/types';
+import type { API_HashEntry, API_StatusValue, StoryId } from '@storybook/types';
-import { PRELOAD_ENTRIES } from '@storybook/core/core-events';
+import {
+ PRELOAD_ENTRIES,
+ TESTING_MODULE_RUN_REQUEST,
+ type TestingModuleRunRequestPayload,
+ type TestingModuleRunRequestStories,
+} from '@storybook/core/core-events';
+import { useStorybookApi } from '@storybook/core/manager-api';
import type {
API,
ComponentEntry,
@@ -22,7 +29,6 @@ import type {
StoriesHash,
StoryEntry,
} from '@storybook/core/manager-api';
-import { useStorybookApi } from '@storybook/core/manager-api';
import { transparentize } from 'polished';
@@ -44,6 +50,9 @@ import type { Highlight, Item } from './types';
import type { ExpandAction, ExpandedState } from './useExpanded';
import { useExpanded } from './useExpanded';
+export const TEST_ADDON_ID = 'storybook/test';
+export const TEST_PROVIDER_ID = `${TEST_ADDON_ID}/test-provider`;
+
const Container = styled.div<{ hasOrphans: boolean }>((props) => ({
marginTop: props.hasOrphans ? 20 : 0,
marginBottom: 20,
@@ -133,6 +142,7 @@ interface NodeProps {
status: State['status'][keyof State['status']];
groupStatus: Record;
api: API;
+ collapsedData: Record;
}
const Node = React.memo(function Node({
@@ -149,6 +159,7 @@ const Node = React.memo(function Node({
isExpanded,
setExpanded,
onSelectStoryId,
+ collapsedData,
api,
}) {
const { isDesktop, isMobile, setMobileMenuOpen } = useLayout();
@@ -264,21 +275,64 @@ const Node = React.memo(function Node({
{item.renderLabel?.(item, api) || item.name}
- {isExpanded && (
+
+ {isExpanded && (
+
{
+ event.preventDefault();
+ // @ts-expect-error (non strict)
+ setFullyExpanded();
+ }}
+ >
+ {isFullyExpanded ? : }
+
+ )}
{
- event.preventDefault();
- // @ts-expect-error (non strict)
- setFullyExpanded();
+ onClick={() => {
+ type ImportPath = string;
+ type ComponentPath = string;
+
+ const importPathMap = new Map();
+ const storyFilesMap = new Map();
+
+ const traverseChildren = (children: string[]) => {
+ children.forEach((childId) => {
+ const child = collapsedData[childId];
+ if (child.type === 'story') {
+ const componentPath = (child as any).componentPath;
+ const importPath = child.importPath;
+ const storyFile = storyFilesMap.get(importPath) || [];
+
+ storyFile.push({ id: child.id, name: child.name });
+ storyFilesMap.set(importPath, storyFile);
+ importPathMap.set(importPath, componentPath);
+ } else if (child.type !== 'docs') {
+ traverseChildren(child.children);
+ }
+ });
+ };
+
+ traverseChildren(item.children);
+
+ const testingModuleRunRequestPayload: TestingModuleRunRequestPayload = {
+ providerId: TEST_PROVIDER_ID,
+ payload: Array.from(importPathMap.entries()).map(([importPath, componentPath]) => ({
+ importPath,
+ componentPath,
+ stories: storyFilesMap.get(importPath) ?? [],
+ })),
+ };
+
+ api.emit(TESTING_MODULE_RUN_REQUEST, testingModuleRunRequestPayload);
}}
>
- {isFullyExpanded ? : }
+
- )}
+