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

wix-style-react

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

import {
  cleanup,
  createRendererWithUniDriver,
} from '../../../test/utils/react/index';
import { toggleButtonPrivateDriverFactory } from './ToggleButton.private.uni.driver';
import ToggleButton from '../index';
import { dataHooks } from './storySettings';
import { SKINS, iconChildSize } from '../constants';

describe('ToggleButton', () => {
  afterEach(() => cleanup());

  const render = createRendererWithUniDriver(toggleButtonPrivateDriverFactory);

  describe('`skin` prop', () => {
    it.each(Object.values(SKINS))('should apply %s skin', async skin => {
      const props = {
        skin,
        labelValue: 'crop&rotate',
        children: <CropRotate />,
      };
      const { driver } = render(<ToggleButton {...props} />);

      expect(await driver.getSkin()).toEqual(skin);
    });
  });

  describe('Icon size ', () => {
    const dataHook = dataHooks.iconOfToggleButton;

    it.each(Object.entries(iconChildSize))(
      'should be %s when given size - %s',
      async (size, expected) => {
        const props = {
          size,
          labelValue: 'crop&rotate',
          children: <CropRotate data-hook={dataHook} />,
        };
        const { driver } = render(<ToggleButton {...props} />);

        expect(await driver.getIconSize()).toEqual(expected);
      },
    );
  });

  describe(`'selected' prop`, () => {
    it('should apply className when selected', async () => {
      const props = {
        selected: true,
        labelValue: 'crop&rotate',
        children: <CropRotate />,
      };
      const { driver } = render(<ToggleButton {...props} />);

      expect(await driver.isButtonSelected()).toEqual(true);
    });
  });

  describe(`'disabled' prop`, () => {
    it('should be disabled', async () => {
      const props = {
        disabled: true,
        labelValue: 'crop&rotate',
        children: <CropRotate />,
      };
      const { driver } = render(<ToggleButton {...props} />);

      expect(await driver.isButtonDisabled()).toEqual(true);
    });
  });

  describe('Label placement ', () => {
    const dataHook = dataHooks.iconOfToggleButton;

    it.each(['tooltip', 'end', 'bottom'])(
      'should be %s',
      async labelPlacement => {
        const props = {
          labelPlacement,
          labelValue: 'crop&rotate',
          children: <CropRotate data-hook={dataHook} />,
        };
        const { driver } = render(<ToggleButton {...props} />);

        expect(await driver.getLabelPlacement()).toEqual(labelPlacement);
      },
    );
  });

  describe('tooltipProps', () => {
    it('`disabled` property should set disable tooltip', async () => {
      const props = {
        labelValue: 'crop&rotate',
        tooltipProps: { disabled: true },
        children: <CropRotate />,
      };

      const { driver } = render(<ToggleButton {...props} />);

      await driver.mouseEnter();

      expect(await driver.tooltipExists()).toEqual(false);
    });
  });

  describe('Label value ', () => {
    const dataHook = dataHooks.iconOfToggleButton;

    it.each([
      ['Tooltip label', 'tooltip'],
      ['End label', 'end'],
      ['Bottom label', 'bottom'],
    ])(
      'should be "%s" when placement is "%s"',
      async (labelValue, labelPlacement) => {
        const props = {
          labelPlacement,
          labelValue,
          children: <CropRotate data-hook={dataHook} />,
        };
        const { driver } = render(<ToggleButton {...props} />);

        expect(await driver.getLabelValue()).toEqual(labelValue);
      },
    );
  });
});