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

wix-style-react

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

import { getTestStoryKind } from '../../../stories/storiesHierarchy';
import { storySettings, testStories } from './storySettings';
import { RTLWrapper } from '../../../stories/utils/RTLWrapper';
import MultiSelect from '..';

import ExampleReorderable from './Reorderable';
import TestTabsSwitches from './TestTabsSwitches';
import StateSelection from './StateSelection';

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

const MultiSelectTests = storiesOf(kind, module);
MultiSelectTests.add(testStories.withMaxNumRows, () => (
  <RTLWrapper>
    <div style={{ width: '400px' }}>
      numOfRows=2:
      <MultiSelect
        dataHook="multi-select-limited"
        tags={[
          { id: '1', label: 'aaaaaaaaaaaa' },
          { id: '2', label: 'aaaaaaaaaaaa' },
          { id: '3', label: 'aaaaaaaaaaaa' },
          { id: '4', label: 'aaaaaaaaaaaa' },
          { id: '5', label: 'aaaaaaaaaaaa' },
          { id: '6', label: 'aaaaaaaaaaaa' },
        ]}
        maxNumRows={2}
      />
    </div>
  </RTLWrapper>
));

MultiSelectTests.add(testStories.reorderable, () => (
  <RTLWrapper>
    <ExampleReorderable />
  </RTLWrapper>
));

MultiSelectTests.add(testStories.tabsSwitches, () => (
  <div>
    <input data-hook="input-for-focus-1" />
    <TestTabsSwitches />
    <input data-hook="input-for-focus-2" />
  </div>
));

MultiSelectTests.add(testStories.stateMultiSelect, () => (
  <StateSelection dataHook={storySettings.dataHook} />
));