zarm/lib/notice-bar/__tests__/index.test.js

基于 React 的移动端UI库

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

var _utils = require("ts-jest/utils");

var _icons = require("@zarm-design/icons");

var _utils2 = require("../../../tests/utils");

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

var _configProvider = _interopRequireDefault(require("../../config-provider"));

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

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) { (0, _defineProperty2.default)(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; }

jest.mock('react', function () {
  return _objectSpread(_objectSpread({}, jest.requireActual('react')), {}, {
    useRef: jest.fn().mockReturnValue({
      current: {
        getBoundingClientRect: jest.fn()
      }
    })
  });
});
var useMockRef = (0, _utils.mocked)(_react.useRef);
describe('NoticeBar', function () {
  afterEach(function () {
    jest.restoreAllMocks();
    jest.clearAllMocks();
  });
  test('should render default notice bar', function () {
    var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null, "\u666E\u901A")),
        container = _render.container;

    expect(_react2.screen.queryByText(/普通/)).toBeTruthy();
    expect(container).toMatchSnapshot();
  });
  test('should render notice bar with custom theme', function () {
    var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      theme: "danger"
    }, "\u81EA\u5B9A\u4E49\u4E3B\u9898")),
        container = _render2.container;

    expect(_react2.screen.queryByText(/自定义主题/)).toBeTruthy();
    expect(container).toMatchSnapshot();
  });
  test('should render default notice bar', function () {
    var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      icon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircle, {
        "data-testid": "notice-bar-icon"
      })
    }, "\u81EA\u5B9A\u4E49\u56FE\u6807")),
        container = _render3.container;

    expect(_react2.screen.queryByText(/自定义图标/)).toBeTruthy();
    expect(_react2.screen.queryByTestId('notice-bar-icon')).toBeTruthy();
    expect(container).toMatchSnapshot();
  });
  test('should add animation style to the content element and append a style tag into document with keyframe animation', function () {
    expect.assertions(3);
    var mWrapperRef = (0, _utils2.createFCRefMock)('getBoundingClientRect', {
      width: 100
    });
    var mContentRef = (0, _utils2.createFCRefMock)('getBoundingClientRect', {
      width: 200
    });
    useMockRef.mockReturnValueOnce(mWrapperRef).mockReturnValueOnce(mContentRef);
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null, "\u666E\u901A"));
    var noticeBarContent = document.querySelector('.za-notice-bar__content');

    if (noticeBarContent) {
      expect(window.getComputedStyle(noticeBarContent).getPropertyValue('animation')).toEqual('za-notice-bar-scrolling 8000ms linear infinite');
    }

    var keyframeStyleElement = document.querySelector('#za-notice-bar-scrolling');

    if (keyframeStyleElement) {
      expect(keyframeStyleElement).toBeTruthy();
      expect(keyframeStyleElement.innerHTML).toMatchSnapshot();
    }
  });
  test('should use prefixCls from context', function () {
    expect.assertions(3);
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_configProvider.default, {
      prefixCls: "zarm"
    }, /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "message"
    }, "\u666E\u901A")));
    expect(_react2.screen.queryByText(/普通/)).toBeTruthy();

    var messageElement = _react2.screen.queryByTestId('message');

    if (messageElement) {
      if (messageElement.parentElement) {
        expect(messageElement.parentElement.className).toEqual('zarm-notice-bar');
      }

      expect(messageElement.className).toEqual('zarm-message zarm-message--warning');
    }
  });
  test('should forward ref from parent', function () {
    expect.assertions(2);

    var ref = /*#__PURE__*/_react.default.createRef();

    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      ref: ref
    }, "\u666E\u901A"));

    if (ref.current) {
      expect(ref.current.nodeName.toLowerCase()).toEqual('div');
      expect(ref.current.className).toEqual('za-notice-bar');
    }
  });
  test('should recalculate keyframe of the animation when new value of speed prop comes', function () {
    expect.assertions(4);
    var mWrapperRef = (0, _utils2.createFCRefMock)('getBoundingClientRect', {
      width: 100
    });
    var mContentRef = (0, _utils2.createFCRefMock)('getBoundingClientRect', {
      width: 200
    });
    useMockRef.mockReturnValueOnce(mWrapperRef).mockReturnValueOnce(mContentRef);

    var _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null, "\u666E\u901A")),
        rerender = _render4.rerender;

    var noticeBarContent = document.querySelector('.za-notice-bar__content');

    if (noticeBarContent) {
      expect(window.getComputedStyle(noticeBarContent).getPropertyValue('animation')).toEqual('za-notice-bar-scrolling 8000ms linear infinite');
    }

    useMockRef.mockReturnValueOnce(mWrapperRef).mockReturnValueOnce(mContentRef);
    rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
      speed: 100
    }, "\u666E\u901A"));
    noticeBarContent = document.querySelector('.za-notice-bar__content');

    if (noticeBarContent) {
      expect(window.getComputedStyle(noticeBarContent).getPropertyValue('animation')).toEqual('za-notice-bar-scrolling 6000ms linear infinite');
    }

    var keyframeStyleElement = document.querySelector('#za-notice-bar-scrolling');

    if (keyframeStyleElement) {
      expect(keyframeStyleElement).toBeTruthy();
      expect(keyframeStyleElement.innerHTML).toMatchSnapshot();
    }
  });
  test('should recalculate keyframe of the animation when new value of delay prop comes', function () {
    expect.assertions(2);
    var mWrapperRef = (0, _utils2.createFCRefMock)('getBoundingClientRect', {
      width: 100
    });
    var mContentRef = (0, _utils2.createFCRefMock)('getBoundingClientRect', {
      width: 200
    });
    useMockRef.mockReturnValueOnce(mWrapperRef).mockReturnValueOnce(mContentRef);

    var _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null, "\u666E\u901A")),
        rerender = _render5.rerender;

    var noticeBarContent = document.querySelector('.za-notice-bar__content');

    if (noticeBarContent) {
      expect(window.getComputedStyle(noticeBarContent).getPropertyValue('animation')).toEqual('za-notice-bar-scrolling 8000ms linear infinite');
    }

    useMockRef.mockReturnValueOnce(mWrapperRef).mockReturnValueOnce(mContentRef);
    rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
      delay: 4000
    }, "\u666E\u901A"));
    noticeBarContent = document.querySelector('.za-notice-bar__content');

    if (noticeBarContent) {
      expect(window.getComputedStyle(noticeBarContent).getPropertyValue('animation')).toEqual('za-notice-bar-scrolling 12000ms linear infinite');
    }
  });
  test('should be closable(remove from the document when user click the close icon)', function () {
    var _screen$queryByTestId, _screen$queryByTestId2;

    expect.assertions(4);
    var onClose = jest.fn();

    var _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      closable: true,
      onClose: onClose,
      "data-testid": "root"
    }, "\u666E\u901A")),
        container = _render6.container;

    expect(container).toMatchSnapshot();
    var closeIcon = (_screen$queryByTestId = _react2.screen.queryByTestId('root')) === null || _screen$queryByTestId === void 0 ? void 0 : (_screen$queryByTestId2 = _screen$queryByTestId.querySelector('.za-message__footer')) === null || _screen$queryByTestId2 === void 0 ? void 0 : _screen$queryByTestId2.firstChild;

    if (closeIcon) {
      _react2.fireEvent.click(closeIcon);

      expect(_react2.screen.queryByTestId('root')).toBeNull();
    }

    expect(document.querySelector('.za-notice-bar')).toBeNull();
    expect(onClose).toBeCalledTimes(1);
  });
  test('should respond to user click events when notice bar has arrow prop', function () {
    expect.assertions(2);
    var onClick = jest.fn();

    var _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      hasArrow: true,
      "data-testid": "root",
      onClick: onClick
    }, "\u666E\u901A")),
        container = _render7.container;

    expect(container).toMatchSnapshot();

    var message = _react2.screen.queryByTestId('root');

    if (message) {
      _react2.fireEvent.click(message);

      expect(onClick).toBeCalledTimes(1);
    }
  });
});