creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.0

package/src/server/master/pool.ts

@@ -0,0 +1,203 @@
+import cluster, { Worker as ClusterWorker } from 'cluster';
+import { EventEmitter } from 'events';
+import { Worker, Config, TestResult, BrowserConfig, WorkerMessage, TestStatus, isWorkerMessage } from '../../types.js';
+import { sendTestMessage, sendShutdownMessage, subscribeOnWorker } from '../messages.js';
+import { isShuttingDown } from '../utils.js';
+
+const FORK_RETRIES = 5;
+
+interface WorkerTest {
+  id: string;
+  path: string[];
+  retries: number;
+}
+
+export default class Pool extends EventEmitter {
+  private maxRetries: number;
+  private config: BrowserConfig;
+  private workers: Worker[] = [];
+  private queue: WorkerTest[] = [];
+  private forcedStop = false;
+  private failFast: boolean;
+  public get isRunning(): boolean {
+    return this.workers.length !== this.freeWorkers.length;
+  }
+  constructor(
+    config: Config,
+    private browser: string,
+  ) {
+    super();
+
+    this.failFast = config.failFast;
+    this.maxRetries = config.maxRetries;
+    this.config = config.browsers[browser] as BrowserConfig;
+  }
+
+  async init(): Promise<void> {
+    const poolSize = Math.max(1, this.config.limit ?? 1);
+    // TODO Init queue for workers to smooth browser starting load
+    this.workers = (await Promise.all(Array.from({ length: poolSize }).map(() => this.forkWorker()))).filter(
+      (workerOrError): workerOrError is Worker => workerOrError instanceof ClusterWorker,
+    );
+    if (this.workers.length != poolSize)
+      throw new Error(`Can't instantiate workers for ${this.browser} due many errors`);
+    this.workers.forEach((worker) => {
+      this.exitHandler(worker);
+    });
+  }
+
+  start(tests: { id: string; path: string[] }[]): boolean {
+    if (this.isRunning) return false;
+
+    this.queue = tests.map(({ id, path }) => ({ id, path, retries: 0 }));
+    this.process();
+
+    return true;
+  }
+
+  stop(): void {
+    if (!this.isRunning) {
+      this.emit('stop');
+      return;
+    }
+
+    this.forcedStop = true;
+    this.queue = [];
+  }
+
+  process(): void {
+    const worker = this.getFreeWorker();
+    const test = this.queue.at(0);
+
+    if (this.queue.length == 0 && this.workers.length === this.freeWorkers.length) {
+      this.forcedStop = false;
+      this.emit('stop');
+      return;
+    }
+
+    if (!worker || !test) return;
+
+    worker.isRunning = true;
+
+    const { id } = test;
+
+    this.queue.shift();
+    this.sendStatus({ id, status: 'running' });
+
+    this.subscribe(worker, test);
+
+    sendTestMessage(worker, { type: 'start', payload: test });
+
+    this.process();
+  }
+
+  private sendStatus(message: { id: string; status: TestStatus; result?: TestResult }): void {
+    this.emit('test', message);
+  }
+
+  private getFreeWorker(): Worker | undefined {
+    return this.freeWorkers[Math.floor(Math.random() * this.freeWorkers.length)];
+  }
+
+  private get aliveWorkers(): Worker[] {
+    return this.workers.filter((worker) => !worker.exitedAfterDisconnect);
+  }
+
+  private get freeWorkers(): Worker[] {
+    return this.aliveWorkers.filter((worker) => !worker.isRunning);
+  }
+
+  private async forkWorker(retry = 0): Promise<Worker | { error: string }> {
+    cluster.setupPrimary({
+      args: ['--browser', this.browser, ...process.argv.slice(2)],
+    });
+    const worker = cluster.fork();
+    const message = await new Promise((resolve: (value: WorkerMessage) => void) => {
+      const readyHandler = (message: unknown): void => {
+        if (!isWorkerMessage(message)) return;
+        worker.off('message', readyHandler);
+        resolve(message);
+      };
+      worker.on('message', readyHandler);
+    });
+
+    if (message.type != 'error') return worker;
+
+    this.gracefullyKill(worker);
+
+    if (retry == FORK_RETRIES) return message.payload;
+    return this.forkWorker(retry + 1);
+  }
+
+  private exitHandler(worker: Worker): void {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    worker.once('exit', async () => {
+      if (isShuttingDown.current) return;
+
+      const workerOrError = await this.forkWorker();
+
+      if (!(workerOrError instanceof ClusterWorker))
+        throw new Error(`Can't instantiate worker for ${this.browser} due many errors`);
+
+      this.exitHandler(workerOrError);
+      this.workers[this.workers.indexOf(worker)] = workerOrError;
+      this.process();
+    });
+  }
+
+  private gracefullyKill(worker: Worker): void {
+    const timeout = setTimeout(() => {
+      worker.kill();
+    }, 10000);
+    worker.on('exit', () => {
+      clearTimeout(timeout);
+    });
+    sendShutdownMessage(worker);
+  }
+
+  private shouldRetry(test: WorkerTest): boolean {
+    return test.retries < this.maxRetries && !this.forcedStop;
+  }
+
+  private handleTestResult(worker: Worker, test: WorkerTest, result: TestResult): void {
+    const shouldRetry = result.status == 'failed' && this.shouldRetry(test);
+
+    if (shouldRetry) {
+      test.retries += 1;
+      this.queue[this.failFast ? 'unshift' : 'push'](test);
+    }
+
+    this.sendStatus({ id: test.id, status: shouldRetry ? 'retrying' : result.status, result });
+
+    worker.isRunning = false;
+
+    setImmediate(() => {
+      this.process();
+    });
+  }
+
+  private subscribe(worker: Worker, test: WorkerTest): void {
+    const subscriptions = [
+      subscribeOnWorker(worker, 'worker', (message) => {
+        if (message.type != 'error') return;
+
+        subscriptions.forEach((unsubscribe) => {
+          unsubscribe();
+        });
+
+        this.gracefullyKill(worker);
+
+        this.handleTestResult(worker, test, { status: 'failed', ...message.payload });
+      }),
+      subscribeOnWorker(worker, 'test', (message) => {
+        if (message.type != 'end') return;
+
+        subscriptions.forEach((unsubscribe) => {
+          unsubscribe();
+        });
+
+        this.handleTestResult(worker, test, message.payload);
+      }),
+    ];
+  }
+}

package/src/server/master/runner.ts

@@ -0,0 +1,189 @@
+import path from 'path';
+import { copyFile, mkdir } from 'fs/promises';
+import { EventEmitter } from 'events';
+import {
+  Config,
+  CreeveyStatus,
+  TestResult,
+  ApprovePayload,
+  isDefined,
+  CreeveyUpdate,
+  TestStatus,
+  ServerTest,
+  TestMeta,
+} from '../../types.js';
+import Pool from './pool.js';
+
+export default class Runner extends EventEmitter {
+  private failFast: boolean;
+  private screenDir: string;
+  private reportDir: string;
+  private browsers: string[];
+  private pools: Record<string, Pool> = {};
+  tests: Partial<Record<string, ServerTest>> = {};
+  public get isRunning(): boolean {
+    return Object.values(this.pools).some((pool) => pool.isRunning);
+  }
+  constructor(config: Config) {
+    super();
+
+    this.failFast = config.failFast;
+    this.screenDir = config.screenDir;
+    this.reportDir = config.reportDir;
+    this.browsers = Object.keys(config.browsers);
+    this.browsers
+      .map((browser) => (this.pools[browser] = new Pool(config, browser)))
+      .map((pool) => pool.on('test', this.handlePoolMessage));
+  }
+
+  private handlePoolMessage = (message: { id: string; status: TestStatus; result?: TestResult }): void => {
+    const { id, status, result } = message;
+    const test = this.tests[id];
+
+    if (!test) return;
+    const { browser, testName, storyPath, storyId } = test;
+    // TODO Handle 'retrying' status
+    test.status = status == 'retrying' ? 'failed' : status;
+    if (!result) {
+      this.sendUpdate({ tests: { [id]: { id, browser, testName, storyPath, status: test.status, storyId } } });
+      return;
+    }
+    if (!test.results) {
+      test.results = [];
+    }
+    test.results.push(result);
+
+    this.sendUpdate({
+      tests: { [id]: { id, browser, testName, storyPath, status: test.status, results: [result], storyId } },
+    });
+
+    if (this.failFast && status == 'failed') this.stop();
+  };
+
+  private handlePoolStop = (): void => {
+    if (!this.isRunning) {
+      this.sendUpdate({ isRunning: false });
+      this.emit('stop');
+    }
+  };
+
+  public async init(): Promise<void> {
+    await Promise.all(Object.values(this.pools).map((pool) => pool.init()));
+  }
+
+  public updateTests(testsDiff: Partial<Record<string, ServerTest>>): void {
+    const tests: CreeveyStatus['tests'] = {};
+    const removedTests: TestMeta[] = [];
+    Object.entries(testsDiff).forEach(([id, newTest]) => {
+      const oldTest = this.tests[id];
+      if (newTest) {
+        if (oldTest) {
+          this.tests[id] = {
+            ...newTest,
+            retries: oldTest.retries,
+            results: oldTest.results,
+            approved: oldTest.approved,
+          };
+        } else this.tests[id] = newTest;
+
+        const { story: _, fn: __, ...restTest } = newTest;
+        tests[id] = { ...restTest, status: 'unknown' };
+      } else if (oldTest) {
+        const { id, browser, testName, storyPath, storyId } = oldTest;
+        removedTests.push({ id, browser, testName, storyPath, storyId });
+        // TODO Use Map instead
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete this.tests[id];
+      }
+    });
+    this.sendUpdate({ tests, removedTests });
+  }
+
+  public start(ids: string[]): void {
+    type TestsByBrowser = Record<string, { id: string; path: string[] }[]>;
+    if (this.isRunning) return;
+
+    const testsToStart = ids
+      .map((id) => this.tests[id])
+      .filter(isDefined)
+      .filter((test) => !test.skip);
+
+    if (testsToStart.length == 0) return;
+
+    this.sendUpdate({
+      isRunning: true,
+      tests: testsToStart.reduce(
+        (update: CreeveyUpdate['tests'], { id, storyId, browser, testName, storyPath }) => ({
+          ...update,
+          [id]: { id, browser, testName, storyPath, status: 'pending', storyId },
+        }),
+        {},
+      ),
+    });
+
+    const testsByBrowser: Partial<TestsByBrowser> = testsToStart.reduce((tests: Partial<TestsByBrowser>, test) => {
+      const { id, browser, testName, storyPath } = test;
+      const restPath = [...storyPath, testName].filter(isDefined);
+      test.status = 'pending';
+      return {
+        ...tests,
+        [browser]: [...(tests[browser] ?? []), { id, path: restPath }],
+      };
+    }, {});
+
+    this.browsers.forEach((browser) => {
+      const pool = this.pools[browser];
+      const tests = testsByBrowser[browser];
+
+      if (tests && tests.length > 0 && pool.start(tests)) {
+        pool.once('stop', this.handlePoolStop);
+      }
+    });
+  }
+
+  public stop(): void {
+    if (!this.isRunning) return;
+    this.browsers.forEach((browser) => {
+      this.pools[browser].stop();
+    });
+  }
+
+  public get status(): CreeveyStatus {
+    const tests: CreeveyStatus['tests'] = {};
+    Object.values(this.tests)
+      .filter(isDefined)
+
+      .forEach(({ story: _, fn: __, ...test }) => (tests[test.id] = test));
+    return {
+      isRunning: this.isRunning,
+      tests,
+      browsers: this.browsers,
+    };
+  }
+
+  public async approve({ id, retry, image }: ApprovePayload): Promise<void> {
+    const test = this.tests[id];
+    if (!test?.results) return;
+    const result = test.results[retry];
+    if (!result.images) return;
+    const images = result.images[image];
+    if (!images) return;
+    if (!test.approved) {
+      test.approved = {};
+    }
+    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, images.actual);
+    const dstImagePath = path.join(this.screenDir, testPath, `${image}.png`);
+    await mkdir(path.join(this.screenDir, testPath), { recursive: true });
+    await copyFile(srcImagePath, dstImagePath);
+    test.approved[image] = retry;
+    this.sendUpdate({
+      tests: { [id]: { id, browser, testName, storyPath, approved: { [image]: retry }, storyId: test.storyId } },
+    });
+  }
+  private sendUpdate(data: CreeveyUpdate): void {
+    this.emit('update', data);
+  }
+}

package/src/server/master/server.ts

@@ -0,0 +1,124 @@
+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 { 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 { logger } from '../logger.js';
+import { deserializeStory } from '../../shared/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();
+  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();
+    });
+  }
+
+  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();
+  });
+
+  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;
+    }
+    await next();
+  });
+
+  app.use(serve(path.join(path.dirname(fileURLToPath(importMetaUrl)), '../../client/web')));
+  app.use(mount('/report', serve(reportDir)));
+
+  wss.on('error', (error) => {
+    logger.error(error);
+  });
+
+  server.listen(port);
+
+  subscribeOn('shutdown', () => {
+    server.close();
+    wss.close();
+    wss.clients.forEach((ws) => {
+      ws.close();
+    });
+  });
+
+  void creeveyApi.then((api) => {
+    api.subscribe(wss);
+
+    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'));
+      });
+    });
+  });
+
+  return resolveApi;
+}