45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
|
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);
|
||
|
|
});
|
||
|
|
});
|