zarm/es/carousel/__tests__/index.test.js

基于 React 的移动端UI库

import _defineProperty from "@babel/runtime/helpers/defineProperty";

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) { _defineProperty(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; }

import { act, fireEvent, render } from '@testing-library/react';
import React from 'react';
import Image from '../../image';
import Carousel from '../index';
var originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
var originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
var IMGLIST = ['https://static.zhongan.com/website/health/zarm/images/banners/1.png', 'https://static.zhongan.com/website/health/zarm/images/banners/2.png', 'https://static.zhongan.com/website/health/zarm/images/banners/3.png'];

var contentRender = function contentRender() {
  return IMGLIST.map(function (item, i) {
    return /*#__PURE__*/React.createElement("div", {
      className: "carousel__item__pic",
      key: +i
    }, /*#__PURE__*/React.createElement(Image, {
      src: item,
      alt: "",
      draggable: false
    }));
  });
};

var createCarousel = function createCarousel(props) {
  var childrenLen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
  var ITEMS = Array.from({
    length: childrenLen
  }).map(function (_v, i) {
    return i;
  });
  return /*#__PURE__*/React.createElement(Carousel, props, ITEMS.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: +index
    }, item);
  }));
};

describe('Carousel', function () {
  it('base render correctly', function () {
    var wrapper = render( /*#__PURE__*/React.createElement("div", null, createCarousel(), createCarousel({}, 0), createCarousel({
      activeIndex: 1
    }, 0), createCarousel({}, 1)));
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('style render correctly', function () {
    var style = {
      background: 'red'
    };
    var wrapper = render(createCarousel({
      style: style
    }, 0));
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('prefixCls render correctly', function () {
    var prefixCls = 'za-test';
    var wrapper = render(createCarousel({
      prefixCls: prefixCls
    }, 1));
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('className render correctly', function () {
    var className = 'za-wrapper-test';
    var wrapper = render(createCarousel({
      className: className
    }, 0));
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('height render correctly', function () {
    var wrapper = render(createCarousel({
      height: 150,
      direction: 'vertical'
    }));
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('pagination render correctly', function () {
    var wrapper = render( /*#__PURE__*/React.createElement("div", null, createCarousel({
      showPagination: true
    }), createCarousel({
      showPagination: false
    })));
    expect(wrapper.asFragment()).toMatchSnapshot();
  }); // it('activeIndex', () => {
  //   const wrapper = mount(createCarousel({ activeIndex: 1 }));
  //   expect(wrapper.state('activeIndex')).toEqual(1);
  // });

  it('swipeable', function () {
    var wrapper = render(createCarousel({
      swipeable: false
    }));
    expect(wrapper.asFragment()).toMatchSnapshot();
  });
  it('autoPlay', function () {
    jest.useFakeTimers();
    var onChange = jest.fn();
    var animationDuration = 200;
    var autoPlayIntervalTime = 1000;
    var props = {
      autoPlay: true,
      animationDuration: animationDuration,
      autoPlayIntervalTime: autoPlayIntervalTime
    };
    render(createCarousel(_objectSpread(_objectSpread({}, props), {}, {
      onChange: onChange
    })));
    act(function () {
      jest.advanceTimersByTime(autoPlayIntervalTime);
    });
    expect(onChange).toBeCalledWith(1);
  });
  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('swipe change horizontal', function () {
    var onChange = jest.fn();

    var _render = render( /*#__PURE__*/React.createElement(Carousel, {
      onChange: onChange
    }, contentRender())),
        container = _render.container;

    var element = container.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('swipe change vertical', function () {
    var onChange = jest.fn();

    var _render2 = render( /*#__PURE__*/React.createElement(Carousel, {
      onChange: onChange,
      direction: "vertical",
      loop: true
    }, contentRender())),
        container = _render2.container;

    var element = container.querySelector('.za-carousel');
    fireEvent.mouseDown(element, {
      pointerId: 1,
      clientX: 50,
      clientY: 0,
      buttons: 1
    });
    fireEvent.mouseMove(element, {
      pointerId: 1,
      clientX: 50,
      clientY: -100,
      buttons: 1
    });
    fireEvent.mouseUp(element, {
      pointerId: 1,
      clientX: 50,
      clientY: -350
    });
    expect(onChange).toBeCalledTimes(1);
  });
  it('transitionend event', function () {
    var onChangeEnd = jest.fn();

    var _render3 = render(createCarousel({
      onChangeEnd: onChangeEnd
    })),
        container = _render3.container;

    fireEvent.click(container.getElementsByClassName('za-carousel__pagination__item')[1]);
    fireEvent.transitionEnd(container.getElementsByClassName('za-carousel__items')[0]);
    expect(onChangeEnd).toBeCalledWith(1);
  });
});