ant-design/components/notification/__tests__/index.test.tsx
二货机器人 2341a25d91
feat: refactor useNotification (#35423)
* 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
2022-05-11 14:26:18 +08:00

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();
});
});