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

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

import React from 'react';
import { render } from '@testing-library/react';
import Radio from "../Radio.js";
describe('Radio', () => {
  test('rendering the defult props', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, null));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the ID', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      id: "RadioID"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the Name', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      name: "RadioName"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the Value', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      value: "RadioValue"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const palette = ['primary', 'danger'];
  test.each(palette)('rendering palette - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      palette: palette
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test.each(palette)('rendering the Checked is true for palette - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      palette: palette,
      active: true,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test.each(palette)('rendering the disabled is true for palette - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      disabled: true,
      palette: palette,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the isReadOnly is true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      isReadOnly: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the disabledTitle', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      disabled: true,
      disabledTitle: "radioDisableTitle",
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the title', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      title: "radioTitle",
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the text', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const labelPalette = ['default', 'primary', 'danger', 'mandatory'];
  test.each(labelPalette)('rendering labelPalette - %s', labelPalette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      labelPalette: labelPalette,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const size = ['small', 'medium'];
  test.each(size)('rendering size - %s', size => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      size: size
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const labelSize = ['small', 'medium', 'large'];
  test.each(labelSize)('rendering labelSize - %s', labelSize => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      labelSize: labelSize,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  const variant = ['primary', 'default'];
  test.each(variant)('rendering labelSize - %s', variant => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      variant: variant,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test.each(palette)('rendering the active is true - %s', palette => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      palette: palette,
      active: true,
      checked: true,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the isFilled is false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      isFilled: false
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the customClass of customRadioWrap,customRadio,customLabel ', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      customClass: {
        customRadioWrap: 'CustomClassCustomRadioWrap',
        customRadio: 'CustomClassCustomRadio',
        customLabel: 'CustomClassCustomLabel'
      },
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering ally ariaChecked true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      checked: true
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering ally ariaHidden , ariaChecked, ariaReadonly fasle true', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      checked: true,
      isReadOnly: true,
      disabled: true,
      a11y: {
        ariaHidden: true,
        ariaChecked: true,
        ariaReadonly: true
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering ally ariaHidden , ariaChecked, ariaReadonly is false', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      a11y: {
        ariaHidden: false
      }
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the accessMode when isReadOnly ', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      isReadOnly: true,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the accessMode when disabled ', () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(Radio, {
      disabled: true,
      text: "RadioText"
    }));
    expect(asFragment()).toMatchSnapshot();
  });
  test('getRef prop is a function', () => {
    const mockEleRef = jest.fn();
    render( /*#__PURE__*/React.createElement(Radio, {
      getRef: mockEleRef
    }));
    expect(mockEleRef).toHaveBeenCalled();
  });
  test('renders with different onClick props', () => {
    const onClickFunction = jest.fn();
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Radio, {
      value: "radioValue",
      onChange: onClickFunction
    })));
    expect(asFragment()).toMatchSnapshot();
  });
});