github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: update message & notification test

refactor-notification
tangjinzhou 2022-01-01 10:31:02 +08:00
parent 842dde0706
commit 815dbaa614
5 changed files with 78 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/message/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,5 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/message/demo/custom-style.vue correctly 1`] = `
<button class="ant-btn" type="button">
<!----><span>Customized style</span>
</button>
`;
exports[`renders ./components/message/demo/duration.vue correctly 1`] = `
<button class="ant-btn" type="button">
<!----><span>Customized display duration</span>
@ -36,6 +42,11 @@ exports[`renders ./components/message/demo/thenable.vue correctly 1`] = `
exports[`renders ./components/message/demo/update.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open the message box</span>
<!----><span>Open the message box (update by key)</span>
</button>
<br>
<br>
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open the message box (update by reactive)</span>
</button>
`;

96
components/message/__tests__/index.test.js
View File

@ -1,9 +1,10 @@
import { asyncExpect } from '../../../tests/utils';
import message from '..';
import message, { getInstance } from '..';
import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';
describe('message', () => {
beforeEach(() => {
jest.useFakeTimers();
document.body.outerHTML = '';
});
@ -11,6 +12,11 @@ describe('message', () => {
message.destroy();
});
afterEach(() => {
message.destroy();
jest.useRealTimers();
});
it('should be able to config top', async () => {
message.config({
top: '100px',
@ -41,46 +47,34 @@ describe('message', () => {
message.info('test');
}
message.info('last');
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
}, 0);
await Promise.resolve();
jest.runAllTimers();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
});
it('should be able to hide manually', async () => {
const hide1 = message.info('whatever', 0);
const hide2 = message.info('whatever', 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
hide1();
}, 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
hide2();
}, 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
}, 0);
await Promise.resolve();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
hide1();
jest.runAllTimers();
expect(getInstance().component.value.notices).toHaveLength(1);
hide2();
jest.runAllTimers();
expect(getInstance().component.value.notices).toHaveLength(0);
});
it('should be able to destroy globally', async () => {
await asyncExpect(() => {
message.info('whatever', 0);
});
await asyncExpect(() => {
message.info('whatever', 0);
});
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message').length).toBe(1);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
});
await asyncExpect(() => {
message.destroy();
});
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message').length).toBe(0);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
});
message.info('whatever', 0);
message.info('whatever', 0);
await Promise.resolve();
expect(document.querySelectorAll('.ant-message').length).toBe(1);
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
message.destroy();
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', () => {
@ -88,6 +82,7 @@ describe('message', () => {
});
it('should have the default duration when using the onClose arguments', done => {
jest.useRealTimers();
const defaultDuration = 3;
const now = Date.now();
message.info('whatever', () => {
@ -99,6 +94,7 @@ describe('message', () => {
});
it('should be called like promise', done => {
jest.useRealTimers();
const defaultDuration = 3;
const now = Date.now();
message.info('whatever').then(() => {
@ -112,38 +108,32 @@ describe('message', () => {
// https:// github.com/ant-design/ant-design/issues/8201
it('should hide message correctly', async () => {
let hide = message.loading('Action in progress..', 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
hide();
}, 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
}, 0);
await Promise.resolve();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
hide();
await Promise.resolve();
jest.runAllTimers();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
});
it('should allow custom icon', async () => {
message.open({ content: 'Message', icon: <SmileOutlined /> });
await asyncExpect(() => {
expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
}, 0);
await Promise.resolve();
expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
});
it('should have no icon', async () => {
message.open({ content: 'Message' });
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
}, 0);
await Promise.resolve();
expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
});
// https://github.com/ant-design/ant-design/issues/8201
it('should destroy messages correctly', async () => {
message.loading('Action in progress1..', 0);
message.loading('Action in progress2..', 0);
setTimeout(() => message.destroy(), 1000);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
}, 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
}, 1500);
await Promise.resolve();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
jest.runAllTimers();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
});
});

7
components/notification/__tests__/__snapshots__/demo.test.js.snap
View File

@ -42,7 +42,12 @@ exports[`renders ./components/notification/demo/placement.vue correctly 1`] = `
exports[`renders ./components/notification/demo/update.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open the notification box</span>
<!----><span>Open the notification box (update by key)</span>
</button>
<br>
<br>
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open the notification box (update by reactive)</span>
</button>
`;

27
components/notification/__tests__/index.test.js
View File

@ -1,13 +1,15 @@
import { asyncExpect } from '../../../tests/utils';
import notification from '..';
import notification, { getInstance } from '..';
import { StepBackwardOutlined } from '@ant-design/icons-vue';
describe('notification', () => {
beforeEach(() => {
jest.useFakeTimers();
document.body.outerHTML = '';
});
afterEach(() => {
jest.useRealTimers();
notification.destroy();
});
@ -24,17 +26,18 @@ describe('notification', () => {
key: '2',
});
});
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
notification.close('1');
}, 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(1);
notification.close('2');
}, 0);
await asyncExpect(() => {
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(0);
}, 0);
await Promise.resolve();
expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
notification.close('1');
jest.runAllTimers();
expect(
(await getInstance('ant-notification-topRight-false')).component.value.notices,
).toHaveLength(1);
notification.close('2');
jest.runAllTimers();
expect(
(await getInstance('ant-notification-topRight-false')).component.value.notices,
).toHaveLength(0);
});
it('should be able to destroy globally', async () => {

4
components/vc-notification/Notification.tsx
View File

@ -44,8 +44,6 @@ export interface NotificationInstance {
removeNotice: (key: Key) => void;
destroy: () => void;
component: Notification;
useNotification: () => [NoticeFunc, any];
}
export interface NotificationProps {
@ -124,6 +122,7 @@ const Notification = defineComponent<NotificationProps>({
expose({
add,
remove,
notices,
});
return () => {
const { prefixCls, closeIcon = slots.closeIcon?.({ prefixCls }) } = props;
@ -231,6 +230,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback
div.parentNode.removeChild(div);
}
},
component: notiRef,
});
});
return () => {