zarm
Version:
基于 React 的移动端UI库
205 lines (180 loc) • 7.72 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
var _index = _interopRequireDefault(require("../index"));
var classPrefix = 'za-checkbox';
describe('Checkbox', function () {
it('renders correctly', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
checked: true,
onChange: jest.fn()
}, "foo"));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('defaultChecked', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
defaultChecked: true
}, "foo"));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('disabled', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
disabled: true
}, "foo"));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('click event', function () {
var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, 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));
_react2.fireEvent.click(checkbox);
expect(input).toBeChecked();
expect(checkbox).toHaveClass("".concat(classPrefix, "--checked"));
_react2.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.default.createRef();
var checked = false;
var onChange = jest.fn(function (e) {
checked = e.target.checked;
});
var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, null, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1",
checked: true
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('render value correctly', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, {
value: ['0']
}, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('render defaultValue correctly', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, {
defaultValue: ['1']
}, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('type is button', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, {
type: "button"
}, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
var container = wrapper.container;
var checkbox = container.getElementsByTagName('label')[0];
_react2.fireEvent.click(checkbox);
expect(checkbox).toHaveClass("".concat(classPrefix, "--checked"));
});
it('type is list', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, {
type: "list"
}, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "2"
}, "\u9009\u9879\u4E09")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('receive new value', function () {
var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, {
defaultValue: ['0']
}, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default.Group, {
type: "list",
onChange: onChange
}, /*#__PURE__*/_react.default.createElement(_index.default, {
value: "0"
}, "\u9009\u9879\u4E00"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "1"
}, "\u9009\u9879\u4E8C"), /*#__PURE__*/_react.default.createElement(_index.default, {
value: "2",
disabled: true
}, "\u9009\u9879\u4E09"))),
container = _render4.container;
var items = container.querySelectorAll('input');
_react2.fireEvent.click(items[0], {
target: {
checked: true
}
});
expect(onChange).toBeCalledWith(['0']);
_react2.fireEvent.click(items[0], {
target: {
checked: false
}
});
expect(onChange).toBeCalledWith([]); // 测试disabled
_react2.fireEvent.click(items[2], {
target: {
checked: true
}
});
expect(onChange).toBeCalledWith([]);
});
});