creevey 0.9.0-beta.20 → 0.9.0-beta.22

package/src/client/web/CreeveyView/SideBar/TestStatusIcon.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { styled, withTheme, Theme } from '@storybook/theming';
+import { Icons, Loader } from '@storybook/components';
+import { TestStatus } from '../../../../types.js';
+
+export interface TestStatusIconProps {
+  inverted?: boolean;
+  status?: TestStatus;
+  skip?: string | boolean;
+  theme: Theme;
+}
+
+const Container = styled.span({
+  width: 10,
+  height: 10,
+  padding: 1,
+  display: 'inline-block',
+});
+
+const Icon = styled(Icons)({
+  position: 'relative',
+  top: '1.5px',
+  verticalAlign: 'baseline',
+});
+
+const Spinner = styled(Loader)({
+  top: '14px',
+  left: '42px',
+});
+
+export const TestStatusIcon = withTheme(
+  ({ inverted, status, skip, theme }: TestStatusIconProps): JSX.Element | null => {
+    let icon = null;
+    switch (status) {
+      case 'failed': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.negative} icon="cross" />;
+        break;
+      }
+      case 'success': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.green} icon="check" />;
+        break;
+      }
+      case 'running': {
+        icon = <Spinner size={10} />;
+        break;
+      }
+      case 'pending': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.mediumdark} icon="time" />;
+        break;
+      }
+      default: {
+        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="timer" />;
+        break;
+      }
+    }
+    return <Container>{icon}</Container>;
+  },
+);

package/src/client/web/CreeveyView/SideBar/TestsStatus.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { IconButton, Icons } from '@storybook/components';
+import { styled, withTheme, Theme } from '@storybook/theming';
+import { TestStatus } from '../../../../types.js';
+import { CreeveyTestsStatus } from '../../../shared/helpers.js';
+
+export interface TestsStatusProps extends CreeveyTestsStatus {
+  onClickByStatus: (value: TestStatus) => void;
+  theme?: Theme;
+}
+
+const Container = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '14px',
+  lineHeight: '22px',
+});
+
+const IconContainer = styled.div<{ color?: string }>(({ color }) => ({
+  color: color ?? 'inherit',
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  margin: '0 4px',
+
+  '&:first-of-type': {
+    marginLeft: 0,
+  },
+
+  '& svg': {
+    marginRight: 5,
+    width: 10,
+    height: 10,
+  },
+}));
+
+const Divider = styled.div({
+  '&::before': {
+    content: "'/'",
+    display: 'block',
+    marginRight: 4,
+  },
+});
+
+const Button = styled(IconButton)({
+  marginTop: 0,
+  padding: 0,
+  height: '24px',
+});
+
+export const TestsStatus = withTheme(
+  ({
+    successCount,
+    failedCount,
+    pendingCount,
+    skippedCount,
+    onClickByStatus,
+    theme,
+  }: TestsStatusProps): JSX.Element => {
+    return (
+      <Container>
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button
+          onClick={() => {
+            onClickByStatus('pending');
+          }}
+        >
+          <IconContainer color={theme?.color.mediumdark}>
+            <Icons icon="time" />
+            {pendingCount}
+          </IconContainer>
+        </Button>
+        <Divider />
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button
+          onClick={() => {
+            onClickByStatus('success');
+          }}
+        >
+          <IconContainer color={theme?.color.green}>
+            <Icons icon="check" /> {successCount}
+          </IconContainer>
+        </Button>
+        <Divider />
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button
+          onClick={() => {
+            onClickByStatus('failed');
+          }}
+        >
+          <IconContainer color={theme?.color.negative}>
+            <Icons icon="cross" /> {failedCount}
+          </IconContainer>
+        </Button>
+        <Divider />
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button>
+          <IconContainer color={theme?.color.defaultText}>
+            <Icons icon="timer" /> {skippedCount}
+          </IconContainer>
+        </Button>
+      </Container>
+    );
+  },
+);

package/src/client/web/CreeveyView/SideBar/Toggle.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { styled, withTheme } from '@storybook/theming';
+import { opacify } from 'polished';
+
+const Container = withTheme(
+  styled.span(({ theme }) => ({
+    lineHeight: '10px',
+    display: 'inline-block',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
+    borderRadius: '3em',
+    padding: 2,
+    verticalAlign: 'middle',
+    marginLeft: 10,
+
+    input: {
+      appearance: 'none',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      margin: 0,
+      padding: 0,
+      border: 'none',
+      cursor: 'pointer',
+
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+
+    span: {
+      cursor: 'pointer',
+      display: 'inline-block',
+      transition: 'all 100ms ease-out',
+      userSelect: 'none',
+      borderRadius: '100%',
+      background: theme.background.bar,
+      boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`,
+      color: theme.color.defaultText,
+      width: 20,
+      height: 20,
+      boxSizing: 'border-box',
+      lineHeight: '19px',
+      textAlign: 'center',
+
+      '&:hover': {
+        boxShadow: `${opacify(0.3, theme.appBorderColor)} 0 0 0 1px inset`,
+      },
+
+      '&:active': {
+        boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 2px inset`,
+      },
+    },
+
+    'input:checked ~ span': {
+      marginLeft: 20,
+    },
+
+    'input:not(:checked) ~ span': {
+      marginRight: 20,
+    },
+  })),
+);
+
+interface ToggleProps {
+  value?: boolean;
+  onChange: (val: boolean) => void;
+}
+
+export const Toggle = ({ value, onChange }: ToggleProps): JSX.Element => (
+  <Container>
+    <input
+      type="checkbox"
+      onChange={() => {
+        onChange(!value);
+      }}
+      checked={value ?? false}
+    />
+    <span>{value ? '☪' : '☀'}</span>
+  </Container>
+);

package/src/client/web/CreeveyView/SideBar/index.ts

@@ -0,0 +1 @@
+export { SideBar } from './SideBar.js';

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/{lib/esm → src}/client/web/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,8 +7,17 @@
     <style>
       body {
         margin: 0;
-        font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI',
-          'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-family:
+          'Nunito Sans',
+          -apple-system,
+          '.SFNSText-Regular',
+          'San Francisco',
+          BlinkMacSystemFont,
+          'Segoe UI',
+          'Helvetica Neue',
+          Helvetica,
+          Arial,
+          sans-serif;
       }
     </style>
   </head>

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;
+}