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

wix-style-react

import React from 'react';
import { snap, story, visualize } from 'storybook-snapper';
import { sidebarSkins } from '../../Sidebar/constants';
import { SidebarNextContext } from '../../SidebarNext/SidebarNextAPI';
import SidebarItemNext from '../SidebarItemNext';
import { Layout } from '../../Layout';
import Smile from 'wix-ui-icons-common/Smile';

const commonProps = {
  // use for repeated props across the tests (e.g. {buttonText: 'example'})
};

const tests = [
  {
    describe: 'Sanity',
    its: [
      {
        it: 'Sidebar item selected',
        props: {
          selectedKey: 'first-item',
          itemKey: 'first-item',
        },
      },
      {
        it: 'Sidebar item not selected',
        props: {
          selectedKey: 'second-item',
          itemKey: 'first-item',
        },
      },
      {
        it: 'Sidebar item disabled',
        props: {
          disabled: true,
        },
      },
      {
        it: 'Sidebar item with suffix',
        props: {
          itemKey: 'first-item',
          suffix: <Smile/>,
        },
      },
    ],
  },
];

visualize(SidebarItemNext.displayName, () => {
  tests.forEach(({ describe, its }) => {
    story(describe, () => {
      its.map(({ it, props }) =>
        snap(it, () => {
          const skins = Object.values(sidebarSkins);

          return (
            <Layout cols={skins.length}>
              {skins.map(sidebarSkin => (
                <SidebarNextContext.Provider value={{skin: sidebarSkin, selectedKey: props.selectedKey}}>
                  <SidebarItemNext {...commonProps} {...props}>
                    <div>First</div>
                  </SidebarItemNext>
                </SidebarNextContext.Provider>
              ))}
            </Layout>
          );
        }),
      );
    });
  });
});