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

package/src/client/web/KeyboardEventsContext.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback, useContext } from 'react';
+import { CreeveySuite, isTest, noop } from '../../types.js';
+import { CreeveyViewFilter, filterTests, flattenSuite, getSuiteByPath, getTestPath } from '../shared/helpers.js';
+import { CreeveyContext } from './CreeveyContext.js';
+
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
+export interface KeyboardEventsContextType {
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
+}
+
+export const KeyboardEventsContext = React.createContext<KeyboardEventsContextType>({
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
+});
+
+export const KeyboardEvents = ({
+  children,
+  rootSuite,
+  filter,
+}: {
+  rootSuite: CreeveySuite;
+  filter: CreeveyViewFilter;
+  children: React.ReactChild;
+}): JSX.Element => {
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
+
+  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
+
+  const suiteList = flattenSuite(filterTests(rootSuite, filter));
+
+  const getFocusedItemIndex = useCallback(
+    (item: string[]): number => {
+      return suiteList.findIndex((x) => {
+        const path = isTest(x.suite) ? getTestPath(x.suite) : x.suite.path;
+
+        return item.length === path.length && item.every((focusedPath) => path.includes(focusedPath));
+      });
+    },
+    [suiteList],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (sidebarFocusedItem === null) return;
+
+      if (e.code === 'Enter') {
+        if (sidebarFocusedItem.length === 0) return;
+
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+        if (!focusedSuite) return;
+        if (!isTest(focusedSuite)) {
+          e.preventDefault();
+          onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
+        }
+        if (isTest(focusedSuite) && focusedSuite.results?.length == 0) {
+          e.preventDefault();
+        }
+        return;
+      }
+      if (e.code === 'Space') {
+        e.preventDefault();
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+        if (!focusedSuite) return;
+        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+        onSuiteToggle(path, !focusedSuite.checked);
+      }
+      if (e.code === 'ArrowDown') {
+        const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
+        if (currentIndex === suiteList.length - 1) return;
+        const nextSuite = suiteList[currentIndex + 1];
+        const nextPath = isTest(nextSuite.suite) ? getTestPath(nextSuite.suite) : nextSuite.suite.path;
+        setSidebarFocusedItem(nextPath);
+      }
+      if (e.code === 'ArrowUp') {
+        const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
+        const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
+        const nextPath = isTest(nextSuite) ? getTestPath(nextSuite) : nextSuite.path;
+        setSidebarFocusedItem(nextPath);
+      }
+
+      if (e.code === 'ArrowRight') {
+        if (sidebarFocusedItem.length === 0) return;
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+
+        if (!focusedSuite || isTest(focusedSuite)) return;
+        onSuiteOpen(focusedSuite.path, true);
+      }
+
+      if (e.code === 'ArrowLeft') {
+        if (sidebarFocusedItem.length === 0) return;
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+        if (!focusedSuite) return;
+        if (!isTest(focusedSuite) && focusedSuite.opened) {
+          onSuiteOpen(focusedSuite.path, false);
+          return;
+        }
+
+        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+        setSidebarFocusedItem(path.slice(0, -1));
+      }
+    },
+    [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
+  return (
+    <KeyboardEventsContext.Provider value={{ sidebarFocusedItem, setSidebarFocusedItem }}>
+      {children}
+    </KeyboardEventsContext.Provider>
+  );
+};

package/src/client/web/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Creevey</title>
+    <style>
+      body {
+        margin: 0;
+        font-family:
+          'Nunito Sans',
+          -apple-system,
+          '.SFNSText-Regular',
+          'San Francisco',
+          BlinkMacSystemFont,
+          'Segoe UI',
+          'Helvetica Neue',
+          Helvetica,
+          Arial,
+          sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="main.js"></script>
+  </body>
+</html>

package/src/client/web/index.tsx

@@ -0,0 +1,63 @@
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+import { CreeveyApp } from './CreeveyApp.js';
+
+import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
+import { CreeveyStatus, noop } from '../../types.js';
+import { treeifyTests } from '../shared/helpers.js';
+import { CreeveyLoader } from './CreeveyLoader.js';
+
+declare global {
+  const __CREEVEY_DATA__: CreeveyStatus['tests'];
+}
+
+window.__CREEVEY_SET_READY_FOR_CAPTURE__ = noop;
+
+function loadCreeveyData(): Promise<CreeveyStatus['tests']> {
+  return new Promise<CreeveyStatus['tests']>((resolve) => {
+    const script = document.createElement('script');
+    script.src = 'data.js';
+    script.onload = () => {
+      resolve(__CREEVEY_DATA__);
+    };
+    document.body.appendChild(script);
+  });
+}
+
+const CreeveyAppAsync = React.lazy(async () => {
+  let isReport = false;
+  let creeveyStatus: CreeveyStatus;
+  let creeveyApi: CreeveyClientApi | undefined;
+  if (window.location.host) {
+    try {
+      creeveyApi = await initCreeveyClientApi();
+      creeveyStatus = await creeveyApi.status;
+    } catch {
+      // NOTE: Failed to get status from API
+      // NOTE: It might happen on circle ci from artifact
+      isReport = true;
+      creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [] };
+    }
+  } else {
+    isReport = true;
+    creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [] };
+  }
+
+  return {
+    default() {
+      return (
+        <CreeveyApp
+          api={creeveyApi}
+          initialState={{ isReport, isRunning: creeveyStatus.isRunning, tests: treeifyTests(creeveyStatus.tests) }}
+        />
+      );
+    },
+  };
+});
+
+ReactDOM.render(
+  <Suspense fallback={<CreeveyLoader />}>
+    <CreeveyAppAsync />
+  </Suspense>,
+  document.getElementById('root'),
+);

package/src/creevey.ts

@@ -0,0 +1,47 @@
+import cluster from 'cluster';
+import minimist from 'minimist';
+import creevey from './server/index.js';
+import { noop, Options } from './types.js';
+import { emitWorkerMessage } from './server/messages.js';
+import { isShuttingDown, shutdown, shutdownWorkers } from './server/utils.js';
+import Logger from 'loglevel';
+import { logger } from './server/logger.js';
+
+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: { error } });
+  if (cluster.isPrimary) void shutdownWorkers();
+}
+
+process.on('uncaughtException', shutdownOnException);
+process.on('unhandledRejection', shutdownOnException);
+if (cluster.isWorker) process.on('SIGINT', noop);
+if (cluster.isPrimary) process.on('SIGINT', shutdown);
+
+const argv = minimist<Options>(process.argv.slice(2), {
+  string: ['browser', 'config', 'reporter', 'reportDir', 'screenDir', 'storybookUrl'],
+  boolean: ['debug', 'trace', 'ui', 'saveReport', 'tests'],
+  default: { port: 3000, saveReport: true },
+  alias: { port: 'p', config: 'c', debug: 'd', update: 'u' },
+});
+
+// @ts-expect-error: define log level for storybook
+global.LOGLEVEL = argv.trace ? 'trace' : argv.debug ? 'debug' : 'warn';
+if (argv.trace) {
+  logger.setDefaultLevel(Logger.levels.TRACE);
+  Logger.setDefaultLevel(Logger.levels.TRACE);
+} else if (argv.debug) {
+  logger.setDefaultLevel(Logger.levels.DEBUG);
+  Logger.setDefaultLevel(Logger.levels.DEBUG);
+} else {
+  logger.setDefaultLevel(Logger.levels.INFO);
+  Logger.setDefaultLevel(Logger.levels.INFO);
+}
+
+void creevey(argv);

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './types.js';
+export { loadStories as browserStoriesProvider } from './server/storybook/providers/browser.js';
+export { loadStories as hybridStoriesProvider } from './server/storybook/providers/hybrid.js';
+export * from './server/testsFiles/parser.js';

package/src/server/config.ts

@@ -0,0 +1,83 @@
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+import { loadStories as browserStoriesProvider } from './storybook/providers/browser.js';
+import { Config, Browser, BrowserConfig, Options, isDefined } from '../types.js';
+import { configExt, loadThroughTSX } from './utils.js';
+
+export const defaultBrowser = 'chrome';
+
+export const defaultConfig: Omit<Config, 'gridUrl' | 'storiesProvider' | 'testsDir' | 'tsConfig'> = {
+  disableTelemetry: false,
+  useDocker: true,
+  dockerImage: 'aerokube/selenoid:latest-release',
+  dockerImagePlatform: '',
+  pullImages: true,
+  failFast: false,
+  storybookUrl: 'http://localhost:6006',
+  screenDir: path.resolve('images'),
+  reportDir: path.resolve('report'),
+  maxRetries: 0,
+  diffOptions: { threshold: 0, includeAA: true },
+  browsers: { [defaultBrowser]: true },
+  hooks: {},
+  babelOptions: (_) => _,
+  testsRegex: /\.creevey\.(t|j)s$/,
+};
+
+function normalizeBrowserConfig(name: string, config: Browser): BrowserConfig {
+  if (typeof config == 'boolean') return { browserName: name };
+  if (typeof config == 'string') return { browserName: config };
+  return config;
+}
+
+function resolveConfigPath(configPath?: string): string | undefined {
+  const configDir = path.resolve('.creevey');
+
+  if (isDefined(configPath)) {
+    configPath = path.resolve(configPath);
+  } else if (fs.existsSync(configDir)) {
+    for (const ext of configExt) {
+      configPath = path.resolve(configDir, `config${ext}`);
+      if (fs.existsSync(configPath)) break;
+    }
+  } else {
+    for (const ext of configExt) {
+      configPath = path.resolve(`creevey.config${ext}`);
+      if (fs.existsSync(configPath)) break;
+    }
+  }
+
+  return configPath;
+}
+
+export async function readConfig(options: Options): Promise<Config> {
+  const configPath = resolveConfigPath(options.config);
+  const userConfig: typeof defaultConfig & Partial<Pick<Config, 'gridUrl' | 'storiesProvider'>> = { ...defaultConfig };
+
+  if (isDefined(configPath)) {
+    const configModule = await loadThroughTSX<{ default: Partial<Config> } | Partial<Config>>((load) => {
+      const configFileUrl = pathToFileURL(configPath).toString();
+      return load(configFileUrl);
+    });
+    const configData = 'default' in configModule ? configModule.default : configModule;
+
+    Object.assign(userConfig, configData);
+  }
+
+  if (!userConfig.storiesProvider) userConfig.storiesProvider = browserStoriesProvider;
+
+  if (options.failFast != undefined) userConfig.failFast = Boolean(options.failFast);
+  if (options.reportDir) userConfig.reportDir = path.resolve(options.reportDir);
+  if (options.screenDir) userConfig.screenDir = path.resolve(options.screenDir);
+  if (options.storybookUrl) userConfig.storybookUrl = options.storybookUrl;
+
+  // NOTE: Hack to pass typescript checking
+  const config = userConfig as Config;
+
+  Object.entries(config.browsers).forEach(
+    ([browser, browserConfig]) => (config.browsers[browser] = normalizeBrowserConfig(browser, browserConfig)),
+  );
+
+  return config;
+}

package/src/server/docker.ts

@@ -0,0 +1,136 @@
+import cluster from 'cluster';
+import ora from 'ora';
+import { Writable } from 'stream';
+import Dockerode, { Container } from 'dockerode';
+import { Config, BrowserConfig, isDockerMessage, DockerAuth } from '../types.js';
+import { subscribeOn, sendDockerMessage, emitDockerMessage } from './messages.js';
+import { isInsideDocker, LOCALHOST_REGEXP } from './utils.js';
+import { logger } from './logger.js';
+
+const docker = new Dockerode();
+
+class DevNull extends Writable {
+  _write(_chunk: unknown, _encoding: BufferEncoding, callback: (error?: Error | null | undefined) => void): void {
+    setImmediate(callback);
+  }
+}
+
+export async function pullImages(
+  images: string[],
+  { auth, platform }: { auth?: DockerAuth; platform?: string } = {},
+): Promise<void> {
+  const args: Record<string, unknown> = {};
+  if (auth) args.authconfig = auth;
+  if (platform) args.platform = platform;
+
+  logger.info('Pull docker images');
+  for (const image of images) {
+    await new Promise<void>((resolve, reject) => {
+      const spinner = ora(`${image}: Pull start`).start();
+
+      docker.pull(image, args, (pullError: Error | null, stream?: NodeJS.ReadableStream) => {
+        if (pullError || !stream) {
+          spinner.fail();
+          reject(pullError ?? new Error('Unknown error'));
+          return;
+        }
+
+        docker.modem.followProgress(stream, onFinished, onProgress);
+
+        function onFinished(error: Error | null): void {
+          if (error) {
+            spinner.fail();
+            reject(error);
+            return;
+          }
+          spinner.succeed(`${image}: Pull complete`);
+          resolve();
+        }
+
+        function onProgress(event: { id: string; status: string; progress?: string }): void {
+          if (!/^[a-z0-9]{12}$/i.test(event.id)) return;
+
+          spinner.text = `${image}: [${event.id}] ${event.status} ${event.progress ? event.progress : ''}`;
+        }
+      });
+    });
+  }
+}
+
+export async function runImage(
+  image: string,
+  args: string[],
+  options: Record<string, unknown>,
+  debug: boolean,
+): Promise<string> {
+  await Promise.all(
+    (await docker.listContainers({ all: true, filters: { ancestor: [image] } })).map(async (info) => {
+      const container = docker.getContainer(info.Id);
+      try {
+        await container.stop();
+      } catch {
+        /* noop */
+      }
+      await container.remove();
+    }),
+  );
+
+  const hub = docker.run(image, args, debug ? process.stdout : new DevNull(), options, (error) => {
+    if (error) throw error;
+  });
+
+  return new Promise((resolve) => {
+    hub.once('container', (container: Container) => {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      subscribeOn('shutdown', async () => {
+        try {
+          await container.stop();
+          await container.remove();
+        } catch {
+          /* noop */
+        }
+      });
+    });
+    hub.once(
+      'start',
+      (container: Container) =>
+        void container.inspect().then((info) => {
+          resolve(info.NetworkSettings.Networks.bridge.IPAddress);
+        }),
+    );
+  });
+}
+
+export async function initDocker(
+  config: Config,
+  browser: string | undefined,
+  startContainer: () => Promise<string>,
+): Promise<void> {
+  if (cluster.isPrimary) {
+    const host = await startContainer();
+    let gridUrl = 'http://localhost:4444/wd/hub';
+    gridUrl = isInsideDocker ? gridUrl.replace(LOCALHOST_REGEXP, host) : gridUrl;
+    cluster.on('message', (worker, message: unknown) => {
+      if (!isDockerMessage(message)) return;
+
+      const dockerMessage = message;
+      if (dockerMessage.type != 'start') return;
+
+      sendDockerMessage(worker, {
+        type: 'success',
+        payload: { gridUrl },
+      });
+    });
+  } else {
+    if (browser && (config.browsers[browser] as BrowserConfig).gridUrl) return Promise.resolve();
+    return new Promise((resolve) => {
+      subscribeOn('docker', (message) => {
+        if (message.type == 'success') {
+          config.gridUrl = message.payload.gridUrl;
+          resolve();
+        }
+      });
+      emitDockerMessage({ type: 'start' });
+    });
+  }
+}

package/src/server/index.ts

@@ -0,0 +1,51 @@
+import cluster from 'cluster';
+import { readConfig, defaultBrowser } from './config.js';
+import { Options, Config, BrowserConfig } from '../types.js';
+import { logger } from './logger.js';
+
+// NOTE: Impure function, mutate config by adding gridUrl prop
+async function startWebdriverServer(config: Config, options: Options): Promise<void> {
+  if (config.useDocker) {
+    return (await import('./docker.js')).initDocker(config, options.browser, async () =>
+      (await import('./selenium/selenoid.js')).startSelenoidContainer(config, options.debug),
+    );
+  } else {
+    return (await import('./selenium/selenoid.js')).startSelenoidStandalone(config, options.debug);
+  }
+}
+
+export default async function (options: Options): Promise<void> {
+  const config = await readConfig(options);
+  const { browser = defaultBrowser, tests, update, ui, port } = options;
+
+  // NOTE: We don't need docker nor selenoid for webpack or update options
+  if (
+    !(config.gridUrl || (Object.values(config.browsers) as BrowserConfig[]).every(({ gridUrl }) => gridUrl)) &&
+    !tests &&
+    !update
+  ) {
+    await startWebdriverServer(config, options);
+  }
+
+  switch (true) {
+    case Boolean(update): {
+      (await import('./update.js')).update(config, typeof update == 'string' ? update : undefined);
+      return;
+    }
+    case cluster.isPrimary: {
+      logger.info('Starting Master Process');
+
+      const resolveApi = (await import('./master/server.js')).start(config.reportDir, port, ui);
+
+      return (await import('./master/index.js')).start(config, options, resolveApi);
+    }
+    default: {
+      logger.info(`Starting Worker for ${browser}`);
+
+      return (await import('./worker/index.js')).start(config, {
+        ...options,
+        browser,
+      });
+    }
+  }
+}

package/{lib/esm/server/logger.js → src/server/logger.ts}

@@ -1,20 +1,21 @@
 import chalk from 'chalk';
-import { default as Logger } from 'loglevel';
+import Logger from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
-export { getLogger } from 'loglevel';
+
 export const colors = {
   TRACE: chalk.magenta,
   DEBUG: chalk.cyan,
   INFO: chalk.blue,
   WARN: chalk.yellow,
-  ERROR: chalk.red
+  ERROR: chalk.red,
 };
+
 prefix.reg(Logger);
 prefix.apply(Logger, {
   format(level, name = 'Creevey') {
-    const levelColor = colors[level.toUpperCase()];
+    const levelColor = colors[level.toUpperCase() as keyof typeof colors];
     return `[${name}:${chalk.gray(process.pid)}] ${levelColor(level)} =>`;
-  }
-
+  },
 });
-export const logger = Logger.getLogger('Creevey');
+
+export const logger = Logger.getLogger('Creevey');

package/src/server/master/api.ts

@@ -0,0 +1,59 @@
+import WebSocket from 'ws';
+import Runner from './runner.js';
+import { Request, Response, CreeveyUpdate } from '../../types.js';
+import { logger } from '../logger.js';
+
+export interface CreeveyApi {
+  subscribe: (wss: WebSocket.Server) => void;
+  handleMessage: (ws: WebSocket, message: WebSocket.Data) => void;
+}
+
+function broadcast(wss: WebSocket.Server, message: Response): void {
+  wss.clients.forEach((ws) => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    }
+  });
+}
+
+export default function creeveyApi(runner: Runner): CreeveyApi {
+  return {
+    subscribe(wss: WebSocket.Server) {
+      runner.on('update', (payload: CreeveyUpdate) => {
+        broadcast(wss, { type: 'update', payload });
+      });
+    },
+
+    handleMessage(ws: WebSocket, message: WebSocket.Data) {
+      if (typeof message != 'string') {
+        logger.info('unhandled message', message);
+        return;
+      }
+
+      const command = JSON.parse(message) as Request;
+
+      switch (command.type) {
+        case 'status': {
+          ws.send(JSON.stringify({ type: 'status', payload: runner.status }));
+          return;
+        }
+        case 'start': {
+          runner.start(command.payload);
+          return;
+        }
+        case 'stop': {
+          runner.stop();
+          return;
+        }
+        case 'approve': {
+          void runner.approve(command.payload);
+          return;
+        }
+        case 'approveAll': {
+          void runner.approveAll();
+          return;
+        }
+      }
+    },
+  };
+}