chore: bump rc-notification (#26919)

* chore: bump rc-notification

* test: fix on test

* test: Fix config.test

* fix test

* fix message test case

components/message/__tests__/config.test.js

@@ -1,7 +1,15 @@
 import { sleep } from '../../../tests/utils';
-import message from '..';
+import message, { getInstance } from '..';
 
 describe('message.config', () => {
+  // Mock for rc-util raf
+  window.requestAnimationFrame = callback => {
+    return window.setTimeout(callback, 16);
+  };
+  window.cancelAnimationFrame = id => {
+    window.clearTimeout(id);
+  };
+
   beforeEach(() => {
     jest.useFakeTimers();
   });
@@ -47,11 +55,12 @@ describe('message.config', () => {
     for (let i = 0; i < 10; i += 1) {
       message.info('test');
     }
+
     message.info('last');
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(5);
     expect(document.querySelectorAll('.ant-message-notice')[4].textContent).toBe('last');
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
   });
 
   it('should be able to config duration', async () => {
@@ -60,8 +69,10 @@ describe('message.config', () => {
       duration: 0.5,
     });
     message.info('last');
+    expect(getInstance().component.state.notices).toHaveLength(1);
+
     await sleep(1000);
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
     message.config({
       duration: 3,
     });

components/message/__tests__/hooks.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 import { mount } from 'enzyme';
-import message from '..';
+import message, { getInstance } from '..';
 import ConfigProvider from '../../config-provider';
 
 describe('message.hooks', () => {
@@ -171,7 +171,7 @@ describe('message.hooks', () => {
     expect(document.querySelectorAll('.my-test-message-notice').length).toBe(1);
     hide();
     jest.runAllTimers();
-    expect(document.querySelectorAll('.my-test-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
   });
 
   it('should be same hook', () => {

components/message/__tests__/index.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { SmileOutlined } from '@ant-design/icons';
-import message from '..';
+import message, { getInstance } from '..';
 
 describe('message', () => {
   beforeEach(() => {
@@ -19,10 +19,10 @@ describe('message', () => {
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
     hide1();
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    expect(getInstance().component.state.notices).toHaveLength(1);
     hide2();
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
   });
 
   it('should be able to remove manually with a unique key', () => {
@@ -33,10 +33,10 @@ describe('message', () => {
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);
     message.destroy(key1);
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    expect(getInstance().component.state.notices).toHaveLength(1);
     message.destroy(key2);
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
   });
 
   it('should be able to destroy globally', () => {
@@ -93,7 +93,7 @@ describe('message', () => {
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
     hide();
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
   });
 
   it('should allow custom icon', () => {
@@ -169,7 +169,7 @@ describe('message', () => {
     mount(<Test />);
     expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
     jest.advanceTimersByTime(1500);
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    expect(getInstance().component.state.notices).toHaveLength(0);
   });
 
   it('should not throw error when pass null', () => {

components/message/index.tsx

@@ -247,4 +247,9 @@ export interface MessageApi extends MessageInstance {
   useMessage(): [MessageInstance, React.ReactElement];
 }
 
+/** @private test only function. Not work on production */
+export const getInstance = () => {
+  return process.env.NODE_ENV === 'test' ? messageInstance : null;
+};
+
 export default api as MessageApi;

components/notification/__tests__/index.test.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { UserOutlined } from '@ant-design/icons';
-import notification from '..';
+import notification, { getInstance } from '..';
 
 describe('notification', () => {
-  beforeAll(() => {
+  beforeEach(() => {
     jest.useFakeTimers();
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
   afterEach(() => {
+    jest.useRealTimers();
     notification.destroy();
   });
 
@@ -54,14 +51,18 @@ describe('notification', () => {
 
     await Promise.resolve();
     expect(document.querySelectorAll('.ant-notification-notice').length).toBe(2);
+
     notification.close('1');
-    await Promise.resolve();
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-notification-notice').length).toBe(1);
+    expect((await getInstance('ant-notification-topRight')).component.state.notices).toHaveLength(
+      1,
+    );
+
     notification.close('2');
-    await Promise.resolve();
     jest.runAllTimers();
-    expect(document.querySelectorAll('.ant-notification-notice').length).toBe(0);
+    expect((await getInstance('ant-notification-topRight')).component.state.notices).toHaveLength(
+      0,
+    );
   });
 
   it('should be able to destroy globally', async () => {

components/notification/index.tsx

@@ -280,4 +280,9 @@ export interface NotificationApi extends NotificationInstance {
   useNotification: () => [NotificationInstance, React.ReactElement];
 }
 
+/** @private test only function. Not work on production */
+export const getInstance = async (cacheKey: string) => {
+  return process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null;
+};
+
 export default api as NotificationApi;

package.json

@@ -129,8 +129,8 @@
     "rc-input-number": "~6.0.0",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.7.1",
-    "rc-motion": "^2.0.0",
-    "rc-notification": "~4.4.0",
+    "rc-motion": "^2.2.0",
+    "rc-notification": "~4.5.2",
     "rc-pagination": "~3.0.3",
     "rc-picker": "~2.1.0",
     "rc-progress": "~3.1.0",
@@ -195,7 +195,7 @@
     "enquire-js": "^0.2.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.3.5",
+    "enzyme-to-json": "^3.6.0",
     "esbuild-webpack-plugin": "^1.0.0",
     "eslint": "^7.9.0",
     "eslint-config-airbnb": "^18.0.0",