12.3Automated Design Token Verification

// tests/design-system/token-verification.spec.ts
import { test, expect } from '@playwright/test';
import designTokens from '../../design-tokens/tokens.json';

test.describe('Design Token Verification', () => {
    test('color tokens match implementation', async ({ page }) => {
        await page.goto('/design-system/colors');

        for (const [name, expectedValue] of Object.entries(designTokens.colors)) {
            // Query the CSS custom property value
            const actualValue = await page.evaluate((varName) => {
                return getComputedStyle(document.documentElement)
                    .getPropertyValue(`--color-${varName}`)
                    .trim();
            }, name);

            expect(actualValue).toBe(expectedValue);
        }
    });

    test('typography tokens match implementation', async ({ page }) => {
        await page.goto('/design-system/typography');

        const typographySpecs = designTokens.typography;

        for (const [variant, spec] of Object.entries(typographySpecs)) {
            const element = page.locator(`[data-typography="${variant}"]`);

            const computedStyles = await element.evaluate((el) => {
                const styles = window.getComputedStyle(el);
                return {
                    fontFamily: styles.fontFamily,
                    fontSize: styles.fontSize,
                    fontWeight: styles.fontWeight,
                    lineHeight: styles.lineHeight,
                    letterSpacing: styles.letterSpacing,
                };
            });

            expect(computedStyles.fontSize).toBe((spec as any).fontSize);
            expect(computedStyles.fontWeight).toBe(String((spec as any).fontWeight));
            expect(computedStyles.lineHeight).toBe((spec as any).lineHeight);
        }
    });

    test('spacing scale matches design tokens', async ({ page }) => {
        await page.goto('/design-system/spacing');

        const spacingScale = designTokens.spacing;

        for (const [size, expectedPx] of Object.entries(spacingScale)) {
            const actualValue = await page.evaluate((varName) => {
                return getComputedStyle(document.documentElement)
                    .getPropertyValue(`--spacing-${varName}`)
                    .trim();
            }, size);

            expect(actualValue).toBe(expectedPx);
        }
    });
});