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

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

@@ -0,0 +1,138 @@
+import React, { useContext, useState } from 'react';
+import { Button as NativeButton, Icons } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { CreeveyContext } from '../../CreeveyContext.js';
+import { TestsStatus, TestsStatusProps } from './TestsStatus.js';
+import { TestStatus } from '../../../../types.js';
+import { CreeveyViewFilter } from '../../../shared/helpers.js';
+import { Search } from './Search.js';
+
+interface SideBarHeaderProps {
+  testsStatus: Omit<TestsStatusProps, 'onClickByStatus'>;
+  onStart: () => void;
+  onStop: () => void;
+  filter: CreeveyViewFilter;
+  onFilterChange: (value: CreeveyViewFilter) => void;
+  canStart?: boolean;
+}
+
+const Sticky = withTheme(
+  styled.div(({ theme }) => ({
+    padding: '24px 32px 8px',
+    background: theme.background.content,
+    height: '130px',
+    zIndex: 5,
+    position: 'sticky',
+    top: '0',
+  })),
+);
+
+const Container = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const Header = styled.h2({
+  fontWeight: 'normal',
+  margin: 0,
+});
+
+const Button = withTheme(
+  styled(NativeButton)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    transform: 'none',
+    width: '60px',
+    padding: '8px 12px',
+
+    '& svg': {
+      width: '24px',
+      height: '24px',
+      marginRight: 0,
+    },
+
+    '&:active svg path': {
+      fill: theme.color.inverseText,
+    },
+  })),
+);
+
+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,
+  }),
+);
+
+const parseStringForFilter = (value: string): CreeveyViewFilter => {
+  let status: TestStatus | null = null;
+  const subStrings: string[] = [];
+  const tokens = value
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => word.toLowerCase());
+
+  tokens.forEach((word) => {
+    const [, matchedStatus] = /^status:(failed|success|pending)$/i.exec(word) ?? [];
+    if (matchedStatus) return (status = matchedStatus as TestStatus);
+    subStrings.push(word);
+  });
+
+  return { status, subStrings };
+};
+
+export function SideBarHeader({
+  testsStatus,
+  onStop,
+  onStart,
+  filter,
+  onFilterChange,
+  canStart,
+}: SideBarHeaderProps): JSX.Element {
+  const { isReport, isRunning } = useContext(CreeveyContext);
+  const [filterInput, setFilterInput] = useState('');
+
+  const handleClickByStatus = (status: TestStatus): void => {
+    if (status === filter.status) {
+      setFilterInput(filter.subStrings.join(' '));
+      onFilterChange({ status: null, subStrings: filter.subStrings });
+    } else {
+      setFilterInput(filter.subStrings.join(' ') + ' status:' + status);
+      onFilterChange({ status, subStrings: filter.subStrings });
+    }
+  };
+
+  const handleInputFilterChange = (value: string): void => {
+    setFilterInput(value);
+    onFilterChange(parseStringForFilter(value));
+  };
+
+  return (
+    <Sticky>
+      <Container>
+        <div>
+          <Header>colin.creevey</Header>
+          <TestsStatus {...testsStatus} onClickByStatus={handleClickByStatus} />
+        </div>
+        {isReport ? null : (
+          <MarginContainer top="10px">
+            {isRunning ? (
+              <Button outline secondary onClick={onStop}>
+                <Icons icon="stop" />
+              </Button>
+            ) : (
+              <Button outline secondary onClick={onStart} disabled={!canStart}>
+                <Icons icon="play" />
+              </Button>
+            )}
+          </MarginContainer>
+        )}
+      </Container>
+      <MarginContainer top="24px" bottom="24px">
+        <Search onChange={handleInputFilterChange} value={filterInput} />
+      </MarginContainer>
+    </Sticky>
+  );
+}

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

@@ -0,0 +1,118 @@
+import React, { useRef, useContext, useEffect, useMemo } from 'react';
+import { Icons } from '@storybook/components';
+import { styled, withTheme, Theme } from '@storybook/theming';
+import { Checkbox, CheckboxContainer } from './Checkbox.js';
+import { TestStatusIcon } from './TestStatusIcon.js';
+import { CreeveySuite, isTest } from '../../../../types.js';
+import { CreeveyContext } from '../../CreeveyContext.js';
+import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+
+export interface SuiteLinkProps {
+  title: string;
+  suite: CreeveySuite;
+  'data-testid'?: string;
+}
+
+export const Container = withTheme(
+  styled.div<{ theme: Theme; disabled?: boolean }>(({ theme, disabled }) => ({
+    position: 'relative',
+    width: '100%',
+    ...(disabled ? { color: theme.color.mediumdark, pointerEvents: 'none' } : {}),
+  })),
+);
+
+export const Button = withTheme(
+  styled.button<{ theme: Theme; active?: boolean; focused?: boolean }>(({ theme, active, focused }) => ({
+    width: '100%',
+    boxSizing: 'border-box',
+    appearance: 'none',
+    padding: '6px 36px',
+    lineHeight: '20px',
+    cursor: 'pointer',
+    border: 'none',
+    zIndex: 1,
+    textAlign: 'left',
+    background: active ? theme.color.secondary : focused ? theme.background.hoverable : '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',
+  display: 'inline-block',
+  width: '16px',
+  height: '11px',
+});
+
+export const SuiteContainer = styled.span<{ padding: number }>(({ padding }) => ({
+  paddingLeft: padding,
+  whiteSpace: 'normal',
+}));
+
+export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
+  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
+  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const checkboxRef = useRef<Checkbox>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const isSuiteFocused = useMemo(
+    () =>
+      Array.isArray(sidebarFocusedItem) &&
+      sidebarFocusedItem.length === suite.path.length &&
+      sidebarFocusedItem.every((x) => suite.path.includes(x)),
+    [suite, sidebarFocusedItem],
+  );
+  useEffect(
+    () => (suite.indeterminate ? checkboxRef.current?.setIndeterminate() : checkboxRef.current?.resetIndeterminate()),
+    [suite.indeterminate],
+  );
+
+  useEffect(() => {
+    if (isSuiteFocused) buttonRef.current?.focus();
+  }, [isSuiteFocused]);
+
+  const isRootSuite = suite.path.length == 0;
+
+  const handleCheck = (value: boolean): void => {
+    onSuiteToggle(suite.path, value);
+  };
+  const handleOpen = (): void => {
+    if (!isRootSuite) {
+      onSuiteOpen(suite.path, !suite.opened);
+      setSidebarFocusedItem(suite.path);
+    }
+  };
+  const handleFocus = (): void => {
+    setSidebarFocusedItem(suite.path);
+  };
+
+  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>
+      <CheckboxContainer>
+        <Checkbox
+          ref={checkboxRef}
+          checked={suite.skip ? false : suite.checked}
+          disabled={Boolean(suite.skip)}
+          onValueChange={handleCheck}
+        />
+      </CheckboxContainer>
+    </Container>
+  );
+}

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useCallback, useContext, useMemo, useRef } from 'react';
+import { CreeveyTest } from '../../../../types.js';
+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 { Checkbox, CheckboxContainer } from './Checkbox.js';
+import { getTestPath } from '../../../shared/helpers.js';
+
+export interface TestLinkProps {
+  title: string;
+  opened: boolean;
+  test: CreeveyTest;
+}
+
+export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
+  const { onSuiteToggle } = useContext(CreeveyContext);
+  const { onOpenTest } = useContext(SideBarContext);
+  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const emptyResults = (test.results?.length ?? 0) == 0;
+  const testPath = useMemo(() => getTestPath(test), [test]);
+
+  const isTestFocused = useMemo(
+    () =>
+      Array.isArray(sidebarFocusedItem) &&
+      testPath.length === sidebarFocusedItem.length &&
+      testPath.every((x) => sidebarFocusedItem.includes(x)),
+    [testPath, sidebarFocusedItem],
+  );
+
+  const handleCheck = useCallback(
+    (value: boolean): void => {
+      onSuiteToggle(testPath, value);
+    },
+    [testPath, onSuiteToggle],
+  );
+
+  useEffect(() => {
+    if (isTestFocused) buttonRef.current?.focus();
+  }, [isTestFocused]);
+
+  const handleOpen = useCallback((): void => {
+    onOpenTest(test);
+    setSidebarFocusedItem(getTestPath(test));
+  }, [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>
+      {/* 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}
+        />
+      </CheckboxContainer>
+    </Container>
+  );
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { styled, withTheme, Theme } from '@storybook/theming';
+import { Icons, Loader } from '@storybook/components';
+import { TestStatus } from '../../../../types.js';
+
+export interface TestStatusIconProps {
+  inverted?: boolean;
+  status?: TestStatus;
+  skip?: string | boolean;
+  theme: Theme;
+}
+
+const Container = styled.span({
+  width: 10,
+  height: 10,
+  padding: 1,
+  display: 'inline-block',
+});
+
+const Icon = styled(Icons)({
+  position: 'relative',
+  top: '1.5px',
+  verticalAlign: 'baseline',
+});
+
+const Spinner = styled(Loader)({
+  top: '14px',
+  left: '42px',
+});
+
+export const TestStatusIcon = withTheme(
+  ({ inverted, status, skip, theme }: TestStatusIconProps): JSX.Element | null => {
+    let icon = null;
+    switch (status) {
+      case 'failed': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.negative} icon="cross" />;
+        break;
+      }
+      case 'success': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.green} icon="check" />;
+        break;
+      }
+      case 'running': {
+        icon = <Spinner size={10} />;
+        break;
+      }
+      case 'pending': {
+        icon = <Icon color={inverted ? theme.color.lightest : theme.color.mediumdark} icon="time" />;
+        break;
+      }
+      default: {
+        if (skip) icon = <Icon color={inverted ? theme.color.lightest : undefined} icon="timer" />;
+        break;
+      }
+    }
+    return <Container>{icon}</Container>;
+  },
+);

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { IconButton, Icons } from '@storybook/components';
+import { styled, withTheme, Theme } from '@storybook/theming';
+import { TestStatus } from '../../../../types.js';
+import { CreeveyTestsStatus } from '../../../shared/helpers.js';
+
+export interface TestsStatusProps extends CreeveyTestsStatus {
+  onClickByStatus: (value: TestStatus) => void;
+  theme?: Theme;
+}
+
+const Container = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '14px',
+  lineHeight: '22px',
+});
+
+const IconContainer = styled.div<{ color?: string }>(({ color }) => ({
+  color: color ?? 'inherit',
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  margin: '0 4px',
+
+  '&:first-of-type': {
+    marginLeft: 0,
+  },
+
+  '& svg': {
+    marginRight: 5,
+    width: 10,
+    height: 10,
+  },
+}));
+
+const Divider = styled.div({
+  '&::before': {
+    content: "'/'",
+    display: 'block',
+    marginRight: 4,
+  },
+});
+
+const Button = styled(IconButton)({
+  marginTop: 0,
+  padding: 0,
+  height: '24px',
+});
+
+export const TestsStatus = withTheme(
+  ({
+    successCount,
+    failedCount,
+    pendingCount,
+    skippedCount,
+    onClickByStatus,
+    theme,
+  }: TestsStatusProps): JSX.Element => {
+    return (
+      <Container>
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button
+          onClick={() => {
+            onClickByStatus('pending');
+          }}
+        >
+          <IconContainer color={theme?.color.mediumdark}>
+            <Icons icon="time" />
+            {pendingCount}
+          </IconContainer>
+        </Button>
+        <Divider />
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button
+          onClick={() => {
+            onClickByStatus('success');
+          }}
+        >
+          <IconContainer color={theme?.color.green}>
+            <Icons icon="check" /> {successCount}
+          </IconContainer>
+        </Button>
+        <Divider />
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button
+          onClick={() => {
+            onClickByStatus('failed');
+          }}
+        >
+          <IconContainer color={theme?.color.negative}>
+            <Icons icon="cross" /> {failedCount}
+          </IconContainer>
+        </Button>
+        <Divider />
+        {/* @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623 */}
+        <Button>
+          <IconContainer color={theme?.color.defaultText}>
+            <Icons icon="timer" /> {skippedCount}
+          </IconContainer>
+        </Button>
+      </Container>
+    );
+  },
+);

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

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { styled, withTheme } from '@storybook/theming';
+import { opacify } from 'polished';
+
+const Container = withTheme(
+  styled.span(({ theme }) => ({
+    lineHeight: '10px',
+    display: 'inline-block',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
+    borderRadius: '3em',
+    padding: 2,
+    verticalAlign: 'middle',
+    marginLeft: 10,
+
+    input: {
+      appearance: 'none',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      margin: 0,
+      padding: 0,
+      border: 'none',
+      cursor: 'pointer',
+
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+
+    span: {
+      cursor: 'pointer',
+      display: 'inline-block',
+      transition: 'all 100ms ease-out',
+      userSelect: 'none',
+      borderRadius: '100%',
+      background: theme.background.bar,
+      boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`,
+      color: theme.color.defaultText,
+      width: 20,
+      height: 20,
+      boxSizing: 'border-box',
+      lineHeight: '19px',
+      textAlign: 'center',
+
+      '&:hover': {
+        boxShadow: `${opacify(0.3, theme.appBorderColor)} 0 0 0 1px inset`,
+      },
+
+      '&:active': {
+        boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 2px inset`,
+      },
+    },
+
+    'input:checked ~ span': {
+      marginLeft: 20,
+    },
+
+    'input:not(:checked) ~ span': {
+      marginRight: 20,
+    },
+  })),
+);
+
+interface ToggleProps {
+  value?: boolean;
+  onChange: (val: boolean) => void;
+}
+
+export const Toggle = ({ value, onChange }: ToggleProps): JSX.Element => (
+  <Container>
+    <input
+      type="checkbox"
+      onChange={() => {
+        onChange(!value);
+      }}
+      checked={value ?? false}
+    />
+    <span>{value ? '☪' : '☀'}</span>
+  </Container>
+);

package/src/client/web/CreeveyView/SideBar/index.ts

@@ -0,0 +1 @@
+export { SideBar } from './SideBar.js';

package/src/client/web/KeyboardEventsContext.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback, useContext } from 'react';
+import { CreeveySuite, isTest, noop } from '../../types.js';
+import { CreeveyViewFilter, filterTests, flattenSuite, getSuiteByPath, getTestPath } from '../shared/helpers.js';
+import { CreeveyContext } from './CreeveyContext.js';
+
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
+export interface KeyboardEventsContextType {
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
+}
+
+export const KeyboardEventsContext = React.createContext<KeyboardEventsContextType>({
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
+});
+
+export const KeyboardEvents = ({
+  children,
+  rootSuite,
+  filter,
+}: {
+  rootSuite: CreeveySuite;
+  filter: CreeveyViewFilter;
+  children: React.ReactChild;
+}): JSX.Element => {
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
+
+  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
+
+  const suiteList = flattenSuite(filterTests(rootSuite, filter));
+
+  const getFocusedItemIndex = useCallback(
+    (item: string[]): number => {
+      return suiteList.findIndex((x) => {
+        const path = isTest(x.suite) ? getTestPath(x.suite) : x.suite.path;
+
+        return item.length === path.length && item.every((focusedPath) => path.includes(focusedPath));
+      });
+    },
+    [suiteList],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (sidebarFocusedItem === null) return;
+
+      if (e.code === 'Enter') {
+        if (sidebarFocusedItem.length === 0) return;
+
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+        if (!focusedSuite) return;
+        if (!isTest(focusedSuite)) {
+          e.preventDefault();
+          onSuiteOpen(focusedSuite.path, !focusedSuite.opened);
+        }
+        if (isTest(focusedSuite) && focusedSuite.results?.length == 0) {
+          e.preventDefault();
+        }
+        return;
+      }
+      if (e.code === 'Space') {
+        e.preventDefault();
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+        if (!focusedSuite) return;
+        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+        onSuiteToggle(path, !focusedSuite.checked);
+      }
+      if (e.code === 'ArrowDown') {
+        const currentIndex = sidebarFocusedItem.length === 0 ? -1 : getFocusedItemIndex(sidebarFocusedItem);
+        if (currentIndex === suiteList.length - 1) return;
+        const nextSuite = suiteList[currentIndex + 1];
+        const nextPath = isTest(nextSuite.suite) ? getTestPath(nextSuite.suite) : nextSuite.suite.path;
+        setSidebarFocusedItem(nextPath);
+      }
+      if (e.code === 'ArrowUp') {
+        const currentIndex = sidebarFocusedItem.length === 0 ? 0 : getFocusedItemIndex(sidebarFocusedItem);
+        const nextSuite = currentIndex > 0 ? suiteList[currentIndex - 1].suite : rootSuite;
+        const nextPath = isTest(nextSuite) ? getTestPath(nextSuite) : nextSuite.path;
+        setSidebarFocusedItem(nextPath);
+      }
+
+      if (e.code === 'ArrowRight') {
+        if (sidebarFocusedItem.length === 0) return;
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+
+        if (!focusedSuite || isTest(focusedSuite)) return;
+        onSuiteOpen(focusedSuite.path, true);
+      }
+
+      if (e.code === 'ArrowLeft') {
+        if (sidebarFocusedItem.length === 0) return;
+        const focusedSuite = getSuiteByPath(rootSuite, sidebarFocusedItem);
+        if (!focusedSuite) return;
+        if (!isTest(focusedSuite) && focusedSuite.opened) {
+          onSuiteOpen(focusedSuite.path, false);
+          return;
+        }
+
+        const path = isTest(focusedSuite) ? getTestPath(focusedSuite) : focusedSuite.path;
+        setSidebarFocusedItem(path.slice(0, -1));
+      }
+    },
+    [onSuiteOpen, onSuiteToggle, rootSuite, suiteList, getFocusedItemIndex, sidebarFocusedItem],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
+  return (
+    <KeyboardEventsContext.Provider value={{ sidebarFocusedItem, setSidebarFocusedItem }}>
+      {children}
+    </KeyboardEventsContext.Provider>
+  );
+};