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

package/src/client/addon/components/Addon.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { Placeholder } from '@storybook/components';
+import { TestData } from '../../../types.js';
+import { Panel } from './Panel.js';
+import { CreeveyController } from '../controller.js';
+
+interface AddonProps {
+  active?: boolean;
+  browser: string;
+  controller: CreeveyController;
+}
+export const Addon = ({ active, browser, controller }: AddonProps): JSX.Element | null => {
+  const [tests, setTests] = useState<TestData[]>([]);
+
+  const [selectedTestId, setSelectedTestId] = useState(controller.selectedTestId);
+
+  useEffect(() => {
+    if (active) {
+      controller.setActiveBrowser(browser);
+      const browserTests = controller.getTestsByStoryIdAndBrowser(controller.activeBrowser);
+      setTests(browserTests);
+    }
+  }, [active, browser, controller]);
+
+  useEffect(() => {
+    const unsubscribe = controller.onChangeTest((testId) => {
+      setSelectedTestId(testId);
+      const status = controller.getTestsByStoryIdAndBrowser(controller.activeBrowser);
+      setTests(status);
+    });
+    return unsubscribe;
+  }, [controller]);
+
+  useEffect(() => {
+    const unsubscribe = controller.onUpdateStatus(() => {
+      setTests(controller.getTestsByStoryIdAndBrowser(controller.activeBrowser));
+    });
+    return unsubscribe;
+  }, [controller, browser]);
+
+  return active ? (
+    tests.length ? (
+      <Panel
+        tests={tests}
+        selectedTestId={selectedTestId}
+        onChangeTest={controller.setSelectedTestId}
+        onImageApprove={controller.onImageApprove}
+      />
+    ) : (
+      <Placeholder>No test results</Placeholder>
+    )
+  ) : null;
+};

package/src/client/addon/components/Icons.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface IconProps {
+  width?: number;
+  height?: number;
+}
+
+export const NextIcon = ({ width, height }: IconProps): JSX.Element => {
+  return (
+    <svg version="1.1" width={width} height={height} viewBox="0 0 306 306">
+      <path d="M0,306l216.75-153L0,0V306z M255,0v306h51V0H255z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export const ForwardIcon = ({ width, height }: IconProps): JSX.Element => {
+  return (
+    <svg version="1.1" width={width} height={height} viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M460.9,246.8l-209-164.2c-7.8-6.1-19.2-0.6-19.2,9.2v328.4c0,9.8,11.4,15.3,19.2,9.2l209-164.2c5.1-4,6-11.4,2-16.5
+		C462.4,248,461.7,247.3,460.9,246.8L460.9,246.8z M228.2,246.8L19.2,82.5C11.4,76.4,0,82,0,91.8v328.4c0,9.8,11.4,15.3,19.2,9.2
+		l209-164.2c3-2.3,4.5-5.8,4.5-9.2C232.7,252.6,231.2,249.1,228.2,246.8z M507.3,64h-37.2c-2.5,0-4.7,2-4.7,4.4v375.3
+		c0,2.4,2.1,4.4,4.7,4.4h37.2c2.5,0,4.7-2,4.7-4.4V68.4C512,66,509.9,64,507.3,64z"
+      />
+    </svg>
+  );
+};

package/src/client/addon/components/Panel.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Loader } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { TestData } from '../../../types.js';
+import { ResultsPage } from '../../shared/components/ResultsPage.js';
+import { getTestPath } from '../../shared/helpers.js';
+import TestSelect from './TestSelect.js';
+import { noop } from 'lodash';
+interface PanelProps {
+  tests: TestData[];
+  selectedTestId: string;
+  onChangeTest: (testId: string) => void;
+  onImageApprove: (id: string, retry: number, image: string) => void;
+}
+
+const Wrapper = styled.div<{ isRunning: boolean }>(({ isRunning }) => ({
+  opacity: isRunning ? 0.5 : 1,
+  height: '100%',
+}));
+
+const TestSelectContainer = styled.div(({ theme }) => ({
+  padding: '8px',
+  border: `1px solid ${theme.appBorderColor}`,
+}));
+
+export const Panel = ({ tests, selectedTestId, onChangeTest }: PanelProps): JSX.Element => {
+  const result = tests.find((x) => x.id === selectedTestId);
+
+  const isRunning = result?.status === 'running';
+
+  return (
+    <div>
+      {tests.length > 1 && (
+        <TestSelectContainer>
+          <TestSelect tests={tests} selectedTestId={selectedTestId} onChangeTest={onChangeTest} />
+        </TestSelectContainer>
+      )}
+      {isRunning && <Loader />}
+      {result?.results?.length ? (
+        <Wrapper isRunning={isRunning}>
+          <ResultsPage
+            height={'100%'}
+            key={`${result.id}_${result.results.length}`} // TODO
+            path={getTestPath(result)} // TODO Memo?
+            results={result.results}
+            approved={result.approved}
+            // addon doesn't work, add only stubs
+            retry={0}
+            onRetryChange={noop}
+            imageName=""
+            onImageChange={noop}
+          />
+        </Wrapper>
+      ) : null}
+    </div>
+  );
+};

package/src/client/addon/components/TestSelect.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { TestData } from '../../../types.js';
+import { getEmojiByTestStatus } from '../utils.js';
+
+interface TestSelectProps {
+  tests: TestData[];
+  selectedTestId: string;
+  onChangeTest: (testId: string) => void;
+}
+
+const LinkIconContainer = styled.span(({ theme }) => ({
+  display: 'inline-block',
+  width: '20px',
+  color: theme.color.defaultText,
+  textAlign: 'center',
+}));
+
+export default function TestSelect(props: TestSelectProps): JSX.Element {
+  const testName = props.tests.find((x) => x.id === props.selectedTestId)?.testName ?? '';
+  return (
+    <WithTooltip
+      trigger="click"
+      placement="bottom"
+      closeOnClick
+      tooltip={({ onHide }) => (
+        <TooltipLinkList
+          links={props.tests.map((x) => ({
+            id: x.id,
+            title: x.testName ?? '',
+            active: props.selectedTestId === x.id,
+            onClick: () => {
+              props.onChangeTest(x.id);
+              onHide();
+            },
+            left: <LinkIconContainer>{getEmojiByTestStatus(x.status, x.skip)}</LinkIconContainer>,
+          }))}
+        />
+      )}
+    >
+      <Button outline small>
+        <Icons icon="menu" />
+        {testName}
+      </Button>
+    </WithTooltip>
+  );
+}

package/src/client/addon/components/Tools.tsx

@@ -0,0 +1,93 @@
+import React, { Fragment, useState, useEffect } from 'react';
+import { stringify } from 'qs';
+import { IconButton, Icons, Separator } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { ForwardIcon, NextIcon } from './Icons.js';
+import { isDefined, TestData } from '../../../types.js';
+import { getTestPath, useForceUpdate } from '../../shared/helpers.js';
+import { CreeveyController } from '../controller.js';
+
+interface ToolsProps {
+  controller: CreeveyController;
+}
+
+const Button = styled(IconButton)({
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'default',
+  },
+
+  '&:disabled:hover': {
+    color: 'inherit',
+  },
+});
+
+type ButtonType = 'RunAll' | 'RunStoryTests' | 'RunTest';
+
+export const Tools = ({ controller }: ToolsProps): JSX.Element | null => {
+  const [buttonClicked, setButtonClicked] = useState<ButtonType | null>();
+  const [isRunning, setRunning] = useState(controller.status.isRunning);
+  const forceUpdate = useForceUpdate();
+  const test: TestData | undefined = controller.getCurrentTest();
+
+  useEffect(() => {
+    const unsubscribe = controller.onChangeTest(() => {
+      forceUpdate();
+    });
+    return unsubscribe;
+  }, [controller, forceUpdate]);
+
+  useEffect(() => {
+    const unsubscribe = controller.onUpdateStatus(({ isRunning }) => {
+      if (isDefined(isRunning)) setRunning(isRunning);
+    });
+    return unsubscribe;
+  }, [controller]);
+
+  if (!test) return null;
+
+  function renderButton(type: ButtonType, title: string, onClick: () => void, icon: JSX.Element): JSX.Element {
+    const handleClick = (): void => {
+      setButtonClicked(type);
+      onClick();
+    };
+    const disabled = isRunning && buttonClicked != null && buttonClicked !== type;
+    return (
+      // @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623
+      <Button
+        onClick={() => {
+          if (isRunning) controller.onStop();
+          else handleClick();
+        }}
+        title={disabled ? '' : title}
+        disabled={disabled}
+      >
+        {buttonClicked === type && isRunning ? <Icons icon={'stop'} /> : icon}
+      </Button>
+    );
+  }
+
+  return (
+    <Fragment>
+      {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+      <IconButton
+        href={`http://localhost:${__CREEVEY_CLIENT_PORT__ ?? __CREEVEY_SERVER_PORT__ ?? 3000}/?${stringify({
+          testPath: getTestPath(test),
+        })}`}
+        target="_blank"
+        title="Show in Creevey UI"
+      >
+        <Icons icon="sharealt" />
+      </IconButton>
+      <Separator />
+      {renderButton('RunAll', 'Run all', controller.onStartAllTests, <ForwardIcon />)}
+      {renderButton(
+        'RunStoryTests',
+        'Run all story tests',
+        controller.onStartAllStoryTests,
+        <NextIcon width={15} height={11} />,
+      )}
+      {renderButton('RunTest', 'Run', controller.onStart, <Icons icon="play" />)}
+    </Fragment>
+  );
+};

package/src/client/addon/controller.ts

@@ -0,0 +1,224 @@
+import { API } from '@storybook/api';
+import { Addon_TypesEnum } from '@storybook/types';
+import { SET_STORIES, STORY_RENDERED } from '@storybook/core-events';
+import { denormalizeStoryParameters } from '../../shared/index.js';
+import { CreeveyStatus, CreeveyUpdate, isDefined, TestData, TestStatus, StoriesRaw } from '../../types.js';
+import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
+import { calcStatus } from '../shared/helpers.js';
+import { getEmojiByTestStatus } from './utils.js';
+
+export const ADDON_ID = 'creevey';
+
+// TODO Add `useController` hook
+// TODO use `import { useGlobals, useStorybookApi } from '@storybook/manager-api';`
+export class CreeveyController {
+  storyId = '';
+  activeBrowser = '';
+  selectedTestId = '';
+  status: CreeveyStatus = { isRunning: false, tests: {}, browsers: [] };
+  creeveyApi: CreeveyClientApi | null = null;
+  stories: StoriesRaw = {};
+
+  updateStatusListeners: ((update: CreeveyUpdate) => void)[] = [];
+  changeTestListeners: ((testId: string) => void)[] = [];
+  constructor(public storybookApi: API) {
+    this.storybookApi = storybookApi;
+  }
+  initAll = async (): Promise<void> => {
+    this.storybookApi.on(STORY_RENDERED, this.onStoryRendered);
+    this.storybookApi.on(SET_STORIES, this.onSetStories);
+    this.creeveyApi = await initCreeveyClientApi();
+    this.creeveyApi.onUpdate(this.handleCreeveyUpdate);
+    this.status = await this.creeveyApi.status;
+  };
+
+  onUpdateStatus(listener: (update: CreeveyUpdate) => void): () => void {
+    this.updateStatusListeners.push(listener);
+    return () => void (this.updateStatusListeners = this.updateStatusListeners.filter((x) => x != listener));
+  }
+
+  onChangeTest(listener: (testId: string) => void): () => void {
+    this.changeTestListeners.push(listener);
+    return () => void (this.changeTestListeners = this.changeTestListeners.filter((x) => x != listener));
+  }
+
+  handleCreeveyUpdate = (update: CreeveyUpdate): void => {
+    const { tests, removedTests = [], isRunning } = update;
+    if (isDefined(isRunning)) {
+      this.status.isRunning = isRunning;
+    }
+    if (isDefined(tests)) {
+      const prevTests = this.status.tests;
+      const prevStories = this.stories;
+      Object.values(tests)
+        .filter(isDefined)
+        .forEach((update) => {
+          const { id, skip, status, results, approved, storyId } = update;
+          const test = prevTests[id];
+          if (!test) {
+            return (prevTests[id] = update);
+          }
+          if (isDefined(skip)) test.skip = skip;
+          if (isDefined(status)) {
+            test.status = status;
+            if (isDefined(storyId) && isDefined(prevStories[storyId])) {
+              const story = prevStories[storyId];
+              const storyStatus = this.getStoryTests(storyId);
+              const oldStatus = storyStatus
+                .map((x) => (x.id === id ? status : x.status))
+                .reduce((oldStatus, newStatus) => calcStatus(oldStatus, newStatus), undefined);
+
+              story.name = this.addStatusToStoryName(story.name, calcStatus(oldStatus, status), skip ?? false);
+            }
+          }
+          if (isDefined(results)) {
+            if (test.results) test.results.push(...results);
+            else test.results = results;
+          }
+          if (isDefined(approved)) {
+            Object.entries(approved).forEach(
+              ([image, retry]) => retry !== undefined && ((test.approved = test.approved ?? {})[image] = retry),
+            );
+          }
+        });
+      const nextTests: Partial<Record<string, TestData>> = {};
+      const testsToRemove = new Set(removedTests.map(({ id }) => id));
+
+      for (const id in prevTests) {
+        if (testsToRemove.has(id)) continue;
+        nextTests[id] = prevTests[id];
+      }
+
+      this.status.tests = nextTests;
+      this.stories = prevStories;
+      this.setPanelsTitle();
+      // TODO Check setStories method in 6.x and migrate properly
+      this.storybookApi.emit(SET_STORIES, this.stories);
+    }
+    this.updateStatusListeners.forEach((x) => {
+      x(update);
+    });
+  };
+
+  getCurrentTest = (): TestData | undefined => {
+    return this.status.tests[this.selectedTestId];
+  };
+
+  onStoryRendered = (storyId: string): void => {
+    if (this.storyId === '') this.addStatusesToSideBar();
+    if (this.storyId !== storyId) {
+      this.storyId = storyId;
+      this.selectedTestId = this.getTestsByStoryIdAndBrowser(this.activeBrowser)[0]?.id ?? '';
+      this.setPanelsTitle();
+      this.changeTestListeners.forEach((x) => {
+        x(this.selectedTestId);
+      });
+    }
+  };
+
+  onStart = (): void => {
+    this.creeveyApi?.start([this.selectedTestId]);
+  };
+
+  onStop = (): void => {
+    this.creeveyApi?.stop();
+  };
+
+  onImageApprove = (id: string, retry: number, image: string): void => this.creeveyApi?.approve(id, retry, image);
+
+  onStartAllStoryTests = (): void => {
+    const ids: string[] = Object.values(this.status.tests)
+      .filter(isDefined)
+      .filter((x) => x.storyId === this.storyId)
+      .map((x) => x.id);
+    this.creeveyApi?.start(ids);
+  };
+
+  onStartAllTests = (): void => {
+    const ids = Object.values(this.status.tests)
+      .filter(isDefined)
+      .map((x) => x.id);
+    this.creeveyApi?.start(ids);
+  };
+  onSetStories = (data: Parameters<typeof denormalizeStoryParameters>['0']): void => {
+    const stories = data.v ? denormalizeStoryParameters(data) : data.stories;
+    this.stories = stories;
+  };
+
+  setActiveBrowser = (browser: string): void => {
+    this.activeBrowser = browser;
+    this.selectedTestId = this.getTestsByStoryIdAndBrowser(this.activeBrowser)[0]?.id ?? '';
+    this.changeTestListeners.forEach((x) => {
+      x(this.selectedTestId);
+    });
+  };
+
+  setSelectedTestId = (testId: string): void => {
+    this.selectedTestId = testId;
+    this.changeTestListeners.forEach((x) => {
+      x(this.selectedTestId);
+    });
+  };
+
+  getStoryTests = (storyId: string): TestData[] => {
+    return Object.values(this.status.tests)
+      .filter((result) => result?.storyId === storyId)
+      .filter(isDefined);
+  };
+
+  getBrowsers = (): string[] => {
+    return this.status.browsers;
+  };
+
+  getTestsByStoryIdAndBrowser = (browser: string): TestData[] => {
+    return Object.values(this.status.tests)
+      .filter((x) => x?.browser === browser && x.storyId === this.storyId)
+      .filter(isDefined);
+  };
+
+  getTabTitle = (browser: string): string => {
+    const tests = this.getTestsByStoryIdAndBrowser(browser);
+    const browserStatus = tests
+      .map((x) => x.status)
+      .reduce((oldStatus, newStatus) => calcStatus(oldStatus, newStatus), undefined);
+    const browserSkip = tests.length > 0 ? tests.every((x) => x.skip) : false;
+    const emojiStatus = getEmojiByTestStatus(browserStatus, browserSkip);
+    return `${emojiStatus ? `${emojiStatus} ` : ''}Creevey/${browser}`;
+  };
+
+  setPanelsTitle = (): void => {
+    const panels = this.storybookApi.getElements(Addon_TypesEnum.PANEL);
+    let firstPanelBrowser = this.activeBrowser;
+    for (const p in panels) {
+      const panel = panels[p];
+      if (panel.id?.indexOf(ADDON_ID) === 0 && panel.paramKey) {
+        panel.title = this.getTabTitle(panel.paramKey);
+        if (!firstPanelBrowser) firstPanelBrowser = panel.paramKey;
+      }
+    }
+    this.storybookApi.setSelectedPanel(`${ADDON_ID}/panel/${firstPanelBrowser}`);
+  };
+
+  addStatusesToSideBar(): void {
+    if (!Object.keys(this.stories).length) return;
+
+    const stories = this.stories;
+    Object.keys(this.stories).forEach((storyId) => {
+      const storyStatus = this.getStoryTests(storyId);
+      const status = storyStatus
+        .map((x) => x.status)
+        .reduce((oldStatus, newStatus) => calcStatus(oldStatus, newStatus), undefined);
+      const skip = storyStatus.length > 0 ? storyStatus.every((x) => x.skip) : false;
+      this.stories[storyId].name = this.addStatusToStoryName(stories[storyId].name, status, skip);
+    });
+
+    // TODO Check setStories method in 6.x and migrate properly
+    this.storybookApi.emit(SET_STORIES, this.stories);
+  }
+
+  addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string {
+    name = name.replace(/^(❌|✔|🟡|🕗|⏸) /, '');
+    const emojiStatus = getEmojiByTestStatus(status, skip);
+    return `${emojiStatus ? `${emojiStatus} ` : ''} ${name}`;
+  }
+}

package/src/client/addon/decorator.ts

@@ -0,0 +1,3 @@
+import { withCreevey } from './withCreevey.js';
+
+export const decorators = [withCreevey()];

package/src/client/addon/index.ts

@@ -0,0 +1,2 @@
+export * from './withCreevey.js';
+export * from './readyForCapture.js';

package/src/client/addon/manager.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { API } from '@storybook/api';
+import { addons, types } from '@storybook/manager-api';
+import { Addon } from './components/Addon.js';
+import { Tools } from './components/Tools.js';
+import { CreeveyController, ADDON_ID } from './controller.js';
+
+// TODO Take api from `import { useGlobals, useStorybookApi } from '@storybook/manager-api';`
+addons.register(ADDON_ID, (api) => {
+  void registerCreeveyPanels(api);
+});
+
+async function registerCreeveyPanels(storybookApi: API): Promise<void> {
+  const controller = new CreeveyController(storybookApi);
+
+  addons.add(`${ADDON_ID}/panel/run`, {
+    title: `Creevey/Run`,
+    match: ({ viewMode }) => !!(viewMode && /^story$/.exec(viewMode)),
+    type: types.TOOL,
+
+    render: () => React.createElement(Tools, { controller }),
+  });
+  await controller.initAll();
+  const browsers = controller.getBrowsers();
+
+  browsers.forEach((browser) => {
+    const panelId = `${ADDON_ID}/panel/${browser}`;
+    const title = controller.getTabTitle(browser);
+    addons.add(panelId, {
+      title,
+      type: types.PANEL,
+      paramKey: browser,
+
+      // NOTE key = PANEL_ID needs to correct render button in addons panel
+
+      render: ({ active }) =>
+        React.createElement(Addon, {
+          active,
+          controller,
+          browser,
+        }),
+    });
+  });
+}

package/src/client/addon/preset.ts

@@ -0,0 +1,3 @@
+export const previewAnnotations = [require.resolve('./preview')];
+
+export const managerEntries = [require.resolve('./manager')];

package/src/client/addon/preview.ts

@@ -0,0 +1,7 @@
+import { withCreevey } from './withCreevey.js';
+
+const preview = {
+  decorators: [withCreevey()],
+};
+
+export default preview;

package/src/client/addon/readyForCapture.ts

@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
+  }
+}
+
+export function readyForCapture(): void {
+  window.__CREEVEY_SET_READY_FOR_CAPTURE__?.();
+}

package/src/client/addon/utils.tsx

@@ -0,0 +1,24 @@
+import { TestStatus } from '../../types.js';
+
+export function getEmojiByTestStatus(status: TestStatus | undefined, skip: string | boolean = false): string {
+  switch (status) {
+    case 'failed': {
+      return '❌';
+    }
+    case 'success': {
+      return '✔';
+    }
+    case 'running': {
+      return '🟡';
+    }
+    case 'pending': {
+      return '🕗';
+    }
+    default: {
+      if (skip) return '⏸';
+      return '';
+    }
+  }
+}
+
+export const isInternetExplorer = navigator.userAgent.includes('Trident/');