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

const dialog = readFileSync(new URL('../../src/features/import-workflow/ImportWorkflowDialog.tsx', import.meta.url), 'utf8');
const styles = readFileSync(new URL('../../src/styles/import-workflow.css', import.meta.url), 'utf8');

describe('Import progress indicator', () => {
  it('uses four sequential red squares instead of a rotating circle', () => {
    expect(dialog).toContain('<span className="import-spinner" aria-hidden="true"><i/><i/><i/><i/></span>');
    expect(styles).toMatch(/\.import-spinner\s*\{[^}]*position:\s*relative;[^}]*width:\s*24px;[^}]*height:\s*24px;/s);
    expect(styles.match(/\.import-spinner i:nth-child\(/g)).toHaveLength(4);
    expect(styles).toContain('@keyframes import-square-progress');
    expect(styles).toContain('background: var(--critical)');
    expect(styles).not.toContain('@keyframes import-spin');
    expect(styles).not.toContain('border-radius: 50%');
    expect(styles).toContain('@media (prefers-reduced-motion: reduce)');
  });
});