import {
    expect,
    test,
} from './fixtures';

test.describe('compare flow', () => {
    test('selects fontA and fontB onto opposite sides', async ({ comparison }) => {
        await comparison.pickPair('Inter', 'Roboto');

        // Each side's header region exposes the font name independently.
        await expect(comparison.primaryFont).toContainText('Inter');
        await expect(comparison.secondaryFont).toContainText('Roboto');

        // Slider is rendered and interactive once both fonts are picked.
        await expect(comparison.slider).toBeVisible();
    });

    test('reflects active side via aria-pressed', async ({ comparison }) => {
        await comparison.selectSide('B');
        expect(await comparison.activeSide()).toBe('B');
        await expect(comparison.secondarySideButton).toHaveAttribute('aria-pressed', 'true');
        await expect(comparison.primarySideButton).toHaveAttribute('aria-pressed', 'false');
    });

    test('persists selection through the comparisonStore localStorage', async ({ comparison }) => {
        await comparison.pickPair('Inter', 'Roboto');

        // Wait for the store debounce to flush to localStorage.
        await expect.poll(async () => {
            const storage = await comparison.readStorage();
            return storage['glyphdiff:comparison'];
        }).toMatch(/inter/i);

        const storage = await comparison.readStorage();
        const state = JSON.parse(storage['glyphdiff:comparison']!);
        expect(state.fontAId).toBe('inter');
        expect(state.fontBId).toBe('roboto');
    });
});