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

wix-style-react

import React from 'react';
import { snap, story, visualize } from 'storybook-snapper';
import TrendIndicator from '../TrendIndicator';
import { Cell, Layout } from '../../Layout';
import Box from '../../Box';

const commonProps = {};

const tests = [
  {
    describe: '',
    its: [
      {
        it: 'sanity',
        props: {},
      },
      {
        it: 'inverted',
        props: {
          inverted: true,
        },
      },
    ],
  },
];

export const runTests = (
  { themeName, testWithTheme } = { testWithTheme: i => i },
) => {
  visualize(
    `${themeName ? `${themeName}|` : ''}${TrendIndicator.displayName}`,
    () => {
      tests.forEach(({ describe, its }) => {
        story(describe, () => {
          its.map(({ it, props }) =>
            snap(it, () =>
              testWithTheme(
                <Box width="200">
                  <Layout cols={3} alignItems="center" justifyItems="center">
                    <Cell span={1}>
                      <TrendIndicator {...commonProps} {...props} value={-10} />
                    </Cell>
                    <Cell span={1}>
                      <TrendIndicator {...commonProps} {...props} value={0} />
                    </Cell>
                    <Cell span={1}>
                      <TrendIndicator {...commonProps} {...props} value={10} />
                    </Cell>
                  </Layout>
                </Box>,
              ),
            ),
          );
        });
      });
    },
  );
};