wix-style-react/src/SegmentedToggle/ToggleIcon/test/ToggleIcon.spec.js

wix-style-react

import React from 'react';
import { createUniDriverFactory } from 'wix-ui-test-utils/uni-driver-factory';
import LockLocked from 'wix-ui-icons-common/LockLocked';

import ToggleIcon from '../ToggleIcon';
import { toggleIconPrivateDriverFactory } from '../ToggleIcon.private.uni.driver';

describe('ToggleIcon', () => {
  const createDriver = createUniDriverFactory(toggleIconPrivateDriverFactory);

  it('should render', async () => {
    const driver = createDriver(<ToggleIcon />);
    expect(await driver.exists()).toBe(true);
  });

  it('should be controlled', async () => {
    const driver = createDriver(<ToggleIcon />);
    expect(await driver.isSelected()).toBe(false);
    await driver.click();
    expect(await driver.isSelected()).toBe(false);
  });

  describe(`'children' prop`, () => {
    it('should render node', async () => {
      const dataHook = 'icon';
      const icon = (
        <div data-hook={dataHook}>
          <LockLocked />
        </div>
      );
      const driver = createDriver(<ToggleIcon children={icon} />);
      expect(await driver.childExists(`[data-hook="${dataHook}"`)).toBe(true);
    });
  });

  describe(`'onClick' prop`, () => {
    it(`should return when clicked`, async () => {
      const onClick = jest.fn();
      const driver = createDriver(<ToggleIcon onClick={onClick} />);
      await driver.click();
      expect(onClick).toHaveBeenCalled();
    });
  });

  describe(`'disabled' prop`, () => {
    it(`should disable onClick event`, async () => {
      const onClick = jest.fn();
      const driver = createDriver(<ToggleIcon disabled onClick={onClick} />);
      await driver.click();
      expect(onClick).toHaveBeenCalledTimes(0);
    });
  });

  describe(`'selected' prop`, () => {
    it(`should set selection styles`, async () => {
      const driver = createDriver(<ToggleIcon selected />);
      expect(await driver.isSelected()).toBe(true);
    });
  });
});