zarm
Version:
基于 React 的移动端UI库
217 lines (196 loc) • 8.28 kB
JavaScript
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import TabBar from '../index';
var TabBarItem = TabBar.Item;
var activeIcon = /*#__PURE__*/React.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__*/React.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 = render( /*#__PURE__*/React.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 = render( /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "1",
title: /*#__PURE__*/React.createElement("h1", null, "test"),
icon: /*#__PURE__*/React.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 = render( /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: 1,
onClick: onClick
})),
container = _render3.container;
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 = render( /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "1",
selected: true,
title: /*#__PURE__*/React.createElement("h1", null, "test"),
icon: /*#__PURE__*/React.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 = render( /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "1",
selected: true,
title: /*#__PURE__*/React.createElement("h1", null, "test"),
icon: /*#__PURE__*/React.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 = render( /*#__PURE__*/React.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 = render( /*#__PURE__*/React.createElement(TabBar, null, /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "home",
title: "\u4E3B\u9875",
icon: icon,
activeIcon: activeIcon
}))),
container = _render7.container;
expect(container).toMatchSnapshot();
});
it('with defaultActiveKey', function () {
var _render8 = render( /*#__PURE__*/React.createElement(TabBar, {
defaultActiveKey: "home"
}, /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "home",
title: "\u4E3B\u9875",
icon: icon,
activeIcon: activeIcon
}))),
container = _render8.container;
expect(container).toMatchSnapshot();
});
it('with activeKey', function () {
var _render9 = render( /*#__PURE__*/React.createElement(TabBar, {
activeKey: "home"
}, /*#__PURE__*/React.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 = render( /*#__PURE__*/React.createElement(TabBar, {
defaultActiveKey: "home",
onChange: onChange
}, /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "home",
title: "\u4E3B\u9875",
icon: icon,
activeIcon: activeIcon
}))),
container = _render10.container;
var el = container.querySelectorAll('.za-tab-bar__item')[0];
fireEvent.click(el);
expect(onChange).toBeCalledWith('home');
});
it('should select first tab bar item if activeKey and defaultActivceKey are not existed', function () {
var _render11 = render( /*#__PURE__*/React.createElement(TabBar, {
className: "test"
}, /*#__PURE__*/React.createElement(TabBarItem, {
itemKey: "home",
title: "\u4E3B\u9875"
}), /*#__PURE__*/React.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 = render( /*#__PURE__*/React.createElement(TabBar, {
defaultActiveKey: "home",
onChange: onChange
}, /*#__PURE__*/React.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');
fireEvent.click(el[0]);
expect(onChange).toBeCalledWith('badge');
});
it('should selected tab bar item if activeKey is equal with itemKey', function () {
var _render13 = render( /*#__PURE__*/React.createElement(TabBar, {
defaultActiveKey: "home"
}, /*#__PURE__*/React.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');
});
});