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

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import Slider from '../Slider';
import Box from '../../Box';
import { Cell, Layout } from '../../Layout';

const commonProps = {
  min: 0,
  max: 10,
  value: 4,
  displayMarks: false,
  onChange: e => e,
  direction: 'horizontal',
};

const tests = [
  {
    describe: 'Horizontal',
    its: [
      {
        it: 'default',
        props: {
          ...commonProps,
        },
      },
      {
        it: 'disabled',
        props: {
          ...commonProps,
          disabled: true,
        },
      },
      {
        it: 'displayMarks',
        props: {
          ...commonProps,
          displayMarks: true,
        },
      },
      {
        it: 'step = 2',
        props: {
          ...commonProps,
          step: 2,
          displayMarks: true,
        },
      },
      {
        it: 'custom marks',
        props: {
          ...commonProps,
          marks: {
            0: '$0',
            2: '$79',
            4: '$129',
            6: '$199',
            8: '$349',
            10: '$499',
          },
          displayMarks: true,
        },
      },
      {
        it: 'start point',
        props: { ...commonProps, startPoint: 4, displayMarks: true },
      },
    ],
  },
  {
    describe: 'Vertical',
    its: [
      {
        it: 'default',
        props: {
          ...commonProps,
          direction: 'vertical',
        },
      },
      {
        it: 'disabled',
        props: {
          ...commonProps,
          disabled: true,
          direction: 'vertical',
        },
      },
      {
        it: 'displayMarks',
        props: {
          ...commonProps,
          displayMarks: true,
          direction: 'vertical',
        },
      },
      {
        it: 'step = 2',
        props: {
          ...commonProps,
          step: 2,
          displayMarks: true,
          direction: 'vertical',
        },
      },
      {
        it: 'custom marks',
        props: {
          ...commonProps,
          marks: {
            0: '$0',
            2: '$79',
            4: '$129',
            6: '$199',
            8: '$349',
            10: '$499',
          },
          displayMarks: true,
          direction: 'vertical',
        },
      },
      {
        it: 'start point',
        props: {
          ...commonProps,
          startPoint: 4,
          displayMarks: true,
          direction: 'vertical',
        },
      },
    ],
  },
];

tests.forEach(({ describe, its }) => {
  its.forEach(({ it, props }) => {
    storiesOf(`Slider${describe ? '/' + describe : ''}`, module).add(it, () => (
      <Box margin={'sp2'} direction={'vertical'}>
        <Layout>
          {[0, 4, 10].map((value, key) => (
            <Cell key={key} span={props.direction === 'vertical' ? 3 : 12}>
              {props.direction === 'vertical' ? (
                <div style={{ height: 500 }}>
                  <Slider {...commonProps} {...props} value={value} />
                </div>
              ) : (
                <Slider {...commonProps} {...props} value={value} />
              )}
            </Cell>
          ))}
        </Layout>
      </Box>
    ));
  });
});