shlinkio / shlink-web-client

import { ChangeEvent, PropsWithChildren } from 'react';

import { mount, ReactWrapper } from 'enzyme';

import { Mock } from 'ts-mockery';

import Checkbox from '../../src/utils/Checkbox';

import { BooleanControlProps } from '../../src/utils/BooleanControl';

describe('<Checkbox />', () => {

  let wrapped: ReactWrapper;

  const createComponent = (props: PropsWithChildren<BooleanControlProps> = {}) => {

    wrapped = mount(<Checkbox {...props} />);

    return wrapped;

  };

  afterEach(() => wrapped?.unmount());

  it('includes extra class names when provided', () => {

    const classNames = [ 'foo', 'bar', 'baz' ];

    expect.assertions(classNames.length);

    classNames.forEach((className) => {

      const wrapped = createComponent({ className });

      expect(wrapped.prop('className')).toContain(className);

    });

  });

  it('marks input as checked if defined', () => {

    const checkeds = [ true, false ];

    expect.assertions(checkeds.length);

    checkeds.forEach((checked) => {

      const wrapped = createComponent({ checked });

      const input = wrapped.find('input');

      expect(input.prop('checked')).toEqual(checked);

    });

  });

  it('renders provided children inside the label', () => {

    const labels = [ 'foo', 'bar', 'baz' ];

    expect.assertions(labels.length);

    labels.forEach((children) => {

      const wrapped = createComponent({ children });

      const label = wrapped.find('label');

      expect(label.text()).toEqual(children);

    });

  });

  it('changes checked status on input change', () => {

    const onChange = jest.fn();

    const e = Mock.of<ChangeEvent<HTMLInputElement>>({ target: { checked: false } });

    const wrapped = createComponent({ checked: true, onChange });

    const input = wrapped.find('input');

    (input.prop('onChange') as Function)(e);

    expect(onChange).toHaveBeenCalledWith(false, e);

  });

  it('allows setting inline rendering', () => {

    const wrapped = createComponent({ inline: true });

    const control = wrapped.find('.custom-control');

    expect(control.prop('style')).toEqual({ display: 'inline-block' });

  });

});