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

wix-style-react

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

import TagList from '../TagList';
import { tagListPrivateDriverFactory } from './TagList.private.uni.driver';

describe(TagList.displayName, () => {
  const render = createRendererWithUniDriver(tagListPrivateDriverFactory);

  afterEach(cleanup);

  it('should render', async () => {
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
        ]}
      />,
    );

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

  it('should not show toggle more button', async () => {
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
        ]}
      />,
    );

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

  it('should show toggle more button when prop is passed', async () => {
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
          {
            id: '2',
            children: 'Tag 2',
          },
          {
            id: '3',
            children: 'Tag 3',
          },
          {
            id: '4',
            children: 'Tag 4',
          },
        ]}
        toggleMoreButton={(amountOfHiddenTags, isExpanded) => ({
          label: isExpanded ? 'Show Less' : `+${amountOfHiddenTags} More`,
          tooltipContent: !isExpanded && 'Show More',
        })}
      />,
    );

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

  it('should click toggle more button', async () => {
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
          {
            id: '2',
            children: 'Tag 2',
          },
          {
            id: '3',
            children: 'Tag 3',
          },
          {
            id: '4',
            children: 'Tag 4',
          },
        ]}
        toggleMoreButton={(amountOfHiddenTags, isExpanded) => ({
          label: isExpanded ? 'Show Less' : `+${amountOfHiddenTags} More`,
          tooltipContent: !isExpanded && 'Show More',
        })}
      />,
    );
    expect(await driver.toggleMoreButtonLabel()).toEqual('+1 More');
    await driver.clickToggleMoreButton();
    expect(await driver.toggleMoreButtonLabel()).toEqual('Show Less');
  });

  it('should not show action button', async () => {
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
        ]}
      />,
    );

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

  it('should show action button', async () => {
    const actionButtonLabel = 'Do Action';
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
        ]}
        actionButton={{
          label: actionButtonLabel,
        }}
      />,
    );

    expect(await driver.actionButtonExists()).toBe(true);
    expect(await driver.actionButtonLabel()).toBe(actionButtonLabel);
  });

  it('should click action button', async () => {
    const onActionButtonClickFn = jest.fn();
    const { driver } = render(
      <TagList
        tags={[
          {
            id: '1',
            children: 'Some Tag',
          },
        ]}
        actionButton={{
          onClick: onActionButtonClickFn,
        }}
      />,
    );
    await driver.clickActionButton();
    expect(onActionButtonClickFn).toHaveBeenCalled();
  });

  it('should trigger onRemove when removing a tag', async () => {
    const onTagRemove = jest.fn();
    const id = 'one';
    const { driver } = render(
      <TagList
        onTagRemove={onTagRemove}
        tags={[
          {
            id,
            children: 'Some Tag',
          },
        ]}
      />,
    );
    await driver.removeTag(id);
    expect(onTagRemove).toHaveBeenCalledWith(id);
  });
});