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

wix-style-react

import React from 'react';
import { sidebarSkins } from '../../Sidebar/constants';
import SidebarNext from '../SidebarNext';
import { sidebarNextPrivateDriverFactory } from './SidebarNext.private.uni.driver';
import { createRendererWithUniDriver } from '../../../test/utils/unit';
import SidebarItemNext from '../../SidebarItemNext/SidebarItemNext';
import { sidebarItemNextDriverFactory } from '../../SidebarItemNext/SidebarItemNext.uni.driver';
import { uniTestkitFactoryCreator } from 'wix-ui-test-utils/vanilla';

const sidebarItemNextTestkitFactory = uniTestkitFactoryCreator(
  sidebarItemNextDriverFactory,
);

describe('Sidebar Next', () => {
  const render = createRendererWithUniDriver(sidebarNextPrivateDriverFactory);

  describe('Basic functionality', () => {
    it('should render an entry with no sub-entries', async () => {
      const { getByTestId } = render(
        <SidebarNext>
          <div data-testid="simple">123</div>
        </SidebarNext>,
      );

      expect(getByTestId('simple').textContent).toBe('123');
    });

    it('should update current selected entry in context when changed in props', async () => {
      const { rerender, container } = render(
        <SidebarNext selectedKey={'first-item'}>
          <SidebarItemNext itemKey={'first-item'} dataHook="first-item">
            <div>First</div>
          </SidebarItemNext>

          <SidebarItemNext itemKey={'second-item'} dataHook="second-item">
            <div>Second</div>
          </SidebarItemNext>
        </SidebarNext>,
      );

      const firstItemTestKit = sidebarItemNextTestkitFactory({
        wrapper: container,
        dataHook: 'first-item',
      });
      expect(await firstItemTestKit.isSelected()).toBe(true);

      rerender(
        <SidebarNext selectedKey={'second-item'}>
          <SidebarItemNext itemKey={'first-item'} dataHook="first-item">
            <div>First</div>
          </SidebarItemNext>

          <SidebarItemNext itemKey={'second-item'} dataHook="second-item">
            <div>Second</div>
          </SidebarItemNext>
        </SidebarNext>,
      );

      const secondItemTestKit = sidebarItemNextTestkitFactory({
        wrapper: container,
        dataHook: 'second-item',
      });
      expect(await secondItemTestKit.isSelected()).toBe(true);
    });

    it('should set sidebar skin to dark by default', async () => {
      const { driver } = render(<SidebarNext />);
      expect(await driver.getSkin()).toBe(sidebarSkins.dark);
    });

    Object.values(sidebarSkins).forEach(skin =>
      it(`should set sidebar skin to ${skin}`, async () => {
        const { driver } = render(<SidebarNext skin={skin} />);
        expect(await driver.getSkin()).toBe(skin);
      }),
    );

    it('should present a header', async () => {
      const { driver } = render(
        <SidebarNext header={<div>header</div>}>
          <div data-testid="content">456</div>
        </SidebarNext>,
      );

      expect(await driver.headerExists()).toBe(true);
    });

    it('should present a footer', async () => {
      const { driver } = render(
        <SidebarNext footer={<div>footer</div>}>
          <div data-testid="content">456</div>
        </SidebarNext>,
      );

      expect(await driver.footerExists()).toBe(true);
    });
  });
});