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

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import { uniTestkitFactoryCreator } from 'wix-ui-test-utils/vanilla';

import Range from '../Range';
import inputUniDriverFactory from '../../Input/Input.uni.driver';
import { datePickerUniDriverFactory } from '../../DatePicker/DatePicker.uni.driver';

import Input from '../../Input';
import DatePicker from '../../DatePicker';

const dataHooks = {
  focusedInput: 'focused-input',
  focusedDatePicker: 'focused-date-picker',
};

const datePickerDate = new Date('2020-01-01');

const FocusedInput = props => {
  React.useEffect(() => {
    async function setInputFocus() {
      const driver = uniTestkitFactoryCreator(inputUniDriverFactory)({
        wrapper: document.body,
        dataHook: dataHooks.focusedInput,
      });

      await driver.focus();
    }
    setInputFocus();
  }, []);

  return (
    <Input
      placeholder="placeholder"
      dataHook={dataHooks.focusedInput}
      {...props}
    />
  );
};

const FocusedDatePicker = props => {
  React.useEffect(() => {
    async function setDatePickerFocus() {
      const { inputDriver } = uniTestkitFactoryCreator(
        datePickerUniDriverFactory,
      )({
        wrapper: document.body,
        dataHook: dataHooks.focusedDatePicker,
      });

      await inputDriver.focus();
    }
    setDatePickerFocus();
  }, []);

  return (
    <DatePicker
      placeholderText="placeholder"
      dataHook={dataHooks.focusedDatePicker}
      value={datePickerDate}
      {...props}
    />
  );
};

const tests = [
  {
    describe: 'input',
    its: [
      {
        it: 'two elements',
        renderedComponent: (
          <Range>
            <Input placeholder="placeholder" />
            <Input placeholder="placeholder" />
          </Range>
        ),
      },
      {
        it: 'three elements',
        renderedComponent: (
          <Range>
            <Input placeholder="placeholder" />
            <Input placeholder="placeholder" />
            <Input placeholder="placeholder" />
          </Range>
        ),
      },
    ],
  },
  {
    describe: 'datePicker',
    its: [
      {
        it: 'two elements',
        renderedComponent: (
          <Range>
            <DatePicker value={datePickerDate} />
            <DatePicker value={datePickerDate} />
          </Range>
        ),
      },
      {
        it: 'three elements',
        renderedComponent: (
          <Range>
            <DatePicker value={datePickerDate} />
            <DatePicker value={datePickerDate} />
            <DatePicker value={datePickerDate} />
          </Range>
        ),
      },
    ],
  },
  {
    describe: 'focus',
    its: [
      {
        it: 'first input',
        renderedComponent: (
          <Range>
            <FocusedInput />
            <Input placeholder="placeholder" />
          </Range>
        ),
      },
      {
        it: 'last input',
        renderedComponent: (
          <Range>
            <Input placeholder="placeholder" />
            <FocusedInput />
          </Range>
        ),
      },
      {
        it: 'first datePicker',
        renderedComponent: (
          <Range>
            <FocusedDatePicker />
            <DatePicker value={datePickerDate} />
          </Range>
        ),
      },
      {
        it: 'last datePicker',
        renderedComponent: (
          <Range>
            <DatePicker value={datePickerDate} />
            <FocusedDatePicker />
          </Range>
        ),
      },
    ],
  },
];

tests.forEach(({ describe, its }) =>
  its.forEach(({ it, renderedComponent }) => {
    storiesOf(`Range/${describe}`, module).add(it, () => renderedComponent);
  }),
);