zarm
Version:
基于 React 的移动端UI库
186 lines (178 loc) • 6.85 kB
JavaScript
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import Checkbox from '../index';
var classPrefix = 'za-checkbox';
describe('Checkbox', function () {
it('renders correctly', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox, {
checked: true,
onChange: jest.fn()
}, "foo"));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('defaultChecked', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox, {
defaultChecked: true
}, "foo"));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('disabled', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox, {
disabled: true
}, "foo"));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('click event', function () {
var _render = render( /*#__PURE__*/React.createElement(Checkbox, null, "foo")),
container = _render.container;
var input = container.querySelectorAll('input')[0];
var checkbox = container.getElementsByTagName('label')[0];
expect(input).not.toBeChecked();
expect(checkbox).toHaveClass("".concat(classPrefix));
fireEvent.click(checkbox);
expect(input).toBeChecked();
expect(checkbox).toHaveClass("".concat(classPrefix, "--checked"));
fireEvent.click(checkbox);
expect(input).not.toBeChecked();
expect(checkbox).not.toHaveClass("".concat(classPrefix, "--checked"));
});
it('static method', function () {
var _ref$current, _ref$current2, _ref$current3;
var ref = /*#__PURE__*/React.createRef();
var checked = false;
var onChange = jest.fn(function (e) {
checked = e.target.checked;
});
var _render2 = render( /*#__PURE__*/React.createElement(Checkbox, {
ref: ref,
onChange: onChange
}, "foo")),
container = _render2.container;
var input = container.querySelectorAll('input')[0];
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.check();
expect(input).toBeChecked();
expect(onChange).toHaveBeenCalled();
expect(checked).toEqual(true);
(_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.uncheck();
expect(input).not.toBeChecked();
expect(onChange).toHaveBeenCalled();
expect(checked).toEqual(false);
(_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.toggle();
expect(input).toBeChecked();
expect(onChange).toHaveBeenCalled();
expect(checked).toEqual(true);
});
});
describe('Checkbox.Group', function () {
it('renders correctly', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox.Group, null, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1",
checked: true
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('render value correctly', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox.Group, {
value: ['0']
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('render defaultValue correctly', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox.Group, {
defaultValue: ['1']
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('type is button', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox.Group, {
type: "button"
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
var container = wrapper.container;
var checkbox = container.getElementsByTagName('label')[0];
fireEvent.click(checkbox);
expect(checkbox).toHaveClass("".concat(classPrefix, "--checked"));
});
it('type is list', function () {
var wrapper = render( /*#__PURE__*/React.createElement(Checkbox.Group, {
type: "list"
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('receive new value', function () {
var _render3 = render( /*#__PURE__*/React.createElement(Checkbox.Group, {
defaultValue: ['0']
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2"
}, "\u9009\u9879\u4E09"))),
container = _render3.container;
var items = Array.from(container.querySelectorAll('input'));
expect(items[0].checked).toEqual(true);
});
it('onChange', function () {
var onChange = jest.fn();
var _render4 = render( /*#__PURE__*/React.createElement(Checkbox.Group, {
type: "list",
onChange: onChange
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/React.createElement(Checkbox, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/React.createElement(Checkbox, {
value: "2",
disabled: true
}, "\u9009\u9879\u4E09"))),
container = _render4.container;
var items = container.querySelectorAll('input');
fireEvent.click(items[0], {
target: {
checked: true
}
});
expect(onChange).toBeCalledWith(['0']);
fireEvent.click(items[0], {
target: {
checked: false
}
});
expect(onChange).toBeCalledWith([]); // 测试disabled
fireEvent.click(items[2], {
target: {
checked: true
}
});
expect(onChange).toBeCalledWith([]);
});
});