test: add e2e suite for core comparison flows
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
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
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);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user