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

wix-style-react

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

import MainExample from './MainExample';

const tests = [
  {
    describe: 'TableToolbar',
    its: [
      {
        it: 'should display table toolbar',
        component: () => <MainExample />,
      },

      {
        it: 'should display table toolbar in RTL',
        component: () => (
          <div className="rtl" dir="rtl">
            <MainExample />
          </div>
        ),
      },
      {
        it: 'should display items with layout="button"',
        component: () => (
          <TableToolbar>
            <TableToolbar.ItemGroup position="start">
              <TableToolbar.Item>
                <TableToolbar.Title>My Table</TableToolbar.Title>
              </TableToolbar.Item>
              <TableToolbar.Item layout="button">
                <Button>Button 1</Button>
              </TableToolbar.Item>
              <TableToolbar.Item layout="button">
                <Button>Button 2</Button>
              </TableToolbar.Item>
            </TableToolbar.ItemGroup>
          </TableToolbar>
        ),
      },
      {
        it: 'should display items with divider',
        component: () => (
          <TableToolbar>
            <TableToolbar.ItemGroup position="start">
              <TableToolbar.Item>
                <TableToolbar.Title>My Table</TableToolbar.Title>
              </TableToolbar.Item>
              <TableToolbar.Divider />
              <TableToolbar.Item>
                <Button>Button 2</Button>
              </TableToolbar.Item>
            </TableToolbar.ItemGroup>
          </TableToolbar>
        ),
      },
      {
        it: 'should display items with selected count',
        component: () => (
          <TableToolbar>
            <TableToolbar.ItemGroup position="start">
              <TableToolbar.Item>
                <TableToolbar.SelectedCount>{`12 Selected`}</TableToolbar.SelectedCount>
              </TableToolbar.Item>
            </TableToolbar.ItemGroup>
            <TableToolbar.ItemGroup position="end">
              <TableToolbar.Item layout="button">
                <Button skin="light">Export</Button>
              </TableToolbar.Item>
              <TableToolbar.Item layout="button">
                <Button skin="light">Duplicate</Button>
              </TableToolbar.Item>
              <TableToolbar.Item layout="button">
                <Button skin="light">Edit</Button>
              </TableToolbar.Item>
              <TableToolbar.Divider />
            </TableToolbar.ItemGroup>
          </TableToolbar>
        ),
      },
    ],
  },
];

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