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

wix-style-react

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

const tests = [
  {
    describe: 'sanity',
    its: [
      {
        it: '3 bars',
        props: {
          data: [
            { label: 'one', values: [1, 1] },
            { label: 'two', values: [2, 0] },
            { label: 'three', values: [0, 2] },
          ],
        },
      },
      {
        it: '12 bars',
        props: {
          data: [
            { label: 'Jan 20', values: [500, 200] },
            { label: 'Feb 20', values: [200, 700] },
            { label: 'Mar 20', values: [0, 400] },
            { label: 'Apr 20', values: [900, 100] },
            { label: 'Mai 20', values: [300, 300] },
            { label: 'Jun 20', values: [400, 300] },
            { label: 'Jul 20', values: [100, 100] },
            { label: 'Aug 20', values: [0, 0] },
            { label: 'Sep 20', values: [800, 0] },
            { label: 'Oct 20', values: [600, 300] },
            { label: 'Nov 20', values: [200, 300] },
            { label: 'Dec 20', values: [300, 200] },
          ],
        },
      },
    ],
  },
  {
    describe: 'width',
    its: [
      {
        it: '20 bars with 300px',
        props: {
          width: 300,
          data: [
            { label: 'Jan 20', values: [500, 200] },
            { label: 'Feb 20', values: [200, 700] },
            { label: 'Mar 20', values: [0, 400] },
            { label: 'Apr 20', values: [900, 100] },
            { label: 'Mai 20', values: [300, 300] },
            { label: 'Jun 20', values: [400, 300] },
            { label: 'Jul 20', values: [100, 100] },
            { label: 'Aug 20', values: [0, 0] },
            { label: 'Sep 20', values: [800, 0] },
            { label: 'Oct 20', values: [600, 300] },
            { label: 'Nov 20', values: [200, 300] },
            { label: 'Dec 20', values: [300, 200] },
            { label: 'Mai 21', values: [300, 300] },
            { label: 'Jun 22', values: [400, 300] },
            { label: 'Jul 23', values: [100, 100] },
            { label: 'Aug 24', values: [0, 0] },
            { label: 'Sep 25', values: [800, 0] },
            { label: 'Oct 26', values: [600, 300] },
            { label: 'Nov 27', values: [200, 300] },
            { label: 'Dec 28', values: [300, 200] },
            { label: 'Dec 29', values: [300, 200] },
          ],
        },
      },
      {
        it: '3 bars with 1000px',
        props: {
          width: 1000,
          data: [
            { label: 'Jan 20', values: [500, 200] },
            { label: 'Feb 20', values: [200, 700] },
            { label: 'Mar 20', values: [0, 400] },
          ],
        },
      },
    ],
  },
  {
    describe: 'label',
    its: [
      {
        it: 'labels with ellipsis',
        props: {
          data: [
            { label: 'Jan 20 Very long long long', values: [500, 200] },
            { label: 'Feb 20 Very long long long', values: [200, 700] },
            { label: 'Mar 20 Very long long long', values: [0, 400] },
            { label: 'Apr 20 Very long long long', values: [900, 100] },
            { label: 'Mai 20 Very long long long', values: [300, 300] },
            { label: 'Jun 20 Very long long long', values: [400, 300] },
            { label: 'Jul 20 Very long long long', values: [100, 100] },
            { label: 'Aug 20 Very long long long', values: [0, 0] },
            { label: 'Sep 20 Very long long long', values: [800, 0] },
            { label: 'Oct 20 Very long long long', values: [600, 300] },
            { label: 'Nov 20 Very long long long', values: [200, 300] },
            { label: 'Dec 20 Very long long long', values: [300, 200] },
          ],
        },
      },
    ],
  },
];

tests.forEach(({ describe, its }) => {
  its.forEach(({ it, props }) => {
    storiesOf(
      `${StackedBarChart.displayName}${describe ? '/' + describe : ''}`,
      module,
    ).add(it, () => <StackedBarChart {...props} />);
  });
});