test: ✅ Motion for Collpase and Menu (#26828)

* test: ✅ test menu and collapse motion

* chore: move openAnimation into collapse

* add test case

* rm extra openAnimation.tsx

* remove unused code

components/_util/__tests__/util.test.js

@@ -7,7 +7,6 @@ import throttleByAnimationFrame from '../throttleByAnimationFrame';
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import Wave from '../wave';
 import TransButton from '../transButton';
-import openAnimation from '../openAnimation';
 import { sleep } from '../../../tests/utils';
 import focusTest from '../../../tests/shared/focusTest';
 
@@ -186,21 +185,4 @@ describe('Test utils function', () => {
       expect(preventDefault).toHaveBeenCalled();
     });
   });
-
-  describe('openAnimation', () => {
-    it('should support openAnimation', () => {
-      const done = jest.fn();
-      const domNode = document.createElement('div');
-      expect(typeof openAnimation.enter).toBe('function');
-      expect(typeof openAnimation.leave).toBe('function');
-      expect(typeof openAnimation.appear).toBe('function');
-      const appear = openAnimation.appear(domNode, done);
-      const enter = openAnimation.enter(domNode, done);
-      const leave = openAnimation.leave(domNode, done);
-      expect(typeof appear.stop).toBe('function');
-      expect(typeof enter.stop).toBe('function');
-      expect(typeof leave.stop).toBe('function');
-      expect(done).toHaveBeenCalled();
-    });
-  });
 });

components/collapse/Collapse.tsx

@@ -5,7 +5,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 
 import CollapsePanel from './CollapsePanel';
 import { ConfigContext } from '../config-provider';
-import animation from '../_util/openAnimation';
+import animation from './openAnimation';
 import { cloneElement } from '../_util/reactNode';
 
 export type ExpandIconPosition = 'left' | 'right' | undefined;

components/collapse/__tests__/common.test.js

 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Collapse from '..';
+import openAnimation from '../openAnimation';
 
 describe('Collapse', () => {
   mountTest(Collapse);
   rtlTest(Collapse);
 });
+
+describe('openAnimation', () => {
+  it('should support openAnimation', () => {
+    const done = jest.fn();
+    const domNode = document.createElement('div');
+    expect(typeof openAnimation.enter).toBe('function');
+    expect(typeof openAnimation.leave).toBe('function');
+    expect(typeof openAnimation.appear).toBe('function');
+    const appear = openAnimation.appear(domNode, done);
+    const enter = openAnimation.enter(domNode, done);
+    const leave = openAnimation.leave(domNode, done);
+    expect(typeof appear.stop).toBe('function');
+    expect(typeof enter.stop).toBe('function');
+    expect(typeof leave.stop).toBe('function');
+    expect(done).toHaveBeenCalled();
+  });
+});

components/_util/openAnimation.tsx → components/collapse/openAnimation.tsx

@@ -20,9 +20,6 @@ function animate(node: HTMLElement, show: boolean, done: () => void) {
       }
     },
     active() {
-      if (requestAnimationFrameId) {
-        raf.cancel(requestAnimationFrameId);
-      }
       requestAnimationFrameId = raf(() => {
         node.style.height = `${show ? height : 0}px`;
         node.style.opacity = show ? '1' : '0';

components/menu/__tests__/index.test.js

@@ -12,6 +12,8 @@ import Layout from '../../layout';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import collapseMotion from '../../_util/motion';
+import { sleep } from '../../../tests/utils';
 
 const { SubMenu } = Menu;
 
@@ -393,6 +395,25 @@ describe('Menu', () => {
       );
     });
 
+    it('inline menu collapseMotion should be triggered', async () => {
+      jest.useRealTimers();
+      const onAppearEnd = jest.spyOn(collapseMotion, 'onAppearEnd');
+      collapseMotion.motionDeadline = 1;
+      const wrapper = mount(
+        <Menu mode="inline">
+          <SubMenu key="1" title="submenu1">
+            <Menu.Item key="submenu1">Option 1</Menu.Item>
+            <Menu.Item key="submenu2">Option 2</Menu.Item>
+          </SubMenu>
+          <Menu.Item key="2">menu2</Menu.Item>
+        </Menu>,
+      );
+      wrapper.find('.ant-menu-submenu-title').simulate('click');
+      await sleep(3000);
+      expect(onAppearEnd).toHaveBeenCalledTimes(1);
+      onAppearEnd.mockRestore();
+    });
+
     it('vertical with hover(default)', () => {
       const wrapper = mount(
         <Menu mode="vertical">

tests/utils.ts

 import MockDate from 'mockdate';
+import { act } from 'react-dom/test-utils';
 
 export function setMockDate(dateString = '2017-09-18T03:30:07.795') {
   MockDate.set(dateString);
@@ -10,4 +11,8 @@ export function resetMockDate() {
 
 const globalTimeout = global.setTimeout;
 
-export const sleep = (timeout = 0) => new Promise(resolve => globalTimeout(resolve, timeout));
+export const sleep = async (timeout = 0) => {
+  await act(async () => {
+    await new Promise(resolve => globalTimeout(resolve, timeout));
+  });
+};