|
| 1 | +import { act } from 'react'; |
| 2 | +import { createRoot } from 'react-dom/client'; |
| 3 | +import type { Root } from 'react-dom/client'; |
| 4 | +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; |
| 5 | +import { SvgAnimationPlayer } from '@/components/svg-animation-player'; |
| 6 | +import { LanguageProvider } from '@/contexts/LanguageContext'; |
| 7 | + |
| 8 | +const narration = vi.hoisted(() => ({ stop: vi.fn(), update: vi.fn(), prime: vi.fn() })); |
| 9 | +vi.mock('@/lib/use-svg-narration', () => ({ |
| 10 | + useSvgNarration: () => ({ ...narration, enabled: true, holding: false, speaking: false }), |
| 11 | +})); |
| 12 | + |
| 13 | +let container: HTMLDivElement; |
| 14 | +let root: Root; |
| 15 | +const svg = '<svg viewBox="0 0 800 500"><animate attributeName="x" dur="10s"/></svg>'; |
| 16 | + |
| 17 | +beforeEach(() => { |
| 18 | + vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true); |
| 19 | + vi.stubGlobal('requestAnimationFrame', vi.fn(() => 1)); |
| 20 | + vi.stubGlobal('cancelAnimationFrame', vi.fn()); |
| 21 | + container = document.createElement('div'); |
| 22 | + document.body.appendChild(container); |
| 23 | + root = createRoot(container); |
| 24 | +}); |
| 25 | + |
| 26 | +afterEach(async () => { |
| 27 | + await act(async () => root.unmount()); |
| 28 | + container.remove(); |
| 29 | + vi.unstubAllGlobals(); |
| 30 | +}); |
| 31 | + |
| 32 | +async function render(source = svg) { |
| 33 | + await act(async () => root.render(<LanguageProvider><SvgAnimationPlayer svg={source} /></LanguageProvider>)); |
| 34 | +} |
| 35 | + |
| 36 | +async function load() { |
| 37 | + const iframe = container.querySelector('iframe')!; |
| 38 | + const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 39 | + const timeline = { pauseAnimations: vi.fn(), unpauseAnimations: vi.fn(), setCurrentTime: vi.fn(), getCurrentTime: () => 0 }; |
| 40 | + Object.assign(element, timeline); |
| 41 | + const cssAnimation = { pause: vi.fn(), play: vi.fn(), currentTime: 200 }; |
| 42 | + vi.spyOn(iframe.contentDocument!, 'querySelector').mockReturnValue(element); |
| 43 | + Object.assign(iframe.contentDocument!, { getAnimations: () => [cssAnimation] }); |
| 44 | + await act(async () => iframe.dispatchEvent(new Event('load'))); |
| 45 | + return { iframe, timeline, cssAnimation }; |
| 46 | +} |
| 47 | + |
| 48 | +function button(label: string) { |
| 49 | + return container.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`)!; |
| 50 | +} |
| 51 | + |
| 52 | +describe('SVG 动画必须手工播放', () => { |
| 53 | + it('加载后 SMIL 和 CSS 停在首帧，画面与朗读均不自动开始', async () => { |
| 54 | + await render(); |
| 55 | + expect(button('播放').disabled).toBe(true); |
| 56 | + const { iframe, timeline, cssAnimation } = await load(); |
| 57 | + |
| 58 | + expect(timeline.pauseAnimations).toHaveBeenCalled(); |
| 59 | + expect(timeline.setCurrentTime).toHaveBeenCalledWith(0); |
| 60 | + expect(cssAnimation.pause).toHaveBeenCalled(); |
| 61 | + expect(cssAnimation.currentTime).toBe(0); |
| 62 | + expect(timeline.unpauseAnimations).not.toHaveBeenCalled(); |
| 63 | + expect(cssAnimation.play).not.toHaveBeenCalled(); |
| 64 | + expect(narration.prime).not.toHaveBeenCalled(); |
| 65 | + expect(requestAnimationFrame).not.toHaveBeenCalled(); |
| 66 | + expect(button('播放').disabled).toBe(false); |
| 67 | + expect(iframe.style.visibility).toBe('visible'); |
| 68 | + }); |
| 69 | + |
| 70 | + it('点击播放才恢复两条时间轴和朗读，点击暂停后停止', async () => { |
| 71 | + await render(); |
| 72 | + const { timeline, cssAnimation } = await load(); |
| 73 | + await act(async () => button('播放').click()); |
| 74 | + expect(timeline.unpauseAnimations).toHaveBeenCalledOnce(); |
| 75 | + expect(cssAnimation.play).toHaveBeenCalledOnce(); |
| 76 | + expect(narration.prime).toHaveBeenCalledOnce(); |
| 77 | + expect(requestAnimationFrame).toHaveBeenCalledOnce(); |
| 78 | + await act(async () => button('暂停').click()); |
| 79 | + expect(timeline.pauseAnimations).toHaveBeenCalledTimes(2); |
| 80 | + expect(cssAnimation.pause).toHaveBeenCalledTimes(2); |
| 81 | + expect(button('播放')).toBeTruthy(); |
| 82 | + }); |
| 83 | + |
| 84 | + it('切换或重新生成动画后重新停在首帧', async () => { |
| 85 | + await render(); |
| 86 | + await load(); |
| 87 | + await act(async () => button('播放').click()); |
| 88 | + await render(svg.replace('10s', '12s')); |
| 89 | + expect(container.querySelector('iframe')!.style.visibility).toBe('hidden'); |
| 90 | + const { timeline, cssAnimation } = await load(); |
| 91 | + expect(timeline.setCurrentTime).toHaveBeenCalledWith(0); |
| 92 | + expect(timeline.unpauseAnimations).not.toHaveBeenCalled(); |
| 93 | + expect(cssAnimation.play).not.toHaveBeenCalled(); |
| 94 | + expect(button('播放')).toBeTruthy(); |
| 95 | + }); |
| 96 | + |
| 97 | + it('手工点击重播会从头开始播放', async () => { |
| 98 | + await render(); |
| 99 | + const { timeline, cssAnimation } = await load(); |
| 100 | + await act(async () => button('重播').click()); |
| 101 | + expect(timeline.setCurrentTime).toHaveBeenLastCalledWith(0); |
| 102 | + expect(timeline.unpauseAnimations).toHaveBeenCalledOnce(); |
| 103 | + expect(cssAnimation.play).toHaveBeenCalledOnce(); |
| 104 | + }); |
| 105 | +}); |
0 commit comments