@zohodesk/components/es/CheckBox/__tests__/CheckBox.spec.js

In this Package, we Provide Some Basic Components to Build Web App

import React from 'react';
import CheckBox from "../CheckBox";
import { render } from "@testing-library/react";
describe('CheckBox component', () => {
  test('Should be render with the basic set of default props', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, null));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render ID', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      id: "checkBoxId",
      text: "checkBoxText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const palette = ['primary', 'danger'];
  test.each(palette)('Should render palette and checkbox with checked - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      checked: true,
      palette: palette,
      text: "checkBoxTest",
      active: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be disable', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      disabled: true,
      checked: true,
      text: "checkboxDisable"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be isReadOnly', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      isReadOnly: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render disabledTitle and title', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      disabled: true,
      disabledTitle: "checkBoxdisableTitle",
      text: "CheckBoxdisabledTitle",
      title: "checkBoxTitle"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render title', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "CheckBoxdisabledTitle",
      title: "checkBoxTitle"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render text', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "CheckBoxdisabledTitle"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const size = ['small', 'medium'];
  test.each(size)('Should render size - %s', size => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      checked: true,
      size: size
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const labelPalette = ['default', 'primary', 'secondary', 'danger', 'mandatory'];
  test.each(labelPalette)('Should render size - %s', labelPalette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "checkboxText",
      labelPalette: labelPalette
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const labelSize = ['small', 'medium', 'large'];
  test.each(labelSize)('Should render labelSize - %s', labelSize => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "checkboxText",
      labelSize: labelSize
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render isFilled', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      isFilled: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render isClipped is false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      isClipped: false
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('eleRef prop is a function', () => {
    // Create a mock function
    const mockEleRef = jest.fn();
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      getRef: mockEleRef
    }));
    expect(mockEleRef).toHaveBeenCalled();
  });
  const variant = ['default', 'primary'];
  test.each(variant)('Should render labelSize - %s', variant => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "checkboxText",
      variant: variant
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test.each(palette)('Should render active - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "checkboxText",
      checked: true,
      active: true,
      palette: palette
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render name', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      name: "checkBoxName"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render activeStyle is minus', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      activeStyle: "minus"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('Should be render dataSelectorId', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      dataSelectorId: "dataSelectorIdCheck"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the Custom Props', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "checkboxText",
      customProps: {
        CheckBoxProps: {
          'data-props': true
        },
        LabelProps: {
          'customClass': 'checkBoxCustomClass'
        }
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the Custom class', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      text: "checkboxText",
      checked: true,
      customClass: {
        customCheckBox: 'customCheckBoxClass',
        customLabel: 'customLabelClass',
        customCBoxSize: 'customCBoxSizeClass',
        customTickSize: 'customTickSizeClass'
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role  true and entering their values', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      checked: true,
      a11y: {
        ariaLabel: 'ariaLabelCheckBox',
        ariaLabelledby: 'ariaLabelledbyCheckBox',
        ariaChecked: true,
        ariaHidden: true,
        role: 'checkBox2'
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role  false and entering their values', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(CheckBox, {
      checked: true,
      a11y: {
        ariaLabel: 'ariaLabelCheckBox',
        ariaLabelledby: 'ariaLabelledbyCheckBox',
        ariaChecked: false,
        ariaHidden: false,
        role: 'checkBox3'
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
});