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

wix-style-react

import React from 'react';
import { createRendererWithUniDriver } from '../../../test/utils/unit';
import { sidebarSkins } from '../../Sidebar/constants';
import { SidebarNextContext } from '../../SidebarNext/SidebarNextAPI';
import SidebarItemNext from '../SidebarItemNext';
import { sidebarItemNextPrivateDriverFactory } from './SidebarItemNext.private.uni.driver';

describe(SidebarItemNext.displayName, () => {
  const render = (ui, context) => {
    return createRendererWithUniDriver(sidebarItemNextPrivateDriverFactory, {
      wrapper: ({ children }) => (
        <SidebarNextContext.Provider value={context}>
          {children}
        </SidebarNextContext.Provider>
      ),
    })(ui);
  };

  const renderWithDefaultContext = ui =>
    render(ui, {
      selectedKey: 'simple',
      skin: sidebarSkins.dark,
    });

  describe('properties', () => {
    describe('suffix', () => {
      it('should present suffix when provided', async () => {
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext suffix={<div />}>123</SidebarItemNext>,
        );

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

      it('should not present suffix if disabled', async () => {
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext suffix={<div />} disabled>
            123
          </SidebarItemNext>,
        );

        expect(await driver.suffixExists()).toBe(false);
      });
    });

    describe('disabled', () => {
      it('should be enabled by default', async () => {
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext>123</SidebarItemNext>,
        );

        expect(await driver.isDisabled()).toBe(false);
      });

      it('should be disabled when set to disabled', async () => {
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext disabled>123</SidebarItemNext>,
        );

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

    describe('selected', () => {
      it('should be selected if passed as selected from context', async () => {
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext itemKey={'simple'}>123</SidebarItemNext>,
        );

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

      it('should not be selected if not passed as selected from context', async () => {
        const context = {
          selectedKey: 'simple2',
          skin: sidebarSkins.dark,
        };

        const { driver } = render(
          <SidebarItemNext itemKey={'simple'}>123</SidebarItemNext>,
          context,
        );
        expect(await driver.isSelected()).toBe(false);
      });
    });

    describe('onClick', () => {
      it('should call onClick on click', async () => {
        const onClickSpy = jest.fn();
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext onClick={onClickSpy}>123</SidebarItemNext>,
        );

        await driver.click();
        expect(onClickSpy).toHaveBeenCalledTimes(1);
      });

      it('should not run onClick when item is disabled', async () => {
        const onClickSpy = jest.fn();
        const { driver } = renderWithDefaultContext(
          <SidebarItemNext onClick={onClickSpy} disabled>
            123
          </SidebarItemNext>,
        );

        await driver.click();
        expect(onClickSpy).not.toHaveBeenCalled();
      });
    });

    describe('skin', () => {
      Object.values(sidebarSkins).forEach(skin =>
        it(`should have skin: ${skin}`, async () => {
          const context = {
            selectedKey: 'simple',
            skin,
          };

          const { driver } = render(
            <SidebarItemNext>123</SidebarItemNext>,
            context,
          );
          expect(await driver.getSkin()).toBe(skin);
        }),
      );
    });
  });
});