creevey 0.10.0-beta.42 → 0.10.0-beta.44

package/src/server/master/server.ts

@@ -1,125 +1,121 @@
 import path from 'path';
-import http from 'http';
-import cluster from 'cluster';
-import Koa from 'koa';
-import cors from '@koa/cors';
-import serve from 'koa-static';
-import mount from 'koa-mount';
-import body from 'koa-bodyparser';
-import WebSocket from 'ws';
+import HyperExpress from 'hyper-express';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { CreeveyApi } from './api.js';
-import { emitStoriesMessage, sendStoriesMessage, subscribeOn, subscribeOnWorker } from '../messages.js';
-import { CaptureOptions, isDefined, noop, StoryInput } from '../../types.js';
+import { subscribeOn } from '../messages.js';
+import { noop } from '../../types.js';
 import { logger } from '../logger.js';
-import { deserializeStory } from '../../shared/index.js';
+import { pingHandler, createStoriesHandler, captureHandler, createStaticFileHandler } from './handlers/index.js';
 
 const importMetaUrl = pathToFileURL(__filename).href;
 
 export function start(reportDir: string, port: number, ui: boolean): (api: CreeveyApi) => void {
   let resolveApi: (api: CreeveyApi) => void = noop;
-  let setStoriesCounter = 0;
   const creeveyApi = new Promise<CreeveyApi>((resolve) => (resolveApi = resolve));
-  const app = new Koa();
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
-  const server = http.createServer(app.callback());
-  const wss = new WebSocket.Server({ server });
-
-  app.use(cors());
-  app.use(body());
-
-  app.use(async (ctx, next) => {
-    if (ctx.method == 'GET' && ctx.path == '/ping') {
-      ctx.body = 'pong';
-      return;
-    }
-    await next();
-  });
 
-  if (ui) {
-    app.use(async (_, next) => {
-      await creeveyApi;
-      await next();
-    });
-  }
+  // Create HyperExpress server instance
+  const server = new HyperExpress.Server();
 
-  app.use(async (ctx, next) => {
-    if (ctx.method == 'POST' && ctx.path == '/stories') {
-      const { setStoriesCounter: counter, stories } = ctx.request.body as {
-        setStoriesCounter: number;
-        stories: [string, StoryInput[]][];
-      };
-      if (setStoriesCounter >= counter) return;
-
-      const deserializedStories = stories.map<[string, StoryInput[]]>(([file, stories]) => [
-        file,
-        stories.map(deserializeStory),
-      ]);
-
-      setStoriesCounter = counter;
-      emitStoriesMessage({ type: 'update', payload: deserializedStories });
-      Object.values(cluster.workers ?? {})
-        .filter(isDefined)
-        .filter((worker) => worker.isConnected())
-        .forEach((worker) => {
-          sendStoriesMessage(worker, { type: 'update', payload: deserializedStories });
-        });
-      return;
-    }
-    await next();
-  });
+  // Store active WebSocket connections
+  const activeConnections = new Set<HyperExpress.Websocket>();
 
-  app.use(async (ctx, next) => {
-    if (ctx.method == 'POST' && ctx.path == '/capture') {
-      const { workerId, options } = ctx.request.body as { workerId: number; options?: CaptureOptions };
-      const worker = Object.values(cluster.workers ?? {})
-        .filter(isDefined)
-        .find((worker) => worker.process.pid == workerId);
-      // NOTE: Hypothetical case when someone send to us capture req and we don't have a worker with browser session for it
-      if (!worker) return;
-      await new Promise<void>((resolve) => {
-        const unsubscribe = subscribeOnWorker(worker, 'stories', (message) => {
-          if (message.type != 'capture') return;
-          unsubscribe();
-          resolve();
-        });
-        sendStoriesMessage(worker, { type: 'capture', payload: options });
-      });
-      // TODO Pass screenshot result to show it in inspector
-      ctx.body = 'Ok';
-      return;
+  // Enable CORS for all routes
+  server.use((request, response, next) => {
+    response.header('Access-Control-Allow-Origin', '*');
+    response.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    response.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+
+    if (request.method === 'OPTIONS') {
+      return response.status(200).send();
     }
-    await next();
+
+    next();
   });
 
-  app.use(serve(path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../client/web')));
-  app.use(mount('/report', serve(reportDir)));
+  // Health check endpoint
+  server.get('/ping', pingHandler);
 
-  wss.on('error', (error) => {
-    logger().error(error);
-  });
+  // Stories endpoint
+  server.post('/stories', createStoriesHandler());
 
-  server.listen(port);
+  // Capture endpoint
+  server.post('/capture', captureHandler);
 
-  subscribeOn('shutdown', () => {
-    server.close();
-    wss.close();
-    wss.clients.forEach((ws) => {
-      ws.close();
+  // Serve report files
+  server.get('/report/*', createStaticFileHandler(reportDir, '/report/'));
+
+  // Serve static files
+  const webDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../client/web');
+  server.get('/*', createStaticFileHandler(webDir));
+
+  // If UI mode, wait for CreeveyApi to be resolved
+  if (ui) {
+    // Create a custom broadcast function that works with our connections
+    const broadcast = (message: string) => {
+      for (const connection of activeConnections) {
+        connection.send(message);
+      }
+    };
+
+    // Create a custom WebSocket server that simulates the standard behavior
+    const customWsServer = {
+      clients: activeConnections,
+      publish: broadcast,
+    };
+
+    let api: CreeveyApi | null = null;
+
+    server.use(async (request, _response, next) => {
+      if (!api && request.path === '/') {
+        api = await creeveyApi;
+        api.subscribe(customWsServer);
+      }
+      next();
     });
-  });
 
-  void creeveyApi.then((api) => {
-    api.subscribe(wss);
+    // Create WebSocket listener
+    server.ws('/', (ws) => {
+      // Add connection to the set of active connections
+      activeConnections.add(ws);
 
-    wss.on('connection', (ws) => {
-      ws.on('message', (message: WebSocket.RawData, isBinary: boolean) => {
-        // NOTE Text messages are passed as Buffer https://github.com/websockets/ws/releases/tag/8.0.0
-        // eslint-disable-next-line @typescript-eslint/no-base-to-string
-        api.handleMessage(ws, isBinary ? message : message.toString('utf-8'));
+      // Handle message events
+      ws.on('message', (message: string | Buffer) => {
+        api?.handleMessage(ws, message);
+      });
+
+      // Handle close events to clean up connections
+      ws.on('close', () => {
+        activeConnections.delete(ws);
       });
     });
+  }
+
+  // Shutdown handling
+  subscribeOn('shutdown', () => {
+    // Close all WebSocket connections
+    for (const connection of activeConnections) {
+      try {
+        connection.close();
+      } catch (error) {
+        logger().error('Error closing WebSocket connection', error);
+      }
+    }
+
+    // Close the server
+    server.close();
   });
 
+  // Start server
+  server
+    .listen(port)
+    .then(() => {
+      logger().info(`Server starting on port ${port}`);
+    })
+    .catch((error: unknown) => {
+      logger().error('Failed to start server', error);
+      process.exit(1);
+    });
+
+  // Return the function to resolve the API
   return resolveApi;
 }

package/src/server/master/start.ts

@@ -1,41 +1,14 @@
 import path from 'path';
 import { existsSync } from 'fs';
-import { fileURLToPath, pathToFileURL } from 'url';
-import { copyFile, readdir, mkdir, writeFile } from 'fs/promises';
 import master from './master.js';
-import creeveyApi, { CreeveyApi } from './api.js';
-import { Config, Options, TestData, isDefined } from '../../types.js';
-import { shutdownWorkers, testsToImages, readDirRecursive } from '../utils.js';
+import { CreeveyApi } from './api.js';
+import { Config, Options, isDefined } from '../../types.js';
+import { shutdownWorkers, testsToImages, readDirRecursive, copyStatics } from '../utils.js';
 import { subscribeOn } from '../messages.js';
 import Runner from './runner.js';
 import { logger } from '../logger.js';
 import { sendScreenshotsCount } from '../telemetry.js';
-
-const importMetaUrl = pathToFileURL(__filename).href;
-
-async function copyStatics(reportDir: string): Promise<void> {
-  const clientDir = path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../../dist/client/web');
-  const assets = (await readdir(path.join(clientDir, 'assets'), { withFileTypes: true }))
-    .filter((dirent) => dirent.isFile())
-    .map((dirent) => dirent.name);
-  await mkdir(path.join(reportDir, 'assets'), { recursive: true });
-  await copyFile(path.join(clientDir, 'index.html'), path.join(reportDir, 'index.html'));
-  for (const asset of assets) {
-    await copyFile(path.join(clientDir, 'assets', asset), path.join(reportDir, 'assets', asset));
-  }
-}
-
-function reportDataModule(data: Partial<Record<string, TestData>>): string {
-  return `
-(function (root, factory) {
-  if (typeof module === 'object' && module.exports) {
-    module.exports = factory();
-  } else {
-    root.__CREEVEY_DATA__ = factory();
-  }
-}(this, function () { return ${JSON.stringify(data)} }));
-`;
-}
+import { start as startServer } from './server.js';
 
 function outputUnnecessaryImages(imagesDir: string, images: Set<string>): void {
   if (!existsSync(imagesDir)) return;
@@ -50,12 +23,9 @@ function outputUnnecessaryImages(imagesDir: string, images: Set<string>): void {
   }
 }
 
-export async function start(
-  gridUrl: string | undefined,
-  config: Config,
-  options: Options,
-  resolveApi: (api: CreeveyApi) => void,
-): Promise<void> {
+export async function start(gridUrl: string | undefined, config: Config, options: Options): Promise<void> {
+  const resolveApi = startServer(config.reportDir, options.port, options.ui);
+
   let runner: Runner | null = null;
   if (config.hooks.before) {
     await config.hooks.before();
@@ -78,13 +48,19 @@ export async function start(
   runner = await master(config, gridUrl);
 
   runner.on('stop', () => {
-    void copyStatics(config.reportDir).then(() =>
-      writeFile(path.join(config.reportDir, 'data.js'), reportDataModule(runner.status.tests)),
-    );
+    void copyStatics(config.reportDir).then(() => runner.testsManager.saveTestData());
   });
 
   if (options.ui) {
-    resolveApi(creeveyApi(runner));
+    // Initialize TestsManager
+    const testsManager = runner.testsManager;
+
+    // Create the CreeveyApi instance using the existing runner
+    const api = new CreeveyApi(testsManager, runner);
+
+    // Resolve the API for the server
+    resolveApi(api);
+
     logger().info(`Started on http://localhost:${options.port}`);
   } else {
     if (Object.values(runner.status.tests).filter((test) => test && !test.skip).length == 0) {

package/src/server/master/testsManager.ts

@@ -0,0 +1,315 @@
+import path from 'path';
+import { mkdirSync, writeFileSync } from 'fs';
+import EventEmitter from 'events';
+import {
+  ServerTest,
+  TestMeta,
+  TestResult,
+  TestStatus,
+  CreeveyUpdate,
+  ApprovePayload,
+  isDefined,
+  isFunction,
+  CreeveyStatus,
+} from '../../types.js';
+import { tryToLoadTestsData } from '../utils.js';
+import { copyFile, mkdir, writeFile } from 'fs/promises';
+
+/**
+ * TestsManager is responsible for all operations related to test data management
+ * including loading, saving, merging, and updating test data.
+ * It extends EventEmitter to emit update events that can be subscribed to.
+ */
+export class TestsManager extends EventEmitter {
+  private tests: Partial<Record<string, ServerTest>> = {};
+  private screenDir: string;
+  private reportDir: string;
+
+  /**
+   * Creates a new TestsManager instance
+   * @param screenDir Directory for storing reference images
+   * @param reportDir Directory for storing reports and screenshots
+   */
+  constructor(screenDir: string, reportDir: string) {
+    super();
+    this.screenDir = screenDir;
+    this.reportDir = reportDir;
+  }
+
+  /**
+   * Get a copy of all tests
+   * @returns all tests
+   */
+  public getTests(): Partial<Record<string, ServerTest>> {
+    return this.tests;
+  }
+
+  /**
+   * Get a test by ID
+   * @param id Test ID
+   * @returns Test data
+   */
+  public getTest(id: string): ServerTest | undefined {
+    return this.tests[id];
+  }
+
+  /**
+   * Get test data in a format suitable for status reporting
+   * @returns Test data in the format needed for status
+   */
+  public getTestsData(): CreeveyStatus['tests'] {
+    const testsData: CreeveyStatus['tests'] = {};
+
+    Object.entries(this.tests).forEach(([id, test]) => {
+      if (!test) return;
+
+      const { story: _, fn: __, ...testData } = test;
+      testsData[id] = testData;
+    });
+
+    return testsData;
+  }
+
+  /**
+   * Load tests from a report file
+   */
+  public loadTestsFromReport(): Partial<Record<string, ServerTest>> {
+    const reportDataPath = path.join(this.reportDir, 'data.js');
+    const testsFromReport = tryToLoadTestsData(reportDataPath) ?? {};
+    return testsFromReport;
+  }
+
+  /**
+   * Merge tests from report with tests from stories
+   */
+  private mergeTests(
+    testsWithReports: CreeveyStatus['tests'],
+    testsFromStories: Partial<Record<string, ServerTest>>,
+  ): Partial<Record<string, ServerTest>> {
+    Object.values(testsFromStories)
+      .filter(isDefined)
+      .forEach((test) => {
+        const testWithReport = testsWithReports[test.id];
+        if (!testWithReport) return;
+        test.retries = testWithReport.retries;
+        if (testWithReport.status === 'success' || testWithReport.status === 'failed') {
+          test.status = testWithReport.status;
+        }
+        test.results = testWithReport.results;
+        test.approved = testWithReport.approved;
+      });
+
+    return testsFromStories;
+  }
+
+  public loadAndMergeTests(testsFromStories: Partial<Record<string, ServerTest>>): Partial<Record<string, ServerTest>> {
+    const testsFromReport = this.loadTestsFromReport();
+
+    return this.mergeTests(testsFromReport, testsFromStories);
+  }
+
+  /**
+   * Update tests with incremental changes
+   * @param testsDiff Tests to update or remove
+   */
+  public updateTests(testsDiff: Partial<Record<string, ServerTest>>): CreeveyUpdate | null {
+    const tests: CreeveyUpdate['tests'] = {};
+    const removedTests: TestMeta[] = [];
+
+    Object.entries(testsDiff).forEach(([id, newTest]) => {
+      if (newTest) {
+        if (this.tests[id]) {
+          this.tests[id] = {
+            ...newTest,
+            retries: this.tests[id].retries,
+            results: this.tests[id].results,
+            approved: this.tests[id].approved,
+          };
+        } else {
+          this.tests[id] = newTest;
+        }
+
+        const { story: _, fn: __, ...restTest } = newTest;
+        tests[id] = { ...restTest, status: 'unknown' };
+      } else if (this.tests[id]) {
+        const { id: testId, browser, testName, storyPath, storyId } = this.tests[id];
+        removedTests.push({ id: testId, browser, testName, storyPath, storyId });
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete this.tests[id];
+      }
+    });
+
+    this.saveTestsToJson();
+
+    const update = { tests, removedTests };
+    this.emit('update', update);
+    return update;
+  }
+
+  /**
+   * Update test result
+   * @param id Test ID
+   * @param status New test status
+   * @param result Optional test result
+   */
+  public updateTestStatus(id: string, status: TestStatus, result?: TestResult): CreeveyUpdate | null {
+    // TODO Handle 'retrying' status
+    const test = this.tests[id];
+    if (!test) return null;
+
+    const { browser, testName, storyPath, storyId } = test;
+    test.status = status === 'retrying' ? 'failed' : status;
+
+    if (!result) {
+      // NOTE: Running status
+      const update = { tests: { [id]: { id, browser, testName, storyPath, status, storyId } } };
+      this.emit('update', update);
+      return update;
+    }
+
+    test.results ??= [];
+    test.results.push(result);
+
+    if (status === 'failed') {
+      test.approved = null;
+    }
+
+    const update = {
+      tests: {
+        [id]: {
+          id,
+          browser,
+          testName,
+          storyPath,
+          status,
+          approved: test.approved,
+          results: [result],
+          storyId,
+        },
+      },
+    };
+
+    this.emit('update', update);
+    return update;
+  }
+
+  /**
+   * Save tests to JSON file
+   * @param reportDir Directory to save the JSON file
+   */
+  public saveTestsToJson(): void {
+    mkdirSync(this.reportDir, { recursive: true });
+    writeFileSync(
+      path.join(this.reportDir, 'tests.json'),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      JSON.stringify(this.tests, (_, value) => (isFunction(value) ? value.toString() : value), 2),
+    );
+  }
+
+  /**
+   * Save test data to a module
+   * @param data Test data to include in the module
+   */
+  public async saveTestData(data: CreeveyStatus['tests'] = this.getTestsData()): Promise<void> {
+    const dataModule = `
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.__CREEVEY_DATA__ = factory();
+  }
+}(this, function () { return ${JSON.stringify(data)} }));
+`;
+    await writeFile(path.join(this.reportDir, 'data.js'), dataModule);
+  }
+
+  /**
+   * Copy image for approval
+   * @param test Test data
+   * @param image Image name
+   * @param actual Actual image path
+   */
+  private async copyImage(test: ServerTest, image: string, actual: string): Promise<void> {
+    const { browser, testName, storyPath } = test;
+    const restPath = [...storyPath, testName].filter(isDefined);
+    const testPath = path.join(...restPath, image == browser ? '' : browser);
+    const srcImagePath = path.join(this.reportDir, testPath, actual);
+    const dstImagePath = path.join(this.screenDir, testPath, `${image}.png`);
+    await mkdir(path.join(this.screenDir, testPath), { recursive: true });
+    await copyFile(srcImagePath, dstImagePath);
+  }
+
+  /**
+   * Approve a specific test
+   * @param payload Approval payload with test ID, retry index, and image name
+   */
+  public async approve({ id, retry, image }: ApprovePayload): Promise<CreeveyUpdate | null> {
+    const test = this.tests[id];
+    if (!test?.results) return null;
+    const result = test.results[retry];
+    if (!result.images) return null;
+    const images = result.images[image];
+    if (!images) return null;
+    test.approved ??= {};
+    const { browser, testName, storyPath, storyId } = test;
+
+    await this.copyImage(test, image, images.actual);
+
+    test.approved[image] = retry;
+
+    if (Object.keys(result.images).every((name) => typeof test.approved?.[name] == 'number')) {
+      test.status = 'approved';
+    }
+
+    const update = {
+      tests: {
+        [id]: {
+          id,
+          browser,
+          testName,
+          storyPath,
+          status: test.status,
+          approved: test.approved,
+          storyId,
+        },
+      },
+    };
+
+    this.emit('update', update);
+    return update;
+  }
+
+  /**
+   * Approve all failed tests
+   */
+  public async approveAll(): Promise<CreeveyUpdate> {
+    const updatedTests: NonNullable<CreeveyUpdate['tests']> = {};
+    for (const test of Object.values(this.tests)) {
+      if (!test?.results) continue;
+      const retry = test.results.length - 1;
+      const { images, status } = test.results.at(retry) ?? {};
+      if (!images || status != 'failed') continue;
+      for (const [name, image] of Object.entries(images)) {
+        if (!image) continue;
+        await this.copyImage(test, name, image.actual);
+
+        test.approved ??= {};
+        test.approved[name] = retry;
+        test.status = 'approved';
+
+        updatedTests[test.id] = {
+          id: test.id,
+          browser: test.browser,
+          storyPath: test.storyPath,
+          storyId: test.storyId,
+          status: test.status,
+          approved: { [name]: retry },
+        };
+      }
+    }
+
+    const result = { tests: updatedTests };
+    this.emit('update', result);
+    return result;
+  }
+}