creevey 0.9.0 → 0.9.1

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled, withTheme } from '@storybook/theming';
+import { Button, Icons } from '@storybook/components';
+import { useCreeveyContext } from '../../CreeveyContext.js';
+
+const Sticky = withTheme(
+  styled.div(({ theme }) => ({
+    padding: '24px 16px 8px 16px',
+    background: theme.background.content,
+    height: '50px',
+    zIndex: 5,
+    position: 'sticky',
+    bottom: '0',
+  })),
+);
+
+const Container = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+export function SideBarFooter(): JSX.Element {
+  const { onApproveAll, onImageApprove } = useCreeveyContext();
+
+  return (
+    <Sticky>
+      <Container>
+        <Button secondary onClick={onImageApprove} disabled={!onImageApprove} style={{ paddingRight: 8 }}>
+          Approve
+          <Icons icon="arrowright" style={{ paddingLeft: 4 }} />
+        </Button>
+        <Button secondary outline onClick={onApproveAll}>
+          Approve all
+        </Button>
+      </Container>
+    </Sticky>
+  );
+}

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

@@ -18,7 +18,7 @@ interface SideBarHeaderProps {
 
 const Sticky = withTheme(
   styled.div(({ theme }) => ({
-    padding: '24px 32px 8px',
+    padding: '24px 36px 8px',
     background: theme.background.content,
     height: '130px',
     zIndex: 5,

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

@@ -14,49 +14,67 @@ export interface SuiteLinkProps {
 }
 
 export const Container = withTheme(
-  styled.div<{ theme: Theme; disabled?: boolean }>(({ theme, disabled }) => ({
-    position: 'relative',
-    width: '100%',
-    ...(disabled ? { color: theme.color.mediumdark, pointerEvents: 'none' } : {}),
-  })),
+  styled.div<{ theme: Theme; disabled?: boolean; active?: boolean; focused?: boolean }>(
+    ({ theme, disabled, active, focused }) => ({
+      position: 'relative',
+      width: '100%',
+      height: '28px',
+      lineHeight: '20px',
+      display: 'flex',
+      background: active ? theme.color.secondary : focused ? theme.background.hoverable : 'none',
+      color: active ? theme.color.inverseText : 'inherit',
+      outline: focused ? `1px solid ${theme.color.ancillary}` : 'none',
+      ...(disabled ? { color: theme.color.mediumdark, pointerEvents: 'none' } : {}),
+
+      // NOTE There is no way to trigger hover from js, so we add `.hover` class for testing purpose
+      '&:hover, &.hover': active
+        ? {}
+        : {
+            background: theme.background.hoverable,
+          },
+    }),
+  ),
 );
 
 export const Button = withTheme(
-  styled.button<{ theme: Theme; active?: boolean; focused?: boolean }>(({ theme, active, focused }) => ({
-    width: '100%',
+  styled.button<{ theme: Theme; active?: boolean }>(({ theme, active }) => ({
+    flexGrow: 1,
     boxSizing: 'border-box',
     appearance: 'none',
-    padding: '6px 36px',
-    lineHeight: '20px',
+    padding: '4px 16px 4px 8px',
+    lineHeight: '18px',
     cursor: 'pointer',
     border: 'none',
     zIndex: 1,
     textAlign: 'left',
-    background: active ? theme.color.secondary : focused ? theme.background.hoverable : 'none',
+    background: 'none',
+    outline: 'none',
     color: active ? theme.color.inverseText : 'inherit',
-    outline: focused ? `1px solid ${theme.color.ancillary}` : 'none',
-
-    // NOTE There is no way to trigger hover from js, so we add `.hover` class for testing purpose
-    '&:hover, &.hover': active
-      ? {}
-      : {
-          background: theme.background.hoverable,
-        },
   })),
 );
 
 const ArrowIcon = styled(Icons)({
-  paddingRight: '8px',
+  paddingRight: '4px',
   display: 'inline-block',
-  width: '16px',
-  height: '11px',
+  width: '12px',
+  height: '18px',
+  verticalAlign: 'unset',
 });
 
 export const SuiteContainer = styled.span<{ padding: number }>(({ padding }) => ({
   paddingLeft: padding,
   whiteSpace: 'normal',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, min-content) auto',
 }));
 
+export const SuiteTitle = styled.span({
+  paddingLeft: '4px',
+  whiteSpace: 'nowrap',
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
   const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
   const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
@@ -70,6 +88,7 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
       sidebarFocusedItem.every((x) => suite.path.includes(x)),
     [suite, sidebarFocusedItem],
   );
+
   useEffect(
     () => (suite.indeterminate ? checkboxRef.current?.setIndeterminate() : checkboxRef.current?.resetIndeterminate()),
     [suite.indeterminate],
@@ -95,16 +114,7 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
   };
 
   return (
-    <Container>
-      <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} focused={isSuiteFocused} ref={buttonRef}>
-        <TestStatusIcon status={suite.status} skip={suite.skip} />
-        <SuiteContainer padding={Math.max(48, (suite.path.length + 5) * 8)}>
-          {isTest(suite) ||
-            (Boolean(suite.path.length) &&
-              (suite.opened ? <ArrowIcon icon="arrowdown" /> : <ArrowIcon icon="arrowright" />))}
-          {title}
-        </SuiteContainer>
-      </Button>
+    <Container focused={isSuiteFocused}>
       <CheckboxContainer>
         <Checkbox
           ref={checkboxRef}
@@ -113,6 +123,15 @@ export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkPro
           onValueChange={handleCheck}
         />
       </CheckboxContainer>
+      <Button onClick={handleOpen} onFocus={handleFocus} data-testid={dataTid} ref={buttonRef}>
+        <SuiteContainer padding={(suite.path.length - 1) * 8}>
+          {isTest(suite) ||
+            (Boolean(suite.path.length) &&
+              (suite.opened ? <ArrowIcon icon="arrowdown" /> : <ArrowIcon icon="arrowright" />))}
+          <TestStatusIcon status={suite.status} skip={suite.skip} />
+          <SuiteTitle>{title}</SuiteTitle>
+        </SuiteContainer>
+      </Button>
     </Container>
   );
 }

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

@@ -4,7 +4,7 @@ import { TestStatusIcon } from './TestStatusIcon.js';
 import { CreeveyContext } from '../../CreeveyContext.js';
 import { SideBarContext } from './SideBar.js';
 import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
-import { Button, Container, SuiteContainer } from './SuiteLink.js';
+import { Button, Container, SuiteContainer, SuiteTitle } from './SuiteLink.js';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { getTestPath } from '../../../shared/helpers.js';
 
@@ -48,11 +48,7 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
   }, [test, onOpenTest, setSidebarFocusedItem]);
 
   return (
-    <Container disabled={emptyResults}>
-      <Button onClick={handleOpen} active={opened} focused={isTestFocused} disabled={emptyResults} ref={buttonRef}>
-        <TestStatusIcon inverted={opened} status={test.status} skip={test.skip} />
-        <SuiteContainer padding={(testPath.length + 8) * 8}>{title}</SuiteContainer>
-      </Button>
+    <Container disabled={emptyResults} active={opened} focused={isTestFocused}>
       {/* 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>
@@ -62,6 +58,12 @@ export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
           onValueChange={handleCheck}
         />
       </CheckboxContainer>
+      <Button onClick={handleOpen} disabled={emptyResults} ref={buttonRef}>
+        <SuiteContainer padding={(testPath.length + 1) * 8}>
+          <TestStatusIcon inverted={opened} status={test.status} skip={test.skip} />
+          <SuiteTitle>{title}</SuiteTitle>
+        </SuiteContainer>
+      </Button>
     </Container>
   );
 }

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

@@ -11,21 +11,22 @@ export interface TestStatusIconProps {
 }
 
 const Container = styled.span({
-  width: 10,
-  height: 10,
+  width: '16px',
+  height: '13px',
   padding: 1,
   display: 'inline-block',
 });
 
 const Icon = styled(Icons)({
   position: 'relative',
-  top: '1.5px',
+  top: '1px',
   verticalAlign: 'baseline',
 });
 
 const Spinner = styled(Loader)({
-  top: '14px',
-  left: '42px',
+  top: '12px',
+  left: 'unset',
+  marginLeft: '0px',
 });
 
 export const TestStatusIcon = withTheme(
@@ -40,6 +41,10 @@ export const TestStatusIcon = withTheme(
         icon = <Icon color={inverted ? theme.color.lightest : theme.color.green} icon="check" />;
         break;
       }
+      case 'approved': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.mediumdark} icon="thumbsup" />;
+        break;
+      }
       case 'running': {
         icon = <Spinner size={10} />;
         break;
@@ -49,7 +54,8 @@ export const TestStatusIcon = withTheme(
         break;
       }
       default: {
-        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="timer" />;
+        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="alert" />;
+        else icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="circlehollow" />;
         break;
       }
     }

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

@@ -53,7 +53,7 @@ export const TestsStatus = withTheme(
     successCount,
     failedCount,
     pendingCount,
-    skippedCount,
+    approvedCount,
     onClickByStatus,
     theme,
   }: TestsStatusProps): JSX.Element => {
@@ -94,9 +94,13 @@ export const TestsStatus = withTheme(
         </Button>
         <Divider />
         {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
-        <Button>
+        <Button
+          onClick={() => {
+            onClickByStatus('approved');
+          }}
+        >
           <IconContainer color={theme?.color.defaultText}>
-            <Icons icon="timer" /> {skippedCount}
+            <Icons icon="thumbsup" /> {approvedCount}
           </IconContainer>
         </Button>
       </Container>

package/src/server/master/api.ts

@@ -49,6 +49,10 @@ export default function creeveyApi(runner: Runner): CreeveyApi {
           void runner.approve(command.payload);
           return;
         }
+        case 'approveAll': {
+          void runner.approveAll();
+          return;
+        }
       }
     },
   };

package/src/server/master/runner.ts

@@ -45,6 +45,7 @@ export default class Runner extends EventEmitter {
     // TODO Handle 'retrying' status
     test.status = status == 'retrying' ? 'failed' : status;
     if (!result) {
+      // NOTE: Running status
       this.sendUpdate({ tests: { [id]: { id, browser, testName, storyPath, status: test.status, storyId } } });
       return;
     }
@@ -53,8 +54,23 @@ export default class Runner extends EventEmitter {
     }
     test.results.push(result);
 
+    if (status == 'failed') {
+      test.approved = null;
+    }
+
     this.sendUpdate({
-      tests: { [id]: { id, browser, testName, storyPath, status: test.status, results: [result], storyId } },
+      tests: {
+        [id]: {
+          id,
+          browser,
+          testName,
+          storyPath,
+          status: test.status,
+          approved: test.approved,
+          results: [result],
+          storyId,
+        },
+      },
     });
 
     if (this.failFast && status == 'failed') this.stop();
@@ -161,6 +177,44 @@ export default class Runner extends EventEmitter {
     };
   }
 
+  private async copyImage(test: ServerTest, image: string, actual: string): Promise<void> {
+    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, actual);
+    const dstImagePath = path.join(this.screenDir, testPath, `${image}.png`);
+    await mkdir(path.join(this.screenDir, testPath), { recursive: true });
+    await copyFile(srcImagePath, dstImagePath);
+  }
+
+  public async approveAll(): Promise<void> {
+    const updatedTests: NonNullable<CreeveyUpdate['tests']> = {};
+    for (const test of Object.values(this.tests)) {
+      if (!test?.results) continue;
+      const retry = test.results.length - 1;
+      const { images, status } = test.results.at(retry) ?? {};
+      if (!images || status != 'failed') continue;
+      for (const [name, image] of Object.entries(images)) {
+        if (!image) continue;
+        await this.copyImage(test, name, image.actual);
+
+        if (!test.approved) {
+          test.approved = {};
+        }
+        test.approved[name] = retry;
+
+        updatedTests[test.id] = {
+          id: test.id,
+          browser: test.browser,
+          storyPath: test.storyPath,
+          storyId: test.storyId,
+          approved: { [name]: retry },
+        };
+      }
+    }
+    this.sendUpdate({ tests: updatedTests });
+  }
+
   public async approve({ id, retry, image }: ApprovePayload): Promise<void> {
     const test = this.tests[id];
     if (!test?.results) return;
@@ -171,16 +225,18 @@ export default class Runner extends EventEmitter {
     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);
+    const { browser, testName, storyPath, storyId } = test;
+
+    await this.copyImage(test, image, images.actual);
+
     test.approved[image] = retry;
+
+    if (Object.keys(result.images).every((name) => typeof test.approved?.[name] == 'number')) {
+      test.status = 'approved';
+    }
+
     this.sendUpdate({
-      tests: { [id]: { id, browser, testName, storyPath, approved: { [image]: retry }, storyId: test.storyId } },
+      tests: { [id]: { id, browser, testName, storyPath, status: test.status, approved: { [image]: retry }, storyId } },
     });
   }
   private sendUpdate(data: CreeveyUpdate): void {

package/src/server/selenium/browser.ts

@@ -55,6 +55,7 @@ let browserName = '';
 let browser: WebDriver | null = null;
 // let context: UnPromise<ReturnType<typeof BrowsingContext>> | null = null;
 let creeveyServerHost: string | null = null;
+let creeveyServerPort: number | null = null;
 
 function getSessionData(grid: string, sessionId = ''): Promise<Record<string, unknown>> {
   const gridUrl = new URL(grid);
@@ -520,11 +521,10 @@ async function openStorybookPage(
   }
 }
 
-async function resolveCreeveyHost(browser: WebDriver, port: number): Promise<string> {
-  if (creeveyServerHost != null) return creeveyServerHost;
-
+async function resolveCreeveyHost(browser: WebDriver, port: number): Promise<void> {
   const addresses = getAddresses();
 
+  creeveyServerPort = port;
   creeveyServerHost = await browser.executeAsyncScript(
     function (hosts: string[], port: number, callback: (host?: string | null) => void) {
       void Promise.all(
@@ -558,8 +558,6 @@ async function resolveCreeveyHost(browser: WebDriver, port: number): Promise<str
   );
 
   if (creeveyServerHost == null) throw new Error("Can't reach creevey server from a browser");
-
-  return creeveyServerHost;
 }
 
 export async function loadStoriesFromBrowser(): Promise<StoriesRaw> {
@@ -690,8 +688,14 @@ export async function getBrowser(config: Config, options: Options & { browser: s
     await updateStorybookGlobals(browser, _storybookGlobals);
   }
 
-  const creeveyHost = await resolveCreeveyHost(browser, options.port);
+  await resolveCreeveyHost(browser, options.port);
+
+  await updateBrowserGlobalVariables(browser);
+
+  return browser;
+}
 
+async function updateBrowserGlobalVariables(browser: WebDriver) {
   await browser.executeScript(
     function (workerId: number, creeveyHost: string, creeveyPort: number) {
       window.__CREEVEY_WORKER_ID__ = workerId;
@@ -699,11 +703,9 @@ export async function getBrowser(config: Config, options: Options & { browser: s
       window.__CREEVEY_SERVER_PORT__ = creeveyPort;
     },
     process.pid,
-    creeveyHost,
-    options.port,
+    creeveyServerHost,
+    creeveyServerPort,
   );
-
-  return browser;
 }
 
 async function updateStoryArgs(browser: WebDriver, story: StoryInput, updatedArgs: Args): Promise<void> {
@@ -799,6 +801,7 @@ export async function switchStory(this: Context): Promise<void> {
     });
   });
 
+  await updateBrowserGlobalVariables(this.browser);
   await resetMousePosition(this.browser);
   const isCaptureCalled = await selectStory(this.browser, id, waitForReady);
 

package/src/server/worker/worker.ts

@@ -208,6 +208,7 @@ export async function start(config: Config, options: Options & { browser: string
     retries = test.retries;
 
     mocha.grep(new RegExp(`^${testPath}$`));
+    mocha.unloadFiles();
     const runner = mocha.run(runHandler);
 
     // TODO How handle browser corruption?

package/src/types.ts

@@ -323,7 +323,7 @@ export interface Images {
   error?: string;
 }
 
-export type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'success' | 'retrying';
+export type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'approved' | 'success' | 'retrying';
 
 export interface TestResult {
   status: 'failed' | 'success';
@@ -350,7 +350,7 @@ export interface TestData extends TestMeta {
   retries?: number;
   status?: TestStatus;
   results?: TestResult[];
-  approved?: Partial<Record<string, number>>;
+  approved?: Partial<Record<string, number>> | null;
 }
 
 export interface ServerTest extends TestData {
@@ -415,7 +415,8 @@ export type Request =
   | { type: 'status' }
   | { type: 'start'; payload: string[] }
   | { type: 'stop' }
-  | { type: 'approve'; payload: ApprovePayload };
+  | { type: 'approve'; payload: ApprovePayload }
+  | { type: 'approveAll' };
 
 export type Response =
   | { type: 'status'; payload: CreeveyStatus }