40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
|
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');
|
||
|
|
});
|
||
|
|
});
|