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

基于 React 的移动端UI库

"use strict";

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

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

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

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

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

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

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('@zarm-design/icons', function () {
  return _objectSpread(_objectSpread({}, jest.requireActual('@zarm-design/icons')), {}, {
    Close: function Close(_ref) {
      var onClick = _ref.onClick;
      return /*#__PURE__*/_react.default.createElement("div", {
        onClick: onClick,
        "data-testid": "close-icon"
      }, "close icon");
    }
  });
});
describe('Message', function () {
  it('should renders with default props', function () {
    var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null, "foo")),
        container = _render.container;

    expect(container).toMatchSnapshot();
  });
  it('should render with passed theme', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root",
      theme: "danger"
    }, "foo"));
    expect(_react2.screen.getByTestId('root').className).toEqual('za-message za-message--danger');
  });
  it('should render with an icon', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      icon: /*#__PURE__*/_react.default.createElement("img", {
        alt: "message-icon",
        src: "\\\\static.zhongan.com/website/health/zarm/images/icons/state.png"
      })
    }, "foo"));
    expect(_react2.screen.getByAltText('message-icon')).toBeTruthy();
    expect(_react2.screen.getByAltText('message-icon').parentElement.className).toEqual('za-message__icon');
  });
  it('should handle click event and call the onClick function passed from props if message has arrow', function () {
    var onClick = jest.fn();
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root",
      hasArrow: true,
      onClick: onClick
    }, "foo"));

    _react2.fireEvent.click(_react2.screen.getByTestId('root'));

    expect(onClick).toBeCalled();
  });
  it('should handle click event and NOT call the onClick function passed from props if message has no arrow', function () {
    var onClick = jest.fn();
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root",
      onClick: onClick
    }, "foo"));

    _react2.fireEvent.click(_react2.screen.getByTestId('root'));

    expect(onClick).not.toBeCalled();
  });
  it('should do nothing if onClick props is undefined', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root",
      hasArrow: true
    }, "foo"));

    _react2.fireEvent.click(_react2.screen.getByTestId('root'));
  });
  it('should render close icon and handle close event', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      closable: true,
      "data-testid": "root"
    }, "foo"));
    expect(_react2.screen.queryByTestId('root')).toBeTruthy();
    expect(_react2.screen.getByTestId('close-icon')).toBeTruthy();

    _react2.fireEvent.click(_react2.screen.getByTestId('close-icon'));

    expect(_react2.screen.queryByTestId('root')).toBeFalsy();
  });
  test('should not render footer if message has no arrow and is not closable', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root"
    }, "foo"));
    expect(_react2.screen.getByTestId('root').querySelector('.za-message__footer')).toBeFalsy();
  });
  test('should render footer if message has arrow', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root",
      hasArrow: true
    }, "foo"));
    expect(_react2.screen.getByTestId('root').className).toEqual('za-message za-message--primary za-message--link');
    expect(_react2.screen.getByTestId('root').querySelector('.za-message__footer')).toBeTruthy();
  });
  test('should render footer if message is closable', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root",
      closable: true
    }, "foo"));
    expect(_react2.screen.getByTestId('root').querySelector('.za-message__footer')).toBeTruthy();
  });
  test('should forward ref', function () {
    var ref = /*#__PURE__*/_react.default.createRef();

    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
      ref: ref
    }, "foo"));
    expect(ref.current.nodeName.toLowerCase()).toEqual('div');
  });
  test('should use prefixCls from context', function () {
    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_configProvider.default, {
      prefixCls: "zarm"
    }, /*#__PURE__*/_react.default.createElement(_index.default, {
      "data-testid": "root"
    }, "foo")));
    expect(_react2.screen.getByTestId('root').className).toEqual('zarm-message zarm-message--primary');
  });
});