zarm
Version:
基于 React 的移动端UI库
220 lines (212 loc) • 8.07 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import '@testing-library/jest-dom';
import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import ImagePreview from '..';
import { images, originImages } from '../../../tests/testData/images';
import { sleep } from '../../../tests/utils';
import Button from '../../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 = render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
onChange: jest.fn(),
images: images,
mountContainer: false
}));
expect(wrapper.asFragment()).toMatchSnapshot();
});
it('renders correctly with origin', function () {
var wrapper = render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
onChange: jest.fn(),
images: originImages,
mountContainer: false
}));
expect(wrapper.asFragment()).toMatchSnapshot();
});
});
it('should render show origin url button if origin url is not existed', function () {
var _render = render( /*#__PURE__*/React.createElement(ImagePreview, {
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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var mOnClose, contentWrapper;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
mOnClose = jest.fn();
render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
images: images,
onClose: mOnClose
}));
contentWrapper = document.body.getElementsByClassName('za-image-preview__content')[0];
fireEvent.mouseDown(contentWrapper);
fireEvent.mouseMove(contentWrapper);
_context.next = 7;
return sleep(500);
case 7:
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();
render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
images: images,
onChange: onChange
}));
var element = document.body.querySelector('.za-carousel');
fireEvent.mouseDown(element, {
pointerId: 1,
clientX: 0,
clientY: 0,
buttons: 1
});
fireEvent.mouseMove(element, {
pointerId: 1,
clientX: -200,
clientY: 0,
buttons: 1
});
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 () {
render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
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 () {
render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
images: images,
showPagination: false
}));
expect(document.body.getElementsByClassName('za-image-preview__pagination')).toHaveLength(0);
});
it('should render images', function () {
render( /*#__PURE__*/React.createElement(ImagePreview, {
visible: true,
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);
});
it('show', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var onClick, button;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
onClick = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return ImagePreview.show({
images: images,
className: 'image-static'
});
case 2:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function onClick() {
return _ref3.apply(this, arguments);
};
}();
render( /*#__PURE__*/React.createElement(Button, {
onClick: onClick
}, "show"));
button = screen.getByText('show');
fireEvent.click(button);
expect(document.body.getElementsByClassName('image-static')[0]).toBeInTheDocument();
case 5:
case "end":
return _context3.stop();
}
}
}, _callee3);
})));
});