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

wix-style-react

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';

import { getTestStoryKind } from '../../../stories/storiesHierarchy';
import TestTabSwitches from './TestTabSwitches';
import { Category } from '../../../stories/storiesHierarchy';

import MultiSelectCheckbox from '../MultiSelectCheckbox';

export const storySettings = {
  category: Category.COMPONENTS,
  storyName: 'MultiSelectCheckbox',
  dataHook: 'multi-select-checkbox',
};

export const testStories = {
  multiSelectCheckbox: 'MultiSelectCheckbox',
  tabsSwitches: 'Tabs switches',
};

export const options = [
  'Alabama',
  'Arkansas',
  'California',
  'New York',
  'Ohio',
  'Texas',
  'Utah',
  'Washington',
].map(state => ({ value: state, id: state }));

const valueParser = option => (option.label ? option.label : option.value);

const MultiSelectCheckboxTest = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  const onSelect = option => setSelectedOptions([...selectedOptions, option]);
  const onDeselect = option =>
    setSelectedOptions(selectedOptions.filter(item => item !== option));

  return (
    <MultiSelectCheckbox
      options={options}
      selectedOptions={selectedOptions}
      onSelect={onSelect}
      onDeselect={onDeselect}
      valueParser={valueParser}
      dataHook={storySettings.dataHook}
    />
  );
};

const kind = getTestStoryKind({
  category: storySettings.category,
  storyName: storySettings.storyName,
});

const TestContainer = ({ children }) => (
  <div
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: '#f0f4f7',
    }}
  >
    {children}
  </div>
);

const MultiSelectCheckboxTests = storiesOf(kind, module);

MultiSelectCheckboxTests.add(testStories.multiSelectCheckbox, () => (
  <MultiSelectCheckboxTest />
));

MultiSelectCheckboxTests.add(testStories.tabsSwitches, () => (
  <TestContainer>
    <input data-hook="input-for-initial-focus" />
    <TestTabSwitches />
    <input style={{ position: 'relative', top: '400px' }} />
  </TestContainer>
));