zarm
Version:
基于 React 的移动端UI库
243 lines (214 loc) • 8.66 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _react2 = _interopRequireDefault(require("react"));
var _ = _interopRequireDefault(require(".."));
var _images = require("../../../tests/testData/images");
var _utils = require("../../../tests/utils");
var _button = _interopRequireDefault(require("../../button"));
var originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
var originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
describe('ImagePreview', function () {
var onloadRef;
beforeAll(function () {
Object.defineProperty(Image.prototype, 'onload', {
get: function get() {
return this._onload;
},
set: function set(onload) {
onloadRef = onload;
this._onload = onload;
}
});
});
afterEach(function () {
jest.restoreAllMocks();
jest.useRealTimers();
});
describe('snapshot', function () {
it('renders correctly', function () {
var wrapper = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
onChange: jest.fn(),
images: _images.images,
mountContainer: false
}));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with origin', function () {
var wrapper = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
onChange: jest.fn(),
images: _images.originImages,
mountContainer: false
}));
expect(wrapper.asFragment()).toMatchSnapshot();
});
});
it('should render show origin url button if origin url is not existed', function () {
var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
images: _images.images,
visible: true
})),
container = _render.container;
var buttonWrapper = container.querySelectorAll('.za-image-preview button');
expect(buttonWrapper).toHaveLength(0);
});
it('should not call onClose handler when touch end and the duration between touchstart and touchend greater than 300ms', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var mOnClose, contentWrapper;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
mOnClose = jest.fn();
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
images: _images.images,
onClose: mOnClose
}));
contentWrapper = document.body.getElementsByClassName('za-image-preview__content')[0];
_react.fireEvent.mouseDown(contentWrapper);
_react.fireEvent.mouseMove(contentWrapper);
_context.next = 7;
return (0, _utils.sleep)(500);
case 7:
_react.fireEvent.mouseUp(contentWrapper);
expect(mOnClose).not.toBeCalled();
case 9:
case "end":
return _context.stop();
}
}
}, _callee);
})));
beforeEach(function () {
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
configurable: true,
value: 375
});
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
configurable: true,
value: 200
});
});
afterAll(function () {
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetWidth);
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
});
it('onChange', function () {
var onChange = jest.fn();
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
images: _images.images,
onChange: onChange
}));
var element = document.body.querySelector('.za-carousel');
_react.fireEvent.mouseDown(element, {
pointerId: 1,
clientX: 0,
clientY: 0,
buttons: 1
});
_react.fireEvent.mouseMove(element, {
pointerId: 1,
clientX: -200,
clientY: 0,
buttons: 1
});
_react.fireEvent.mouseUp(element, {
pointerId: 1,
clientX: -275
});
expect(onChange).toBeCalledTimes(1);
}); // it('onClose', async () => {
// const mOnClose = jest.fn();
// render(<ImagePreview visible images={images} onClose={mOnClose} />);
// const content = document.body.querySelector('.za-image-preview__content');
// fireEvent.mouseDown(content!, { pointerId: 10, clientX: 20, clientY: 0, buttons: 1 });
// fireEvent.mouseMove(content!, { pointerId: 10, clientX: 20, clientY: 0, buttons: 1 });
// fireEvent.mouseUp(content!, { pointerId: 10, clientX: 20 });
// expect(mOnClose).toBeCalledTimes(1);
// });
// it('load origin', async () => {
// const { getByText } = render(<ImagePreview visible images={originImages} className="test1" />);
// const content = getByText('查看原图');
// const newContent = document.body.querySelector('.test1 button');
// fireEvent.mouseDown(content!, { pointerId: 10, clientX: 20, clientY: 0, buttons: 1 });
// fireEvent.mouseMove(content!, { pointerId: 10, clientX: 20, clientY: 0, buttons: 1 });
// fireEvent.mouseUp(content!, { pointerId: 10, clientX: 20 });
// expect(newContent).not.toBeInTheDocument();
// });
it('should render pagination', function () {
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
images: _images.images
}));
var paginationWrapper = document.body.getElementsByClassName('za-image-preview__pagination');
expect(paginationWrapper).toHaveLength(1);
expect(paginationWrapper[0].textContent).toContain('1 / 3');
});
it('should not render pagination', function () {
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
images: _images.images,
showPagination: false
}));
expect(document.body.getElementsByClassName('za-image-preview__pagination')).toHaveLength(0);
});
it('should render images', function () {
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.default, {
visible: true,
images: _images.images
}));
var img = document.body.querySelectorAll('img');
expect(img).toHaveLength(3);
var srcArr = Array.from(img).map(function (v) {
return v.getAttribute('src');
});
expect(srcArr).toEqual(_images.images);
});
it('show', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
var onClick, button;
return _regenerator.default.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
onClick = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return _.default.show({
images: _images.images,
className: 'image-static'
});
case 2:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function onClick() {
return _ref3.apply(this, arguments);
};
}();
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.default, {
onClick: onClick
}, "show"));
button = _react.screen.getByText('show');
_react.fireEvent.click(button);
expect(document.body.getElementsByClassName('image-static')[0]).toBeInTheDocument();
case 5:
case "end":
return _context3.stop();
}
}
}, _callee3);
})));
});