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

package/src/client/addon/withCreevey.ts

@@ -1,5 +1,5 @@
-import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
-import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
+import type { Renderer } from '@storybook/types';
+import type { PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 import {
   CaptureOptions,
@@ -13,6 +13,7 @@ import {
 import { serializeRawStories } from '../../shared/index.js';
 import { getConnectionUrl } from '../shared/helpers.js';
 import isEqual from 'lodash/isEqual.js';
+import { makeDecorator } from './makeDecorator.js';
 
 declare global {
   interface Window {
@@ -120,7 +121,6 @@ function initCreeveyState(): void {
 
   if (prevState.creeveyHost) window.__CREEVEY_SERVER_HOST__ = prevState.creeveyHost;
   if (prevState.creeveyPort) window.__CREEVEY_SERVER_PORT__ = prevState.creeveyPort;
-  if (prevState.setStoriesCounter) setStoriesCounter = prevState.setStoriesCounter;
   if (prevState.isTestBrowser) isTestBrowser = prevState.isTestBrowser;
 
   window.addEventListener('beforeunload', () => {
@@ -129,7 +129,6 @@ function initCreeveyState(): void {
       JSON.stringify({
         creeveyHost: window.__CREEVEY_SERVER_HOST__,
         creeveyPort: window.__CREEVEY_SERVER_PORT__,
-        setStoriesCounter,
         isTestBrowser,
       } as CreeveyTestsState),
     );
@@ -140,7 +139,6 @@ let isTestBrowser = false;
 let captureResolver: () => void;
 let waitForCreevey: Promise<void>;
 let creeveyReady: () => void;
-let setStoriesCounter = 0;
 let globals = {};
 
 export function withCreevey(): ReturnType<typeof makeDecorator> {
@@ -159,20 +157,9 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     document.head.appendChild(style);
   }
 
+  // TODO Find a way to send stories updates to the server
   async function getStories(): Promise<StoriesRaw | undefined> {
     const stories = serializeRawStories(await window.__STORYBOOK_PREVIEW__.extract());
-    const storiesByFiles = new Map<string, StoryContextForEnhancers[]>();
-    Object.values(stories).forEach((story) => {
-      const fileName = story.parameters.fileName as string;
-      const storiesFromFile = storiesByFiles.get(fileName);
-      if (storiesFromFile) storiesFromFile.push(story);
-      else storiesByFiles.set(fileName, [story]);
-    });
-    void fetch(`http://${getConnectionUrl()}/stories`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ setStoriesCounter, stories: [...storiesByFiles.entries()] }),
-    });
     return stories;
   }
 

package/src/client/shared/components/PageHeader/PageHeader.tsx

@@ -21,14 +21,14 @@ interface PageHeaderProps {
 }
 
 const Container = styled.div({
-  margin: '24px 44px 0',
+  marginTop: '24px',
 });
 
 const ErrorContainer = withTheme(
   styled.div<{ theme: Theme }>(({ theme }) => ({
     marginTop: '8px',
     padding: '8px',
-    background: theme.background.negative,
+    background: `${theme.background.negative}20`,
     color: theme.color.negative,
     borderRadius: '2px',
     display: 'flex',
@@ -48,8 +48,19 @@ const ErrorContainer = withTheme(
   })),
 );
 
+const UpdateModeBanner = withTheme(
+  styled.div(({ theme }) => ({
+    padding: '8px 32px',
+    backgroundColor: `${theme.color.positive}20`,
+    color: theme.color.positive,
+    fontSize: '12px',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  })),
+);
+
 const H1 = styled.h1({
-  margin: 0,
+  marginLeft: '44px',
   marginBottom: '8px',
 });
 
@@ -77,7 +88,7 @@ export function PageHeader({
   onImageChange,
   onViewModeChange,
 }: PageHeaderProps): JSX.Element | null {
-  const { isReport } = useContext(CreeveyContext);
+  const { isReport, isUpdateMode } = useContext(CreeveyContext);
   const imageEntires = Object.entries(images) as [string, Images][];
 
   const handleViewModeChange = (mode: string): void => {
@@ -120,6 +131,9 @@ export function PageHeader({
           ))}
         </ImagesEntriesContainer>
       ) : null}
+      {isUpdateMode && (
+        <UpdateModeBanner>Update Mode: Review and approve screenshots from previous test runs</UpdateModeBanner>
+      )}
       {showViewModes && (
         <Tabs selected={viewMode} actions={{ onSelect: handleViewModeChange }}>
           {viewModes.map((x) => (

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

@@ -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) {
@@ -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,59 +1,128 @@
-import WebSocket from 'ws';
 import Runner from './runner.js';
 import { Request, Response, CreeveyUpdate } from '../../types.js';
 import { logger } from '../logger.js';
+import { TestsManager } from './testsManager.js';
+import HyperExpress from 'hyper-express';
 
-export interface CreeveyApi {
-  subscribe: (wss: WebSocket.Server) => void;
-  handleMessage: (ws: WebSocket, message: WebSocket.Data) => void;
+interface CustomWSServer {
+  clients: Set<HyperExpress.Websocket>;
+  publish: (message: string) => void;
 }
 
-function broadcast(wss: WebSocket.Server, message: Response): void {
-  wss.clients.forEach((ws) => {
-    if (ws.readyState === WebSocket.OPEN) {
-      ws.send(JSON.stringify(message));
-    }
-  });
+// Helper function for HyperExpress WebSocket broadcasting
+function broadcastHyperExpress(wss: CustomWSServer, message: Response): void {
+  const serializedMessage = JSON.stringify(message);
+  wss.publish(serializedMessage);
 }
 
-export default function creeveyApi(runner: Runner): CreeveyApi {
-  return {
-    subscribe(wss: WebSocket.Server) {
-      runner.on('update', (payload: CreeveyUpdate) => {
-        broadcast(wss, { type: 'update', payload });
+// The class-based implementation of CreeveyApi
+export class CreeveyApi {
+  private runner: Runner | null = null;
+  private testsManager: TestsManager;
+  private wss: CustomWSServer | 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: CustomWSServer): 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') {
+  handleMessage(ws: HyperExpress.Websocket, message: string | Buffer): void {
+    if (typeof message != 'string') {
+      if (Buffer.isBuffer(message)) {
+        message = message.toString('utf-8');
+      } else {
         logger().info('unhandled message', message);
         return;
       }
+    }
 
-      const command = JSON.parse(message) as Request;
+    const command = JSON.parse(message) as Request;
+    const sendResponse = (response: Response) => {
+      ws.send(JSON.stringify(response));
+    };
 
+    if (this.runner) {
+      // Normal mode handling with runner
       switch (command.type) {
         case 'status': {
-          ws.send(JSON.stringify({ type: 'status', payload: runner.status }));
+          sendResponse({ type: 'status', payload: this.runner.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
+          sendResponse({
+            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 };
+
+    broadcastHyperExpress(this.wss, message);
+  }
 }