@shopgate/pwa-common
Version:
Common library for the Shopgate Connect PWA.
111 lines (109 loc) • 3.94 kB
JavaScript
import React from 'react';
import { shallow } from 'enzyme';
import Checkbox from "./index";
/**
* Checked Icon
* @returns {JSX}
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Checked = () => /*#__PURE__*/_jsx("div", {});
/**
* Unchecked Icon
* @returns {JSX}
*/
const Unchecked = () => /*#__PURE__*/_jsx("div", {});
describe('<Checkbox />', () => {
it('should render the checkbox with the label before the icon', () => {
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
label: /*#__PURE__*/_jsx("span", {
children: "Test Label Deluxe"
}),
labelPosition: "left",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
checked: false
}));
const expected = /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("span", {
children: "Test Label Deluxe"
}), /*#__PURE__*/_jsx(Unchecked, {})]
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.matchesElement(expected)).toBeTruthy();
});
it('should render the checkbox with the label after the icon', () => {
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
label: /*#__PURE__*/_jsx("span", {
children: "Test Label Deluxe"
}),
labelPosition: "right",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
checked: false
}));
const expected = /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(Unchecked, {}), /*#__PURE__*/_jsx("span", {
children: "Test Label Deluxe"
})]
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.matchesElement(expected)).toBeTruthy();
});
it('should render the unchecked icon if "checked" is false', () => {
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
checked: false,
label: "Test Label Deluxe",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {})
}));
expect(wrapper).toMatchSnapshot();
expect(wrapper.find(Checked).length).toBe(0);
expect(wrapper.find(Unchecked).length).toBe(1);
});
it('should render the unchecked icon if "checked" is false', () => {
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
checked: true,
label: "Test Label Deluxe",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {})
}));
expect(wrapper).toMatchSnapshot();
expect(wrapper.find(Checked).length).toBe(1);
expect(wrapper.find(Unchecked).length).toBe(0);
});
it('should call the callback with the inverted value', () => {
const spy = jest.fn();
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
label: "Test Label Deluxe",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
checked: false,
onCheck: spy
}));
wrapper.simulate('click');
expect(spy).toHaveBeenCalledWith(true);
});
it('should render an <input> element if a name prop is provided', () => {
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
label: "Test Label Deluxe",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
defaultChecked: false,
name: "myCheckbox"
}));
const input = wrapper.find('input');
expect(input.length).toBe(1);
expect(input.prop('name')).toEqual('myCheckbox');
expect(input.prop('value')).toEqual(0);
});
it('should work as an uncontrolled input', () => {
const wrapper = shallow(/*#__PURE__*/_jsx(Checkbox, {
label: "Test Label Deluxe",
checkedIcon: /*#__PURE__*/_jsx(Checked, {}),
uncheckedIcon: /*#__PURE__*/_jsx(Unchecked, {}),
defaultChecked: false
}));
wrapper.simulate('click');
expect(wrapper.state('checked')).toBe(true);
});
});