import {
    expect,
    test,
} from './fixtures';
import type { TypographyControl } from './pages/typography-menu';

/**
 * Each control's trigger button advertises its current value via aria-label
 * ("Size: 24"). We bump in one direction, then back, and assert the value
 * tracks symmetrically.
 */
const controls: TypographyControl[] = ['size', 'weight', 'leading', 'tracking'];

test.describe('typography settings', () => {
    for (const control of controls) {
        test(`${control}: increase then decrease returns to baseline`, async ({ typography }) => {
            const baseline = await typography.readValue(control);
            expect(baseline).not.toBeNull();

            await typography.bump(control, 'up');
            const bumped = await typography.readValue(control);
            expect(bumped).not.toBe(baseline);
            expect(bumped! > baseline!).toBe(true);

            await typography.bump(control, 'down');
            const restored = await typography.readValue(control);
            expect(restored).toBe(baseline);
        });
    }

    test('font size step is reflected in the persisted typography state', async ({ comparison, typography }) => {
        await typography.bump('size', 'up');
        const expected = await typography.readValue('size');

        await expect.poll(async () => {
            const storage = await comparison.readStorage();
            const raw = storage['glyphdiff:comparison:typography'];
            if (!raw) {
                return null;
            }
            return JSON.parse(raw).fontSize ?? null;
        }).toBe(expected);
    });
});