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

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import CircularProgressBar from '../CircularProgressBar';
import { storySettings } from './storySettings';
import { Skin } from '../constants';

const { dataHook } = storySettings;

const tests = [
  {
    describe: 'basic',
    its: [
      {
        it: 'default render',
        props: { value: 20 },
      },
    ],
  },
  {
    describe: 'progress indication',
    its: [
      {
        it: 'shown',
        props: { value: 20, showProgressIndication: true },
      },
      {
        it: 'hidden',
        props: { value: 20 },
      },
      {
        it: 'success icon is shown when progress is 100%',
        props: { value: 100, showProgressIndication: true },
      },
      {
        it: 'error icon is shown when there is an error',
        props: {
          value: 20,
          showProgressIndication: true,
          error: true,
          errorMessage: 'Some error',
        },
      },
    ],
  },
  {
    describe: 'custom label',
    its: [
      {
        it: 'with label',
        props: { label: '1/5', value: 20 },
      },
    ],
  },
  {
    describe: 'theme',
    its: [
      {
        it: 'light regular',
        props: { value: 20, light: true },
      },
      {
        it: 'light with an error',
        props: { value: 20, light: true, error: true },
      },
    ],
  },
  {
    describe: 'error',
    its: [
      {
        it: 'exists',
        props: { value: 20, error: true },
      },
      {
        it: 'does not exist',
        props: { value: 20, error: false },
      },
      {
        it: 'display an error icon',
        props: {
          value: 20,
          showProgressIndication: true,
          error: true,
          errorMessage: 'Some error',
        },
      },
    ],
  },
  {
    describe: 'skin',
    its: [
      {
        it: 'standard',
        props: { value: 20, skin: Skin.standard },
      },
      {
        it: 'premium',
        props: { value: 20, skin: Skin.standard },
      },
      {
        it: 'success',
        props: { value: 20, skin: Skin.success },
      },
      {
        it: 'standard light',
        props: { value: 20, skin: Skin.standard, light: true },
      },
      {
        it: 'premium light',
        props: { value: 20, skin: Skin.standard, light: true },
      },
      {
        it: 'success light',
        props: { value: 20, skin: Skin.success, light: true },
      },
    ],
  },
];

export const runTests = (
  { themeName, testWithTheme } = { testWithTheme: i => i },
) => {
  tests.forEach(({ describe, its }) => {
    its.forEach(({ it, props }) => {
      storiesOf(
        `${themeName ? `${themeName}|` : ''}CircularProgressBar/${describe}`,
        module,
      ).add(it, () =>
        testWithTheme(
          <div style={{ width: '40%' }}>
            <CircularProgressBar dataHook={dataHook} {...props} />
          </div>,
        ),
      );
    });
  });
};