test: update message & notification test

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`] = `
+<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>
 `;

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(() => {
+    await Promise.resolve();
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
+    jest.runAllTimers();
-      expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
-    }, 0);
+    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(() => {
+    await Promise.resolve();
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-      hide1();
+    hide1();
-    }, 0);
+    jest.runAllTimers();
-    await asyncExpect(() => {
+    expect(getInstance().component.value.notices).toHaveLength(1);
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    hide2();
-      hide2();
+    jest.runAllTimers();
-    }, 0);
+    expect(getInstance().component.value.notices).toHaveLength(0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    }, 0);
   });
 
   it('should be able to destroy globally', async () => {
-    await asyncExpect(() => {
+    message.info('whatever', 0);
-      message.info('whatever', 0);
+    message.info('whatever', 0);
-    });
+    await Promise.resolve();
-    await asyncExpect(() => {
+    expect(document.querySelectorAll('.ant-message').length).toBe(1);
-      message.info('whatever', 0);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-    });
+    message.destroy();
-    await asyncExpect(() => {
+    expect(document.querySelectorAll('.ant-message').length).toBe(0);
-      expect(document.querySelectorAll('.ant-message').length).toBe(1);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-      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);
-    });
   });
 
   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(() => {
+    await Promise.resolve();
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
-      hide();
+    hide();
-    }, 0);
+    await Promise.resolve();
-    await asyncExpect(() => {
+    jest.runAllTimers();
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    }, 0);
   });
   it('should allow custom icon', async () => {
     message.open({ content: 'Message', icon: <SmileOutlined /> });
-    await asyncExpect(() => {
+    await Promise.resolve();
-      expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
+    expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
-    }, 0);
   });
 
   it('should have no icon', async () => {
     message.open({ content: 'Message' });
-    await asyncExpect(() => {
+    await Promise.resolve();
-      expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
+    expect(document.querySelectorAll('.ant-message-notice .anticon').length).toBe(0);
-    }, 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 Promise.resolve();
-    await asyncExpect(() => {
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
+    jest.runAllTimers();
-    }, 0);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    await asyncExpect(() => {
-      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
-    }, 1500);
   });
 });

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`] = `
 <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>
 `;
 

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(() => {
+    await Promise.resolve();
-      expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
+    expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
-      notification.close('1');
+    notification.close('1');
-    }, 0);
+    jest.runAllTimers();
-    await asyncExpect(() => {
+    expect(
-      expect(document.querySelectorAll('.ant-notification-notice').length).toBe(1);
+      (await getInstance('ant-notification-topRight-false')).component.value.notices,
-      notification.close('2');
+    ).toHaveLength(1);
-    }, 0);
+    notification.close('2');
-    await asyncExpect(() => {
+    jest.runAllTimers();
-      expect(document.querySelectorAll('.ant-notification-notice').length).toBe(0);
+    expect(
-    }, 0);
+      (await getInstance('ant-notification-topRight-false')).component.value.notices,
+    ).toHaveLength(0);
   });
 
   it('should be able to destroy globally', async () => {

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<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 () => {