creevey 0.10.0-beta.9 → 0.10.0-rc.0

package/src/server/selenium/webdriver.ts

@@ -1,10 +1,11 @@
 /// <reference types="../../../types/selenium-context" />
-import { Args } from '@storybook/csf';
-import { Config, StorybookGlobals, StoryInput, StoriesRaw, Options, ServerTest } from '../../types.js';
+import type { Args } from 'storybook/internal/types';
+import { Config, StorybookGlobals, StoryInput, StoriesRaw, ServerTest, WorkerOptions } from '../../types.js';
 import { subscribeOn } from '../messages.js';
 import { CreeveyWebdriverBase } from '../webdriver.js';
 import type { InternalBrowser } from './internal.js';
 import { logger } from '../logger.js';
+import { removeWorkerContainer } from '../worker/context.js';
 
 declare global {
   interface Window {
@@ -21,8 +22,8 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
   #browserName: string;
   #gridUrl: string;
   #config: Config;
-  #options: Options;
-  constructor(browser: string, gridUrl: string, config: Config, options: Options) {
+  #options: WorkerOptions;
+  constructor(browser: string, gridUrl: string, config: Config, options: WorkerOptions) {
     super();
 
     this.#browserName = browser;
@@ -31,7 +32,9 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
     this.#options = options;
 
     subscribeOn('shutdown', () => {
-      void this.#browser?.closeBrowser().finally(() => process.exit());
+      void this.#browser?.closeBrowser().finally(() => {
+        void removeWorkerContainer().finally(() => process.exit());
+      });
       this.#browser = null;
     });
   }
@@ -42,7 +45,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   getSessionId(): Promise<string> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -89,7 +91,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   async loadStoriesFromBrowser(): Promise<StoriesRaw> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -98,7 +99,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   afterTest(test: ServerTest): Promise<void> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -110,7 +110,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
     ignoreElements?: string | string[] | null,
   ): Promise<Buffer> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -119,7 +118,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   protected waitForComplete(callback: (isCompleted: boolean) => void): void {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -128,7 +126,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   protected async selectStory(id: string, waitForReady?: boolean): Promise<boolean> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 
@@ -137,7 +134,6 @@ export class SeleniumWebdriver extends CreeveyWebdriverBase {
 
   protected async updateStoryArgs(story: StoryInput, updatedArgs: Args): Promise<void> {
     if (!this.#browser) {
-      // TODO Describe the error
       throw new Error('Browser is not initialized');
     }
 

package/src/server/shutdown.ts

@@ -0,0 +1,19 @@
+import cluster from 'cluster';
+import { subscribeOn } from './messages.js';
+import { shutdownOnException, isShuttingDown } from './utils.js';
+
+if (cluster.isWorker) {
+  subscribeOn('shutdown', () => {
+    isShuttingDown.current = true;
+  });
+}
+
+process.on('uncaughtException', shutdownOnException);
+process.on('unhandledRejection', shutdownOnException);
+// TODO SIGINT Stuck with selenium
+process.on('SIGINT', () => {
+  if (isShuttingDown.current) {
+    process.exit(-1);
+  }
+  isShuttingDown.current = true;
+});

package/src/server/stories.ts

@@ -1,5 +1,3 @@
-import path from 'path';
-import { mkdirSync, writeFileSync } from 'fs';
 import { createHash } from 'crypto';
 import _ from 'lodash';
 import type {
@@ -12,7 +10,7 @@ import type {
   CreeveyTestFunction,
   CreeveyTestContext,
 } from '../types.js';
-import { isDefined, isFunction } from '../types.js';
+import { isDefined } from '../types.js';
 import { shouldSkip } from './utils.js';
 
 function storyTestFabric(delay?: number, testFn?: CreeveyTestFunction) {
@@ -129,12 +127,3 @@ export async function loadTestsFromStories(
 
   return tests;
 }
-
-export function saveTestsJson(tests: Record<string, unknown>, dstPath: string = process.cwd()): void {
-  mkdirSync(dstPath, { recursive: true });
-  writeFileSync(
-    path.join(dstPath, 'tests.json'),
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    JSON.stringify(tests, (_, value) => (isFunction(value) ? value.toString() : value), 2),
-  );
-}

package/src/server/telemetry.ts

@@ -128,7 +128,7 @@ export async function sendScreenshotsCount(
     repoUrl: repoUrl ?? 'unknown',
     creeveyVersion: creeveyVersion ?? 'unknown',
     storybookVersion: storybookVersion ?? 'unknown',
-    options: options._,
+    options,
     gridUrl,
     screenDir: config.screenDir ? path.relative(gitRootPath ?? process.cwd(), config.screenDir) : undefined,
     useDocker: config.useDocker,
@@ -181,8 +181,8 @@ export async function sendScreenshotsCount(
   const testsMeta = { runId: uuid, tests };
 
   const fullPathname = buildPathname('tests', testsMeta);
-  // NOTE: Keep request path shorter than 32k symbols
-  const chunksCount = Math.ceil(fullPathname.length / 32_000);
+  // NOTE: Keep request path shorter than 24k symbols
+  const chunksCount = Math.ceil(fullPathname.length / 24_000);
   let chunks: string[] = [];
   if (chunksCount > 1) {
     const testsString = JSON.stringify(tests);

package/src/server/testsFiles/parser.ts

@@ -1,8 +1,58 @@
 import { pathToFileURL } from 'url';
-import { toId, storyNameFromExport } from '@storybook/csf';
 import { CreeveyStoryParams, CreeveyTestFunction } from '../../types.js';
 import { loadThroughTSX } from '../utils.js';
 
+// NOTE: Copy-pasted from @storybook/csf
+function toStartCaseStr(str: string) {
+  return str
+    .replace(/_/g, ' ')
+    .replace(/-/g, ' ')
+    .replace(/\./g, ' ')
+    .replace(/([^\n])([A-Z])([a-z])/g, (_, $1, $2, $3) => `${$1} ${$2}${$3}`)
+    .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
+    .replace(/([a-z])([0-9])/gi, (_, $1, $2) => `${$1} ${$2}`)
+    .replace(/([0-9])([a-z])/gi, (_, $1, $2) => `${$1} ${$2}`)
+    .replace(/(\s|^)(\w)/g, (_, $1, $2: string) => `${$1}${$2.toUpperCase()}`)
+    .replace(/ +/g, ' ')
+    .trim();
+}
+
+/**
+ * Remove punctuation and illegal characters from a story ID.
+ *
+ * See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
+ */
+const sanitize = (string: string) => {
+  return (
+    string
+      .toLowerCase()
+      // eslint-disable-next-line no-useless-escape
+      .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-+/, '')
+      .replace(/-+$/, '')
+  );
+};
+
+const sanitizeSafe = (string: string, part: string) => {
+  const sanitized = sanitize(string);
+  if (sanitized === '') {
+    throw new Error(`Invalid ${part} '${string}', must include alphanumeric characters`);
+  }
+  return sanitized;
+};
+
+/**
+ * Generate a storybook ID from a component/kind and story name.
+ */
+const toId = (kind: string, name?: string) =>
+  `${sanitizeSafe(kind, 'kind')}${name ? `--${sanitizeSafe(name, 'name')}` : ''}`;
+
+/**
+ * Transform a CSF named export into a readable story name
+ */
+const storyNameFromExport = (key: string) => toStartCaseStr(key);
+
 export type CreeveyParamsByStoryId = Record<string, CreeveyStoryParams>;
 
 export default async function parse(files: string[]): Promise<CreeveyParamsByStoryId> {
@@ -55,8 +105,6 @@ export const story = (
 
 export const test = (title: string, testFn: CreeveyTestFunction): void => {
   const storyId = getStoryId(kindTitle, storyTitle);
-  if (!result[storyId]) {
-    result[storyId] = {};
-  }
+  result[storyId] ??= {};
   result[storyId].tests = Object.assign({}, result[storyId].tests, { [title]: testFn });
 };

package/src/server/utils.ts

@@ -1,12 +1,17 @@
 import fs from 'fs';
-import { get } from 'https';
+import path from 'path';
+import http from 'http';
+import https from 'https';
+import assert from 'assert';
 import cluster from 'cluster';
-import { dirname } from 'path';
+import pidtree from 'pidtree';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { register as esmRegister } from 'tsx/esm/api';
 import { register as cjsRegister } from 'tsx/cjs/api';
 import { SkipOptions, SkipOption, isDefined, TestData, noop, ServerTest, Worker } from '../types.js';
-import { emitShutdownMessage, sendShutdownMessage } from './messages.js';
+import { emitShutdownMessage, emitWorkerMessage, sendShutdownMessage } from './messages.js';
+import { LOCALHOST_REGEXP } from './webdriver.js';
+import { logger } from './logger.js';
 
 const importMetaUrl = pathToFileURL(__filename).href;
 
@@ -14,6 +19,19 @@ export const isShuttingDown = { current: false };
 
 export const configExt = ['.js', '.mjs', '.ts', '.cjs', '.mts', '.cts'];
 
+const browserTypes = {
+  chromium: 'chromium',
+  'chromium-headless-shell': 'chromium',
+  chrome: 'chromium',
+  'chrome-beta': 'chromium',
+  msedge: 'chromium',
+  'msedge-beta': 'chromium',
+  'msedge-dev': 'chromium',
+  'bidi-chromium': 'chromium',
+  firefox: 'firefox',
+  webkit: 'webkit',
+} as const;
+
 export const skipOptionKeys = ['in', 'kinds', 'stories', 'tests', 'reason'];
 
 function matchBy(pattern: string | string[] | RegExp | undefined, value: string): boolean {
@@ -72,6 +90,18 @@ export function shouldSkipByOption(
   return skipByBrowser && skipByKind && skipByStory && skipByTest && reason;
 }
 
+export function shutdownOnException(reason: unknown): void {
+  if (isShuttingDown.current) return;
+
+  const error = reason instanceof Error ? (reason.stack ?? reason.message) : (reason as string);
+
+  logger().error(error);
+
+  process.exitCode = -1;
+  if (cluster.isWorker) emitWorkerMessage({ type: 'error', payload: { subtype: 'unknown', error } });
+  if (cluster.isPrimary) void shutdownWorkers();
+}
+
 export async function shutdownWorkers(): Promise<void> {
   isShuttingDown.current = true;
   await Promise.all(
@@ -82,13 +112,14 @@ export async function shutdownWorkers(): Promise<void> {
         (worker) =>
           new Promise<void>((resolve) => {
             const timeout = setTimeout(() => {
-              worker.kill();
-            }, 10000);
+              if (worker.process.pid) void killTree(worker.process.pid);
+            }, 10_000);
             worker.on('exit', () => {
               clearTimeout(timeout);
               resolve();
             });
             sendShutdownMessage(worker);
+            worker.disconnect();
           }),
       ),
   );
@@ -98,7 +129,7 @@ export async function shutdownWorkers(): Promise<void> {
 export function gracefullyKill(worker: Worker): void {
   worker.isShuttingDown = true;
   const timeout = setTimeout(() => {
-    worker.kill();
+    if (worker.process.pid) void killTree(worker.process.pid);
   }, 10000);
   worker.on('exit', () => {
     clearTimeout(timeout);
@@ -106,9 +137,34 @@ export function gracefullyKill(worker: Worker): void {
   sendShutdownMessage(worker);
 }
 
+export async function killTree(rootPid: number): Promise<void> {
+  const pids = await pidtree(rootPid, { root: true });
+
+  pids.forEach((pid) => {
+    try {
+      process.kill(pid, 'SIGKILL');
+    } catch {
+      /* noop */
+    }
+  });
+}
+
+export function shutdownWithError(): void {
+  process.exit(1);
+}
+
+export function resolvePlaywrightBrowserType(browserName: string): (typeof browserTypes)[keyof typeof browserTypes] {
+  assert(
+    browserName in browserTypes,
+    new Error(`Failed to match browser name "${browserName}" to playwright browserType`),
+  );
+
+  return browserTypes[browserName as keyof typeof browserTypes];
+}
+
 export async function getCreeveyCache(): Promise<string | undefined> {
   const { default: findCacheDir } = await import('find-cache-dir');
-  return findCacheDir({ name: 'creevey', cwd: dirname(fileURLToPath(importMetaUrl)) });
+  return findCacheDir({ name: 'creevey', cwd: path.dirname(fileURLToPath(importMetaUrl)) });
 }
 
 export async function runSequence(seq: (() => unknown)[], predicate: () => boolean): Promise<boolean> {
@@ -141,11 +197,12 @@ export function testsToImages(tests: (TestData | undefined)[]): Set<string> {
 
 // https://tuhrig.de/how-to-know-you-are-inside-a-docker-container/
 export const isInsideDocker =
-  fs.existsSync('/proc/1/cgroup') && fs.readFileSync('/proc/1/cgroup', 'utf-8').includes('docker');
+  (fs.existsSync('/proc/1/cgroup') && fs.readFileSync('/proc/1/cgroup', 'utf-8').includes('docker')) ||
+  process.env.DOCKER === 'true';
 
 export const downloadBinary = (downloadUrl: string, destination: string): Promise<void> =>
   new Promise((resolve, reject) =>
-    get(downloadUrl, (response) => {
+    https.get(downloadUrl, (response) => {
       if (response.statusCode == 302) {
         const { location } = response.headers;
         if (!location) {
@@ -187,7 +244,7 @@ export function readDirRecursive(dirPath: string): string[] {
 
 export function tryToLoadTestsData(filename: string): Partial<Record<string, ServerTest>> | undefined {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, import-x/no-dynamic-require
     return require(filename) as Partial<Record<string, ServerTest>>;
   } catch {
     /* noop */
@@ -198,19 +255,71 @@ const [nodeVersion] = process.versions.node.split('.').map(Number);
 export async function loadThroughTSX<T>(
   callback: (load: (modulePath: string) => Promise<T>) => Promise<T>,
 ): Promise<T> {
-  // TODO Check if it work in node18 and type: 'module'
-  const unregister = nodeVersion > 18 ? esmRegister() : cjsRegister();
+  const unregisterESM = nodeVersion > 18 ? esmRegister() : noop;
+  const unregisterCJS = cjsRegister();
 
   const result = await callback((modulePath) =>
     nodeVersion > 18
       ? import(modulePath)
-      : // eslint-disable-next-line @typescript-eslint/no-require-imports
+      : // eslint-disable-next-line @typescript-eslint/no-require-imports, import-x/no-dynamic-require
         Promise.resolve(require(modulePath) as T),
   );
 
   // NOTE: `unregister` type is `(() => Promise<void>) | (() => void)`
   // eslint-disable-next-line @typescript-eslint/await-thenable, @typescript-eslint/no-confusing-void-expression
-  await unregister();
+  await unregisterCJS();
+  // eslint-disable-next-line @typescript-eslint/await-thenable, @typescript-eslint/no-confusing-void-expression
+  await unregisterESM();
 
   return result;
 }
+
+export function waitOnUrl(waitUrl: string, timeout: number, delay: number) {
+  const urls = [waitUrl];
+  if (!LOCALHOST_REGEXP.test(waitUrl)) {
+    const parsedUrl = new URL(waitUrl);
+    parsedUrl.host = 'localhost';
+    urls.push(parsedUrl.toString());
+  }
+  const startTime = Date.now();
+  return Promise.race(
+    urls.map(
+      (url) =>
+        new Promise<void>((resolve, reject) => {
+          const interval = setInterval(() => {
+            http
+              .get(url, (response) => {
+                if (response.statusCode === 200) {
+                  clearInterval(interval);
+                  resolve();
+                }
+              })
+              .on('error', () => {
+                // Ignore HTTP errors
+              });
+
+            if (Date.now() - startTime > timeout) {
+              clearInterval(interval);
+              reject(new Error(`${url} didn't respond within ${timeout / 1000} seconds`));
+            }
+          }, delay);
+        }),
+    ),
+  );
+}
+
+/**
+ * Copies static assets to the report directory
+ * @param reportDir Directory where the report will be generated
+ */
+export async function copyStatics(reportDir: string): Promise<void> {
+  const clientDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../dist/client/web');
+  const assets = (await fs.promises.readdir(path.join(clientDir, 'assets'), { withFileTypes: true }))
+    .filter((dirent) => dirent.isFile())
+    .map((dirent) => dirent.name);
+  await fs.promises.mkdir(path.join(reportDir, 'assets'), { recursive: true });
+  await fs.promises.copyFile(path.join(clientDir, 'index.html'), path.join(reportDir, 'index.html'));
+  for (const asset of assets) {
+    await fs.promises.copyFile(path.join(clientDir, 'assets', asset), path.join(reportDir, 'assets', asset));
+  }
+}

package/src/server/webdriver.ts

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import { networkInterfaces } from 'os';
 import { logger } from './logger.js';
-import { Args } from '@storybook/csf';
+import type { Args } from 'storybook/internal/types';
 import {
   isDefined,
   StoryInput,

package/src/server/worker/context.ts

@@ -0,0 +1,14 @@
+import type { Container } from 'dockerode';
+
+let workerContainer: Container | null = null;
+
+export function setWorkerContainer(container: Container): void {
+  workerContainer = container;
+}
+
+export async function removeWorkerContainer(): Promise<void> {
+  if (workerContainer) {
+    await workerContainer.remove({ force: true });
+    workerContainer = null;
+  }
+}