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

wix-style-react

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

import { Dropdown } from 'wix-style-react';

const style = {
  display: 'inline-block',
  padding: '0 5px',
  width: '140px',
  lineHeight: '22px',
};

const options = Array.from(new Array(30), (_, id) => ({
  id,
  value: `Option ${id + 1}`,
}));

const storySettings = {
  category: Category.COMPONENTS,
  storyName: 'Dropdown',
  dataHook: 'story-dropdown',
};

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

const TestTabSwitches = () => (
  <div>
    <div style={style}>
      30 options
      <br />
      <Dropdown
        options={options}
        dataHook={storySettings.dataHook}
        onSelect={() => {}}
      />
    </div>
  </div>
);

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

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

const DropdownTests = storiesOf(kind, module);

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