creevey 0.10.0-beta.43 → 0.10.0-beta.44

package/src/server/selenium/internal.ts

@@ -373,12 +373,32 @@ export class InternalBrowser {
   }
 
   async loadStoriesFromBrowser(): Promise<StoriesRaw> {
-    const stories = await this.#browser.executeAsyncScript<StoriesRaw | undefined>(function (
-      callback: (stories: StoriesRaw | undefined) => void,
+    const result = await this.#browser.executeAsyncScript<
+      [error?: { message: string; stack?: string } | null, stories?: StoriesRaw]
+    >(function (
+      callback: (response: [error?: { message: string; stack?: string } | null, stories?: StoriesRaw]) => void,
     ) {
-      void window.__CREEVEY_GET_STORIES__().then(callback);
+      window
+        .__CREEVEY_GET_STORIES__()
+        .then((stories) => {
+          callback([null, stories]);
+        })
+        .catch((error: unknown) => {
+          const errorInfo = {
+            message: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? error.stack : undefined,
+          };
+          callback([errorInfo]);
+        });
     });
 
+    const [error, stories] = result;
+
+    if (error) {
+      const errorObj = new Error(error.message);
+      if (error.stack) errorObj.stack = error.stack;
+      throw errorObj;
+    }
     if (!stories) throw new Error("Can't get stories, it seems creevey or storybook API isn't available");
 
     return stories;

package/src/server/selenium/selenoid.ts

@@ -7,6 +7,7 @@ import { Config, BrowserConfigObject } from '../../types.js';
 import { downloadBinary, getCreeveyCache, killTree } from '../utils.js';
 import { pullImages, runImage } from '../docker.js';
 import { subscribeOn } from '../messages.js';
+import { removeWorkerContainer } from '../worker/context.js';
 
 async function createSelenoidConfig(
   browsers: BrowserConfigObject[],
@@ -147,5 +148,9 @@ export async function startSelenoidContainer(config: Config, debug: boolean): Pr
     },
   };
 
+  subscribeOn('shutdown', () => {
+    void removeWorkerContainer();
+  });
+
   return runImage(selenoidImage, ['-limit', String(limit)], selenoidOptions, debug);
 }

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/ui-update.ts

@@ -0,0 +1,46 @@
+import { Config } from '../types.js';
+import { logger } from './logger.js';
+import { TestsManager } from './master/testsManager.js';
+import { start as startServer } from './master/server.js';
+import { CreeveyApi } from './master/api.js';
+
+/**
+ * UI Update Mode implementation.
+ * This mode allows users to review and approve screenshots from the browser interface.
+ * It combines the functionality of both --ui and --update flags.
+ *
+ * @param config Creevey configuration
+ * @param port Port to run the server on
+ */
+export async function uiUpdate(config: Config, port: number): Promise<void> {
+  logger().info('Starting UI Update Mode');
+
+  // Initialize TestsManager with the configured directories
+  const testsManager = new TestsManager(config.screenDir, config.reportDir);
+
+  // Load tests from the report
+  const testsFromReport = testsManager.loadTestsFromReport();
+
+  if (Object.keys(testsFromReport).length === 0) {
+    logger().warn('No tests found in report. Run tests first to generate report data.');
+    return;
+  }
+
+  // Set tests in the manager
+  testsManager.updateTests(testsFromReport);
+
+  // Start API server with UI enabled
+  const resolveApi = startServer(config.reportDir, port, true);
+
+  // Initialize API
+  const api = new CreeveyApi(testsManager);
+
+  // Resolve the API for the server
+  resolveApi(api);
+
+  // Save test data to make it available for the UI
+  await testsManager.saveTestData();
+
+  logger().info(`UI Update Mode started on http://localhost:${port}/`);
+  logger().info('You can now review and approve screenshots from the browser.');
+}

package/src/server/utils.ts

@@ -1,16 +1,17 @@
 import fs from 'fs';
-import https 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 assert from 'assert';
-import pidtree from 'pidtree';
+import { logger } from './logger.js';
 
 const importMetaUrl = pathToFileURL(__filename).href;
 
@@ -89,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(
@@ -151,7 +164,7 @@ export function resolvePlaywrightBrowserType(browserName: string): (typeof brows
 
 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> {
@@ -242,8 +255,8 @@ 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
@@ -254,7 +267,9 @@ export async function loadThroughTSX<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;
 }
@@ -292,3 +307,19 @@ export function waitOnUrl(waitUrl: string, timeout: number, delay: number) {
     ),
   );
 }
+
+/**
+ * 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/worker/start.ts

@@ -218,7 +218,7 @@ export async function start(browser: string, gridUrl: string, config: Config, op
           browserName: baseContext.browserName,
           workerId: process.pid,
           images: imagesContext.images,
-          error: serializeError(error),
+          error: error ? serializeError(error) : undefined,
           duration,
           attachments: imagesContext.attachments,
           retries: message.payload.retries,

package/src/types.ts

@@ -268,20 +268,17 @@ export interface Config {
   /**
    * Creevey has two built-in stories providers.
    *
-   * `nodejsStoriesProvider` - The first one is used by default except if CSFv3 is enabled in Storybook.
-   * This provider builds and runs storybook in nodejs env, that allows write interaction tests by using Selenium API.
-   * The downside is it depends from project build specific and slightly increases init time.
-   *
-   * `browserStoriesProvider` - The second one is used by default with CSFv3 storybook feature.
-   * It load stories from storybook which is running in browser, like storyshots or loki do it.
+   * `browserStoriesProvider` - Extracts stories directly from the Storybook UI. It loads stories from storybook which is running in browser, like storyshots or loki do it.
    * The downside of this, you can't use interaction tests in Creevey, unless you use CSFv3.
    * Where you can define `play` method for each story
    *
+   * `hybridStoriesProvider` - Combines stories from Storybook with tests from separate files. This is the default provider used in the configuration.
+   *
    * Usage
    * ``` typescript
-   * import { nodejsStoriesProvider as provider } from 'creevey'
-   * // or
    * import { browserStoriesProvider as provider } from 'creevey'
+   * // or
+   * import { hybridStoriesProvider as provider } from 'creevey'
    *
    * // Creevey config
    * module.exports = {
@@ -353,7 +350,15 @@ export interface Options {
   _: string[];
   config?: string;
   port: number;
+  /**
+   * Run in UI mode with web interface for reviewing test results
+   * When used with `update` flag, enables UI Update Mode for approving screenshots
+   */
   ui: boolean;
+  /**
+   * Run in update mode to approve failed tests
+   * When used with `ui` flag, enables UI Update Mode for approving screenshots from browser
+   */
   update: boolean | string;
   debug: boolean;
   trace: boolean;
@@ -529,6 +534,7 @@ export interface CreeveyStatus {
   isRunning: boolean;
   tests: Partial<Record<string, TestData>>;
   browsers: string[];
+  isUpdateMode: boolean;
 }
 
 export interface CreeveyUpdate {