Дмитрий
85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
|
import { ref, nextTick } from 'vue';
|
|
import { useCountUp } from '../../resources/js/composables/useCountUp';
|
|
|
|
function mockMatchMedia(reduced: boolean): void {
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
writable: true,
|
|
configurable: true,
|
|
value: vi.fn().mockImplementation((query: string) => ({
|
|
matches: query.includes('reduce') ? reduced : false,
|
|
media: query,
|
|
onchange: null,
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
})),
|
|
});
|
|
}
|
|
|
|
describe('useCountUp', () => {
|
|
let originalRaf: typeof globalThis.requestAnimationFrame;
|
|
let originalCaf: typeof globalThis.cancelAnimationFrame;
|
|
|
|
beforeEach(() => {
|
|
vi.useFakeTimers();
|
|
mockMatchMedia(false);
|
|
// RAF polyfill: jsdom's RAF does not advance synchronously with fake timers.
|
|
// Route RAF through setTimeout so vi.advanceTimersByTimeAsync() advances it.
|
|
originalRaf = globalThis.requestAnimationFrame;
|
|
originalCaf = globalThis.cancelAnimationFrame;
|
|
globalThis.requestAnimationFrame = ((cb: FrameRequestCallback) =>
|
|
setTimeout(() => cb(performance.now()), 16) as unknown as number) as typeof globalThis.requestAnimationFrame;
|
|
globalThis.cancelAnimationFrame = ((id: number) =>
|
|
clearTimeout(id as unknown as ReturnType<typeof setTimeout>)) as typeof globalThis.cancelAnimationFrame;
|
|
});
|
|
|
|
afterEach(() => {
|
|
globalThis.requestAnimationFrame = originalRaf;
|
|
globalThis.cancelAnimationFrame = originalCaf;
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
it('exposes initial display = 0 before target propagates', async () => {
|
|
const target = ref(100);
|
|
const { display } = useCountUp(target, { duration: 600 });
|
|
expect(display.value).toBe(0);
|
|
});
|
|
|
|
it('animates from 0 to target over duration', async () => {
|
|
const target = ref(100);
|
|
const { display, start } = useCountUp(target, { duration: 600 });
|
|
start();
|
|
// step through animation
|
|
await vi.advanceTimersByTimeAsync(300);
|
|
expect(display.value).toBeGreaterThan(0);
|
|
expect(display.value).toBeLessThan(100);
|
|
await vi.advanceTimersByTimeAsync(400);
|
|
expect(display.value).toBe(100);
|
|
});
|
|
|
|
it('respects prefers-reduced-motion (instant value, no animation)', async () => {
|
|
mockMatchMedia(true);
|
|
const target = ref(250);
|
|
const { display, start } = useCountUp(target, { duration: 600 });
|
|
start();
|
|
await nextTick();
|
|
expect(display.value).toBe(250);
|
|
});
|
|
|
|
it('re-animates when target value changes', async () => {
|
|
const target = ref(50);
|
|
const { display, start } = useCountUp(target, { duration: 400 });
|
|
start();
|
|
await vi.advanceTimersByTimeAsync(500);
|
|
expect(display.value).toBe(50);
|
|
|
|
target.value = 200;
|
|
await nextTick();
|
|
await vi.advanceTimersByTimeAsync(500);
|
|
expect(display.value).toBe(200);
|
|
});
|
|
});
|