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

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import DropdownLayout from '../DropdownLayout';
import { storySettings } from './storySettings';
import { uniTestkitFactoryCreator } from 'wix-ui-test-utils/vanilla';
import { dropdownLayoutDriverFactory } from '../DropdownLayout.uni.driver';

const dropdownLayoutTestkitFactory = uniTestkitFactoryCreator(
  dropdownLayoutDriverFactory,
);

const { dataHook } = storySettings;

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

const optionNodeStyle = { backgroundColor: 'pink' };

const nodeOptions = [
  { id: 0, value: <div style={optionNodeStyle}>Option 1</div> },
  { id: 1, value: <div style={optionNodeStyle}>Option 2</div> },
  { id: 2, value: <div style={optionNodeStyle}>Option 3</div> },
  { id: 3, value: <div style={optionNodeStyle}>Option 4</div> },
];

const commonProps = {
  options: [
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
    { id: 3, value: 'Option 4' },
  ],
  visible: true,
};

const setColor = ({ selected, hovered, disabled }) =>
  (selected && 'red') || (hovered && 'green') || (disabled && 'grey');

const customBuilderFunction = ({ id, disabled, value }) => ({
  id,
  disabled,
  overrideStyle: true,
  value: props => <div style={{ color: setColor(props) }}>{value}</div>,
});

const customBuilderOptions = [
  customBuilderFunction({ id: 1, value: 'option 1' }),
  customBuilderFunction({ id: 2, value: 'option 2 disabled', disabled: true }),
  customBuilderFunction({ id: 3, value: 'option 3' }),
];

const fixedNodeStyles = {
  backgroundColor: 'red',
  padding: '10px',
};

const containerStyles = {
  width: '240px',
  lineHeight: '22px',
  border: '1px solid rgba(0, 0, 0, 0.6)',
  borderRadius: 6,
  overflow: 'auto',
  boxShadow: '0 0 6px rgba(0, 0, 0, 0.6)',
  padding: '6px 0',
  display: 'inline-block',
  margin: '0 20px ',
};

const booleanProps = [true, false];

const tests = [
  {
    describe: 'sanity',
    its: [
      {
        it: 'default',
        props: {},
      },
    ],
  },
  {
    describe: 'fixed node',
    its: [
      {
        it: 'fixedHeader',
        props: {
          fixedHeader: <div style={fixedNodeStyles}>I am a header</div>,
        },
      },
      {
        it: 'fixedFooter',
        props: {
          fixedFooter: <div style={fixedNodeStyles}>I am a footer</div>,
        },
      },
    ],
  },
  {
    describe: 'dropDirectionUp',
    its: booleanProps.map(value => ({
      it: value.toString(),
      props: { dropDirectionUp: value },
    })),
  },
  {
    describe: 'visible',
    its: booleanProps.map(value => ({
      it: value.toString(),
      props: { visible: value },
    })),
  },
  {
    describe: 'itemHeight',
    its: ['big', 'small'].map(heightOption => ({
      it: heightOption,
      props: { itemHeight: heightOption },
    })),
  },
  {
    describe: 'size',
    its: [
      {
        it: 'maxHeightPixels',
        props: { maxHeightPixels: 150 },
      },
      {
        it: 'minWidthPixels',
        props: { minWidthPixels: 200 },
      },
    ],
  },
  {
    describe: 'selectedId',
    its: [
      {
        it: 'selectedId',
        props: { selectedId: 0 },
      },
    ],
  },
  {
    describe: 'option',
    its: [
      {
        it: 'title',
        props: {
          options: [
            { id: 'first title', value: 'title', title: true },
            { id: 1, value: 'Option 1' },
            { id: 2, value: 'Option 2' },
          ],
        },
      },
      {
        it: 'disabled',
        props: {
          options: [
            { id: 'disabled', value: 'Disabled', disabled: true },
            { id: 1, value: 'Option 1' },
            { id: 2, value: 'Option 2' },
          ],
        },
      },
      {
        it: 'divider',
        props: {
          options: [
            { id: 1, value: 'Option 1' },
            { id: 2, value: '-' },
            { id: 3, value: 'Option 2' },
          ],
        },
      },
      {
        it: 'overrideStyle',
        props: {
          options: [
            { id: 1, value: 'option 1', overrideStyle: true },
            {
              id: 2,
              value: <div style={{ color: 'red' }}>option 2 - node</div>,
              overrideStyle: true,
            },
            {
              id: 3,
              value: 'option 3 disabled',
              overrideStyle: true,
              disabled: true,
            },
            {
              id: 4,
              value: (
                <div style={{ color: 'red' }}>option 4- node disabled</div>
              ),
              overrideStyle: true,
              disabled: true,
            },
          ],
        },
      },
      {
        it: 'overrideOptionStyle',
        props: {
          options: [
            { id: 1, value: 'option 1', overrideOptionStyle: true },
            {
              id: 2,
              value: <div style={{ color: 'red' }}>option 2 - node</div>,
              overrideOptionStyle: true,
            },
            {
              id: 3,
              value: 'option 3 disabled',
              overrideOptionStyle: true,
              disabled: true,
            },
            {
              id: 4,
              value: (
                <div style={{ color: 'red' }}>option 4- node disabled</div>
              ),
              overrideOptionStyle: true,
              disabled: true,
            },
          ],
        },
      },
      {
        it: 'custom builder',
        props: {
          options: customBuilderOptions,
        },
      },
    ],
  },
  {
    describe: 'inContainer',
    its: [
      {
        it: 'default',
        props: { inContainer: true },
      },
    ],
  },
  {
    describe: 'focusOnOption',
    its: [
      {
        it: 'Should mark the option 12',
        props: {
          options: Array(20)
            .fill(0)
            .map((_, id) => ({ id, value: `Option ${id}` })),
          focusOnOption: 12,
        },
      },
    ],
  },
];

tests.forEach(({ describe, its }) => {
  its.forEach(({ it, props }) => {
    storiesOf(`DropdownLayout ${describe ? '/' + describe : ''}`, module).add(
      it,
      () => (
        <div style={{ margin: '160px 0' }}>
          <div
            className="first"
            style={
              props.inContainer
                ? containerStyles
                : { width: '240px', display: 'inline-block' }
            }
          >
            <DropdownLayout {...commonProps} {...props} />
          </div>
          <div
            className="second"
            style={
              props.inContainer
                ? containerStyles
                : { width: '240px', float: 'right', display: 'inline-block' }
            }
          >
            <div dir="rtl">
              <DropdownLayout {...commonProps} {...props} />
            </div>
          </div>
        </div>
      ),
    );
  });
});

const interactiveTests = [
  {
    describe: 'option',
    its: [
      {
        it: 'custom builder on hover',
        props: { options: customBuilderOptions },
        componentDidMount: async () => {
          const driver = createDriver();
          await driver.mouseEnterAtOption(0);
        },
      },
      {
        it: 'custom builder on click',
        props: { options: customBuilderOptions },
        componentDidMount: async () => {
          const driver = createDriver();
          await driver.clickAtOption(0);
        },
      },
      {
        it: 'option on hover',
        props: {},
        componentDidMount: async () => {
          const driver = createDriver();
          await driver.mouseEnterAtOption(0);
        },
      },
      {
        it: 'option on click',
        props: {},
        componentDidMount: async () => {
          const driver = createDriver();
          await driver.clickAtOption(0);
        },
      },
      {
        it: 'option node on hover',
        props: { options: nodeOptions },
        componentDidMount: async () => {
          const driver = createDriver();
          await driver.mouseEnterAtOption(0);
        },
      },
      {
        it: 'option node on click',
        props: { options: nodeOptions },
        componentDidMount: async () => {
          const driver = createDriver();
          await driver.clickAtOption(0);
        },
      },
    ],
  },
];

class InteractiveDropdownLayout extends React.Component {
  async componentDidMount() {
    this.props.componentDidMount();
  }

  render() {
    return (
      <div style={{ margin: '160px 0' }}>
        <div style={{ width: '240px', display: 'inline-block' }}>
          <DropdownLayout
            dataHook={dataHook}
            {...commonProps}
            {...this.props}
          />
        </div>
      </div>
    );
  }
}

interactiveTests.forEach(({ describe, its }) => {
  its.forEach(({ it, props, componentDidMount }) => {
    storiesOf(
      `DropdownLayout ${describe ? '/' + describe : ''}`,
      module,
    ).add(it, () => (
      <InteractiveDropdownLayout
        {...props}
        componentDidMount={componentDidMount}
      />
    ));
  });
});