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

wix-style-react

import React from 'react';
import Badge from 'wix-ui-icons-common/Badge';

import SidebarSectionItem from '../SidebarSectionItem';
import WixStyleReactProvider from '../../WixStyleReactProvider';
import sidebarSectionItemPrivateDriverFactory from './SidebarSectionItem.private.uni.driver';
import { createRendererWithUniDriver, cleanup } from '../../../test/utils/unit';

describe('SidebarSectionItem', () => {
  const render = createRendererWithUniDriver(
    sidebarSectionItemPrivateDriverFactory,
  );
  const sampleText = 'Some text';
  const newBadgeText = 'New';

  afterEach(() => {
    cleanup();
  });

  it('should render', async () => {
    const { driver } = render(
      <SidebarSectionItem>{sampleText}</SidebarSectionItem>,
    );

    expect(await driver.exists()).toBe(true);
    expect(await driver.hasPrefix()).toBe(false);
    expect(await driver.hasSuffix()).toBe(false);
    expect(await driver.isDisabled()).toBe(false);
    expect(await driver.isSelected()).toBe(false);
  });

  it('should render the text when passing `children` prop', async () => {
    const { driver } = render(
      <SidebarSectionItem>{sampleText}</SidebarSectionItem>,
    );

    expect(await driver.getText()).toBe(sampleText);
  });

  it('should invoke `onClick` with mouse event when clicking', async () => {
    const expectedMouseEvent = expect.any(Object);
    const onClick = jest.fn();
    const { driver } = render(
      <SidebarSectionItem onClick={onClick}>{sampleText}</SidebarSectionItem>,
    );

    await driver.click();

    expect(onClick).toBeCalledWith(expectedMouseEvent);
  });

  it('should render the chevron when passing `drillable` and hovering', async () => {
    const { driver } = render(
      <SidebarSectionItem drillable>{sampleText}</SidebarSectionItem>,
    );

    await driver.hover();

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

  it('should render the chevron when passing `drillable` and `alwaysDisplayChevron` without hover', async () => {
    const { driver } = render(
      <SidebarSectionItem drillable alwaysDisplayChevron>
        {sampleText}
      </SidebarSectionItem>,
    );

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

  it("should driver return isSelect() if it's is", async () => {
    const { driver } = render(
      <SidebarSectionItem selected>{sampleText}</SidebarSectionItem>,
    );

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

  it('should render the title text', async () => {
    const { driver } = render(
      <SidebarSectionItem>{sampleText}</SidebarSectionItem>,
    );

    expect(await driver.getTitleText()).toBe(sampleText);
  });

  it('should get the title text ignoring badge text, when badge is rendered', async () => {
    const { driver } = render(
      <SidebarSectionItem suffix={<Badge>{newBadgeText}</Badge>}>
        {sampleText}
      </SidebarSectionItem>,
    );

    expect(await driver.getTitleText()).toBe(sampleText);
    expect(await driver.getTitleText()).not.toContain(newBadgeText);
  });

  describe('Disabled', () => {
    it('should not invoke `onClick` when clicking', async () => {
      const onClick = jest.fn();
      const { driver } = render(
        <SidebarSectionItem disabled onClick={onClick}>
          {sampleText}
        </SidebarSectionItem>,
      );

      await driver.click();

      expect(onClick).not.toBeCalled();
    });

    it('should not render the chevron when passing `drillable` hovering', async () => {
      const { driver } = render(
        <SidebarSectionItem disabled drillable>
          {sampleText}
        </SidebarSectionItem>,
      );

      await driver.hover();

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

    it('should render disabled button', async () => {
      const { driver } = render(
        <SidebarSectionItem disabled>{sampleText}</SidebarSectionItem>,
      );

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

  it('should render the prefix', async () => {
    const { driver } = render(
      <SidebarSectionItem prefix={<Badge />}>{sampleText}</SidebarSectionItem>,
    );

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

  describe('Suffix', () => {
    it('should render the suffix', async () => {
      const { driver } = render(
        <SidebarSectionItem suffix={<Badge />}>
          {sampleText}
        </SidebarSectionItem>,
      );

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

    it('should not render the chevron when hovering', async () => {
      const { driver } = render(
        <SidebarSectionItem suffix={<Badge />}>
          {sampleText}
        </SidebarSectionItem>,
      );

      await driver.hover();

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