zarm/es/message/__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 React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import Message from '../index';
import ConfigProvider from '../../config-provider';
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.createElement("div", {
        onClick: onClick,
        "data-testid": "close-icon"
      }, "close icon");
    }
  });
});
describe('Message', function () {
  it('should renders with default props', function () {
    var _render = render( /*#__PURE__*/React.createElement(Message, null, "foo")),
        container = _render.container;

    expect(container).toMatchSnapshot();
  });
  it('should render with passed theme', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root",
      theme: "danger"
    }, "foo"));
    expect(screen.getByTestId('root').className).toEqual('za-message za-message--danger');
  });
  it('should render with an icon', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      icon: /*#__PURE__*/React.createElement("img", {
        alt: "message-icon",
        src: "\\\\static.zhongan.com/website/health/zarm/images/icons/state.png"
      })
    }, "foo"));
    expect(screen.getByAltText('message-icon')).toBeTruthy();
    expect(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();
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root",
      hasArrow: true,
      onClick: onClick
    }, "foo"));
    fireEvent.click(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();
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root",
      onClick: onClick
    }, "foo"));
    fireEvent.click(screen.getByTestId('root'));
    expect(onClick).not.toBeCalled();
  });
  it('should do nothing if onClick props is undefined', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root",
      hasArrow: true
    }, "foo"));
    fireEvent.click(screen.getByTestId('root'));
  });
  it('should render close icon and handle close event', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      closable: true,
      "data-testid": "root"
    }, "foo"));
    expect(screen.queryByTestId('root')).toBeTruthy();
    expect(screen.getByTestId('close-icon')).toBeTruthy();
    fireEvent.click(screen.getByTestId('close-icon'));
    expect(screen.queryByTestId('root')).toBeFalsy();
  });
  test('should not render footer if message has no arrow and is not closable', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root"
    }, "foo"));
    expect(screen.getByTestId('root').querySelector('.za-message__footer')).toBeFalsy();
  });
  test('should render footer if message has arrow', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root",
      hasArrow: true
    }, "foo"));
    expect(screen.getByTestId('root').className).toEqual('za-message za-message--primary za-message--link');
    expect(screen.getByTestId('root').querySelector('.za-message__footer')).toBeTruthy();
  });
  test('should render footer if message is closable', function () {
    render( /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root",
      closable: true
    }, "foo"));
    expect(screen.getByTestId('root').querySelector('.za-message__footer')).toBeTruthy();
  });
  test('should forward ref', function () {
    var ref = /*#__PURE__*/React.createRef();
    render( /*#__PURE__*/React.createElement(Message, {
      ref: ref
    }, "foo"));
    expect(ref.current.nodeName.toLowerCase()).toEqual('div');
  });
  test('should use prefixCls from context', function () {
    render( /*#__PURE__*/React.createElement(ConfigProvider, {
      prefixCls: "zarm"
    }, /*#__PURE__*/React.createElement(Message, {
      "data-testid": "root"
    }, "foo")));
    expect(screen.getByTestId('root').className).toEqual('zarm-message zarm-message--primary');
  });
});