portal/app/tests/Frontend/motion-css.spec.ts

import { describe, it, expect } from 'vitest';
import fs from 'node:fs';
import path from 'node:path';

const cssPath = path.resolve(__dirname, '../../resources/css/motion.css');
const css = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, 'utf-8') : '';

describe('motion.css', () => {
    it.each(['ld-fadeup', 'ld-slideup', 'ld-shimmer', 'ld-pulse', 'ld-dialog-in'])('@keyframes %s defined', (name) => {
        expect(css).toMatch(new RegExp(`@keyframes\\s+${name}\\s*{`));
    });

    it('prefers-reduced-motion wrapper disables animations', () => {
        const block = css.match(/@media\s*\(\s*prefers-reduced-motion:\s*reduce\s*\)[^{]*{[\s\S]*?}\s*}/);
        expect(block, 'prefers-reduced-motion @media block').not.toBeNull();
        expect(block?.[0]).toMatch(/animation-duration:\s*0\.01ms\s*!important/);
        expect(block?.[0]).toMatch(/transition-duration:\s*0\.01ms\s*!important/);
        expect(block?.[0]).toMatch(/animation-iteration-count:\s*1\s*!important/);
    });

    it('defines .ld-hover-lift utility (motion #4)', () => {
        expect(css).toMatch(/\.ld-hover-lift\s*{/);
        expect(css).toMatch(/transform:\s*translateY\(-2px\)/);
    });

    it('defines .ld-stagger-row utility (motion #2) with nth-child delays', () => {
        expect(css).toMatch(/\.ld-stagger-row\s*{/);
        expect(css).toMatch(/animation:\s*ld-slideup/);
        expect(css).toMatch(/\.ld-stagger-row:nth-child\(\d+\)/);
    });
});