zarm/lib/picker-view/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

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

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

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

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

// TODO: make mock package for better-scroll package
var bsScrollInstance = {
  on: jest.fn().mockImplementationOnce(function (event, handler) {
    if (event === 'scrollEnd') {
      handler();
    }
  }),
  destroy: jest.fn(),
  getSelectedIndex: jest.fn(),
  refresh: jest.fn(),
  wheelTo: jest.fn(),
  disable: jest.fn(),
  stop: jest.fn()
};
jest.mock('better-scroll', function () {
  return jest.fn(function () {
    return bsScrollInstance;
  });
});
describe('PickerView', function () {
  afterAll(function () {
    jest.resetAllMocks();
  });
  afterEach(function () {
    jest.restoreAllMocks();
  });
  it('should not render wheels if datasource is empty', function () {
    var _container$querySelec;

    var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null)),
        container = _render.container;

    expect((_container$querySelec = container.querySelector('.za-picker-view__content')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.children).toHaveLength(0);
  });
  it('should render wheels if datasource is not empty', function () {
    var _container$querySelec2;

    var dataSource = [{
      label: 'a',
      value: 1
    }, {
      label: 'b',
      value: 2
    }];

    var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      dataSource: dataSource
    })),
        container = _render2.container;

    expect((_container$querySelec2 = container.querySelector('.za-picker-view__content')) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.children).toHaveLength(1);
  });
  it('should render with correct className', function () {
    var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      className: "foo"
    })),
        container = _render3.container;

    expect(container.querySelectorAll('.za-picker-view__content')).toHaveLength(1);
    expect(container.querySelectorAll('.za-picker-view__mask')).toHaveLength(2);
    expect(container.querySelectorAll('.za-picker-view__mask--top')).toHaveLength(1);
    expect(container.querySelectorAll('.za-picker-view__mask--bottom')).toHaveLength(1);
  });
  it('PickerView render visible', function () {
    var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      dataSource: [{
        value: '1',
        label: '选项一'
      }, {
        value: '2',
        label: '选项二'
      }],
      defaultValue: "1",
      value: "1"
    })),
        container = _render4.container;

    expect(container).toMatchSnapshot();
  });
  it('PickerView disabled', function () {
    var onChange = jest.fn();

    var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      disabled: true,
      onChange: onChange,
      dataSource: [{
        value: '1',
        label: '选项一'
      }, {
        value: '2',
        label: '选项二'
      }]
    })),
        container = _render5.container;

    expect(onChange).not.toBeCalled();
    expect(container).toMatchSnapshot();
  }); // test('picker scroll onChange should call', async () => {
  //   const onChange = jest.fn();
  //   const App = () => {
  //     return (
  //       <>
  //         <PickerView
  //           dataSource={[
  //             { value: '1', label: '选项一' },
  //             { value: '2', label: '选项二' },
  //           ]}
  //           onChange={onChange}
  //         />
  //       </>
  //     )
  //   }
  //   render(<App />)
  //   const wheelEl = document.body.querySelectorAll('.za-wheel')[0];
  //   fireEvent.touchStart(wheelEl, {
  //     buttons: 1,
  //   });
  //   fireEvent.touchMove(wheelEl, {
  //     clientY: -100,
  //     buttons: 1,
  //   });
  //   fireEvent.touchEnd(wheelEl);
  //   expect(onChange).toBeCalled();
  // })
});