mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

test: ✅ add more test cases (#26350)

Browse Source 
* test: add more test to Layout

* test: add more test to DatePicker

* refactor: remove unused code in Menu
This commit is contained in:
偏右 2020-08-24 10:09:57 +08:00 committed by GitHub
parent d8215589de
commit d5eda4f87e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 138 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
components/date-picker/__tests__/DatePicker.test.js
View File

@ -78,4 +78,106 @@ describe('DatePicker', () => {
const wrapper = mount(<DatePicker placeholder={undefined} />);
expect(wrapper.find('input').props().placeholder).toEqual('Select date');
});
it('showTime={{ showHour: true, showMinute: true }}', () => {
const wrapper = mount(
<DatePicker
defaultValue={moment()}
showTime={{ showHour: true, showMinute: true }}
format="YYYY-MM-DD"
open
/>,
);
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
expect(
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
.length,
).toBe(24);
expect(
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
});
it('showTime={{ showHour: true, showSecond: true }}', () => {
const wrapper = mount(
<DatePicker
defaultValue={moment()}
showTime={{ showHour: true, showSecond: true }}
format="YYYY-MM-DD"
open
/>,
);
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
expect(
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
.length,
).toBe(24);
expect(
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
});
it('showTime={{ showMinute: true, showSecond: true }}', () => {
const wrapper = mount(
<DatePicker
defaultValue={moment()}
showTime={{ showMinute: true, showSecond: true }}
format="YYYY-MM-DD"
open
/>,
);
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
expect(
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
expect(
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
});
it('12 hours', () => {
const wrapper = mount(
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
);
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
expect(
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
.length,
).toBe(12);
expect(
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
expect(
wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
expect(
wrapper.find('.ant-picker-time-panel-column').at(3).find('.ant-picker-time-panel-cell')
.length,
).toBe(2);
});
it('24 hours', () => {
const wrapper = mount(
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
);
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
expect(
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
.length,
).toBe(24);
expect(
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
expect(
wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
.length,
).toBe(60);
});
});

16
components/layout/Sider.tsx
View File

@ -112,28 +112,22 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
this.responsiveHandler(this.mql);
}
if (this.props.siderHook) {
this.props.siderHook.addSider(this.uniqueId);
}
this.props?.siderHook.addSider(this.uniqueId);
}
componentWillUnmount() {
if (this.mql) {
this.mql.removeListener(this.responsiveHandler as any);
}
if (this.props.siderHook) {
this.props.siderHook.removeSider(this.uniqueId);
}
this?.mql?.removeListener(this.responsiveHandler as any);
this.props?.siderHook.removeSider(this.uniqueId);
}
responsiveHandler = (mql: MediaQueryListEvent | MediaQueryList) => {
this.setState({ below: mql.matches });
const { onBreakpoint } = this.props;
const { collapsed } = this.state;
if (onBreakpoint) {
onBreakpoint(mql.matches);
}
if (this.state.collapsed !== mql.matches) {
if (collapsed !== mql.matches) {
this.setCollapsed(mql.matches, 'responsive');
}
};

34
components/layout/__tests__/index.test.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { mount, render } from 'enzyme';
import Layout from '..';
import Icon from '../../icon';
@ -14,7 +14,7 @@ describe('Layout', () => {
mountTest(Sider);
mountTest(() => (
<Layout>
<Sider />
<Sider breakpoint="xs" />
<Content />
</Layout>
));
@ -23,7 +23,7 @@ describe('Layout', () => {
rtlTest(Content);
rtlTest(Sider);
it('detect the sider as children', async () => {
it('detect the sider as children', () => {
const wrapper = mount(
<Layout>
<Sider>Sider</Sider>
@ -31,6 +31,34 @@ describe('Layout', () => {
</Layout>,
);
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
wrapper.unmount();
});
it('umount from multiple siders', async () => {
const App = () => {
const [hide1, setHide1] = useState(false);
const [hide2, setHide2] = useState(false);
return (
<Layout>
{hide1 ? null : <Sider>Sider</Sider>}
{hide2 ? null : <Sider>Sider</Sider>}
<Content>
<button onClick={() => setHide1(true)} type="button">
hide sider 1
</button>
<button onClick={() => setHide2(true)} type="button">
hide sider 2
</button>
</Content>
</Layout>
);
};
const wrapper = mount(<App />);
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
wrapper.find('button').at(0).simulate('click');
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
wrapper.find('button').at(1).simulate('click');
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
});
it('detect the sider inside the children', async () => {

11
components/menu/MenuItem.tsx
View File

@ -16,16 +16,6 @@ export interface MenuItemProps extends Omit<RcMenuItemProps, 'title'> {
export default class MenuItem extends React.Component<MenuItemProps> {
static isMenuItem = true;
private menuItem: this;
onKeyDown = (e: React.MouseEvent<HTMLElement>) => {
this.menuItem.onKeyDown(e);
};
saveMenuItem = (menuItem: this) => {
this.menuItem = menuItem;
};
renderItemChildren(inlineCollapsed: boolean) {
const { icon, children, level, rootPrefixCls } = this.props;
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
@ -79,7 +69,6 @@ export default class MenuItem extends React.Component<MenuItemProps> {
(icon ? childrenLength + 1 : childrenLength) === 1,
})}
title={title}
ref={this.saveMenuItem}
>
{icon}
{this.renderItemChildren(inlineCollapsed)}

11
components/menu/SubMenu.tsx
View File

@ -31,16 +31,6 @@ class SubMenu extends React.Component<SubMenuProps, any> {
// fix issue:https://github.com/ant-design/ant-design/issues/8666
static isSubMenu = 1;
private subMenu: any;
onKeyDown = (e: React.MouseEvent<HTMLElement>) => {
this.subMenu.onKeyDown(e);
};
saveSubMenu = (subMenu: any) => {
this.subMenu = subMenu;
};
renderTitle(inlineCollapsed: boolean) {
const { icon, title, level, rootPrefixCls } = this.props;
if (!icon) {
@ -69,7 +59,6 @@ class SubMenu extends React.Component<SubMenuProps, any> {
<RcSubMenu
{...omit(this.props, ['icon'])}
title={this.renderTitle(inlineCollapsed)}
ref={this.saveSubMenu}
popupClassName={classNames(
rootPrefixCls,
`${rootPrefixCls}-${antdMenuTheme}`,