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

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import { uniTestkitFactoryCreator } from 'wix-ui-test-utils/vanilla';

import Sidebar from '..';
import Box from '../../Box';
import { Layout } from '../../Layout';
import { sidebarSkins } from '../constants';
import WixStyleReactProvider from '../../WixStyleReactProvider';
import SidebarSectionItem from '../../SidebarSectionItem';
import SidebarBackButton from '../../SidebarBackButton';
import sidebarSectionItemDriver from '../../SidebarSectionItem/SidebarSectionItem.uni.driver';
import { sidebarBackButtonDriverFactory } from '../../SidebarBackButton/SidebarBackButton.uni.driver';

const sidebarSectionItemTestkitFactory = uniTestkitFactoryCreator(
  sidebarSectionItemDriver,
);

const sidebarBackButtonTestkitFactory = uniTestkitFactoryCreator(
  sidebarBackButtonDriverFactory,
);

const createItemDriver = dataHook =>
  sidebarSectionItemTestkitFactory({
    wrapper: document.body,
    dataHook,
  });

const createBackButtonDriver = dataHook =>
  sidebarBackButtonTestkitFactory({
    wrapper: document.body,
    dataHook,
  });

const navigateClickInnerItemSideEffect = async () => {
  const appsDriver = createItemDriver('apps');
  await appsDriver.click();

  const appsMarketDriver = createItemDriver('app-market');
  await appsMarketDriver.click();
};

const navigateClickOpenParentSideEffect = async () => {
  const appsDriver = createItemDriver('apps');
  await appsDriver.click();
  await appsDriver.click();
};

const navigateClickOther1stLevelItemSideEffect = async () => {
  const appsDriver = createItemDriver('apps');
  const settingsDriver = createItemDriver('settings');

  await appsDriver.click();
  await settingsDriver.click();
};

const navigateClickBackSideEffect = async () => {
  const appsDriver = createItemDriver('apps');
  await appsDriver.click();

  const backButtonDriver = createBackButtonDriver('back');
  await backButtonDriver.click();
};

const testsWithWsrProvider = [
  {
    describe: 'sidebarExperimentCollapsible',
    its: [
      {
        it: 'should render sidebar',
        sideefect: () => {},
      },
      {
        it: 'should navigate',
        sideEffect: navigateClickInnerItemSideEffect,
      },
      {
        it: 'should collapse parent on second click',
        sideEffect: navigateClickOpenParentSideEffect,
      },
      {
        it: 'should collapse open menu when clicking other first level item',
        sideEffect: navigateClickOther1stLevelItemSideEffect,
      },
    ],
  },
];

const SidebarNavigation = ({ executeSideEffect }) => {
  React.useEffect(() => {
    async function sideEffect() {
      if (executeSideEffect) {
        await executeSideEffect();
      }
      return;
    }
    sideEffect();
  }, [executeSideEffect]);

  return (
    <Sidebar selectedKey={'settings'}>
      <Sidebar.Item itemKey={'settings'} key={'settings'}>
        <SidebarSectionItem dataHook="settings">Settings</SidebarSectionItem>
      </Sidebar.Item>

      <Sidebar.Item
        itemKey={'apps'}
        innerMenu={[
          <Sidebar.BackButton key={'back'}>
            <SidebarBackButton dataHook="back">Main Menu</SidebarBackButton>
          </Sidebar.BackButton>,
          <Sidebar.Item itemKey={'app-market'} key={'app-market'}>
            <SidebarSectionItem dataHook="app-market">
              App Market
            </SidebarSectionItem>
          </Sidebar.Item>,
          <SidebarSectionItem key={'manage-apps'}>
            Manage Apps
          </SidebarSectionItem>,
        ]}
      >
        <SidebarSectionItem dataHook="apps" drillable>
          Apps
        </SidebarSectionItem>
      </Sidebar.Item>
    </Sidebar>
  );
};

const SidebarWithDisabledInnerItems = () => {
  return (
    <Sidebar selectedKey={'app-market'}>
      <Sidebar.Item itemKey={'settings'} key={'settings'}>
        <SidebarSectionItem dataHook="settings">Settings</SidebarSectionItem>
      </Sidebar.Item>

      <Sidebar.Item
        itemKey={'apps'}
        innerMenu={[
          <Sidebar.BackButton key={'back'}>
            <SidebarBackButton dataHook="back">Main Menu</SidebarBackButton>
          </Sidebar.BackButton>,
          <Sidebar.Item itemKey={'app-market'} key={'app-market'}>
            <SidebarSectionItem dataHook="app-market">
              App Market
            </SidebarSectionItem>
          </Sidebar.Item>,
          <SidebarSectionItem
            disabled
            itemKey={'manage-apps'}
            key={'manage-apps'}
          >
            Manage Apps
          </SidebarSectionItem>,
        ]}
      >
        <SidebarSectionItem dataHook="apps" drillable>
          Apps
        </SidebarSectionItem>
      </Sidebar.Item>
    </Sidebar>
  );
};

export const runTests = (
  { themeName, testWithTheme } = { testWithTheme: i => i },
) => {
  const storiesTitle = `${themeName ? `${themeName}|` : ''}Sidebar`;

  testsWithWsrProvider.forEach(({ describe, its }) =>
    its.map(({ it, sideEffect }) =>
      storiesOf(`${storiesTitle}/${describe}`, module).add(it, () =>
        testWithTheme(
          <div style={{ height: '500px', color: 'white' }}>
            <WixStyleReactProvider
              features={{
                sidebarExperimentCollapsible: true,
              }}
            >
              <SidebarNavigation executeSideEffect={sideEffect} />
            </WixStyleReactProvider>
          </div>,
        ),
      ),
    ),
  );

  storiesOf(storiesTitle, module).add('Sanity', () =>
    testWithTheme(
      <div style={{ height: '500px', color: 'white' }}>
        <Sidebar selectedKey={'item1'}>
          <Sidebar.PersistentHeader>
            <div
              style={{
                textAlign: 'center',
                fontSize: '20px',
                margin: '10px',
              }}
            >
              Simple Sidebar
            </div>
          </Sidebar.PersistentHeader>

          <Sidebar.Item
            itemKey={'item1'}
            innerMenu={[
              <Sidebar.BackButton>
                <div>Back</div>
              </Sidebar.BackButton>,
              <Sidebar.Item itemKey={'item4'}>
                <div>Inner Item 1</div>
              </Sidebar.Item>,
              <Sidebar.Item itemKey={'item5'}>
                <div>Inner Item 2</div>
              </Sidebar.Item>,
            ]}
          >
            <div>Item with internal navigation</div>
          </Sidebar.Item>
          <Sidebar.Item itemKey={'item2'} disable="true">
            <div disable="true">Disabled item</div>
          </Sidebar.Item>
          <Sidebar.Item itemKey={'item3'}>
            <div>A simple clickable item</div>
          </Sidebar.Item>

          <Sidebar.PersistentFooter>
            <div
              style={{
                textAlign: 'center',
                fontSize: '20px',
                margin: '10px',
              }}
            >
              Sidebar Footer
            </div>
          </Sidebar.PersistentFooter>
        </Sidebar>
      </div>,
    ),
  );

  storiesOf(storiesTitle, module).add('Light', () =>
    testWithTheme(
      <div style={{ height: '500px', backgroundColor: '#f9f9f9' }}>
        <Sidebar selectedKey={'item1'} skin="light">
          <Sidebar.PersistentHeader>
            <div
              style={{ textAlign: 'center', fontSize: '20px', margin: '10px' }}
            >
              Simple Sidebar
            </div>
          </Sidebar.PersistentHeader>

          <Sidebar.Item
            itemKey={'item1'}
            innerMenu={[
              <Sidebar.BackButton>
                <div>Back</div>
              </Sidebar.BackButton>,
              <Sidebar.Item itemKey={'item4'}>
                <div>Inner Item 1</div>
              </Sidebar.Item>,
              <Sidebar.Item itemKey={'item5'}>
                <div>Inner Item 2</div>
              </Sidebar.Item>,
            ]}
          >
            <div>Item with internal navigation</div>
          </Sidebar.Item>
          <Sidebar.Item itemKey={'item2'} disable="true">
            <div disable="true">Disabled item</div>
          </Sidebar.Item>
          <Sidebar.Item itemKey={'item3'}>
            <div>A simple clickable item</div>
          </Sidebar.Item>

          <Sidebar.PersistentFooter>
            <div
              style={{ textAlign: 'center', fontSize: '20px', margin: '10px' }}
            >
              Sidebar Footer
            </div>
          </Sidebar.PersistentFooter>
        </Sidebar>
      </div>,
    ),
  );

  storiesOf(storiesTitle, module).add('Hidden', () =>
    testWithTheme(
      <div style={{ height: '500px', color: 'white' }}>
        <Sidebar selectedKey={'item1'} isHidden>
          <Sidebar.PersistentHeader>
            <div
              style={{ textAlign: 'center', fontSize: '20px', margin: '10px' }}
            >
              Simple Sidebar
            </div>
          </Sidebar.PersistentHeader>

          <Sidebar.Item itemKey={'item1'}>
            <div>A simple clickable item</div>
          </Sidebar.Item>

          <Sidebar.PersistentFooter>
            <div
              style={{ textAlign: 'center', fontSize: '20px', margin: '10px' }}
            >
              Sidebar Footer
            </div>
          </Sidebar.PersistentFooter>
        </Sidebar>
      </div>,
    ),
  );

  storiesOf(storiesTitle, module).add('Scrollbar', () => {
    const skins = Object.values(sidebarSkins);

    return testWithTheme(
      <Layout cols={skins.length}>
        {skins.map(sidebarSkin => (
          <Box height="500px">
            <Sidebar skin={sidebarSkin}>
              <Sidebar.PersistentHeader>
                <Box
                  verticalAlign="middle"
                  align="center"
                  color="red"
                  height="100px"
                  fontSize="20px"
                  margin="10px"
                >
                  Header
                </Box>
              </Sidebar.PersistentHeader>

              <Sidebar.Item>
                <Box
                  color="red"
                  height="500px"
                  align="center"
                  fontSize="20px"
                  margin="10px"
                >
                  Sidebar Item
                </Box>
              </Sidebar.Item>

              <Sidebar.PersistentFooter>
                <Box
                  verticalAlign="middle"
                  align="center"
                  color="red"
                  margin="10px"
                  fontSize="20px"
                >
                  Sidebar Footer
                </Box>
              </Sidebar.PersistentFooter>
            </Sidebar>
          </Box>
        ))}
      </Layout>,
    );
  });

  storiesOf(storiesTitle, module).add('Navigation Back', () =>
    testWithTheme(
      <div style={{ height: '500px', color: 'white' }}>
        <SidebarNavigation executeSideEffect={navigateClickBackSideEffect} />
      </div>,
    ),
  );

  storiesOf(storiesTitle, module).add('Navigation', () =>
    testWithTheme(
      <div style={{ height: '500px', color: 'white' }}>
        <SidebarNavigation
          executeSideEffect={navigateClickInnerItemSideEffect}
        />
      </div>,
    ),
  );

  storiesOf(storiesTitle, module).add('Disabled Inner Item', () =>
    testWithTheme(
      <Layout cols={2}>
        {[true, false].map(sidebarExperimentCollapsible => (
          <div style={{ height: '500px', color: 'white' }}>
            <WixStyleReactProvider
              features={{
                sidebarExperimentCollapsible,
              }}
            >
              <SidebarWithDisabledInnerItems />
            </WixStyleReactProvider>
          </div>
        ))}
      </Layout>,
    ),
  );
};