creevey 0.10.0-beta.43 → 0.10.0-beta.45

package/src/client/shared/creeveyClientApi.ts

@@ -16,6 +16,7 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   const updateListeners = new Set<(update: CreeveyUpdate) => void>();
   let statusRequest: Promise<CreeveyStatus> | null = null;
   let statusResolver: (status: CreeveyStatus) => void = noop;
+  let isUpdateMode = false;
 
   const ws = new WebSocket(`ws://${getConnectionUrl()}`);
 
@@ -30,9 +31,17 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   ws.addEventListener('open', () => {
     clientApiResolver({
       start(ids: string[]) {
+        if (isUpdateMode) {
+          console.warn('Tests cannot be started in Update Mode. This mode is for approving screenshots only.');
+          return;
+        }
         send({ type: 'start', payload: ids });
       },
       stop() {
+        if (isUpdateMode) {
+          console.warn('Tests cannot be stopped in Update Mode. This mode is for approving screenshots only.');
+          return;
+        }
         send({ type: 'stop' });
       },
       approve(id: string, retry: number, image: string) {
@@ -62,6 +71,7 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
         fn(data.payload);
       });
     if (data.type == 'status') {
+      isUpdateMode = data.payload.isUpdateMode;
       statusResolver(data.payload);
       statusResolver = noop;
       statusRequest = null;

package/src/client/web/CreeveyApp.tsx

@@ -29,6 +29,7 @@ export interface CreeveyAppProps {
     tests: CreeveySuite;
     isRunning: boolean;
     isReport: boolean;
+    isUpdateMode: boolean;
   };
 }
 
@@ -214,6 +215,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
         onSuiteToggle: handleSuiteToggle,
         sidebarFocusedItem,
         setSidebarFocusedItem,
+        isUpdateMode: initialState.isUpdateMode,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -7,6 +7,7 @@ export type FocusableItem = null | SuitePath;
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
+  isUpdateMode: boolean;
   onStop: () => void;
   onImageNext?: () => void;
   onImageApprove?: () => void;
@@ -21,6 +22,7 @@ export interface CreeveyContextType {
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  isUpdateMode: false,
   onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,

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

@@ -48,23 +48,25 @@ export function SideBarFooter(): JSX.Element {
   }, [handleKeyDown, handleKeyUp]);
 
   return (
-    <Sticky>
-      <Container>
-        {isAlt ? (
-          <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
-            Next
-            <ChevronRightIcon />
+    <>
+      <Sticky>
+        <Container>
+          {isAlt ? (
+            <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
+              Next
+              <ChevronRightIcon />
+            </Button>
+          ) : (
+            <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
+              Approve
+              <ChevronRightIcon />
+            </Button>
+          )}
+          <Button variant="outline" size="medium" onClick={onApproveAll}>
+            Approve all
           </Button>
-        ) : (
-          <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
-            Approve
-            <ChevronRightIcon />
-          </Button>
-        )}
-        <Button variant="outline" size="medium" onClick={onApproveAll}>
-          Approve all
-        </Button>
-      </Container>
-    </Sticky>
+        </Container>
+      </Sticky>
+    </>
   );
 }

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

@@ -36,6 +36,7 @@ const Container = styled.div({
 const Header = styled.h2({
   fontWeight: 'normal',
   margin: 0,
+  padding: '2px 6px',
 });
 
 const Button = withTheme(
@@ -58,12 +59,23 @@ const Button = withTheme(
   })),
 );
 
+const UpdateModeDescription = withTheme(
+  styled.div(({ theme }) => ({
+    fontSize: '0.8em',
+    marginTop: '4px',
+    padding: '2px 6px',
+    color: theme.color.positive,
+    backgroundColor: `${theme.color.positive}20`,
+  })),
+);
+
 const MarginContainer = styled.div<{ left?: string; right?: string; top?: string; bottom?: string }>(
   ({ left, right, top, bottom }) => ({
     marginLeft: left ?? 0,
     marginRight: right ?? 0,
     marginTop: top ?? 0,
     marginBottom: bottom ?? 0,
+    padding: '2px 6px',
   }),
 );
 
@@ -92,7 +104,7 @@ export function SideBarHeader({
   onFilterChange,
   canStart,
 }: SideBarHeaderProps): JSX.Element {
-  const { isReport, isRunning } = useContext(CreeveyContext);
+  const { isReport, isRunning, isUpdateMode } = useContext(CreeveyContext);
   const [filterInput, setFilterInput] = useState('');
 
   const handleClickByStatus = (status: TestStatus): void => {
@@ -115,9 +127,12 @@ export function SideBarHeader({
       <Container>
         <div>
           <Header>colin.creevey</Header>
+          {isUpdateMode && (
+            <UpdateModeDescription>Review and approve screenshots from previous test runs</UpdateModeDescription>
+          )}
           <TestsStatus {...testsStatus} onClickByStatus={handleClickByStatus} />
         </div>
-        {isReport ? null : (
+        {isReport || isUpdateMode ? null : (
           <MarginContainer top="10px">
             {isRunning ? (
               <Button variant="outline" onClick={onStop}>
@@ -131,7 +146,7 @@ export function SideBarHeader({
           </MarginContainer>
         )}
       </Container>
-      <MarginContainer top="24px" bottom="24px">
+      <MarginContainer top="12px" bottom="12px">
         <Search onChange={handleInputFilterChange} value={filterInput} />
       </MarginContainer>
     </Sticky>

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

@@ -78,7 +78,7 @@ export const SuiteTitle = styled.span({
 });
 
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
-  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem, isUpdateMode } = useCreeveyContext();
   const checkboxRef = useRef<Checkbox>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -117,12 +117,14 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
   return (
     <Container focused={isSuiteFocused}>
       <CheckboxContainer>
-        <Checkbox
-          ref={checkboxRef}
-          checked={suite.skip ? false : suite.checked}
-          disabled={Boolean(suite.skip)}
-          onValueChange={handleCheck}
-        />
+        {!isUpdateMode && (
+          <Checkbox
+            ref={checkboxRef}
+            checked={suite.skip ? false : suite.checked}
+            disabled={Boolean(suite.skip)}
+            onValueChange={handleCheck}
+          />
+        )}
       </CheckboxContainer>
       <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} ref={buttonRef}>
         <SuiteContainer padding={(suite.path.length - 1) * 8}>

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

@@ -19,7 +19,7 @@ const TestContainer = styled(SuiteContainer)({
 });
 
 export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
-  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
+  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem, isUpdateMode } = useCreeveyContext();
   const { onOpenTest } = useContext(SideBarContext);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -55,11 +55,13 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
       {/* NOTE Little hack to allow click on checkbox and don't trigger Button click */}
       {/* We can use other approach, but checkbox has vertical-align: top */}
       <CheckboxContainer>
-        <Checkbox
-          checked={test.skip ? false : test.checked}
-          disabled={Boolean(test.skip)}
-          onValueChange={handleCheck}
-        />
+        {!isUpdateMode && (
+          <Checkbox
+            checked={test.skip ? false : test.checked}
+            disabled={Boolean(test.skip)}
+            onValueChange={handleCheck}
+          />
+        )}
       </CheckboxContainer>
       <Button onClick={handleOpen} disabled={emptyResults} ref={buttonRef}>
         <TestContainer padding={(testPath.length + 1) * 8}>

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

@@ -15,6 +15,7 @@ const Container = styled.div({
   alignItems: 'center',
   fontSize: '14px',
   lineHeight: '22px',
+  padding: '2px 6px',
 });
 
 const IconContainer = styled.div<{ color?: string }>(({ color }) => ({

package/src/client/web/index.tsx

@@ -36,11 +36,11 @@ const CreeveyAppAsync = React.lazy(async () => {
       // 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: [] };
+      creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [], isUpdateMode: false };
     }
   } else {
     isReport = true;
-    creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [] };
+    creeveyStatus = { isRunning: false, tests: await loadCreeveyData(), browsers: [], isUpdateMode: false };
   }
 
   return {
@@ -48,7 +48,12 @@ const CreeveyAppAsync = React.lazy(async () => {
       return (
         <CreeveyApp
           api={creeveyApi}
-          initialState={{ isReport, isRunning: creeveyStatus.isRunning, tests: treeifyTests(creeveyStatus.tests) }}
+          initialState={{
+            isReport,
+            isRunning: creeveyStatus.isRunning,
+            tests: treeifyTests(creeveyStatus.tests),
+            isUpdateMode: creeveyStatus.isUpdateMode,
+          }}
         />
       );
     },

package/src/creevey.ts

@@ -2,32 +2,9 @@ import cluster from 'cluster';
 import minimist from 'minimist';
 import creevey from './server/index.js';
 import { Options } from './types.js';
-import { emitWorkerMessage } from './server/messages.js';
-import { isShuttingDown, shutdownWorkers } from './server/utils.js';
 import Logger from 'loglevel';
 import { logger, setRootName } 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: { subtype: 'unknown', error } });
-  if (cluster.isPrimary) void shutdownWorkers();
-}
-
-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;
-});
+import './server/shutdown.js';
 
 const argv = minimist<Options>(process.argv.slice(2), {
   string: ['browser', 'config', 'reporter', 'reportDir', 'screenDir', 'gridUrl', 'storybookUrl', 'storybookPort'],

package/src/playwright-reporter.ts

@@ -0,0 +1,3 @@
+import { CreeveyPlaywrightReporter } from './server/playwright/reporter.js';
+
+export default CreeveyPlaywrightReporter;

package/src/server/config.ts

@@ -15,7 +15,7 @@ export const defaultConfig: Omit<Config, 'gridUrl' | 'tsConfig' | 'webdriver'> =
   disableTelemetry: false,
   useWorkerQueue: false,
   useDocker: true,
-  dockerImage: 'aerokube/selenoid:latest-release', // TODO What about playwright?
+  dockerImage: 'aerokube/selenoid:latest', // TODO What about playwright?
   dockerImagePlatform: '',
   pullImages: true,
   failFast: false,
@@ -83,6 +83,14 @@ export async function readConfig(options: Options): Promise<Config> {
       configData.webdriver = SeleniumWebdriver;
     }
 
+    for (const key in configData) {
+      const configKey = key as keyof typeof configData;
+      if (configData[configKey] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete configData[configKey];
+      }
+    }
+
     Object.assign(userConfig, configData);
   }
 

package/src/server/index.ts

@@ -1,6 +1,6 @@
 import cluster from 'cluster';
 import path from 'path';
-import { exec } from 'shelljs';
+import sh from 'shelljs';
 import { getUserAgent } from 'package-manager-detector/detect';
 import { resolveCommand } from 'package-manager-detector/commands';
 import { readConfig, defaultBrowser } from './config.js';
@@ -87,6 +87,7 @@ async function startWebdriverServer(browser: string, config: Config, options: Op
   }
 }
 
+// TODO Why docker containers are not deleting after stop?
 export default async function (options: Options): Promise<void> {
   const config = await readConfig(options);
   const { browser = defaultBrowser, update, ui, port } = options;
@@ -104,7 +105,7 @@ export default async function (options: Options): Promise<void> {
     gridUrl = await startWebdriverServer(browser, config, options);
   }
 
-  if (cluster.isPrimary) {
+  if (cluster.isPrimary && !update) {
     const [localUrl, remoteUrl] = getStorybookUrl(config, options);
 
     if (options.storybookStart) {
@@ -120,7 +121,7 @@ export default async function (options: Options): Promise<void> {
       if (remoteUrl && localUrl != remoteUrl) logger().info(`On your network - ${remoteUrl}`);
       logger().info('Waiting Storybook...');
 
-      const storybook = exec(storybookCommand, { async: true });
+      const storybook = sh.exec(storybookCommand, { async: true });
       subscribeOn('shutdown', () => {
         if (storybook.pid) void killTree(storybook.pid);
       });
@@ -145,7 +146,15 @@ export default async function (options: Options): Promise<void> {
     }
   }
 
+  await import('./shutdown.js');
+
   switch (true) {
+    case Boolean(update) && Boolean(ui): {
+      // New UI Update mode
+      const { uiUpdate } = await import('./ui-update.js');
+      await uiUpdate(config, port);
+      return;
+    }
     case Boolean(update): {
       (await import('./update.js')).update(config, typeof update == 'string' ? update : undefined);
       return;
@@ -168,9 +177,7 @@ export default async function (options: Options): Promise<void> {
       }
       logger().info('Starting Master Process');
 
-      const resolveApi = (await import('./master/server.js')).start(config.reportDir, port, ui);
-
-      return (await import('./master/start.js')).start(gridUrl, config, options, resolveApi);
+      return (await import('./master/start.js')).start(gridUrl, config, options);
     }
     default: {
       logger().info(`Starting Worker for ${browser}`);

package/src/server/master/api.ts

@@ -1,14 +1,10 @@
-import WebSocket from 'ws';
-import Runner from './runner.js';
-import { Request, Response, CreeveyUpdate } from '../../types.js';
+import { Data, WebSocket, WebSocketServer } from 'ws';
+import type { Request, Response, CreeveyUpdate } from '../../types.js';
+import type { TestsManager } from './testsManager.js';
+import type Runner from './runner.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 {
+function broadcast(wss: WebSocketServer, message: Response): void {
   wss.clients.forEach((ws) => {
     if (ws.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify(message));
@@ -16,44 +12,114 @@ function broadcast(wss: WebSocket.Server, message: Response): void {
   });
 }
 
-export default function creeveyApi(runner: Runner): CreeveyApi {
-  return {
-    subscribe(wss: WebSocket.Server) {
-      runner.on('update', (payload: CreeveyUpdate) => {
-        broadcast(wss, { type: 'update', payload });
+function send(ws: WebSocket, message: Response): void {
+  if (ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message));
+  }
+}
+
+// The class-based implementation of CreeveyApi for native WebSockets
+export class CreeveyApi {
+  private runner: Runner | null = null;
+  private testsManager: TestsManager;
+  private wss: WebSocketServer | null = null;
+
+  constructor(testsManager: TestsManager, runner?: Runner) {
+    this.testsManager = testsManager;
+
+    // Use the provided runner in normal mode, or keep as null in update mode
+    if (runner) {
+      this.runner = runner;
+    }
+  }
+
+  subscribe(wss: WebSocketServer): void {
+    this.wss = wss;
+
+    // If we have a runner, subscribe to its updates
+    if (this.runner) {
+      this.runner.on('update', (payload: CreeveyUpdate) => {
+        this.broadcastUpdate(payload);
+      });
+    } else {
+      // Subscribe to TestsManager updates
+      this.testsManager.on('update', (update: CreeveyUpdate) => {
+        this.broadcastUpdate(update);
       });
-    },
+    }
+  }
 
-    handleMessage(ws: WebSocket, message: WebSocket.Data) {
-      if (typeof message != 'string') {
-        logger().info('unhandled message', message);
-        return;
-      }
+  handleMessage(ws: WebSocket, message: Data): void {
+    if (typeof message != 'string') {
+      logger().info('unhandled message', message);
+      return;
+    }
 
-      const command = JSON.parse(message) as Request;
+    const command = JSON.parse(message) as Request;
 
+    if (this.runner) {
+      // Normal mode handling with runner
       switch (command.type) {
         case 'status': {
-          ws.send(JSON.stringify({ type: 'status', payload: runner.status }));
+          const status = this.runner.status;
+          send(ws, { type: 'status', payload: status });
           return;
         }
         case 'start': {
-          runner.start(command.payload);
+          this.runner.start(command.payload);
           return;
         }
         case 'stop': {
-          runner.stop();
+          this.runner.stop();
+          return;
+        }
+        case 'approve': {
+          void this.runner.approve(command.payload);
+          return;
+        }
+        case 'approveAll': {
+          void this.runner.approveAll();
           return;
         }
+      }
+    } else {
+      // In update mode, only approve and approveAll commands are allowed
+      switch (command.type) {
         case 'approve': {
-          void runner.approve(command.payload);
+          void this.testsManager.approve(command.payload);
           return;
         }
         case 'approveAll': {
-          void runner.approveAll();
+          void this.testsManager.approveAll();
+          return;
+        }
+        case 'status': {
+          // In update mode, respond with static status including tests data
+          send(ws, {
+            type: 'status',
+            payload: {
+              isRunning: false,
+              tests: this.testsManager.getTestsData(),
+              browsers: [],
+              isUpdateMode: true,
+            },
+          });
+          return;
+        }
+        default: {
+          // Ignore other commands in update mode
+          logger().debug(`Command ${command.type} is not available in update mode`);
           return;
         }
       }
-    },
-  };
+    }
+  }
+
+  private broadcastUpdate(payload: CreeveyUpdate): void {
+    if (!this.wss) return;
+
+    const message: Response = { type: 'update', payload };
+
+    broadcast(this.wss, message);
+  }
 }

package/src/server/master/handlers/capture-handler.ts

@@ -0,0 +1,20 @@
+import cluster from 'cluster';
+import { subscribeOnWorker, sendStoriesMessage } from '../../messages.js';
+import { CaptureOptions, isDefined } from '../../../types.js';
+
+export function captureHandler({ workerId, options }: { workerId: number; options?: CaptureOptions }): void {
+  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;
+  }
+
+  const unsubscribe = subscribeOnWorker(worker, 'stories', (message) => {
+    if (message.type != 'capture') return;
+    unsubscribe();
+  });
+  sendStoriesMessage(worker, { type: 'capture', payload: options });
+}

package/src/server/master/handlers/index.ts

@@ -0,0 +1,4 @@
+export * from './ping-handler.js';
+export * from './stories-handler.js';
+export * from './capture-handler.js';
+export * from './static-handler.js';

package/src/server/master/handlers/ping-handler.ts

@@ -0,0 +1,6 @@
+import { IncomingMessage, ServerResponse } from 'http';
+
+export function pingHandler(_request: IncomingMessage, response: ServerResponse): void {
+  response.setHeader('Content-Type', 'text/plain');
+  response.end('pong');
+}

package/src/server/master/handlers/static-handler.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+import fs from 'fs';
+
+export function staticHandler(baseDir: string, pathPrefix?: string) {
+  return (requestedPath: string): string | undefined => {
+    const relativePath = pathPrefix ? requestedPath.replace(pathPrefix, '') : requestedPath;
+    let filePath = path.join(baseDir, relativePath || 'index.html');
+
+    // If the path points to a directory, append index.html
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
+      filePath = path.join(filePath, 'index.html');
+    }
+
+    if (!fs.existsSync(filePath)) {
+      return undefined;
+    }
+  };
+}

package/src/server/master/handlers/stories-handler.ts

@@ -0,0 +1,20 @@
+import cluster from 'cluster';
+import { emitStoriesMessage, sendStoriesMessage } from '../../messages.js';
+import { isDefined, StoryInput } from '../../../types.js';
+import { deserializeStory } from '../../../shared/index.js';
+
+export function storiesHandler({ stories }: { stories: [string, StoryInput[]][] }): void {
+  const deserializedStories = stories.map<[string, StoryInput[]]>(([file, stories]) => [
+    file,
+    stories.map(deserializeStory),
+  ]);
+
+  emitStoriesMessage({ type: 'update', payload: deserializedStories });
+
+  Object.values(cluster.workers ?? {})
+    .filter(isDefined)
+    .filter((worker) => worker.isConnected())
+    .forEach((worker) => {
+      sendStoriesMessage(worker, { type: 'update', payload: deserializedStories });
+    });
+}