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

wix-style-react

import React from 'react';
import { snap, story, visualize } from 'storybook-snapper';
import SidebarSubMenuNext from '../SidebarSubMenuNext';
import { sidebarSkins } from '../../Sidebar/constants';
import { SidebarNextContext } from '../../SidebarNext/SidebarNextAPI';
import { Layout } from '../../Layout';

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

const tests = [
  {
    describe: 'sanity',
    its: [
      {
        it: 'submenu selected',
        props: {
          selectedKey: 'first-item',
          itemKey: 'first-item',
        },
      },
      {
        it: 'submenu not selected',
        props: {
          selectedKey: 'second-item',
          itemKey: 'first-item',
        },
      },
      {
        it: 'disabled',
        props: {
          disabled: true,
        },
      },
    ],
  },
];

visualize(SidebarSubMenuNext.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 && props.selectedKey}}>
                  <SidebarSubMenuNext {...commonProps} {...props}>
                    <div>First</div>
                  </SidebarSubMenuNext>
                </SidebarNextContext.Provider>
              ))}
            </Layout>
          );
        }),
      );
    });
  });
});