Ilia Mashkov
24f084ae77
Adds 17 new specs across six files plus the supporting POM infrastructure: - fixtures with auto-opened comparison + typography helpers - TypographyMenu POM reading values from ComboControl aria-labels - ComparisonPage extended with side selection, font picking, slider-value reader, FontFaceSet inspection, storage snapshot - compare-flow: A/B selection, aria-pressed state, storage write - preview-text: input binding + slider character rendering - slider: keyboard ARIA contract (Arrow / Shift+Arrow / Page / Home / End) - font-loading: FontFaceSet contains selected, excludes unrelated - persistence: font selection + typography settings survive reload - typography: symmetric increase/decrease for all four controls
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');
|
|
});
|
|
});
|