zarm/lib/tab-bar/__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"));

var TabBarItem = _index.default.Item;

var activeIcon = /*#__PURE__*/_react2.default.createElement("div", {
  style: {
    width: '24px',
    height: '24px',
    background: 'url(//cdn-health.zhongan.com/zarm/home-active.svg) top left / 24px 24px no-repeat'
  }
});

var icon = /*#__PURE__*/_react2.default.createElement("div", {
  style: {
    width: '24px',
    height: '24px',
    background: 'url(//cdn-health.zhongan.com/zarm/home.svg) top left / 24px 24px no-repeat'
  }
});

describe('TabBarItem', function () {
  it('should render with a badge', function () {
    var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "1",
      badge: {
        shape: 'leaf'
      }
    })),
        container = _render.container;

    expect(container.querySelectorAll('.za-tab-bar__item')).toHaveLength(1); // expect(wrapper.prop('style')).toBeUndefined();

    expect(container.querySelector('.za-badge')).toBeTruthy();
    expect(container.querySelector('.za-badge--leaf')).toBeTruthy();
  });
  it('should render with content', function () {
    var _title$querySelector;

    var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "1",
      title: /*#__PURE__*/_react2.default.createElement("h1", null, "test"),
      icon: /*#__PURE__*/_react2.default.createElement("span", null, "test icon")
    })),
        container = _render2.container;

    var tabIcon = container.querySelector('.za-tab-bar__icon');
    expect(tabIcon).toBeTruthy();
    expect(tabIcon === null || tabIcon === void 0 ? void 0 : tabIcon.children).toHaveLength(1);
    expect(tabIcon === null || tabIcon === void 0 ? void 0 : tabIcon.children[0].textContent).toBe('test icon');
    expect(tabIcon === null || tabIcon === void 0 ? void 0 : tabIcon.children[0].tagName).toBe('SPAN');
    var title = container.querySelector('.za-tab-bar__title');
    expect(title).toBeTruthy();
    expect(title === null || title === void 0 ? void 0 : (_title$querySelector = title.querySelector('h1')) === null || _title$querySelector === void 0 ? void 0 : _title$querySelector.textContent).toBe('test');
  });
  it('should handle change event', function () {
    var onClick = jest.fn();

    var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: 1,
      onClick: onClick
    })),
        container = _render3.container;

    _react.fireEvent.click(container.querySelector('.za-tab-bar__item'));

    expect(onClick).toBeCalled();
  });
  it('should render with icon if it is selected', function () {
    var _container$querySelec, _container$querySelec2;

    var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "1",
      selected: true,
      title: /*#__PURE__*/_react2.default.createElement("h1", null, "test"),
      icon: /*#__PURE__*/_react2.default.createElement("span", null, "test icon")
    })),
        container = _render4.container;

    expect((_container$querySelec = container.querySelector('.za-tab-bar__item')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.className).toEqual('za-tab-bar__item za-tab-bar__item--active');
    expect((_container$querySelec2 = container.querySelector('.za-tab-bar__icon span')) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.textContent).toEqual('test icon');
  });
  it('should render with active icon if it is selected', function () {
    var _container$querySelec3;

    var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "1",
      selected: true,
      title: /*#__PURE__*/_react2.default.createElement("h1", null, "test"),
      icon: /*#__PURE__*/_react2.default.createElement("span", null, "active icon")
    })),
        container = _render5.container;

    expect((_container$querySelec3 = container.querySelector('.za-tab-bar__icon span')) === null || _container$querySelec3 === void 0 ? void 0 : _container$querySelec3.textContent).toEqual('active icon');
  });
  it('should render inline style', function () {
    var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "1",
      style: {
        color: 'red',
        display: 'flex'
      }
    })),
        container = _render6.container;

    var tab = container.querySelector('.za-tab-bar__item');
    var style = window.getComputedStyle(tab);
    expect(style).toHaveProperty('color', 'red');
    expect(style).toHaveProperty('display', 'flex');
  });
});
describe('TabBar', function () {
  describe('snapshot', function () {
    it('should render correctly', function () {
      var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
        itemKey: "home",
        title: "\u4E3B\u9875",
        icon: icon,
        activeIcon: activeIcon
      }))),
          container = _render7.container;

      expect(container).toMatchSnapshot();
    });
    it('with defaultActiveKey', function () {
      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
        defaultActiveKey: "home"
      }, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
        itemKey: "home",
        title: "\u4E3B\u9875",
        icon: icon,
        activeIcon: activeIcon
      }))),
          container = _render8.container;

      expect(container).toMatchSnapshot();
    });
    it('with activeKey', function () {
      var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
        activeKey: "home"
      }, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
        itemKey: "home",
        title: "\u4E3B\u9875",
        icon: icon,
        activeIcon: activeIcon
      }))),
          container = _render9.container;

      expect(container).toMatchSnapshot();
    });
  });
  it('should handle change event', function () {
    var onChange = jest.fn();

    var _render10 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      defaultActiveKey: "home",
      onChange: onChange
    }, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "home",
      title: "\u4E3B\u9875",
      icon: icon,
      activeIcon: activeIcon
    }))),
        container = _render10.container;

    var el = container.querySelectorAll('.za-tab-bar__item')[0];

    _react.fireEvent.click(el);

    expect(onChange).toBeCalledWith('home');
  });
  it('should select first tab bar item if activeKey and defaultActivceKey are not existed', function () {
    var _render11 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      className: "test"
    }, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "home",
      title: "\u4E3B\u9875"
    }), /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "about us",
      title: "\u5173\u4E8E\u6211\u4EEC"
    }))),
        container = _render11.container;

    var el = container.querySelectorAll('.za-tab-bar__item');
    expect(el[0].className).toEqual('za-tab-bar__item za-tab-bar__item--active');
    expect(el[1].className).toEqual('za-tab-bar__item');
  });
  it('should render actionIcon if selected is false(defaultActivceKey is not equal with itemKey)', function () {
    var onChange = jest.fn();

    var _render12 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      defaultActiveKey: "home",
      onChange: onChange
    }, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "badge",
      title: "\u4E3B\u9875",
      icon: icon,
      activeIcon: activeIcon,
      badge: {
        shape: 'circle',
        text: '3'
      }
    }))),
        container = _render12.container;

    var el = container.querySelectorAll('.za-tab-bar__item'); // wrapper.find(TabBarItem).first().simulate('click');

    _react.fireEvent.click(el[0]);

    expect(onChange).toBeCalledWith('badge');
  });
  it('should selected tab bar item if activeKey is equal with itemKey', function () {
    var _render13 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, {
      defaultActiveKey: "home"
    }, /*#__PURE__*/_react2.default.createElement(TabBarItem, {
      itemKey: "home",
      title: "\u4E3B\u9875"
    }))),
        container = _render13.container;

    var el = container.querySelectorAll('.za-tab-bar__item');
    expect(el[0].className).toEqual('za-tab-bar__item za-tab-bar__item--active');
  });
});