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

wix-style-react

import React from 'react';
import { createRendererWithUniDriver, cleanup } from '../../../test/utils/unit';

import ListItemSection from '../ListItemSection';
import { listItemSectionPrivateDriverFactory } from './ListItemSection.private.uni.driver';

describe('ListItemSection', () => {
  const renderListItemSection = (props = {}) => <ListItemSection {...props} />;
  const render = createRendererWithUniDriver(
    listItemSectionPrivateDriverFactory,
  );

  afterEach(cleanup);

  it('should render', async () => {
    const { driver } = render(renderListItemSection());

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

  it('should not have elements: title, suffix', async () => {
    const { driver } = render(renderListItemSection({}));

    expect(await driver.getTitle()).toBe('');
    expect(await driver.getSuffix().exists()).toBe(false);
  });

  it('should render title when provided', async () => {
    const { driver } = render(
      renderListItemSection({
        title: 'ListItemSection title',
      }),
    );

    expect(await driver.getTitle()).toBe('ListItemSection title');
  });

  describe('suffix', () => {
    it('should render suffix when provided', async () => {
      const suffix = 'suffix';
      const { driver } = render(
        renderListItemSection({
          title: 'ListItemSection title',
          suffix,
        }),
      );

      expect(await driver.getSuffix().exists()).toBe(true);
    });

    it('should render provided `suffix` node', async () => {
      const suffix = <div>Suffix</div>;
      const { driver } = render(
        renderListItemSection({
          title: 'ListItemSection title',
          suffix,
        }),
      );

      expect(await driver.getSuffix().exists()).toBe(true);
    });

    it('should call onClick when clicking suffix text button', async () => {
      const onClick = jest.fn();
      const suffix = 'suffix';
      const { driver } = render(
        renderListItemSection({
          title: 'ListItemSection title',
          suffix,
          onClick,
        }),
      );

      expect(onClick).not.toBeCalled();
      await driver.getSuffix().click();
      expect(onClick).toBeCalled();
    });

    it('should call onClick when clicking suffix node', async () => {
      const onClick = jest.fn();
      const suffix = <div>Suffix</div>;
      const { driver } = render(
        renderListItemSection({
          title: 'ListItemSection title',
          suffix,
          onClick,
        }),
      );

      expect(onClick).not.toBeCalled();
      await driver.getSuffix().click();
      expect(onClick).toBeCalled();
    });
  });

  it('should not call onClick when clicking elsewhere', async () => {
    const onClick = jest.fn();
    const suffix = 'suffix';
    const { driver } = render(
      renderListItemSection({
        title: 'ListItemSection title',
        suffix,
        onClick,
      }),
    );

    expect(onClick).not.toBeCalled();
    await driver.click();
    expect(onClick).not.toBeCalled();
  });

  it('should stop propagation when clicking on a divider and whitespace', async () => {
    const onClick = jest.fn();
    const { driver } = render(
      <div onClick={onClick}>
        <ListItemSection type="divider" dataHook="dh1" />
        <ListItemSection type="whitespace" dataHook="dh2" />
      </div>,
    );

    expect(onClick).not.toBeCalled();
    await (await driver.element()).querySelector('[data-hook="dh1"]').click();
    await (await driver.element()).querySelector('[data-hook="dh2"]').click();
    expect(onClick).not.toBeCalled();
  });
});