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

package/src/client/addon/withCreevey.ts

@@ -0,0 +1,326 @@
+import * as Events from '@storybook/core-events';
+import type { PreviewWeb } from '@storybook/preview-web';
+import type { AnyFramework, StoryContextForEnhancers } from '@storybook/csf';
+import type { StoryStore } from '@storybook/client-api';
+import { makeDecorator } from '@storybook/preview-api';
+import { Channel } from '@storybook/channels';
+import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
+import { serializeRawStories } from '../../shared/index.js';
+import { getConnectionUrl } from '../shared/helpers.js';
+
+declare global {
+  interface Window {
+    __CREEVEY_SERVER_HOST__: string;
+    __CREEVEY_SERVER_PORT__: number;
+    __CREEVEY_WORKER_ID__: number;
+    __CREEVEY_GET_STORIES__: () => Promise<StoriesRaw | undefined>;
+    __CREEVEY_SELECT_STORY__: (
+      storyId: string,
+      shouldWaitForReady: boolean,
+      callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
+    ) => Promise<void>;
+    __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
+    __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
+    __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
+    __CREEVEY_HAS_PLAY_COMPLETED_YET__: (callback: (isPlayCompleted: boolean) => void) => void;
+    __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
+    __STORYBOOK_ADDONS_CHANNEL__: Channel;
+    __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
+    __STORYBOOK_PREVIEW__: PreviewWeb<AnyFramework>;
+  }
+}
+
+interface CreeveyTestsState {
+  setStoriesCounter?: number;
+  creeveyHost?: string;
+  creeveyPort?: number;
+  isTestBrowser?: boolean;
+}
+
+const disableAnimationsStyles = `
+*,
+*:hover,
+*::before,
+*::after {
+  animation-delay: -0.0001ms !important;
+  animation-duration: 0s !important;
+  animation-play-state: paused !important;
+  cursor: none !important;
+  caret-color: transparent !important;
+  transition: 0s !important;
+}
+`;
+
+function catchRenderError(channel: Channel): Promise<void> & { cancel: () => void } {
+  let rejectCallback: (reason?: unknown) => void;
+  const promise = new Promise<void>((_resolve, reject) => (rejectCallback = reject));
+
+  function errorHandler({ title, description }: { title: string; description: string }): void {
+    rejectCallback({
+      message: title,
+      stack: description,
+    });
+  }
+  function exceptionHandler(exception: Error): void {
+    rejectCallback(exception);
+  }
+  function removeHandlers(): void {
+    channel.off(Events.STORY_ERRORED, errorHandler);
+    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
+  }
+
+  channel.once(Events.STORY_ERRORED, errorHandler);
+  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
+
+  return Object.assign(promise, { cancel: removeHandlers });
+}
+
+function waitForStoryRendered(channel: Channel): Promise<void> & { cancel: () => void } {
+  let resolveCallback: () => void;
+  const promise = new Promise<void>((resolve) => (resolveCallback = resolve));
+  function renderHandler(): void {
+    resolveCallback();
+  }
+  function removeHandlers(): void {
+    channel.off(Events.STORY_RENDERED, renderHandler);
+  }
+
+  channel.once(Events.STORY_RENDERED, renderHandler);
+
+  return Object.assign(promise, { cancel: removeHandlers });
+}
+
+function waitForFontsLoaded(): Promise<void> | void {
+  // TODO Use document.fonts.ready instead
+  const areFontsLoading = Array.from(document.fonts).some((font) => font.status == 'loading');
+
+  if (areFontsLoading) {
+    return new Promise((resolve) => {
+      const fontsLoadedHandler = (): void => {
+        document.fonts.removeEventListener('loadingdone', fontsLoadedHandler);
+        resolve();
+      };
+      document.fonts.addEventListener('loadingdone', fontsLoadedHandler);
+    });
+  }
+}
+
+function waitForCaptureCall(): Promise<void> {
+  return new Promise((resolve) => (captureResolver = resolve));
+}
+
+function initCreeveyState(): void {
+  const prevState = JSON.parse(window.localStorage.getItem('Creevey_Tests') ?? '{}') as CreeveyTestsState;
+
+  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', () => {
+    window.localStorage.setItem(
+      'Creevey_Tests',
+      JSON.stringify({
+        creeveyHost: window.__CREEVEY_SERVER_HOST__,
+        creeveyPort: window.__CREEVEY_SERVER_PORT__,
+        setStoriesCounter,
+        isTestBrowser,
+      } as CreeveyTestsState),
+    );
+  });
+}
+
+let isTestBrowser = false;
+let captureResolver: () => void;
+let waitForCreevey: Promise<void>;
+let creeveyReady: () => void;
+let setStoriesCounter = 0;
+
+export function withCreevey(): ReturnType<typeof makeDecorator> {
+  const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
+
+  let isAnimationDisabled = false;
+
+  initCreeveyState();
+
+  function disableAnimation(): void {
+    isAnimationDisabled = true;
+    const style = document.createElement('style');
+    const textNode = document.createTextNode(disableAnimationsStyles);
+    style.setAttribute('type', 'text/css');
+    style.appendChild(textNode);
+    document.head.appendChild(style);
+  }
+
+  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;
+  }
+
+  // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
+  // TODO Check other statuses and statuses with play function
+  async function selectStory(
+    storyId: string,
+    shouldWaitForReady: boolean,
+    callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
+  ): Promise<void> {
+    const currentStory = window.__STORYBOOK_PREVIEW__.currentSelection?.storyId ?? '';
+
+    if (!isAnimationDisabled) disableAnimation();
+
+    isTestBrowser = true;
+    const channel = addonsChannel();
+    const waitForReady = shouldWaitForReady
+      ? new Promise<void>((resolve) => (window.__CREEVEY_SET_READY_FOR_CAPTURE__ = resolve))
+      : Promise.resolve();
+
+    let isCaptureCalled = false;
+    const renderPromise = waitForStoryRendered(channel);
+    const errorPromise = catchRenderError(channel);
+    const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
+
+    setTimeout(() => {
+      if (storyId == currentStory) channel.emit(Events.FORCE_REMOUNT, { storyId });
+      else channel.emit(Events.SET_CURRENT_STORY, { storyId });
+    }, 0);
+
+    try {
+      await Promise.race([
+        (async () => {
+          await Promise.race([renderPromise, capturePromise]);
+          await waitForFontsLoaded();
+          await waitForReady;
+        })(),
+        errorPromise,
+      ]);
+      callback([null, isCaptureCalled]);
+    } catch (reason) {
+      // NOTE Event `STORY_THREW_EXCEPTION` triggered only in react and vue frameworks and return Error instance
+      // NOTE Event `STORY_ERRORED` return error-like object without `name` field
+      const errorMessage =
+        reason instanceof Error
+          ? (reason.stack ?? reason.message)
+          : isObject(reason)
+            ? `${reason.message as string}\n    ${reason.stack as string}`
+            : (reason as string);
+      callback([errorMessage]);
+    } finally {
+      renderPromise.cancel();
+      errorPromise.cancel();
+    }
+  }
+
+  function updateGlobals(globals: StorybookGlobals): void {
+    addonsChannel().emit(Events.UPDATE_GLOBALS, { globals });
+  }
+
+  function insertIgnoreStyles(ignoreSelectors: string[]): HTMLStyleElement {
+    const stylesElement = document.createElement('style');
+    stylesElement.setAttribute('type', 'text/css');
+    document.head.appendChild(stylesElement);
+    ignoreSelectors.forEach((selector) => {
+      stylesElement.innerHTML += `
+        ${selector} {
+          background: #000 !important;
+          box-shadow: none !important;
+          text-shadow: none !important;
+          outline: 0 !important;
+          color: rgba(0,0,0,0) !important;
+        }
+        ${selector} *, ${selector}::before, ${selector}::after {
+          visibility: hidden !important;
+        }
+      `;
+    });
+    return stylesElement;
+  }
+
+  function removeIgnoreStyles(ignoreStyles: HTMLStyleElement): void {
+    ignoreStyles.parentNode?.removeChild(ignoreStyles);
+  }
+
+  function hasPlayCompletedYet(callback: (isPlayCompleted: boolean) => void): void {
+    creeveyReady();
+    let isCaptureCalled = false;
+    let isPlayCompleted = false;
+
+    const channel = addonsChannel();
+    void waitForStoryRendered(channel).then(() => {
+      if (isCaptureCalled) return;
+      isPlayCompleted = true;
+      callback(true);
+    });
+    void waitForCaptureCall().then(() => {
+      if (isPlayCompleted) return;
+      isCaptureCalled = true;
+      callback(false);
+    });
+  }
+
+  window.__CREEVEY_GET_STORIES__ = getStories;
+  window.__CREEVEY_SELECT_STORY__ = selectStory;
+  window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
+  window.__CREEVEY_INSERT_IGNORE_STYLES__ = insertIgnoreStyles;
+  window.__CREEVEY_REMOVE_IGNORE_STYLES__ = removeIgnoreStyles;
+  window.__CREEVEY_HAS_PLAY_COMPLETED_YET__ = hasPlayCompletedYet;
+  window.__CREEVEY_SET_READY_FOR_CAPTURE__ = noop;
+
+  return makeDecorator({
+    name: 'withCreevey',
+    parameterName: 'creevey',
+
+    wrapper: (getStory, context) => {
+      // TODO Define proper types, like captureElement is a promise
+      const { captureElement } = (context.parameters.creevey = (context.parameters.creevey ??
+        {}) as CreeveyStoryParams);
+      Object.defineProperty(context.parameters.creevey, 'captureElement', {
+        get() {
+          switch (true) {
+            case captureElement === undefined:
+              return Promise.resolve(context.canvasElement);
+            case captureElement === null:
+              return Promise.resolve(document.documentElement);
+            case typeof captureElement == 'string':
+              return Promise.resolve((context.canvasElement as Element).querySelector(captureElement));
+            case typeof captureElement == 'function':
+              // TODO Define type for it
+              return Promise.resolve(
+                (captureElement as unknown as (ctx: typeof context) => Promise<HTMLElement> | HTMLElement)(context),
+              );
+          }
+        },
+        enumerable: true,
+        configurable: true,
+      });
+
+      return getStory(context);
+    },
+  });
+}
+
+export async function capture(options?: CaptureOptions): Promise<void> {
+  if (!isTestBrowser) return;
+
+  captureResolver();
+  waitForCreevey = new Promise((resolve) => (creeveyReady = resolve));
+
+  await fetch(`http://${getConnectionUrl()}/capture`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ workerId: window.__CREEVEY_WORKER_ID__, options }),
+  });
+
+  await waitForCreevey;
+}

package/src/client/shared/components/ImagesView/BlendView.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react';
+import { styled, withTheme } from '@storybook/theming';
+import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
+import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
+import { readyForCapture } from '../../../addon/readyForCapture.js';
+
+const Container = styled.div({
+  position: 'relative',
+  display: 'flex',
+  filter: 'invert(100%)',
+});
+
+const ImageContainer = styled.div({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+});
+
+const Image = styled.img<{ borderColor: string }>(({ borderColor }) => ({
+  boxSizing: 'border-box',
+  border: `1px solid ${borderColor}`,
+  maxWidth: '100%',
+  filter: 'invert(100%)',
+}));
+
+const ActualImage = styled(Image)({
+  mixBlendMode: 'difference',
+});
+
+const DiffImage = styled(Image)({
+  opacity: '0',
+});
+
+export const BlendView = withTheme(({ actual, diff, expect, theme }: ViewPropsWithTheme): JSX.Element => {
+  const expectImageRef = useRef<HTMLImageElement | null>(null);
+  const diffImageRef = useRef<HTMLImageElement | null>(null);
+  const actualImageRef = useRef<HTMLImageElement | null>(null);
+
+  const loaded = useLoadImages(expect, diff, actual);
+  const scale = useCalcScale(diffImageRef, loaded);
+
+  useApplyScale(expectImageRef, scale, loaded);
+  useApplyScale(actualImageRef, scale, loaded);
+
+  useEffect(() => {
+    if (loaded) readyForCapture();
+  }, [loaded]);
+
+  return (
+    <Container>
+      <ImageContainer>
+        <Image
+          ref={expectImageRef}
+          borderColor={getBorderColor(theme, themeBorderColors.expect)}
+          alt="expect"
+          src={expect}
+        />
+      </ImageContainer>
+      <DiffImage ref={diffImageRef} borderColor={'transparent'} alt="diff" src={diff} />
+      <ImageContainer>
+        <ActualImage
+          ref={actualImageRef}
+          borderColor={getBorderColor(theme, themeBorderColors.actual)}
+          alt="actual"
+          src={actual}
+        />
+      </ImageContainer>
+    </Container>
+  );
+});

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

@@ -0,0 +1,70 @@
+import React, { FunctionComponent } from 'react';
+import { styled, withTheme } from '@storybook/theming';
+import { SideBySideView } from './SideBySideView.js';
+import { SwapView } from './SwapView.js';
+import { SlideView } from './SlideView.js';
+import { BlendView } from './BlendView.js';
+import { Images, ImagesViewMode } from '../../../../types.js';
+import { getBorderColor, themeBorderColors, ViewProps } from './common.js';
+
+interface ImagesViewProps {
+  url?: string;
+  image: Images;
+  canApprove: boolean;
+  mode: ImagesViewMode;
+}
+
+const views: { [mode in ImagesViewMode]: FunctionComponent<ViewProps> } = {
+  'side-by-side': SideBySideView,
+  swap: SwapView,
+  slide: SlideView,
+  blend: BlendView,
+};
+
+const Container = styled.div({
+  height: '100%',
+  display: 'flex',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 20px',
+});
+
+const ImageLink = styled.a({
+  lineHeight: 0,
+});
+
+const ActualImage = withTheme(
+  styled.img(({ theme }) => {
+    return {
+      border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
+      maxWidth: '100%',
+    };
+  }),
+);
+
+function normalizeUrl(image: string, url?: string): string {
+  return url ? `${url}/${image}` : image;
+}
+
+export function ImagesView({ url, image, canApprove, mode }: ImagesViewProps): JSX.Element {
+  const ViewComponent = views[mode];
+
+  const { actual, diff, expect } = image;
+
+  return (
+    <Container>
+      {canApprove && diff && expect ? (
+        <ViewComponent
+          actual={normalizeUrl(actual, url)}
+          diff={normalizeUrl(diff, url)}
+          expect={normalizeUrl(expect, url)}
+        />
+      ) : (
+        <ImageLink href={normalizeUrl(actual, url)} target="_blank" rel="noopener noreferrer">
+          <ActualImage alt="actual" src={normalizeUrl(actual, url)} />
+        </ImageLink>
+      )}
+    </Container>
+  );
+}

package/src/client/shared/components/ImagesView/SideBySideView.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Loader } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
+import { useApplyScale, useLoadImages, useResizeObserver, getBorderSize } from '../../helpers.js';
+import { readyForCapture } from '../../../addon/readyForCapture.js';
+
+type LayoutDirection = 'horizontal' | 'vertical';
+
+const Container = styled.div({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%',
+});
+
+const ImagesLayout = styled.div<{ layout: LayoutDirection }>(({ layout }) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  flexDirection: layout == 'horizontal' ? 'row' : 'column',
+
+  '& > :not(:first-of-type)': {
+    marginLeft: layout == 'horizontal' ? '20px' : 0,
+    marginTop: layout == 'horizontal' ? 0 : '20px',
+  },
+}));
+
+const ImageLink = styled.a({
+  lineHeight: 0,
+  flexShrink: 0,
+});
+
+const ImageDiffLink = styled.a({
+  lineHeight: 0,
+});
+
+const Image = styled.img<{ borderColor: string }>(({ borderColor }) => ({
+  boxSizing: 'border-box',
+  border: `1px solid ${borderColor}`,
+  maxWidth: '100%',
+  flexShrink: 0,
+}));
+
+const DiffImage = styled(Image)({
+  flexShrink: 1,
+});
+
+export const SideBySideView = withTheme(({ actual, diff, expect, theme }: ViewPropsWithTheme): JSX.Element => {
+  const [layout, setLayout] = useState<LayoutDirection>('horizontal');
+  const [scale, setScale] = useState(1);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const expectImageRef = useRef<HTMLImageElement | null>(null);
+  const diffImageRef = useRef<HTMLImageElement | null>(null);
+  const actualImageRef = useRef<HTMLImageElement | null>(null);
+
+  const loaded = useLoadImages(expect, diff, actual);
+
+  const calcScale = useCallback(() => {
+    const containerElement = containerRef.current;
+    const expectImage = expectImageRef.current;
+    const diffImage = diffImageRef.current;
+    const actualImage = actualImageRef.current;
+
+    if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) {
+      setScale(1);
+      return;
+    }
+
+    const borderSize = getBorderSize(diffImage);
+
+    if (layout == 'vertical') {
+      const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
+      setScale(Math.min(1, ratio));
+    }
+    if (layout == 'horizontal') {
+      const ratio =
+        // NOTE: 40px because we have two margins by 20px and 6px for borders
+        (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) /
+        [expectImage, diffImage, actualImage].map((image) => image.naturalWidth).reduce((a, b) => a + b, 0);
+      setScale(Math.min(1, ratio));
+    }
+  }, [loaded, layout]);
+
+  useResizeObserver(containerRef, calcScale);
+  useLayoutEffect(calcScale, [calcScale]);
+  useLayoutEffect(() => {
+    // TODO Check image height and viewport
+    const diffImage = diffImageRef.current;
+    if (!diffImage || !loaded) return;
+    const ratio = diffImage.naturalWidth / diffImage.naturalHeight;
+    setLayout(ratio >= 2 ? 'vertical' : 'horizontal');
+  }, [loaded]);
+
+  useApplyScale(expectImageRef, scale);
+  useApplyScale(actualImageRef, scale);
+
+  useEffect(() => {
+    if (loaded) readyForCapture();
+  }, [loaded]);
+
+  return (
+    <Container ref={containerRef}>
+      {loaded ? (
+        <ImagesLayout layout={layout}>
+          <ImageLink href={expect} target="_blank" rel="noopener noreferrer">
+            <Image
+              ref={expectImageRef}
+              borderColor={getBorderColor(theme, themeBorderColors.expect)}
+              alt="expect"
+              src={expect}
+            />
+          </ImageLink>
+          <ImageDiffLink href={diff} target="_blank" rel="noopener noreferrer">
+            <DiffImage
+              ref={diffImageRef}
+              borderColor={getBorderColor(theme, themeBorderColors.diff)}
+              alt="diff"
+              src={diff}
+            />
+          </ImageDiffLink>
+          <ImageLink href={actual} target="_blank" rel="noopener noreferrer">
+            <Image
+              ref={actualImageRef}
+              borderColor={getBorderColor(theme, themeBorderColors.actual)}
+              alt="actual"
+              src={actual}
+            />
+          </ImageLink>
+        </ImagesLayout>
+      ) : (
+        <Loader size={64} />
+      )}
+    </Container>
+  );
+});