wix-style-react/src/EditableTitle/test/EditableTitle.visual.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import { uniTestkitFactoryCreator } from 'wix-ui-test-utils/vanilla';
import { editableTitleUniDriverFactory } from '../EditableTitle.uni.driver';
import WixStyleReactProvider from '../../WixStyleReactProvider';

import EditableTitle from '../EditableTitle';

const tests = [
  {
    describe: 'values',
    its: [
      {
        it: 'Initial Value',
        props: {
          initialValue: 'Initial Value',
        },
      },
      {
        it: 'Default value',
        props: {
          defaultValue: 'default value',
        },
      },
      {
        it: 'Default value & Initial value',
        props: {
          defaultValue: 'default value',
          initialValue: 'Initial Value',
        },
      },
    ],
  },
  {
    describe: 'ellipsis',
    its: [
      {
        it: 'Initial Value',
        props: {
          initialValue:
            'Some Title Some Title Some Title Some Title Some Title Some Title',
        },
      },
      {
        it: 'Default value',
        props: {
          defaultValue:
            'Some Title Some Title Some Title Some Title Some Title Some Title',
        },
      },
    ],
  },
];

const interactiveDataHook = 'interactive-editable-title';

const createDriver = dataHook =>
  uniTestkitFactoryCreator(editableTitleUniDriverFactory)({
    wrapper: document.body,
    dataHook,
  });

class ClickedEditableTitle extends React.Component {
  async componentDidMount() {
    const driver = createDriver(interactiveDataHook);
    await driver.clickHeading();
  }

  render() {
    return <EditableTitle {...this.props} dataHook={interactiveDataHook} />;
  }
}

const componentsVariations = [
  {
    testTitle: 'EditableTitle',
    Component: props => <EditableTitle {...props} />,
  },
  {
    testTitle: 'EditableTitle/clicked',
    Component: props => <ClickedEditableTitle {...props} />,
  },
  {
    testTitle: 'Layout And Spacing| EditableTitle',
    Component: props => (
      <WixStyleReactProvider
        features={{ reducedSpacingAndImprovedLayout: true }}
      >
        <EditableTitle {...props} />
      </WixStyleReactProvider>
    ),
  },
  {
    testTitle: 'Layout And Spacing| EditableTitle/clicked',
    Component: props => (
      <WixStyleReactProvider
        features={{ reducedSpacingAndImprovedLayout: true }}
      >
        <ClickedEditableTitle {...props} />
      </WixStyleReactProvider>
    ),
  },
];

componentsVariations.forEach(({ testTitle, Component }) => {
  tests.forEach(({ describe, its }) => {
    its.forEach(({ it, props }) => {
      storiesOf(`${testTitle}${describe ? '/' + describe : ''}`, module).add(
        it,
        () => <div style={{ width: '300px' }}>{<Component {...props} />}</div>,
      );
    });
  });
});