From c979850a5bd438339543af3549c7a9b868ada085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Sun, 20 Sep 2020 21:13:43 +0800 Subject: [PATCH] =?UTF-8?q?test:=20=E2=9C=85=20Motion=20for=20Collpase=20a?= =?UTF-8?q?nd=20Menu=20(#26828)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 18 ---------------- components/collapse/Collapse.tsx | 2 +- components/collapse/__tests__/common.test.js | 18 ++++++++++++++++ .../{_util => collapse}/openAnimation.tsx | 3 --- components/menu/__tests__/index.test.js | 21 +++++++++++++++++++ tests/utils.ts | 7 ++++++- 6 files changed, 46 insertions(+), 23 deletions(-) rename components/{_util => collapse}/openAnimation.tsx (93%) diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.js index 7cab053d1e..82a7ef9163 100644 --- a/components/_util/__tests__/util.test.js +++ b/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(); - }); - }); }); diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 85c2e4ce3e..d077d6b8e4 100644 --- a/components/collapse/Collapse.tsx +++ b/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; diff --git a/components/collapse/__tests__/common.test.js b/components/collapse/__tests__/common.test.js index c693a55340..375cfd54bc 100644 --- a/components/collapse/__tests__/common.test.js +++ b/components/collapse/__tests__/common.test.js @@ -1,8 +1,26 @@ 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(); + }); +}); diff --git a/components/_util/openAnimation.tsx b/components/collapse/openAnimation.tsx similarity index 93% rename from components/_util/openAnimation.tsx rename to components/collapse/openAnimation.tsx index 243b0738f1..4031a4f9fa 100644 --- a/components/_util/openAnimation.tsx +++ b/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'; diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js index ce626bf498..84007eaebd 100644 --- a/components/menu/__tests__/index.test.js +++ b/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( + + + Option 1 + Option 2 + + menu2 + , + ); + 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( diff --git a/tests/utils.ts b/tests/utils.ts index c6914d0afd..a81065cf7a 100644 --- a/tests/utils.ts +++ b/tests/utils.ts @@ -1,4 +1,5 @@ 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)); + }); +};