zarm/lib/pinch-zoom/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@testing-library/react");

var _index = _interopRequireDefault(require("../index"));

describe('PinchZoom', function () {
  describe('snapshot', function () {
    it('renders correctly', function () {
      var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null)),
          container = _render.container;

      expect(container).toMatchSnapshot();
    });
  });
  describe('pinchZoom event', function () {
    it('wheel event', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
      var mockOnChange, _render2, container, el;

      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              mockOnChange = jest.fn();
              _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
                minScale: 1,
                maxScale: 3,
                onPinchZoom: mockOnChange
              }, /*#__PURE__*/_react.default.createElement("img", {
                src: "https://cdn-health.zhongan.com/magiccube/resource/s/hSE9buCehy.png",
                style: {
                  maxWidth: '100%'
                },
                alt: ""
              }))), container = _render2.container;
              el = container.querySelector('.za-pinch-zoom');

              _react2.fireEvent.wheel(el, {
                deltaMode: 1,
                pageX: 100,
                pageY: 100
              });

              _context.next = 6;
              return (0, _react2.waitFor)(function () {
                expect(mockOnChange).toBeCalled();
              });

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    })));
    it('touch event', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
      var mockOnChange, _render3, container, el;

      return _regenerator.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              mockOnChange = jest.fn();
              _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
                minScale: 1,
                maxScale: 3,
                onPinchZoom: mockOnChange
              }, /*#__PURE__*/_react.default.createElement("img", {
                src: "https://cdn-health.zhongan.com/magiccube/resource/s/hSE9buCehy.png",
                style: {
                  maxWidth: '100%'
                },
                alt: ""
              }))), container = _render3.container;
              el = container.querySelector('.za-pinch-zoom');

              _react2.fireEvent.touchStart(el, {
                touches: [{
                  pageX: 20,
                  pageY: 30
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 20,
                  pageY: 30
                }]
              });

              _react2.fireEvent.touchEnd(el, {
                touches: [{
                  pageX: 30,
                  pageY: 40
                }]
              });

              _react2.fireEvent.touchStart(el, {
                touches: [{
                  pageX: 35,
                  pageY: 45
                }, {
                  pageX: 50,
                  pageY: 60
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 40,
                  pageY: 60
                }, {
                  pageX: 60,
                  pageY: 80
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 120,
                  pageY: 120
                }, {
                  pageX: 150,
                  pageY: 160
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 160,
                  pageY: 180
                }, {
                  pageX: 180,
                  pageY: 210
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 200,
                  pageY: 220
                }, {
                  pageX: 240,
                  pageY: 250
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 230,
                  pageY: 260
                }, {
                  pageX: 280,
                  pageY: 320
                }]
              });

              _react2.fireEvent.touchEnd(el, {
                touches: [{
                  pageX: 250,
                  pageY: 320
                }]
              });

              _react2.fireEvent.touchMove(el, {
                touches: [{
                  pageX: 270,
                  pageY: 350
                }]
              });

              _context2.next = 16;
              return (0, _react2.waitFor)(function () {
                expect(mockOnChange).toBeCalled();
              });

            case 16:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    })));
  });
});