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

wix-style-react

import React from 'react';
import { snap, story, visualize } from 'storybook-snapper';
import RadarChart from '../RadarChart';

const commonProps = {};

const threeDataPoints = [
  {
    value: 10,
    label: 'Site Sessions',
  },
  {
    value: 20,
    label: 'Visitors',
  },
  {
    value: 30,
    label: 'Total Orders',
  },
];

const tenDataPoints = [
  {
    value: 70,
    label: 'Data point 1',
    color: 'A1',
  },
  {
    value: 70,
    label: 'Data point 2',
    color: 'A1',
  },
  {
    value: 40,
    label: 'Data point 3',
    color: 'A1',
  },
  {
    value: 70,
    label: 'Data point 4',
    color: 'A1',
  },
  {
    value: 50,
    label: 'Data point 5',
    color: 'A1',
  },
  {
    value: 30,
    label: 'Data point 6',
    color: 'A1',
  },
  {
    value: 50,
    label: 'Data point 7',
    color: 'A6',
  },
  {
    value: 65,
    label: 'Data point 8',
    color: 'A6',
  },
  {
    value: 80,
    label: 'Data point 9',
    color: 'A6',
  },
  {
    value: 55,
    label: 'Data point 10',
    color: 'A6',
  },
];

const fourItemScale = [
  { value: 25, label: '25%' },
  { value: 50, label: '50%' },
  { value: 75, label: '75%' },
  { value: 100, label: '100%' },
];

const fiveItemScale = [
  { value: 20, label: '20%' },
  { value: 40, label: '40%' },
  { value: 60, label: '60%' },
  { value: 80, label: '80%' },
  { value: 100, label: '100%' },
];

const tests = [
  {
    describe: 'data prop',
    its: [
      { it: 'no data points', props: {} },
      {
        it: '3 data points',
        props: { data: threeDataPoints },
      },
      {
        it: '10 data points',
        props: { data: tenDataPoints },
      },
    ],
  },
  {
    describe: 'disabled prop',
    its: [
      {
        it: 'set to true',
        props: { data: threeDataPoints, disabled: true },
      },
    ],
  },
  {
    describe: 'scale prop',
    its: [
      { it: 'default scale', props: { data: threeDataPoints } },
      {
        it: '4 item scale',
        props: { data: threeDataPoints, scale: fourItemScale },
      },
      {
        it: '5 item scale',
        props: { data: threeDataPoints, scale: fiveItemScale },
      },
    ],
  },
  {
    describe: 'width prop',
    its: [
      { it: 'default width', props: { data: threeDataPoints } },
      { it: 'width = 200', props: { data: threeDataPoints, width: 200 } },
      { it: 'width = 300', props: { data: threeDataPoints, width: 300 } },
    ],
  },
  {
    describe: 'labelDistance property',
    its: [
      { it: 'default labelDistance', props: { data: threeDataPoints } },
      {
        it: 'labelDistance = 100',
        props: { data: threeDataPoints, labelDistance: 100 },
      },
      {
        it: 'labelDistance = 200',
        props: { data: threeDataPoints, labelDistance: 200 },
      },
    ],
  },
];

export const runTests = () => {
  visualize(RadarChart.displayName, () => {
    tests.forEach(({ describe, its }) => {
      story(describe, () => {
        its.map(({ it, props }) =>
          snap(it, () => <RadarChart {...commonProps} {...props} />),
        );
      });
    });
  });
};