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

wix-style-react

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

const commonProps = {};

const tests = [
  {
    describe: 'sanity',
    its: [
      {
        it: 'Sidebar with header',
        props: {
          header: <div>Header</div>,
        },
      },
      {
        it: 'Sidebar with footer',
        props: {
          footer: <div>Footer</div>,
        },
      },
    ],
  },
  {
    describe: 'skin',
    its: [
      {
        it: 'Sidebar with default dark skin',
      },
      {
        it: 'Sidebar with light skin',
        props: {
          skin: 'light',
        },
      },
    ],
  },
];

visualize(SidebarNext.displayName, () => {
  tests.forEach(({ describe, its }) => {
    story(describe, () => {
      its.map(({ it, props }) =>
        snap(it, () => (
          <div style={{ height: '500px', color: 'white' }}>
            <SidebarNext {...commonProps} {...props}>
            <SidebarSubMenuNext
                key={'first-item'}
                itemKey={'first-item'}
                dataHook="first-item"
              >
                <div>SubMenu</div>
              </SidebarSubMenuNext>
              <SidebarItemNext
                key={'first-item'}
                itemKey={'first-item'}
                dataHook="first-item"
              >
                <div>First</div>
              </SidebarItemNext>
            </SidebarNext>
          </div>
        )),
      );
    });
  });
});