creevey 0.9.0-beta.20 → 0.9.0-beta.22

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

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { styled, Theme, withTheme } from '@storybook/theming';
+import { Icons } from '@storybook/components';
+import { transparentize } from 'polished';
+
+const Label = withTheme(
+  styled.label<{ theme: Theme; disabled?: boolean }>(({ theme, disabled }) => ({
+    display: 'inline-flex',
+    alignItems: 'baseline',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    fontSize: theme.typography.size.s1,
+    padding: '0px',
+    pointerEvents: disabled ? 'none' : 'auto',
+
+    input: {
+      display: 'inline-block',
+      opacity: '0',
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      zIndex: -1,
+
+      '&:focus + span': {
+        outline: 'none',
+        boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
+      },
+    },
+  })),
+);
+
+const Box = withTheme(
+  styled.span(({ theme }) => ({
+    display: 'inline-block',
+    width: '16px',
+    height: '16px',
+    border: theme.appBorderColor,
+    borderRadius: theme.input.borderRadius,
+    margin: '2px',
+
+    boxShadow: `${transparentize(0.8, theme.color.defaultText)} 0 0 0 1px inset`,
+    color: transparentize(0.3, theme.color.defaultText),
+    background: theme.background.content,
+
+    '&:hover, &:focus': {
+      outline: 'none',
+      boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
+    },
+  })),
+);
+
+const CircleIcon = styled(Icons)({
+  margin: '4px',
+  verticalAlign: 'baseline',
+});
+
+const CheckIcon = styled(Icons)({
+  margin: '2px',
+  verticalAlign: 'baseline',
+});
+
+interface CheckboxProps {
+  checked?: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+interface CheckboxState {
+  indeterminate: boolean;
+}
+
+export const CheckboxContainer = styled.div({
+  position: 'absolute',
+  left: '64px',
+  top: '6px',
+  zIndex: 2,
+});
+
+export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+  state: CheckboxState = { indeterminate: false };
+
+  handleIndeterminateChange = (value: boolean): void => {
+    this.setState({
+      indeterminate: value,
+    });
+  };
+  public setIndeterminate = (): void => {
+    this.handleIndeterminateChange(true);
+  };
+  public resetIndeterminate = (): void => {
+    this.handleIndeterminateChange(false);
+  };
+  render(): JSX.Element {
+    const { checked, disabled, onValueChange } = this.props;
+    const { indeterminate } = this.state;
+    return (
+      <Label disabled={disabled}>
+        <input
+          type="checkbox"
+          onChange={(e) => {
+            onValueChange(e.target.checked);
+          }}
+          checked={checked ?? false}
+        />
+        <Box>
+          {indeterminate ? (
+            <CircleIcon icon="circle" width="8" height="8" />
+          ) : checked ? (
+            <CheckIcon icon="check" width="12" height="12" />
+          ) : (
+            ' '
+          )}
+        </Box>
+      </Label>
+    );
+  }
+}

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

@@ -0,0 +1,140 @@
+import { Icons } from '@storybook/components';
+import { styled, Theme, withTheme } from '@storybook/theming';
+import React, { ChangeEvent, useContext, useRef, useState } from 'react';
+import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+
+interface SearchProps {
+  onChange: (arg: string) => void;
+  value: string;
+}
+
+const FilterField = withTheme(
+  styled.input(({ theme }) => ({
+    appearance: 'none',
+    border: 'none',
+    boxSizing: 'border-box',
+    display: 'block',
+    outline: 'none',
+    width: '100%',
+    background: 'transparent',
+    padding: 0,
+    fontSize: 'inherit',
+
+    '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },
+
+    '::placeholder': {
+      color: theme.color.mediumdark,
+    },
+
+    '&:placeholder-shown ~ button': {
+      opacity: 0,
+    },
+  })),
+);
+
+const CancelButton = withTheme(
+  styled.button(({ theme }) => ({
+    border: 0,
+    margin: 0,
+    padding: 4,
+    textDecoration: 'none',
+
+    background: theme.appBorderColor,
+    borderRadius: '1em',
+    cursor: 'pointer',
+    opacity: 1,
+    transition: 'all 150ms ease-out',
+
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: 2,
+
+    '> svg': {
+      display: 'block',
+      height: 8,
+      width: 8,
+      color: theme.input.color,
+      transition: 'all 150ms ease-out',
+    },
+  })),
+);
+
+const FilterForm = withTheme(
+  styled.form<{ theme: Theme; focussed: boolean }>(({ theme, focussed }) => ({
+    transition: 'all 150ms ease-out',
+    borderBottom: '1px solid transparent',
+    borderBottomColor: theme.appBorderColor,
+    outline: 0,
+    position: 'relative',
+    color: theme.input.color,
+
+    input: {
+      color: theme.input.color,
+      fontSize: theme.typography.size.s2 - 1,
+      lineHeight: '20px',
+      paddingTop: 2,
+      paddingBottom: 2,
+      paddingLeft: 20,
+      paddingRight: 20,
+    },
+
+    '> svg': {
+      transition: 'all 150ms ease-out',
+      position: 'absolute',
+      top: '50%',
+      height: 12,
+      width: 12,
+      transform: 'translateY(-50%)',
+      zIndex: 1,
+
+      background: 'transparent',
+
+      path: {
+        transition: 'all 150ms ease-out',
+        fill: 'currentColor',
+        opacity: focussed ? 1 : 0.3,
+      },
+    },
+  })),
+);
+
+export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
+  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const [focussed, onSetFocussed] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <FilterForm
+      autoComplete="off"
+      focussed={focussed}
+      onReset={() => {
+        onChange('');
+      }}
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <FilterField
+        type="text"
+        ref={searchRef}
+        onFocus={() => {
+          onSetFocussed(true);
+          setSidebarFocusedItem(null);
+        }}
+        onBlur={() => {
+          onSetFocussed(false);
+        }}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          onChange(e.target.value);
+        }}
+        placeholder="search by status or substring"
+        value={value}
+      />
+      <Icons icon="search" />
+      <CancelButton tabIndex={-1} type="reset" value="reset" title="Clear search">
+        <Icons icon="closeAlt" />
+      </CancelButton>
+    </FilterForm>
+  );
+};

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

@@ -0,0 +1,125 @@
+import React, { createContext, useContext } from 'react';
+import { transparentize } from 'polished';
+import { ScrollArea } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { SideBarHeader } from './SideBarHeader.js';
+import { CreeveySuite, CreeveyTest, noop, isTest } from '../../../../types.js';
+import {
+  filterTests,
+  CreeveyViewFilter,
+  flattenSuite,
+  countTestsStatus,
+  getCheckedTests,
+} from '../../../shared/helpers.js';
+import { CreeveyContext } from '../../CreeveyContext.js';
+import { SuiteLink } from './SuiteLink.js';
+import { TestLink } from './TestLink.js';
+
+export const SideBarContext = createContext<{ onOpenTest: (test: CreeveyTest) => void }>({
+  onOpenTest: noop,
+});
+
+export interface SideBarProps {
+  rootSuite: CreeveySuite;
+  openedTest: CreeveyTest | null;
+  onOpenTest: (test: CreeveyTest) => void;
+  filter: CreeveyViewFilter;
+  setFilter: (filter: CreeveyViewFilter) => void;
+}
+
+const Container = withTheme(
+  styled.div(({ theme }) => ({
+    width: '300px',
+    boxShadow: `0 0 5px  ${transparentize(0.8, theme.color.defaultText)}`,
+    zIndex: 1000,
+    background: theme.background.content,
+  })),
+);
+
+const ScrollContainer = styled.div({
+  height: 'calc(100vh - 165px)',
+  width: 300,
+  flex: 'none',
+  overflowY: 'auto',
+  position: 'sticky',
+  top: '0',
+  left: '0',
+});
+
+const Shadow = withTheme(
+  styled.div(({ theme }) => ({
+    position: 'sticky',
+    top: '0px',
+    boxShadow: `0 0 5px 2.5px ${transparentize(0.8, theme.color.defaultText)}`,
+    zIndex: 3,
+  })),
+);
+
+const SelectAllContainer = styled.div({
+  marginBottom: '30px',
+  paddingTop: '9px',
+});
+
+const TestsContainer = styled.div({
+  position: 'relative',
+  paddingBottom: '40px',
+});
+
+const Divider = withTheme(
+  styled.div(({ theme }) => ({
+    position: 'absolute',
+    height: '8px',
+    width: '100%',
+    zIndex: 3,
+    background: theme.background.content,
+  })),
+);
+
+export function SideBar({ rootSuite, openedTest, onOpenTest, filter, setFilter }: SideBarProps): JSX.Element {
+  const { onStart, onStop } = useContext(CreeveyContext);
+
+  // TODO Maybe need to do flatten first?
+  const suite = filterTests(rootSuite, filter);
+  const testsStatus = countTestsStatus(rootSuite);
+  const suiteList = flattenSuite(suite);
+  const countCheckedTests = getCheckedTests(rootSuite).length;
+
+  const handleStart = (): void => {
+    onStart(suite);
+  };
+
+  return (
+    <SideBarContext.Provider value={{ onOpenTest }}>
+      <Container>
+        <SideBarHeader
+          testsStatus={testsStatus}
+          filter={filter}
+          onFilterChange={setFilter}
+          onStart={handleStart}
+          onStop={onStop}
+          canStart={countCheckedTests !== 0}
+        />
+        <ScrollContainer>
+          <ScrollArea vertical>
+            <Shadow />
+            <TestsContainer>
+              <Divider />
+              {/* TODO Output message when nothing found */}
+              <SelectAllContainer>
+                <SuiteLink title="Select all" suite={rootSuite} data-testid="selectAll" />
+              </SelectAllContainer>
+              {suiteList.map(({ title, suite }) =>
+                // TODO Update components without re-mount
+                isTest(suite) ? (
+                  <TestLink key={suite.id} title={title} opened={suite.id == openedTest?.id} test={suite} />
+                ) : (
+                  <SuiteLink key={suite.path.join('/')} title={title} suite={suite} data-testid={title} />
+                ),
+              )}
+            </TestsContainer>
+          </ScrollArea>
+        </ScrollContainer>
+      </Container>
+    </SideBarContext.Provider>
+  );
+}

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>
+  );
+}