zarm/lib/slider/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

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

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

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

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

describe('Slider', function () {
  var marks = {
    0: '0',
    26: '26',
    60: '60',
    100: '100'
  };
  describe('snapshot', function () {
    it('shallows correctly', function () {
      var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null)),
          container = _render.container;

      expect(container).toMatchSnapshot();
    });
    it('min', function () {
      var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        min: 0
      })),
          container = _render2.container;

      expect(container).toMatchSnapshot();
    });
    it('max', function () {
      var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        max: 100
      })),
          container = _render3.container;

      expect(container).toMatchSnapshot();
    });
    it('step', function () {
      var _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        step: 5
      })),
          container = _render4.container;

      expect(container).toMatchSnapshot();
    });
    it('disabled', function () {
      var _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        disabled: true
      })),
          container = _render5.container;

      expect(container).toMatchSnapshot();
    });
    it('defaultValue', function () {
      var _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        defaultValue: 10
      })),
          container = _render6.container;

      expect(container).toMatchSnapshot();
    });
    it('value', function () {
      var _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        value: 10
      })),
          container = _render7.container;

      expect(container).toMatchSnapshot();
    });
    it('showMark', function () {
      var _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        showMark: true,
        marks: marks
      })),
          container = _render8.container;

      expect(container).toMatchSnapshot();
    });
    it('marks', function () {
      var _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        marks: marks
      })),
          container = _render9.container;

      expect(container).toMatchSnapshot();
    });
    it('marks error', function () {
      var errorLogSpy = jest.spyOn(console, 'error').mockImplementationOnce(function () {
        return 'Suppress';
      });

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

      expect(container).toMatchSnapshot();
      expect(errorLogSpy).toBeCalledWith('请输入有效的 marks');
    });
    it('vertical', function () {
      var _render11 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        vertical: true
      })),
          container = _render11.container;

      expect(container).toMatchSnapshot();
    });
    it('vertical and marks', function () {
      var _render12 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
        vertical: true,
        showMark: true,
        marks: marks
      })),
          container = _render12.container;

      expect(container).toMatchSnapshot();
    });
  });
  it('should not render mark info if marks is an empty object and props.showMark is true', function () {
    var errorLogSpy = jest.spyOn(console, 'error').mockImplementationOnce(function () {
      return 'Suppress';
    });

    var _render13 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      showMark: true,
      marks: {}
    })),
        container = _render13.container;

    var el = container.querySelectorAll('.za-slider__marks');
    expect(el).toHaveLength(0);
    expect(errorLogSpy).toBeCalledWith('请输入有效的 marks');
  });
  it('should not render mark info if marks is NOT an object and props.showMark is true', function () {
    var errorLogSpy = jest.spyOn(console, 'error').mockImplementationOnce(function () {
      return 'Suppress';
    });

    var _render14 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      showMark: true,
      marks: null
    })),
        container = _render14.container;

    var el = container.querySelectorAll('.za-slider__marks');
    expect(el).toHaveLength(0);
    expect(errorLogSpy).toBeCalledWith('请输入有效的 marks');
  });
  it('should render mark info with custom marks', function () {
    var MARKS = {
      0: '0°C',
      26: '26°C',
      65: '65°C',
      100: '100°C'
    };

    var _render15 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      showMark: true,
      marks: MARKS,
      value: 55
    })),
        container = _render15.container;

    var el = container.querySelectorAll('.za-slider__mark');
    expect(el).toHaveLength(4);
    expect(Array.from(el).map(function (mark) {
      return mark.textContent;
    })).toEqual(expect.arrayContaining(['100°C', '0°C', '26°C', '65°C']));
    expect(Array.from(el).map(function (mark) {
      var style = window.getComputedStyle(mark);
      return style ? style.left : '';
    })).toEqual(expect.arrayContaining(['0%', '26%', '65%', '100%']));
    expect(Array.from(container.querySelectorAll('.za-slider__dot')).map(function (dot) {
      return dot.className;
    }).filter(function (className) {
      if (className) {
        return className.includes('za-slider__dot--active');
      }

      return false;
    })).toHaveLength(2);
  });
  it('mouse event', function () {
    var onChange = jest.fn();
    var onSlideChange = jest.fn();

    var _render16 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
      "data-testid": "za-slider-el"
    }, /*#__PURE__*/_react.default.createElement(_index.default, {
      onChange: onChange,
      style: {
        width: 200
      },
      onSlideChange: onSlideChange
    }))),
        getByTestId = _render16.getByTestId;

    var wrapper = getByTestId('za-slider-el').getElementsByClassName('za-slider__knob');
    var element = [].slice.call(wrapper);

    _react2.fireEvent.mouseDown(element === null || element === void 0 ? void 0 : element[0], {
      pointerId: 15,
      clientX: 10,
      clientY: 0,
      buttons: 1
    });

    _react2.fireEvent.mouseMove(element === null || element === void 0 ? void 0 : element[0], {
      pointerId: 15,
      clientX: 200,
      clientY: 0,
      buttons: 1
    });

    _react2.fireEvent.mouseMove(element === null || element === void 0 ? void 0 : element[0], {
      pointerId: 15,
      clientX: 250,
      clientY: 0,
      buttons: 1
    });

    _react2.fireEvent.mouseUp(element === null || element === void 0 ? void 0 : element[0], {
      pointerId: 15
    });

    expect(onChange).toBeCalled();
    expect(onSlideChange).toBeCalled();
  });
  it('track click', function () {
    var MARKS = {
      0: '0°C',
      26: '26°C',
      65: '65°C',
      100: '100°C'
    };
    var onChange = jest.fn();

    var _render17 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", {
      "data-testid": "za-slider-el"
    }, /*#__PURE__*/_react.default.createElement(_index.default, {
      onChange: onChange,
      style: {
        width: 200
      },
      marks: MARKS
    }))),
        getByTestId = _render17.getByTestId;

    var line = getByTestId('za-slider-el').querySelector('.za-slider__line');

    _react2.fireEvent.click(line);

    expect(onChange).toBeCalled();
  });
});