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

基于 React 的移动端UI库

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react';
import PinchZoom from '../index';
describe('PinchZoom', function () {
  describe('snapshot', function () {
    it('renders correctly', function () {
      var _render = render( /*#__PURE__*/React.createElement(PinchZoom, null)),
          container = _render.container;

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

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              mockOnChange = jest.fn();
              _render2 = render( /*#__PURE__*/React.createElement(PinchZoom, {
                minScale: 1,
                maxScale: 3,
                onPinchZoom: mockOnChange
              }, /*#__PURE__*/React.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');
              fireEvent.wheel(el, {
                deltaMode: 1,
                pageX: 100,
                pageY: 100
              });
              _context.next = 6;
              return waitFor(function () {
                expect(mockOnChange).toBeCalled();
              });

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

      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              mockOnChange = jest.fn();
              _render3 = render( /*#__PURE__*/React.createElement(PinchZoom, {
                minScale: 1,
                maxScale: 3,
                onPinchZoom: mockOnChange
              }, /*#__PURE__*/React.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');
              fireEvent.touchStart(el, {
                touches: [{
                  pageX: 20,
                  pageY: 30
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 20,
                  pageY: 30
                }]
              });
              fireEvent.touchEnd(el, {
                touches: [{
                  pageX: 30,
                  pageY: 40
                }]
              });
              fireEvent.touchStart(el, {
                touches: [{
                  pageX: 35,
                  pageY: 45
                }, {
                  pageX: 50,
                  pageY: 60
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 40,
                  pageY: 60
                }, {
                  pageX: 60,
                  pageY: 80
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 120,
                  pageY: 120
                }, {
                  pageX: 150,
                  pageY: 160
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 160,
                  pageY: 180
                }, {
                  pageX: 180,
                  pageY: 210
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 200,
                  pageY: 220
                }, {
                  pageX: 240,
                  pageY: 250
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 230,
                  pageY: 260
                }, {
                  pageX: 280,
                  pageY: 320
                }]
              });
              fireEvent.touchEnd(el, {
                touches: [{
                  pageX: 250,
                  pageY: 320
                }]
              });
              fireEvent.touchMove(el, {
                touches: [{
                  pageX: 270,
                  pageY: 350
                }]
              });
              _context2.next = 16;
              return waitFor(function () {
                expect(mockOnChange).toBeCalled();
              });

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