ZDDC/tests/form-safety.spec.js

import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as os from 'os';
import * as path from 'path';

const HTML_PATH = path.resolve('form/dist/form.html');
const HTML_RAW = fs.readFileSync(HTML_PATH, 'utf8');

const SAFETY_SCHEMA = {
    type: 'object',
    required: ['date', 'location'],
    additionalProperties: false,
    properties: {
        date:     { type: 'string', format: 'date' },
        location: { type: 'string', enum: ['Site A', 'Site B', 'Site C'] },
        hazards: {
            type: 'array',
            items: {
                type: 'object',
                required: ['kind', 'severity'],
                properties: {
                    kind:     { type: 'string' },
                    severity: { type: 'integer', minimum: 1, maximum: 5 },
                    notes:    { type: 'string' },
                },
            },
        },
        additionalNotes: { type: 'string' },
    },
};

const SAFETY_UI = {
    location:        { 'ui:widget': 'radio' },
    hazards:         { 'ui:options': { addable: true, removable: true } },
    additionalNotes: { 'ui:widget': 'textarea' },
};

// Inject a complete form-context into the page before form bootstraps.
// Writes a patched copy of form.html to a temp file and navigates via
// file:// — page.setContent's about:blank origin doesn't expose
// localStorage, which trips up shared/theme.js. page.route can't intercept
// file://, so this is the cleanest path. The form is fully self-contained,
// so the temp file works without relative-resource resolution.
async function loadFormWithContext(page, context) {
    const ctxJson = JSON.stringify(context).replace(/<\//g, '<\\/');
    const replacement = `<script id="form-context" type="application/json">${ctxJson}</script>`;
    const patched = HTML_RAW.replace(
        /<script id="form-context" type="application\/json">[\s\S]*?<\/script>/,
        replacement
    );
    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'form-spec-'));
    const tmpPath = path.join(tmpDir, 'form.html');
    fs.writeFileSync(tmpPath, patched);
    await page.goto(`file://${tmpPath}`, { waitUntil: 'load' });
}

test.describe('form/ — safety check-in renderer', () => {
    test('renders all field types from the schema', async ({ page }) => {
        page.on('console', msg => {
            if (msg.type() === 'error') console.log('[browser-error]', msg.text());
        });
        page.on('pageerror', e => console.log('[pageerror]', e.message));

        await loadFormWithContext(page, {
            title: 'Safety Check-In',
            schema: SAFETY_SCHEMA,
            ui: SAFETY_UI,
            data: null,
            submitUrl: '/test/safety.form.html',
        });

        // Wait for the renderer to populate the form (#form-root has display:flex
        // but is reported as "hidden" by Playwright when it has zero children).
        await page.waitForFunction(
            () => document.getElementById('form-root') && document.getElementById('form-root').children.length > 0,
            null,
            { timeout: 5000 },
        );

        await expect(page.locator('#form-root input[type="date"]')).toHaveCount(1);
        const radios = page.locator('#form-root input[type="radio"]');
        await expect(radios).toHaveCount(3); // Site A / B / C
        await expect(page.locator('#form-root textarea')).toHaveCount(1);
        await expect(page.locator('#form-root .form-array__add')).toHaveCount(1);
        await expect(page.locator('#form-title')).toContainText('Safety Check-In');
    });

    test('add/remove hazard rows works', async ({ page }) => {
        await loadFormWithContext(page, {
            schema: SAFETY_SCHEMA,
            ui: SAFETY_UI,
            data: null,
            submitUrl: '/test/safety.form.html',
        });

        await page.waitForSelector('#form-root');
        await expect(page.locator('.form-array__row')).toHaveCount(0);

        await page.locator('.form-array__add').click();
        await expect(page.locator('.form-array__row')).toHaveCount(1);

        await page.locator('.form-array__add').click();
        await expect(page.locator('.form-array__row')).toHaveCount(2);

        // Remove the first row.
        await page.locator('.form-array__row').first().locator('button.btn-small').click();
        await expect(page.locator('.form-array__row')).toHaveCount(1);
    });

    test('valid submission posts JSON matching schema shape', async ({ page }) => {
        // Install an in-page fetch mock (page.route doesn't intercept file://).
        await page.addInitScript(() => {
            window.__captured = [];
            window.__mockFetchResponse = {
                status: 201,
                headers: new Headers({ Location: '/test/safety/2026-05-01-casey.yaml', 'Content-Type': 'application/json' }),
                bodyText: '{"location":"/test/safety/2026-05-01-casey.yaml"}',
            };
            const origFetch = window.fetch;
            window.fetch = async function (input, init) {
                const url = typeof input === 'string' ? input : input.url;
                const method = (init && init.method) || 'GET';
                if (method === 'POST') {
                    let body = init && init.body;
                    try { body = JSON.parse(body); } catch (e) { /* ignore */ }
                    window.__captured.push({ url, method, body });
                    const r = window.__mockFetchResponse;
                    return new Response(r.bodyText || '', { status: r.status, headers: r.headers });
                }
                return origFetch(input, init);
            };
        });

        await loadFormWithContext(page, {
            schema: SAFETY_SCHEMA,
            ui: SAFETY_UI,
            data: null,
            submitUrl: '/test/safety.form.html',
        });

        await page.waitForSelector('#form-root');

        // Fill fields.
        await page.locator('#form-root input[type="date"]').fill('2026-05-01');
        await page.locator('#form-root input[type="radio"][value="Site B"]').check();
        await page.locator('.form-array__add').click();
        await page.locator('.form-array__row input[type="text"]').first().fill('Loose handrail');
        await page.locator('.form-array__row input[type="number"]').fill('3');
        await page.locator('#form-root textarea').fill('Fixed during shift.');

        // Submit and prevent navigation away (the form redirects on 201).
        await page.evaluate(() => {
            // Pin window.location.href to no-op so the test doesn't navigate.
            const stub = () => {};
            Object.defineProperty(window, 'location', {
                value: new Proxy(window.location, {
                    set: () => true,
                    get: (target, prop) => {
                        if (prop === 'href') return target.href;
                        return target[prop];
                    },
                }),
                writable: true,
                configurable: true,
            });
            void stub;
        }).catch(() => { /* best-effort; not all browsers permit overriding location */ });

        // Stub setTimeout so the post-201 navigation doesn't fire during the test.
        await page.evaluate(() => {
            const origSetTimeout = window.setTimeout;
            window.setTimeout = function (fn, ms) {
                if (ms === 400) return 0; // suppress redirect timer
                return origSetTimeout(fn, ms);
            };
        });

        await page.locator('#submit-btn').click();
        await page.waitForFunction(() => window.__captured && window.__captured.length > 0, null, { timeout: 5000 });

        const captured = await page.evaluate(() => window.__captured);
        expect(captured.length).toBeGreaterThan(0);
        const body = captured[0].body;
        expect(body.date).toBe('2026-05-01');
        expect(body.location).toBe('Site B');
        expect(Array.isArray(body.hazards)).toBe(true);
        expect(body.hazards.length).toBe(1);
        expect(body.hazards[0].kind).toBe('Loose handrail');
        expect(body.hazards[0].severity).toBe(3);
        expect(body.additionalNotes).toBe('Fixed during shift.');
    });

    test('server validation errors display per-field', async ({ page }) => {
        await page.addInitScript(() => {
            window.fetch = async function (input, init) {
                if (init && init.method === 'POST') {
                    return new Response(JSON.stringify({
                        errors: [
                            { path: '/location', message: 'required' },
                            { path: '/hazards/0/severity', message: 'must be at most 5' },
                        ],
                    }), { status: 422, headers: { 'Content-Type': 'application/json' } });
                }
                throw new Error('unexpected fetch');
            };
        });

        await loadFormWithContext(page, {
            schema: SAFETY_SCHEMA,
            ui: SAFETY_UI,
            data: null,
            submitUrl: '/test/safety.form.html',
        });

        await page.waitForSelector('#form-root');
        await page.locator('#form-root input[type="date"]').fill('2026-05-01');
        await page.locator('.form-array__add').click();
        await page.locator('.form-array__row input[type="text"]').first().fill('x');
        await page.locator('.form-array__row input[type="number"]').fill('99');
        await page.locator('#submit-btn').click();

        // Two error messages should be visible (location, severity).
        await expect(page.locator('.form-field__error:not([hidden])')).toHaveCount(2);
        await expect(page.locator('#form-status')).toContainText('Please correct');
    });

    test('pre-fills form when data is provided', async ({ page }) => {
        await loadFormWithContext(page, {
            schema: SAFETY_SCHEMA,
            ui: SAFETY_UI,
            data: {
                date: '2026-04-15',
                location: 'Site C',
                hazards: [
                    { kind: 'Slippery floor', severity: 2, notes: 'Wet from rain.' },
                ],
                additionalNotes: 'Pre-existing draft.',
            },
            submitUrl: '/test/safety/2026-04-15-jamie.yaml.html',
        });

        await page.waitForSelector('#form-root');
        await expect(page.locator('#form-root input[type="date"]')).toHaveValue('2026-04-15');
        await expect(page.locator('#form-root input[type="radio"][value="Site C"]')).toBeChecked();
        await expect(page.locator('.form-array__row')).toHaveCount(1);
        await expect(page.locator('.form-array__row input[type="text"]').first()).toHaveValue('Slippery floor');
        await expect(page.locator('.form-array__row input[type="number"]')).toHaveValue('2');
        await expect(page.locator('#form-root textarea')).toHaveValue('Pre-existing draft.');
    });
});