wix-style-react/src/DatePicker/test/DatePicker.e2eStory.js

wix-style-react

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { getTestStoryKind } from '../../../stories/storiesHierarchy';
import DatePicker from '..';
import { Category } from '../../../stories/storiesHierarchy';

export const storySettings = {
  category: Category.COMPONENTS,
  storyName: 'DatePicker',
  dataHook: 'storybook-datepicker',
};

export const testStories = {
  datepicker: 'DatePicker',
  notClosing: 'Not closing on select',
  withDropdowns: 'DatePicker with dropdowns',
};

const ExampleDatePicker = props => {
  const defaultValue = new Date('2017/05/01');
  const [value, setValue] = useState(defaultValue);
  const onChange = newValue => setValue(newValue);

  return (
    <DatePicker
      value={value}
      dataHook={storySettings.dataHook}
      onChange={onChange}
      dateFormatV2="yyyy/LL/dd"
      placeholderText="Select Date"
      shouldCloseOnSelect
      showYearDropdown={false}
      showMonthDropdown={false}
      locale="en"
      twoMonths={false}
      {...props}
    />
  );
};

const kind = getTestStoryKind(storySettings);

storiesOf(kind, module).add(testStories.datepicker, () => {
  return (
    <div>
      <ExampleDatePicker />
    </div>
  );
});

storiesOf(kind, module).add(testStories.notClosing, () => {
  return (
    <div>
      <ExampleDatePicker shouldCloseOnSelect={false} />
    </div>
  );
});

storiesOf(kind, module).add(testStories.withDropdowns, () => {
  return (
    <div>
      <ExampleDatePicker showYearDropdown showMonthDropdown />
    </div>
  );
});