zarm
Version:
基于 React 的移动端UI库
384 lines (341 loc) • 16.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
var _index = _interopRequireDefault(require("../index"));
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
jest.mock('react', function () {
return _objectSpread(_objectSpread({}, jest.requireActual('react')), {}, {
useLayoutEffect: jest.requireActual('react').useEffect
});
});
describe('Collapse', function () {
it('renders correctly', function () {
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with collapse mode', function () {
var props = {};
props.multiple = true;
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with animated', function () {
var props = {};
props.animated = true;
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with defaultActiveKey', function () {
var props = {};
props.defaultActiveKey = '1';
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with number defaultActiveKey', function () {
var props = {};
props.defaultActiveKey = 0;
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with array defaultActiveKey', function () {
var props = {};
props.multiple = true;
props.defaultActiveKey = ['1'];
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with activeKey', function () {
var props = {};
props.activeKey = '0';
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with number activeKey', function () {
var props = {};
props.activeKey = 1;
var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: 0,
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: 1,
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: 2,
title: "Header of Item3"
}, "This is content of item3.")));
expect(wrapper.asFragment()).toMatchSnapshot();
}); // it('renders correctly with dynamic activeKey', () => {
// const props = {};
// props.activeKey = '0';
// const wrapper = shallow(
// <Collapse {...props}>
// <Collapse.Item key="0" title="Header of Item1">
// This is content of item1.
// </Collapse.Item>
// <Collapse.Item key="1" title="Header of Item2">
// This is content of item2.
// </Collapse.Item>
// <Collapse.Item key="2" title="Header of Item3">
// This is content of item3.
// </Collapse.Item>
// </Collapse>,
// );
// wrapper.setProps({ activeKey: '1' });
// expect(wrapper.state('activeKey')).toEqual('1');
// });
// it('renders correctly with dynamic array activeKey', () => {
// const props = {};
// props.multiple = true;
// props.activeKey = ['0'];
// const wrapper = shallow(
// <Collapse {...props}>
// <Collapse.Item key="0" title="Header of Item1">
// This is content of item1.
// </Collapse.Item>
// <Collapse.Item key="1" title="Header of Item2">
// This is content of item2.
// </Collapse.Item>
// <Collapse.Item key="2" title="Header of Item3">
// This is content of item3.
// </Collapse.Item>
// </Collapse>,
// );
// wrapper.setProps({ activeKey: ['1'] });
// expect(wrapper.state('activeKey')).toEqual(['1']);
// });
it('renders correctly with defaultActiveKey and activeKey', function () {
var props = {};
props.defaultActiveKey = '0';
props.activeKey = '1';
var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render.container;
expect(container.getElementsByClassName('za-collapse-item--active').length).toBe(1);
});
it('click collapse item correctly', function () {
var onChange = jest.fn();
var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
onChange: onChange
}, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render2.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
expect(onChange).toBeCalled();
});
it('click collapse item correctly with disabled mode', function () {
var props = {};
props.onChange = jest.fn();
var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
disabled: true,
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render3.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
expect(props.onChange).not.toBeCalled();
});
it('collapse items toggle correctly with animated', function (done) {
var props = {};
props.animated = true;
var _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render4.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
setTimeout(function () {
expect(container.getElementsByClassName('za-collapse-item--active').length).toBe(1);
done();
}, 0);
});
it('negative item toggle correctly with animated', function (done) {
var props = {};
props.animated = true;
var _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render5.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
setTimeout(function () {
expect(container.getElementsByClassName('za-collapse-item--active').length).toBe(1);
done();
}, 0);
});
it('active item toggle correctly with animated', function (done) {
var props = {};
props.animated = true;
props.defaultActiveKey = '0';
var _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render6.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
setTimeout(function () {
expect(container.getElementsByClassName('za-collapse-item--active').length).toBe(0);
done();
}, 0);
});
it('collapse items toggle correctly without multiple mode', function () {
var props = {};
props.multiple = false;
props.activeKey = '1';
props.onChange = jest.fn();
var _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render7.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
expect(container.getElementsByClassName('za-collapse-item--active').length).toBe(1);
});
it('collapse items toggle correctly with multiple mode', function () {
var props = {};
props.multiple = true;
props.defaultActiveKey = ['0'];
var _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "0",
title: "Header of Item1"
}, "This is content of item1."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "1",
title: "Header of Item2"
}, "This is content of item2."), /*#__PURE__*/_react.default.createElement(_index.default.Item, {
key: "2",
title: "Header of Item3"
}, "This is content of item3."))),
container = _render8.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[1]);
expect(container.getElementsByClassName('za-collapse-item--active').length).toBe(2);
});
it('click should not trigger callback without key', function () {
var props = {};
props.onChange = jest.fn();
var _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, props, /*#__PURE__*/_react.default.createElement(_index.default.Item, {
title: "50\u5143\u5957\u9910"
}, /*#__PURE__*/_react.default.createElement("div", null, "50\u5143\u5957\u9910\u5185\u5BB9")))),
container = _render9.container;
var items = container.getElementsByClassName('za-collapse-item__title');
_react2.fireEvent.click(items[0]);
expect(props.onChange).not.toBeCalled();
});
});