Addon Vitest: Add status update prototype

code/addons/vitest/package.json

@@ -35,6 +35,11 @@
  "import": "./dist/plugin/index.js",
  "require": "./dist/plugin/index.cjs"
  },
+ "./reporter": {
+ "types": "./dist/plugin/reporter.d.ts",
+ "import": "./dist/plugin/reporter.js",
+ "require": "./dist/plugin/reporter.cjs"
+ },
  "./internal/global-setup": {
  "types": "./dist/plugin/global-setup.d.ts",
  "import": "./dist/plugin/global-setup.js",
@@ -97,6 +102,7 @@
  "nodeEntries": [
  "./src/preset.ts",
  "./src/plugin/index.ts",
+ "./src/plugin/reporter.ts",
  "./src/plugin/global-setup.ts",
  "./src/postinstall.ts"
  ]

code/addons/vitest/src/manager.tsx

@@ -1,5 +1,68 @@
-import { type API, addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/internal/manager-api';
+
+import type { API_StatusUpdate, API_StatusValue, StoryId } from '@storybook/types';
 
 import { ADDON_ID } from './constants';
+import type { AssertionResult, TestReport } from './types';
+import { SharedState } from './utils/shared-state';
+
+const statusMap: Record<AssertionResult['status'], API_StatusValue> = {
+ failed: 'error',
+ passed: 'success',
+ pending: 'pending',
+};
+
+function processTestReport(report: TestReport, onClick: any) {
+ const result: API_StatusUpdate = {};
+
+ report.testResults.forEach((testResult) => {
+ testResult.assertionResults.forEach((assertion) => {
+ const storyId = assertion.meta?.storyId;
+ if (storyId) {
+ result[storyId] = {
+ title: 'Vitest',
+ status: statusMap[assertion.status],
+ description:
+ assertion.failureMessages.length > 0 ? assertion.failureMessages.join('\n') : '',
+ onClick,
+ };
+ }
+ });
+ });
+
+ return result;
+}
+
+addons.register(ADDON_ID, (api) => {
+ const channel = api.getChannel();
+
+ if (!channel) {
+ return;
+ }
+
+ const testResultsState = SharedState.subscribe<TestReport>('TEST_RESULTS', channel);
+ const lastStoryIds = new Set<StoryId>();
+
+ testResultsState.on('change', async (report) => {
+ if (!report) {
+ return;
+ }
+
+ const storiesToClear = Object.fromEntries(Array.from(lastStoryIds).map((id) => [id, null]));
+
+ if (Object.keys(storiesToClear).length > 0) {
+ // Clear old statuses to avoid stale data
+ await api.experimental_updateStatus(ADDON_ID, storiesToClear);
+ lastStoryIds.clear();
+ }
+
+ const openInteractionsPanel = () => {
+ api.setSelectedPanel('storybook/interactions/panel');
+ api.togglePanel(true);
+ };
+
+ const final = processTestReport(report, openInteractionsPanel);
 
-addons.register(ADDON_ID, () => {});
+ await api.experimental_updateStatus(ADDON_ID, final);
+ });
+});

code/addons/vitest/src/plugin/reporter.ts

@@ -0,0 +1,12 @@
+import { join } from 'node:path';
+
+import { JsonReporter } from 'vitest/reporters';
+
+export default class StorybookReporter extends JsonReporter {
+ constructor({ configDir = '.storybook' }: { configDir: string }) {
+ const outputFile = join(configDir, 'test-results.json');
+ super({
+ outputFile,
+ });
+ }
+}

code/addons/vitest/src/preset.ts

@@ -1,7 +1,67 @@
+import { watch } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { dirname, join, basename } from 'node:path';
 import type { Channel } from 'storybook/internal/channels';
 import type { Options } from 'storybook/internal/types';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const experimental_serverChannel = async (channel: Channel, options: Options) => {
- return channel;
+import type { TestReport } from './types';
+import { SharedState } from './utils/shared-state';
+
+async function getTestReport(reportFile: string): Promise<TestReport> {
+ const data = await readFile(reportFile, 'utf8');
+ // TODO: Streaming and parsing large files
+ return JSON.parse(data);
+}
+
+const watchTestReportDirectory = async (
+ reportFile: string | undefined,
+ onChange: (results: Awaited<ReturnType<typeof getTestReport>>) => Promise<void>
+) => {
+ if (!reportFile) return;
+
+ const directory = dirname(reportFile);
+ const targetFile = basename(reportFile);
+
+ const handleFileChange = async (eventType: string, filename: string | null) => {
+ if (filename && filename === targetFile) {
+ try {
+ await onChange(await getTestReport(reportFile));
+ } catch(err: any) {
+ if(err.code === 'ENOENT') {
+ console.log('File got deleted/renamed. What should we do?');
+ return;
+ }
+
+ throw err;
+ }
+ }
+ };
+
+ watch(directory, handleFileChange);
+
+ try {
+ const initialResults = await getTestReport(reportFile);
+ await onChange(initialResults);
+ } catch(err: any) {
+ if(err.code === 'ENOENT') {
+ return;
+ }
+
+ throw err;
+ }
 };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export async function experimental_serverChannel(
+ channel: Channel,
+ options: Options & { reportFile?: string }
+) {
+ const { reportFile = join(process.cwd(), '.storybook', 'test-results.json') } = options;
+
+ const testReportState = SharedState.subscribe<TestReport>('TEST_RESULTS', channel);
+
+ watchTestReportDirectory(reportFile, async (results) => {
+ console.log('Updating test results:', Object.keys(results.testResults).length);
+ testReportState.value = results;
+ });
+}

code/addons/vitest/src/types.ts

@@ -0,0 +1,61 @@
+interface FailureMessage {
+ line: number;
+ column: number;
+}
+
+interface Meta {
+ storyId: string;
+}
+
+export interface AssertionResult {
+ ancestorTitles: string[];
+ fullName: string;
+ status: 'passed' | 'failed' | 'pending';
+ title: string;
+ duration: number;
+ failureMessages: string[];
+ location?: FailureMessage;
+ meta?: Meta;
+}
+
+interface TestResult {
+ assertionResults: AssertionResult[];
+ startTime: number;
+ endTime: number;
+ status: 'passed' | 'failed' | 'pending';
+ message: string;
+ name: string;
+}
+
+interface Snapshot {
+ added: number;
+ failure: boolean;
+ filesAdded: number;
+ filesRemoved: number;
+ filesRemovedList: any[];
+ filesUnmatched: number;
+ filesUpdated: number;
+ matched: number;
+ total: number;
+ unchecked: number;
+ uncheckedKeysByFile: any[];
+ unmatched: number;
+ updated: number;
+ didUpdate: boolean;
+}
+
+export interface TestReport {
+ numTotalTestSuites: number;
+ numPassedTestSuites: number;
+ numFailedTestSuites: number;
+ numPendingTestSuites: number;
+ numTotalTests: number;
+ numPassedTests: number;
+ numFailedTests: number;
+ numPendingTests: number;
+ numTodoTests: number;
+ startTime: number;
+ success: boolean;
+ testResults: TestResult[];
+ snapshot: Snapshot;
+}

code/addons/vitest/src/utils/shared-state.test.ts

@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { SharedState } from './SharedState';
+
+class MockChannel {
+ private listeners: Record<string, ((...args: any[]) => void)[]> = {};
+
+ on(event: string, listener: (...args: any[]) => void) {
+ this.listeners[event] = [...(this.listeners[event] ?? []), listener];
+ }
+
+ off(event: string, listener: (...args: any[]) => void) {
+ this.listeners[event] = (this.listeners[event] ?? []).filter((l) => l !== listener);
+ }
+
+ emit(event: string, ...args: any[]) {
+ // setTimeout is used to simulate the asynchronous nature of the real channel
+ (this.listeners[event] || []).forEach((listener) => setTimeout(() => listener(...args)));
+ }
+}
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe('SharedState', () => {
+ let channel: MockChannel;
+ let a: SharedState;
+ let b: SharedState;
+
+ beforeEach(() => {
+ channel = new MockChannel();
+ a = new SharedState(channel);
+ b = new SharedState(channel);
+ });
+
+ it('should initialize with an empty object', () => {
+ expect(a.state).toEqual({});
+ });
+
+ it('should set and get values correctly', () => {
+ a.set('foo', 'bar');
+ a.set('baz', 123);
+
+ expect(a.get('foo')).toBe('bar');
+ expect(a.get('baz')).toBe(123);
+ expect(a.get('qux')).toBeUndefined();
+ });
+
+ it('should remove values correctly', () => {
+ a.set('foo', 'bar');
+ a.set('foo', undefined);
+
+ expect(a.get('foo')).toBeUndefined();
+ });
+
+ it('should (eventually) share state between instances', async () => {
+ a.set('foo', 'bar');
+ await tick(); // setState
+ expect(b.get('foo')).toBe('bar');
+ });
+
+ it('should (eventually) share state with new instances', async () => {
+ a.set('foo', 'bar');
+ const c = new SharedState(channel);
+
+ expect(c.get('foo')).toBeUndefined();
+ await tick(); // getState
+ await tick(); // setState
+ expect(c.get('foo')).toBe('bar');
+ });
+
+ it('should not overwrite newer values', async () => {
+ a.set('foo', 'bar');
+ b.set('foo', 'baz'); // conflict: "bar" was not yet synced
+ await tick(); // setState (one side)
+ await tick(); // setState (other side)
+
+ // Neither accepts the other's value
+ expect(a.get('foo')).toBe('bar');
+ expect(b.get('foo')).toBe('baz');
+
+ b.set('foo', 'baz'); // try again
+ await tick(); // setState
+ expect(a.get('foo')).toBe('baz');
+ });
+});