feat: add reduceMotion and restoreMotion & apply reduceMotion t…

…o tests

src/components/action-sheet/tests/action-sheet.test.tsx

@@ -3,6 +3,10 @@ import { render, testA11y, fireEvent, waitFor, cleanup, sleep } from 'testing'
 import ActionSheet, { Action } from '../'
 import Button from '../../button'
 import type { ActionSheetProps, ActionSheetShowHandler } from '..'
+import {
+  reduceMotion,
+  restoreMotion,
+} from '../../../utils/reduce-and-restore-motion'
 
 const classPrefix = `adm-action-sheet`
 
@@ -35,6 +39,7 @@ describe('ActionSheet', () => {
   })
 
   test('basic usage', async () => {
+    restoreMotion()
     const { getByText, baseElement } = await render(
       <App extra='请选择你要进行的操作' cancelText='取消' />
     )
@@ -52,6 +57,7 @@ describe('ActionSheet', () => {
     )
 
     expect(baseElement).toMatchSnapshot()
+    reduceMotion()
   })
 
   test('renders Imperative', async () => {

src/components/dialog/tests/dialog.test.tsx

@@ -5,6 +5,7 @@ import {
   fireEvent,
   waitFor,
   waitForElementToBeRemoved,
+  sleep,
 } from 'testing'
 import Dialog, { DialogAlertProps } from '..'
 import { act } from '@testing-library/react'
@@ -63,8 +64,17 @@ describe('Dialog', () => {
     const afterShow = jest.fn()
     const { getByText } = await render(<DialogAlert afterShow={afterShow} />)
 
-    fireEvent.click(getByText('btn'))
-    await waitForDialogShow()
+    await act(async () => {
+      fireEvent.click(getByText('btn'))
+    })
+    await sleep(20)
+
+    const wrap = $$(`.${classPrefix}-wrap`)[0]
+    const animatedDiv = wrap.childNodes[0]
+
+    expect(animatedDiv).toHaveStyle({
+      opacity: 1,
+    })
     expect(afterShow).toBeCalled()
   })
 

src/components/floating-panel/tests/floating-panel.test.tsx

@@ -9,6 +9,7 @@ import {
 } from 'testing'
 import FloatingPanel, { FloatingPanelRef } from '..'
 import { patchCreateEvent } from '../../../tests/gesture/utils'
+import { reduceMotion, restoreMotion } from 'antd-mobile'
 
 const classPrefix = `adm-floating-panel`
 
@@ -95,6 +96,7 @@ describe('FloatingPanel', () => {
   })
 
   test('height change', async () => {
+    restoreMotion()
     const fn = jest.fn()
     const { getByTestId } = await render(<App onHeightChange={fn} />)
 
@@ -117,6 +119,7 @@ describe('FloatingPanel', () => {
     expect(fn.mock.calls[fn.mock.calls.length - 1][0]).toBe(
       anchors[anchors.length - 1]
     )
+    reduceMotion()
   })
 
   test('set height in an imperative way', async () => {

src/components/modal/tests/modal.test.tsx

@@ -5,6 +5,7 @@ import {
   fireEvent,
   waitFor,
   waitForElementToBeRemoved,
+  actSleep,
 } from 'testing'
 import Modal, { ModalAlertProps } from '..'
 import { act } from '@testing-library/react'
@@ -63,7 +64,10 @@ describe('Modal', () => {
     const afterShow = jest.fn()
     const { getByText } = await render(<ModalAlert afterShow={afterShow} />)
 
-    fireEvent.click(getByText('btn'))
+    act(() => {
+      fireEvent.click(getByText('btn'))
+    })
+    await actSleep(100)
     await waitForModalShow()
     expect(afterShow).toBeCalled()
   })
@@ -167,9 +171,10 @@ describe('Modal', () => {
     expect(fn.mock.calls[0][0]).toBe(true)
 
     fireEvent.click(getByText('btn'))
-    await act(async () => {
-      await fireEvent.click(getAllByText('取消')[1])
+    act(() => {
+      fireEvent.click(getAllByText('取消')[1])
     })
+    await actSleep(100)
     expect(fn.mock.calls[1][0]).toBe(false)
   })
 

src/components/spin-loading/demos/demo1.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { DemoBlock } from '../../../demos'
 import { Space, SpinLoading } from 'antd-mobile'
+import { DemoBlock } from 'demos'
 
 export default () => {
   return (

src/components/spin-loading/spin-loading.tsx

@@ -2,6 +2,7 @@ import React, { memo } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import { useSpring, animated } from '@react-spring/web'
+import { isMotionReduced } from '../../utils/reduce-and-restore-motion'
 
 const classPrefix = 'adm-spin-loading'
 
@@ -25,14 +26,16 @@ export const SpinLoading = memo<SpinLoadingProps>(p => {
   const props = mergeProps(defaultProps, p)
 
   const { percent } = useSpring({
-    loop: {
-      reverse: true,
-    },
+    loop: isMotionReduced()
+      ? false
+      : {
+          reverse: true,
+        },
     from: {
-      percent: 30,
+      percent: 80,
     },
     to: {
-      percent: 80,
+      percent: 30,
     },
     config: {
       duration: 1200,

src/index.ts

@@ -81,3 +81,5 @@ export { default as VirtualInput } from './components/virtual-input'
 export { default as WaterMark } from './components/water-mark'
 
 export { createErrorBlock } from './components/error-block'
+
+export { reduceMotion, restoreMotion } from './utils/reduce-and-restore-motion'

src/tests/setup.ts

@@ -1,3 +1,6 @@
 import { excludeWarning } from './excludeWarning'
+import { reduceMotion } from '../utils/reduce-and-restore-motion'
 
 excludeWarning()
+
+reduceMotion()

src/tests/testing.tsx

@@ -1,5 +1,10 @@
 import '@testing-library/jest-dom/extend-expect'
-import { render, RenderOptions, RenderResult } from '@testing-library/react'
+import {
+  act,
+  render,
+  RenderOptions,
+  RenderResult,
+} from '@testing-library/react'
 import { toHaveNoViolations, axe } from 'jest-axe'
 import * as React from 'react'
 import type { RunOptions } from 'axe-core'
@@ -118,4 +123,8 @@ export const testA11y = async (
 }
 
 export const sleep = (time: number) =>
-  new Promise(resolve => setTimeout(resolve, time))
+  new Promise<void>(resolve => setTimeout(resolve, time))
+
+export const actSleep = (time: number) => {
+  return act(() => sleep(time))
+}

src/utils/reduce-and-restore-motion.ts

@@ -0,0 +1,21 @@
+import { Globals } from '@react-spring/web'
+
+let reduced = false
+
+export function reduceMotion() {
+  reduced = true
+  Globals.assign({
+    skipAnimation: true,
+  })
+}
+
+export function restoreMotion() {
+  reduced = false
+  Globals.assign({
+    skipAnimation: false,
+  })
+}
+
+export function isMotionReduced() {
+  return reduced
+}