290 lines
13 KiB
JavaScript
290 lines
13 KiB
JavaScript
import { test, expect } from '@playwright/test';
|
|
import * as fs from 'fs';
|
|
import * as os from 'os';
|
|
import * as path from 'path';
|
|
|
|
// Form mode is hosted by the unified tables.html bundle — same bytes the
|
|
// server returns for /<dir>/form.html and /<dir>/<id>.yaml.html. Loading
|
|
// tables/dist/tables.html via file:// (named form.html in the temp dir
|
|
// so the URL pathname triggers form-mode in the dispatcher) is the
|
|
// closest offline mirror of what online callers actually receive.
|
|
const HTML_PATH = path.resolve('tables/dist/tables.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);
|
|
// Title element is shared across modes in the unified bundle.
|
|
await expect(page.locator('#table-title')).toContainText('Safety Check-In');
|
|
});
|
|
|
|
test('ui:mirrorFrom reflects a sibling field into a read-only field', async ({ page }) => {
|
|
// The project-rollup forms use this so the read-only originator
|
|
// shows the selected Package (party) — the party folder is the
|
|
// originator's source of truth.
|
|
await loadFormWithContext(page, {
|
|
title: 'Rollup deliverable',
|
|
schema: {
|
|
type: 'object',
|
|
required: ['party'],
|
|
properties: {
|
|
party: { type: 'string', title: 'Package' },
|
|
originator: { type: 'string', title: 'Originator', readOnly: true },
|
|
},
|
|
},
|
|
ui: { originator: { 'ui:mirrorFrom': 'party' } },
|
|
data: null,
|
|
submitUrl: '/test/rollup.form.html',
|
|
});
|
|
await page.waitForFunction(
|
|
() => document.getElementById('form-root') && document.getElementById('form-root').children.length > 0,
|
|
null,
|
|
{ timeout: 5000 },
|
|
);
|
|
|
|
const inputs = page.locator('#form-root input[type="text"]');
|
|
await expect(inputs).toHaveCount(2);
|
|
const party = inputs.nth(0);
|
|
const originator = inputs.nth(1);
|
|
await expect(originator).not.toBeEditable(); // read-only
|
|
await party.fill('0330C1');
|
|
await expect(originator).toHaveValue('0330C1');
|
|
});
|
|
|
|
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. Button now uses shared .btn-sm
|
|
// instead of the legacy form-local .btn-small class.
|
|
await page.locator('.form-array__row').first().locator('button.btn-sm').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-sam.yaml', 'Content-Type': 'application/json' }),
|
|
bodyText: '{"location":"/test/safety/2026-05-01-sam.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.');
|
|
});
|
|
});
|