test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

chore: recover test

Browse Source
This commit is contained in:
MadCcc 2022-08-15 15:36:00 +08:00
parent e6335e233c
commit c367c51307
2 changed files with 323 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

346
components/message/__tests__/index.test.tsx
View File

@ -1,277 +1,237 @@
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import message, { getInstance, type MessageType } from '..';
import { act, render, fireEvent } from '../../../tests/utils';
Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
writable: true,
value: true,
});
import message, { actWrapper } from '..';
import { act, fireEvent, sleep } from '../../../tests/utils';
import { awaitPromise, triggerMotionEnd } from './util';
describe('message', () => {
beforeAll(() => {
actWrapper(act);
});
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
afterEach(async () => {
// Clean up
message.destroy();
await triggerMotionEnd();
act(() => {
message.destroy();
jest.runAllTimers();
});
jest.useRealTimers();
await awaitPromise();
});
it('should be able to hide manually', async () => {
let hide1!: MessageType;
let hide2!: MessageType;
const hide1 = message.info('whatever', 0);
const hide2 = message.info('whatever', 0);
act(() => {
hide1 = message.info('whatever', 0);
});
act(() => {
hide2 = message.info('whatever', 0);
});
await awaitPromise();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(2);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
hide1();
act(() => {
jest.runAllTimers();
});
expect(getInstance()!.component.state.notices).toHaveLength(1);
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
hide2();
act(() => {
jest.runAllTimers();
});
expect(getInstance()!.component.state.notices).toHaveLength(0);
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
});
it('should be able to remove manually with a unique key', () => {
it('should be able to remove manually with a unique key', async () => {
const key1 = 'key1';
const key2 = 'key2';
act(() => {
message.info({ content: 'Message1', key: 'key1', duration: 0 });
});
act(() => {
message.info({ content: 'Message2', key: 'key2', duration: 0 });
});
message.info({ content: 'Message1', key: 'key1', duration: 0 });
message.info({ content: 'Message2', key: 'key2', duration: 0 });
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
await awaitPromise();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(2);
message.destroy(key1);
act(() => {
jest.runAllTimers();
});
expect(getInstance()!.component.state.notices).toHaveLength(1);
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
message.destroy(key2);
act(() => {
jest.runAllTimers();
});
expect(getInstance()!.component.state.notices).toHaveLength(0);
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
});
it('should be able to destroy globally', () => {
act(() => {
message.info('whatever', 0);
});
act(() => {
message.info('whatever', 0);
});
it('should be able to destroy globally', async () => {
message.info('whatever', 0);
message.info('whatever', 0);
expect(document.querySelectorAll('.ant-message').length).toBe(1);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
await awaitPromise();
expect(document.querySelectorAll('.ant-message')).toHaveLength(1);
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(2);
message.destroy();
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message')).toHaveLength(0);
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
});
it('should not need to use duration argument when using the onClose arguments', async () => {
const onClose = jest.fn();
const close = message.info('whatever', onClose);
await awaitPromise();
close();
await triggerMotionEnd();
expect(onClose).toHaveBeenCalled();
});
it('should have the default duration when using the onClose arguments', async () => {
const onClose = jest.fn();
message.info('whatever', onClose);
await awaitPromise();
act(() => {
jest.runAllTimers();
jest.advanceTimersByTime(2500);
});
expect(document.querySelectorAll('.ant-message').length).toBe(0);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
});
it('should not need to use duration argument when using the onClose arguments', () => {
message.info('whatever', () => {});
});
expect(document.querySelector('.ant-message-move-up-leave')).toBeFalsy();
it('should have the default duration when using the onClose arguments', done => {
jest.useRealTimers();
const defaultDuration = 3;
const now = Date.now();
message.info('whatever', () => {
// calculate the approximately duration value
const aboutDuration = parseInt(String((Date.now() - now) / 1000), 10);
expect(aboutDuration).toBe(defaultDuration);
done();
act(() => {
jest.advanceTimersByTime(1000);
});
expect(document.querySelector('.ant-message-move-up-leave')).toBeTruthy();
});
it('trigger onClick method', () => {
it('trigger onClick method', async () => {
const onClick = jest.fn();
class Test extends React.Component {
static isFirstRender = true;
message.info({
onClick,
duration: 0,
content: 'message info',
});
componentDidMount() {
if (Test.isFirstRender) {
Test.isFirstRender = false;
message.info({
onClick,
duration: 0,
content: 'message info',
});
}
}
await awaitPromise();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
fireEvent.click(document.querySelector('.ant-message-notice')!);
render() {
return <div>test message onClick method</div>;
}
}
render(<Test />);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
fireEvent.click(document.querySelectorAll('.ant-message-notice')[0]);
expect(onClick).toHaveBeenCalled();
});
it('should be called like promise', done => {
jest.useRealTimers();
const defaultDuration = 3;
const now = Date.now();
message.info('whatever').then(() => {
// calculate the approximately duration value
const aboutDuration = parseInt(String((Date.now() - now) / 1000), 10);
expect(aboutDuration).toBe(defaultDuration);
done();
it('should be called like promise', async () => {
const onClose = jest.fn();
message.info('whatever').then(onClose);
await awaitPromise();
act(() => {
jest.advanceTimersByTime(2500);
});
expect(onClose).not.toHaveBeenCalled();
act(() => {
jest.advanceTimersByTime(1000);
});
await sleep(); // Wait to let event loop run
expect(onClose).toHaveBeenCalled();
});
// https://github.com/ant-design/ant-design/issues/8201
it('should hide message correctly', () => {
let hide!: MessageType;
class Test extends React.Component {
static isFirstRender = true;
it('should hide message correctly', async () => {
const hide = message.loading('Action in progress..', 0);
await awaitPromise();
componentDidMount() {
act(() => {
if (Test.isFirstRender) {
Test.isFirstRender = false;
hide = message.loading('Action in progress..', 0);
}
});
}
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
render() {
return <div>test</div>;
}
}
render(<Test />);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
act(() => {
hide();
jest.runAllTimers();
});
expect(getInstance()!.component.state.notices).toHaveLength(0);
hide!();
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
});
it('should allow custom icon', () => {
act(() => {
message.open({ content: 'Message', icon: <SmileOutlined /> });
});
expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
it('should allow custom icon', async () => {
message.open({ content: 'Message', icon: <SmileOutlined /> });
await awaitPromise();
expect(document.querySelector('.anticon-smile')).toBeTruthy();
});
it('should have no icon', () => {
it('should have no icon', async () => {
message.open({ content: 'Message', icon: <span /> });
expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
await awaitPromise();
expect(document.querySelector('.ant-message-notice .anticon')).toBeFalsy();
});
it('should have no icon when not pass icon props', () => {
it('should have no icon when not pass icon props', async () => {
message.open({ content: 'Message' });
expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
await awaitPromise();
expect(document.querySelector('.ant-message-notice .anticon')).toBeFalsy();
});
// https://github.com/ant-design/ant-design/issues/8201
it('should destroy messages correctly', () => {
class Test extends React.Component {
static isFirstRender = true;
it('should destroy messages correctly', async () => {
message.loading('Action in progress1..', 0);
message.loading('Action in progress2..', 0);
setTimeout(() => message.destroy(), 1000);
await awaitPromise();
componentDidMount() {
if (Test.isFirstRender) {
Test.isFirstRender = false;
message.loading('Action in progress1..', 0);
message.loading('Action in progress2..', 0);
setTimeout(() => message.destroy(), 1000);
}
}
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(2);
render() {
return <div>test</div>;
}
}
render(<Test />);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
act(() => {
jest.runAllTimers();
});
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
});
it('should support update message content with a unique key', () => {
it('should support update message content with a unique key', async () => {
const key = 'updatable';
class Test extends React.Component {
componentDidMount() {
message.loading({ content: 'Loading...', key });
// Testing that content of the message should be updated.
setTimeout(() => message.success({ content: 'Loaded', key }), 1000);
setTimeout(() => message.destroy(), 3000);
}
render() {
return <div>test</div>;
}
}
message.loading({ content: 'Loading...', key });
// Testing that content of the message should be updated.
setTimeout(() => message.success({ content: 'Loaded', key }), 1000);
setTimeout(() => message.destroy(), 3000);
await awaitPromise();
render(<Test />);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
act(() => {
jest.advanceTimersByTime(1500);
});
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
act(() => {
jest.runAllTimers();
});
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
expect(document.querySelector('.ant-message-move-up-leave')).toBeFalsy();
await triggerMotionEnd();
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
});
it('update message content with a unique key and cancel manually', () => {
it('update message content with a unique key and cancel manually', async () => {
const key = 'updatable';
class Test extends React.Component {
componentDidMount() {
let hideLoading: MessageType;
act(() => {
hideLoading = message.loading({ content: 'Loading...', key, duration: 0 });
});
// Testing that content of the message should be cancel manually.
setTimeout(() => {
act(() => {
hideLoading();
});
}, 1000);
}
render() {
return <div>test</div>;
}
}
const hideLoading = message.loading({ content: 'Loading...', key, duration: 0 });
await awaitPromise();
render(<Test />);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
setTimeout(() => {
act(() => {
hideLoading();
});
}, 1000);
jest.advanceTimersByTime(1500);
expect(getInstance()!.component.state.notices).toHaveLength(0);
expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
act(() => {
jest.advanceTimersByTime(1500);
});
expect(document.querySelectorAll('.ant-message-move-up-leave')).toHaveLength(1);
});
it('should not throw error when pass null', () => {
it('should not throw error when pass null', async () => {
message.error(null);
await awaitPromise();
});
});

387
components/notification/__tests__/index.test.tsx
View File

@ -1,339 +1,292 @@
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import notification, { getInstance, type NotificationInstance } from '..';
import { sleep, act } from '../../../tests/utils';
import notification, { actWrapper } from '..';
import ConfigProvider from '../../config-provider';
Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
writable: true,
value: true,
});
type NotificationWithIconType = keyof Omit<NotificationInstance, 'open'>;
import { act, fireEvent } from '../../../tests/utils';
import { awaitPromise, triggerMotionEnd } from './util';
describe('notification', () => {
beforeEach(() => {
jest.useFakeTimers();
jest.clearAllTimers();
beforeAll(() => {
actWrapper(act);
});
afterEach(() => {
act(() => {
jest.runAllTimers();
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(async () => {
// Clean up
notification.destroy();
await triggerMotionEnd();
notification.config({
prefixCls: null,
getContainer: null,
});
jest.useRealTimers();
act(() => {
notification.destroy();
});
await awaitPromise();
});
it('not duplicate create holder', async () => {
notification.config({
prefixCls: 'additional-holder',
});
for (let i = 0; i < 5; i += 1) {
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
prefixCls: 'additional-holder',
});
notification.open({
message: 'Notification Title',
duration: 0,
});
}
await sleep();
await awaitPromise();
const count = document.querySelectorAll('.additional-holder').length;
expect(count).toEqual(1);
act(() => {
jest.runAllTimers();
});
expect(document.querySelectorAll('.additional-holder')).toHaveLength(1);
});
it('should be able to hide manually', async () => {
act(() => {
notification.open({
message: 'Notification Title 1',
duration: 0,
key: '1',
});
jest.runAllTimers();
notification.open({
message: 'Notification Title 1',
duration: 0,
key: '1',
});
await awaitPromise();
notification.open({
message: 'Notification Title 2',
duration: 0,
key: '2',
});
act(() => {
jest.runAllTimers();
});
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(2);
act(() => {
notification.open({
message: 'Notification Title 2',
duration: 0,
key: '2',
});
jest.runAllTimers();
});
// Close 1
notification.destroy('1');
act(() => {
jest.runAllTimers();
});
await triggerMotionEnd();
await act(async () => {
await Promise.resolve();
});
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(1);
act(() => {
notification.close('1');
jest.runAllTimers();
});
// Close 2
notification.destroy('2');
await act(async () => {
await Promise.resolve();
});
expect((await getInstance('ant-notification-topRight'))!.component.state.notices).toHaveLength(
1,
);
await triggerMotionEnd();
act(() => {
notification.close('2');
jest.runAllTimers();
});
await act(async () => {
await Promise.resolve();
});
expect((await getInstance('ant-notification-topRight'))!.component.state.notices).toHaveLength(
0,
);
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(0);
});
it('should be able to destroy globally', async () => {
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
});
notification.open({
message: 'Notification Title 1',
duration: 0,
});
await awaitPromise();
notification.open({
message: 'Notification Title 2',
duration: 0,
});
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
});
});
expect(document.querySelectorAll('.ant-notification')).toHaveLength(1);
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(2);
await act(async () => {
await Promise.resolve();
});
notification.destroy();
expect(document.querySelectorAll('.ant-notification').length).toBe(1);
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
await triggerMotionEnd();
act(() => {
notification.destroy();
});
await act(async () => {
await Promise.resolve();
});
expect(document.querySelectorAll('.ant-notification').length).toBe(0);
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(0);
expect(document.querySelectorAll('.ant-notification')).toHaveLength(0);
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(0);
});
it('should be able to destroy after config', () => {
act(() => {
notification.config({
bottom: 100,
});
notification.config({
bottom: 100,
});
act(() => {
notification.destroy();
});
notification.destroy();
});
it('should be able to config rtl', () => {
act(() => {
notification.config({
rtl: true,
});
it('should be able to config rtl', async () => {
notification.config({
rtl: true,
});
act(() => {
notification.open({
message: 'whatever',
});
notification.open({
message: 'whatever',
});
await awaitPromise();
expect(document.querySelectorAll('.ant-notification-rtl').length).toBe(1);
expect(document.querySelectorAll('.ant-notification-rtl')).toHaveLength(1);
});
it('should be able to global config rootPrefixCls', () => {
it('should be able to global config rootPrefixCls', async () => {
ConfigProvider.config({ prefixCls: 'prefix-test', iconPrefixCls: 'bamboo' });
act(() => {
notification.success({ message: 'Notification Title', duration: 0 });
});
notification.success({ message: 'Notification Title', duration: 0 });
await awaitPromise();
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(0);
expect(document.querySelectorAll('.prefix-test-notification-notice')).toHaveLength(1);
expect(document.querySelectorAll('.bamboo-check-circle')).toHaveLength(1);
ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: '' });
ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: null! });
});
it('should be able to config prefixCls', () => {
it('should be able to config prefixCls', async () => {
notification.config({
prefixCls: 'prefix-test',
});
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
});
notification.open({
message: 'Notification Title',
duration: 0,
});
await awaitPromise();
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(0);
expect(document.querySelectorAll('.prefix-test-notice')).toHaveLength(1);
notification.config({
prefixCls: '',
prefixCls: null,
});
});
it('should be able to open with icon', async () => {
const iconPrefix = '.ant-notification-notice-icon';
const openNotificationWithIcon = async (type: NotificationWithIconType) => {
act(() => {
notification[type]({
message: 'Notification Title',
duration: 0,
description: 'This is the content of the notification.',
});
jest.runAllTimers();
});
};
const list: Array<NotificationWithIconType> = ['success', 'info', 'warning', 'error'];
const promises = list.map(type => openNotificationWithIcon(type));
await act(async () => {
await Promise.all(promises);
});
const list = ['success', 'info', 'warning', 'error'] as const;
list.forEach(type => {
expect(document.querySelectorAll(`${iconPrefix}-${type}`).length).toBe(1);
notification[type]({
message: 'Notification Title',
duration: 0,
description: 'This is the content of the notification.',
});
});
await awaitPromise();
list.forEach(type => {
expect(document.querySelectorAll(`${iconPrefix}-${type}`)).toHaveLength(1);
});
});
it('should be able to add parent class for different notification types', async () => {
const openNotificationWithIcon = async (type: NotificationWithIconType) => {
act(() => {
notification[type]({
message: 'Notification Title',
duration: 0,
description: 'This is the content of the notification.',
});
jest.runAllTimers();
const list = ['success', 'info', 'warning', 'error'] as const;
list.forEach(type => {
notification[type]({
message: 'Notification Title',
duration: 0,
description: 'This is the content of the notification.',
});
};
const list: Array<NotificationWithIconType> = ['success', 'info', 'warning', 'error'];
const promises = list.map(type => openNotificationWithIcon(type));
await act(async () => {
await Promise.all(promises);
});
await awaitPromise();
list.forEach(type => {
expect(document.querySelectorAll(`.ant-notification-notice-${type}`).length).toBe(1);
expect(document.querySelectorAll(`.ant-notification-notice-${type}`)).toHaveLength(1);
});
});
it('trigger onClick', () => {
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
});
});
it('trigger onClick', async () => {
const onClick = jest.fn();
expect(document.querySelectorAll('.ant-notification').length).toBe(1);
notification.open({
message: 'Notification Title',
duration: 0,
onClick,
});
await awaitPromise();
expect(document.querySelectorAll('.ant-notification')).toHaveLength(1);
fireEvent.click(document.querySelector('.ant-notification-notice')!);
expect(onClick).toHaveBeenCalled();
});
it('support closeIcon', () => {
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
closeIcon: <span className="test-customize-icon" />,
});
it('support closeIcon', async () => {
notification.open({
message: 'Notification Title',
duration: 0,
closeIcon: <span className="test-customize-icon" />,
});
await awaitPromise();
expect(document.querySelectorAll('.test-customize-icon').length).toBe(1);
expect(document.querySelectorAll('.test-customize-icon')).toHaveLength(1);
});
it('support config closeIcon', () => {
it('support config closeIcon', async () => {
notification.config({
closeIcon: <span className="test-customize-icon" />,
});
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
closeIcon: <span className="test-customize-icon" />,
});
// Global Icon
notification.open({
message: 'Notification Title',
duration: 0,
});
await awaitPromise();
expect(document.querySelector('.test-customize-icon')).toBeTruthy();
// Notice Icon
notification.open({
message: 'Notification Title',
duration: 0,
closeIcon: <span className="replace-icon" />,
});
expect(document.querySelectorAll('.test-customize-icon').length).toBe(1);
expect(document.querySelector('.replace-icon')).toBeTruthy();
notification.config({
closeIcon: null,
});
});
it('closeIcon should be update', async () => {
const openNotificationWithCloseIcon = async (type: '1' | '2') => {
act(() => {
notification.open({
message: 'Notification Title',
closeIcon: <span className={`test-customize-icon-${type}`} />,
});
jest.runAllTimers();
const list = ['1', '2'];
list.forEach(type => {
notification.open({
message: 'Notification Title',
closeIcon: <span className={`test-customize-icon-${type}`} />,
duration: 0,
});
};
const list: Array<'1' | '2'> = ['1', '2'];
const promises = list.map(type => openNotificationWithCloseIcon(type));
await act(async () => {
await Promise.all(promises);
});
await awaitPromise();
list.forEach(type => {
expect(document.querySelectorAll(`.test-customize-icon-${type}`).length).toBe(1);
expect(document.querySelector(`.test-customize-icon-${type}`)).toBeTruthy();
});
});
it('support config duration', () => {
it('support config duration', async () => {
notification.config({
duration: 0,
});
act(() => {
notification.open({
message: 'whatever',
});
notification.open({
message: 'whatever',
});
await awaitPromise();
expect(document.querySelectorAll('.ant-notification').length).toBe(1);
expect(document.querySelector('.ant-notification')).toBeTruthy();
});
it('support icon', () => {
act(() => {
notification.open({
message: 'Notification Title',
duration: 0,
icon: <UserOutlined />,
});
it('support icon', async () => {
notification.open({
message: 'Notification Title',
duration: 0,
icon: <UserOutlined />,
});
await awaitPromise();
expect(document.querySelectorAll('.anticon-user').length).toBe(1);
expect(document.querySelector('.anticon-user')).toBeTruthy();
});
});