From 815dbaa6145fe5e4db533ca7447c51a5008107d4 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 1 Jan 2022 10:31:02 +0800 Subject: [PATCH] test: update message & notification test --- .../__tests__/__snapshots__/demo.test.js.snap | 13 ++- components/message/__tests__/index.test.js | 96 +++++++++---------- .../__tests__/__snapshots__/demo.test.js.snap | 7 +- .../notification/__tests__/index.test.js | 27 +++--- components/vc-notification/Notification.tsx | 4 +- 5 files changed, 78 insertions(+), 69 deletions(-) diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap index 45e34c08d..218b35d0c 100644 --- a/components/message/__tests__/__snapshots__/demo.test.js.snap +++ b/components/message/__tests__/__snapshots__/demo.test.js.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders ./components/message/demo/custom-style.vue correctly 1`] = ` + +`; + exports[`renders ./components/message/demo/duration.vue correctly 1`] = ` +
+
+ `; diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js index 33e727348..99e8c3a48 100644 --- a/components/message/__tests__/index.test.js +++ b/components/message/__tests__/index.test.js @@ -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: }); - 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); }); }); diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap index f1c90a415..bc4fec7a5 100644 --- a/components/notification/__tests__/__snapshots__/demo.test.js.snap +++ b/components/notification/__tests__/__snapshots__/demo.test.js.snap @@ -42,7 +42,12 @@ exports[`renders ./components/notification/demo/placement.vue correctly 1`] = ` exports[`renders ./components/notification/demo/update.vue correctly 1`] = ` +
+
+ `; diff --git a/components/notification/__tests__/index.test.js b/components/notification/__tests__/index.test.js index f8fa33fd2..f006a3075 100644 --- a/components/notification/__tests__/index.test.js +++ b/components/notification/__tests__/index.test.js @@ -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 () => { diff --git a/components/vc-notification/Notification.tsx b/components/vc-notification/Notification.tsx index 914d56e65..a950d4a8c 100644 --- a/components/vc-notification/Notification.tsx +++ b/components/vc-notification/Notification.tsx @@ -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({ 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 () => {