mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
2341a25d91
* more refactor * chore: motion support * chore: tmp test * test: Hooks * chore: static function * tmp of it * all of it * mv prefix * chore: clean up * chore: clean up * more test case * test: all base test * test: all test case * init * refactor: rm notification.open instance related code * follow up * refactor: singlton * test: notification test case * refactor to destroy * refactor: message base * test: part test case * test: more * test: more * test: all test * chore: clean up * docs: reorder * chore: fix lint * test: fix test case * chore: add act * chore: back * chore: fix style * test: notification test * test: more and more * test: fix more test * test: index * test: more & more * test: fix placement * test: fix coverage * chore: clean up * chore: bundle size * fix: 17 * chore: more * test: message * test: more test * fix: lint * test: rm class in static * chore: clean up * test: coverage * chore: fix lint
293 lines
7.1 KiB
TypeScript
293 lines
7.1 KiB
TypeScript
import React from 'react';
|
|
import { UserOutlined } from '@ant-design/icons';
|
|
import notification, { actWrapper } from '..';
|
|
import ConfigProvider from '../../config-provider';
|
|
import { act, fireEvent } from '../../../tests/utils';
|
|
import { awaitPromise, triggerMotionEnd } from './util';
|
|
|
|
describe('notification', () => {
|
|
beforeAll(() => {
|
|
actWrapper(act);
|
|
});
|
|
|
|
beforeEach(() => {
|
|
jest.useFakeTimers();
|
|
});
|
|
|
|
afterEach(async () => {
|
|
// Clean up
|
|
notification.destroy();
|
|
await triggerMotionEnd();
|
|
|
|
notification.config({
|
|
prefixCls: null,
|
|
getContainer: null,
|
|
});
|
|
|
|
jest.useRealTimers();
|
|
|
|
await awaitPromise();
|
|
});
|
|
|
|
it('not duplicate create holder', async () => {
|
|
notification.config({
|
|
prefixCls: 'additional-holder',
|
|
});
|
|
|
|
for (let i = 0; i < 5; i += 1) {
|
|
notification.open({
|
|
message: 'Notification Title',
|
|
duration: 0,
|
|
});
|
|
}
|
|
|
|
await awaitPromise();
|
|
|
|
act(() => {
|
|
jest.runAllTimers();
|
|
});
|
|
|
|
expect(document.querySelectorAll('.additional-holder')).toHaveLength(1);
|
|
});
|
|
|
|
it('should be able to hide manually', async () => {
|
|
notification.open({
|
|
message: 'Notification Title 1',
|
|
duration: 0,
|
|
key: '1',
|
|
});
|
|
await awaitPromise();
|
|
|
|
notification.open({
|
|
message: 'Notification Title 2',
|
|
duration: 0,
|
|
key: '2',
|
|
});
|
|
|
|
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(2);
|
|
|
|
// Close 1
|
|
notification.destroy('1');
|
|
|
|
await triggerMotionEnd();
|
|
|
|
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(1);
|
|
|
|
// Close 2
|
|
notification.destroy('2');
|
|
|
|
await triggerMotionEnd();
|
|
|
|
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(0);
|
|
});
|
|
|
|
it('should be able to destroy globally', async () => {
|
|
notification.open({
|
|
message: 'Notification Title 1',
|
|
duration: 0,
|
|
});
|
|
await awaitPromise();
|
|
|
|
notification.open({
|
|
message: 'Notification Title 2',
|
|
duration: 0,
|
|
});
|
|
|
|
expect(document.querySelectorAll('.ant-notification')).toHaveLength(1);
|
|
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(2);
|
|
|
|
notification.destroy();
|
|
|
|
await triggerMotionEnd();
|
|
|
|
expect(document.querySelectorAll('.ant-notification')).toHaveLength(0);
|
|
expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(0);
|
|
});
|
|
|
|
it('should be able to destroy after config', () => {
|
|
notification.config({
|
|
bottom: 100,
|
|
});
|
|
|
|
notification.destroy();
|
|
});
|
|
|
|
it('should be able to config rtl', async () => {
|
|
notification.config({
|
|
rtl: true,
|
|
});
|
|
|
|
notification.open({
|
|
message: 'whatever',
|
|
});
|
|
await awaitPromise();
|
|
|
|
expect(document.querySelectorAll('.ant-notification-rtl')).toHaveLength(1);
|
|
});
|
|
|
|
it('should be able to global config rootPrefixCls', async () => {
|
|
ConfigProvider.config({ prefixCls: 'prefix-test', iconPrefixCls: 'bamboo' });
|
|
|
|
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: null! });
|
|
});
|
|
|
|
it('should be able to config prefixCls', async () => {
|
|
notification.config({
|
|
prefixCls: 'prefix-test',
|
|
});
|
|
|
|
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: null,
|
|
});
|
|
});
|
|
|
|
it('should be able to open with icon', async () => {
|
|
const iconPrefix = '.ant-notification-notice-icon';
|
|
|
|
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.',
|
|
});
|
|
});
|
|
|
|
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 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.',
|
|
});
|
|
});
|
|
|
|
await awaitPromise();
|
|
|
|
list.forEach(type => {
|
|
expect(document.querySelectorAll(`.ant-notification-notice-${type}`)).toHaveLength(1);
|
|
});
|
|
});
|
|
|
|
it('trigger onClick', async () => {
|
|
const onClick = jest.fn();
|
|
|
|
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', async () => {
|
|
notification.open({
|
|
message: 'Notification Title',
|
|
duration: 0,
|
|
closeIcon: <span className="test-customize-icon" />,
|
|
});
|
|
await awaitPromise();
|
|
|
|
expect(document.querySelectorAll('.test-customize-icon')).toHaveLength(1);
|
|
});
|
|
|
|
it('support config closeIcon', async () => {
|
|
notification.config({
|
|
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.querySelector('.replace-icon')).toBeTruthy();
|
|
|
|
notification.config({
|
|
closeIcon: null,
|
|
});
|
|
});
|
|
|
|
it('closeIcon should be update', async () => {
|
|
const list = ['1', '2'];
|
|
list.forEach(type => {
|
|
notification.open({
|
|
message: 'Notification Title',
|
|
closeIcon: <span className={`test-customize-icon-${type}`} />,
|
|
duration: 0,
|
|
});
|
|
});
|
|
|
|
await awaitPromise();
|
|
|
|
list.forEach(type => {
|
|
expect(document.querySelector(`.test-customize-icon-${type}`)).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
it('support config duration', async () => {
|
|
notification.config({
|
|
duration: 0,
|
|
});
|
|
|
|
notification.open({
|
|
message: 'whatever',
|
|
});
|
|
await awaitPromise();
|
|
|
|
expect(document.querySelector('.ant-notification')).toBeTruthy();
|
|
});
|
|
|
|
it('support icon', async () => {
|
|
notification.open({
|
|
message: 'Notification Title',
|
|
duration: 0,
|
|
icon: <UserOutlined />,
|
|
});
|
|
await awaitPromise();
|
|
|
|
expect(document.querySelector('.anticon-user')).toBeTruthy();
|
|
});
|
|
});
|