ZDDC
e5bb7f216c
Replaces the always-text-input cell editor with a per-property
widget factory keyed off the row's JSON Schema (form.yaml). The
table view now picks the right editor for each cell automatically:
strings get text inputs, enums get dropdowns, integers get number
inputs with min/max, dates get date pickers, booleans get
checkboxes, multi-select arrays get a multi-select. Cells whose
schema is a complex type (nested object, generic array, oneOf /
anyOf / allOf) can't be inline-edited and punt to the row's
form-mode editor on Enter / double-click.
Schema discovery:
context.js walkServer fetches <currentdir>/form.yaml as a
companion to <currentdir>/table.yaml — same file the form-mode
renderer already loads, just from the table view's perspective.
Best-effort: a directory with table.yaml but no form.yaml still
renders as a sortable/filterable table; cells just fall back to
plain text inputs without per-property hints. The schema is
exposed as ctx.rowSchema and consumed by the editor's
propertySchemaFor() helper, which walks dot-separated field
names through schema.properties to locate each column's
property schema.
Editor factory (editor.js):
- propertySchemaFor(col) — schema lookup keyed by col.field.
- isComplexSchema(s) — true for nested object, generic array,
oneOf/anyOf/allOf. Multi-select-friendly arrays
(string-enum + uniqueItems) are NOT complex; they get an
inline multi-select widget.
- makeWidget(propSchema, col, initialValue) — dispatches to one
of the widget builders below based on schema type / format /
enum + column-spec hints (col.format / col.enum) for tables
without a form.yaml.
Widget builders, each returning {element, getValue, focus}:
- widgetText — plain <input type=text>, default fallback.
- widgetTextarea — for string with maxLength > 200 (long
narrative fields).
- widgetTyped(type) — typed inputs the browser can help validate;
used for date / date-time / email.
- widgetNumber — <input type=number> with min/max/step
derived from schema.minimum/maximum/
multipleOf. Integer schemas force step=1.
getValue returns Number, not string, so
the draft buffer holds the right type for
JSON serialization later.
- widgetCheckbox — <input type=checkbox>; getValue returns
bool. initial value coerces from "true"/
true string-or-bool.
- widgetSelect — <select> with empty placeholder + one
option per enum choice; getValue returns
the chosen string or null.
- widgetMultiSelect — <select multiple> with size = min(6, N);
getValue returns the array of selected
values (preserves order in the option list).
Complex-type cells:
isComplexSchema(propSchema) → enterEdit calls navigateToRowForm,
which routes to row.url (already the <id>.yaml.html re-edit URL
the row tracker holds). Phase 5 may swap this for an inline
side-panel mount of form-mode in the same bundle, but the
current navigate-out path delivers the same eventual UX without
needing the side-panel scaffolding.
Type-aware draft equality:
The pre-Phase-2 commit treated every value as a string and
compared via String() equality, which would mark any number-
column edit dirty even when the user re-typed the same number.
The new sameValue() helper handles bool/object via JSON-string
equality and falls back to loose string compare so 42 == "42"
isn't a false dirty. Drafts hold typed values (number, bool,
array) instead of all strings, so when Phase 3 wires the row PUT
the body shape matches the JSON Schema the server validates
against without an additional coercion pass.
Tests (tests/tables.spec.js — 7 new specs, total 22 in the
table view, all 27 in the file):
- enum column edits via select dropdown — verifies the empty
placeholder + 3 enum options render and the chosen value
displays back in the cell.
- integer column gives a number input with min/max — verifies
the type/min/max/step attributes derive from the schema, AND
the draft buffer holds typeof === 'number'.
- boolean column gives a checkbox — verifies type=checkbox and
the draft holds true after Space-toggle. (Toggle via Space,
not Playwright's .check() helper, to dodge the click+blur
race a focused-checkbox-inside-grid-cell hits.)
- format:date column gives a date input — verifies type=date
and the existing value pre-populates as YYYY-MM-DD.
- multi-select enum-array column gives a multi-select.
- complex (object) column navigates to the row form on edit —
verifies no inline editor mounts AND the navigate seam
receives the row's URL.
- no rowSchema → falls back to plain text editor — verifies the
best-effort behavior for directories with only table.yaml.
Bundle size: 124 KB → 127 KB (+3 KB for the factory + widget
builders).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
556 lines
23 KiB
JavaScript
556 lines
23 KiB
JavaScript
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('tables/dist/tables.html');
|
|
const HTML_RAW = fs.readFileSync(HTML_PATH, 'utf8');
|
|
|
|
const MDL_COLUMNS = [
|
|
{ field: 'id', title: 'ID', width: '6em' },
|
|
{ field: 'title', title: 'Deliverable' },
|
|
{ field: 'party', title: 'Party', enum: ['Acme', 'Beta', 'Gamma'] },
|
|
{ field: 'dueDate', title: 'Due', format: 'date' },
|
|
{ field: 'status', title: 'Status', enum: ['pending', 'submitted', 'accepted'] },
|
|
];
|
|
|
|
function makeRow(id, title, party, dueDate, status, editable = true) {
|
|
return {
|
|
url: `/Working/MDL/${id}.yaml.html`,
|
|
data: { id, title, party, dueDate, status },
|
|
editable,
|
|
};
|
|
}
|
|
|
|
const ROWS = [
|
|
makeRow('D-001', 'Site survey report', 'Acme', '2026-05-12', 'pending'),
|
|
makeRow('D-002', 'Foundation drawings A', 'Beta', '2026-05-20', 'submitted'),
|
|
makeRow('D-003', 'Procurement schedule', 'Acme', '2026-05-08', 'accepted'),
|
|
makeRow('D-004', 'Safety plan', 'Gamma', '2026-05-15', 'pending'),
|
|
makeRow('D-005', 'Geotechnical report', 'Beta', '2026-05-30', 'submitted'),
|
|
];
|
|
|
|
// Inject a complete table context into the page. Same pattern as
|
|
// form-safety.spec.js: write a patched copy of tables.html to a temp
|
|
// file and navigate via file://.
|
|
async function loadTableWithContext(page, context) {
|
|
const ctxJson = JSON.stringify(context).replace(/<\//g, '<\\/');
|
|
const replacement = `<script id="table-context" type="application/json">${ctxJson}</script>`;
|
|
const patched = HTML_RAW.replace(
|
|
/<script id="table-context" type="application\/json">[\s\S]*?<\/script>/,
|
|
replacement,
|
|
);
|
|
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'tables-spec-'));
|
|
const tmpPath = path.join(tmpDir, 'tables.html');
|
|
fs.writeFileSync(tmpPath, patched);
|
|
await page.goto(`file://${tmpPath}`, { waitUntil: 'load' });
|
|
}
|
|
|
|
test.describe('tables/ — directory-of-YAML table view', () => {
|
|
test('renders header with column titles and rows from context', async ({ page }) => {
|
|
page.on('pageerror', e => console.log('[pageerror]', e.message));
|
|
await loadTableWithContext(page, {
|
|
title: 'Master Deliverables List',
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
|
|
await page.waitForFunction(
|
|
() => document.querySelector('#table-root tbody').children.length > 0,
|
|
null,
|
|
{ timeout: 5000 },
|
|
);
|
|
|
|
// Header cells.
|
|
const headers = page.locator('.zddc-table__title-row .zddc-table__th');
|
|
await expect(headers).toHaveCount(MDL_COLUMNS.length);
|
|
await expect(headers.nth(0)).toContainText('ID');
|
|
await expect(headers.nth(1)).toContainText('Deliverable');
|
|
|
|
// Title in the page header.
|
|
await expect(page.locator('#table-title')).toContainText('Master Deliverables List');
|
|
|
|
// Row count.
|
|
await expect(page.locator('#table-root tbody tr')).toHaveCount(ROWS.length);
|
|
await expect(page.locator('#table-rowcount')).toContainText(`${ROWS.length} rows`);
|
|
});
|
|
|
|
test('default sort puts dueDate ascending when configured', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
defaults: { sort: [{ field: 'dueDate', dir: 'asc' }] },
|
|
});
|
|
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
const ids = await page.locator('#table-root tbody tr td:first-child').allTextContents();
|
|
// Sorted ascending by dueDate: D-003 (5/8), D-001 (5/12), D-004 (5/15), D-002 (5/20), D-005 (5/30).
|
|
expect(ids).toEqual(['D-003', 'D-001', 'D-004', 'D-002', 'D-005']);
|
|
});
|
|
|
|
test('clicking a column header sorts by that column and toggles direction', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
// Click the ID header → sort ascending.
|
|
await page.locator('.zddc-table__th[data-field="id"]').click();
|
|
let ids = await page.locator('#table-root tbody tr td:first-child').allTextContents();
|
|
expect(ids).toEqual(['D-001', 'D-002', 'D-003', 'D-004', 'D-005']);
|
|
|
|
// Click again → descending.
|
|
await page.locator('.zddc-table__th[data-field="id"]').click();
|
|
ids = await page.locator('#table-root tbody tr td:first-child').allTextContents();
|
|
expect(ids).toEqual(['D-005', 'D-004', 'D-003', 'D-002', 'D-001']);
|
|
});
|
|
|
|
test('free-text filter narrows visible rows', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
// Type "report" in the title column's filter — should match the
|
|
// two rows whose title contains "report" (Site survey report,
|
|
// Geotechnical report).
|
|
const titleFilter = page.locator('.zddc-table__th[data-field="title"]')
|
|
.locator('..')
|
|
.locator('xpath=following-sibling::tr[1]')
|
|
.locator('input[type="text"]')
|
|
.nth(0);
|
|
// Simpler selector: nth filter input under the filter row.
|
|
const filterInputs = page.locator('.zddc-table__filter-row input[type="text"]');
|
|
await filterInputs.nth(1).fill('report'); // index 1 = title column
|
|
await expect(page.locator('#table-root tbody tr')).toHaveCount(2);
|
|
});
|
|
|
|
test('text filter on an enum column does substring match', async ({ page }) => {
|
|
// Filter row is uniformly text-contains across all columns —
|
|
// even for columns declared with `enum:` in the spec. Enum
|
|
// metadata still informs validation/sort but not filter UI.
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const filterInputs = page.locator('.zddc-table__filter-row input[type="text"]');
|
|
// Spec columns: 0=id, 1=title, 2=party, 3=dueDate, 4=status.
|
|
const statusInput = filterInputs.nth(4);
|
|
await statusInput.fill('pending');
|
|
await expect(page.locator('#table-root tbody tr')).toHaveCount(2);
|
|
});
|
|
|
|
test('clicking a cell selects it (Phase 1 — replaces row-click navigation)', async ({ page }) => {
|
|
// Single click → cell selection. Row navigation moves to a
|
|
// dedicated affordance in Phase 2 (open-in-form button) so the
|
|
// primary click action can be the spreadsheet-native one.
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
// Stub navigate seam — verifies single-click does NOT navigate.
|
|
await page.evaluate(() => {
|
|
window.__navTarget = null;
|
|
window.tablesApp.navigateTo = url => { window.__navTarget = url; };
|
|
});
|
|
|
|
// Click a specific cell.
|
|
const firstCell = page.locator('#table-root tbody tr').first().locator('[role="gridcell"]').first();
|
|
await firstCell.click();
|
|
|
|
await expect(firstCell).toHaveClass(/zddc-table__cell--selected/);
|
|
await expect(firstCell).toHaveAttribute('tabindex', '0');
|
|
await expect(page.evaluate(() => window.__navTarget)).resolves.toBeNull();
|
|
});
|
|
|
|
test('arrow keys move cell selection (ARIA grid)', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
// Click to seed selection at (0,0), then arrow around.
|
|
const r0c0 = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(0);
|
|
await r0c0.click();
|
|
await expect(r0c0).toHaveClass(/zddc-table__cell--selected/);
|
|
|
|
await page.keyboard.press('ArrowDown');
|
|
const r1c0 = page.locator('#table-root tbody tr').nth(1).locator('[role="gridcell"]').nth(0);
|
|
await expect(r1c0).toHaveClass(/zddc-table__cell--selected/);
|
|
|
|
await page.keyboard.press('ArrowRight');
|
|
const r1c1 = page.locator('#table-root tbody tr').nth(1).locator('[role="gridcell"]').nth(1);
|
|
await expect(r1c1).toHaveClass(/zddc-table__cell--selected/);
|
|
|
|
await page.keyboard.press('ArrowUp');
|
|
const r0c1 = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(1);
|
|
await expect(r0c1).toHaveClass(/zddc-table__cell--selected/);
|
|
|
|
await page.keyboard.press('ArrowLeft');
|
|
await expect(r0c0).toHaveClass(/zddc-table__cell--selected/);
|
|
});
|
|
|
|
test('Tab and Shift-Tab traverse cells with row-wrap', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const numCols = MDL_COLUMNS.length;
|
|
// Start at last column of row 0.
|
|
const r0Last = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(numCols - 1);
|
|
await r0Last.click();
|
|
await expect(r0Last).toHaveClass(/zddc-table__cell--selected/);
|
|
|
|
// Tab → first cell of row 1 (wrap).
|
|
await page.keyboard.press('Tab');
|
|
const r1First = page.locator('#table-root tbody tr').nth(1).locator('[role="gridcell"]').nth(0);
|
|
await expect(r1First).toHaveClass(/zddc-table__cell--selected/);
|
|
|
|
// Shift+Tab → back to last cell of row 0.
|
|
await page.keyboard.press('Shift+Tab');
|
|
await expect(r0Last).toHaveClass(/zddc-table__cell--selected/);
|
|
});
|
|
|
|
test('Enter enters edit mode; Enter commits and moves down', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
// Edit the title cell (column index 1) of row 0.
|
|
const titleCell = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(1);
|
|
await titleCell.click();
|
|
await page.keyboard.press('Enter');
|
|
|
|
// Editor input mounted inside the cell.
|
|
const input = titleCell.locator('input.zddc-table__cell-input');
|
|
await expect(input).toBeVisible();
|
|
await expect(input).toBeFocused();
|
|
|
|
// Type new value, press Enter to commit + move down.
|
|
await page.keyboard.press('Control+a');
|
|
await page.keyboard.type('New title via cell editor');
|
|
await page.keyboard.press('Enter');
|
|
|
|
// Cell shows new value, input gone.
|
|
await expect(titleCell).toContainText('New title via cell editor');
|
|
await expect(titleCell.locator('input')).toHaveCount(0);
|
|
|
|
// Selection moved down one row, same column.
|
|
const r1Title = page.locator('#table-root tbody tr').nth(1).locator('[role="gridcell"]').nth(1);
|
|
await expect(r1Title).toHaveClass(/zddc-table__cell--selected/);
|
|
});
|
|
|
|
test('Escape cancels edit, restoring prior value', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const titleCell = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(1);
|
|
const originalText = await titleCell.textContent();
|
|
|
|
await titleCell.click();
|
|
await page.keyboard.press('Enter');
|
|
await page.keyboard.press('Control+a');
|
|
await page.keyboard.type('Should not stick');
|
|
await page.keyboard.press('Escape');
|
|
|
|
// Value restored to original; no draft entry.
|
|
await expect(titleCell).toHaveText(originalText.trim());
|
|
const draftCount = await page.evaluate(() =>
|
|
Object.keys(window.tablesApp.state.drafts).length);
|
|
expect(draftCount).toBe(0);
|
|
});
|
|
|
|
test('typing a printable char enters edit and replaces value', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const titleCell = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(1);
|
|
await titleCell.click();
|
|
// Press a printable character — should enter edit mode with
|
|
// that char as the new value.
|
|
await page.keyboard.press('X');
|
|
const input = titleCell.locator('input.zddc-table__cell-input');
|
|
await expect(input).toBeVisible();
|
|
await expect(input).toHaveValue('X');
|
|
});
|
|
|
|
test('double-click also enters edit mode', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const titleCell = page.locator('#table-root tbody tr').nth(0).locator('[role="gridcell"]').nth(1);
|
|
await titleCell.dblclick();
|
|
await expect(titleCell.locator('input.zddc-table__cell-input')).toBeVisible();
|
|
});
|
|
|
|
test('non-editable rows still get the readonly class', async ({ page }) => {
|
|
// Cosmetic guard for an existing convention: rows where the
|
|
// server says editable=false get a visual treatment. Cell
|
|
// selection still works in Phase 1; Phase 3 will gate writes
|
|
// on the editable flag at save time.
|
|
const readOnlyRows = ROWS.map(r => ({ ...r, editable: false }));
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: readOnlyRows,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
await expect(page.locator('#table-root tbody tr.zddc-table__row--editable')).toHaveCount(0);
|
|
await expect(page.locator('#table-root tbody tr.zddc-table__row--readonly')).toHaveCount(ROWS.length);
|
|
});
|
|
|
|
test('default filters seed the visible row count from defaults.filter', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: ROWS,
|
|
defaults: { filter: { status: ['pending'] } },
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
await expect(page.locator('#table-root tbody tr')).toHaveCount(2);
|
|
});
|
|
|
|
test('empty rows list shows the empty-state notice', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: MDL_COLUMNS,
|
|
rows: [],
|
|
});
|
|
// Wait briefly for init.
|
|
await page.waitForTimeout(50);
|
|
await expect(page.locator('#table-root tbody tr')).toHaveCount(0);
|
|
await expect(page.locator('#table-empty')).toBeHidden();
|
|
});
|
|
|
|
// --- Phase 2: schema-driven cell editor widgets -----------------------
|
|
|
|
// A small JSON Schema covering the inline-editable types the
|
|
// factory recognises: string, integer with min/max, boolean,
|
|
// string-enum, format:date, array<enum>+uniqueItems.
|
|
const ROW_SCHEMA = {
|
|
type: 'object',
|
|
properties: {
|
|
id: { type: 'string' },
|
|
title: { type: 'string' },
|
|
party: { type: 'string', enum: ['Acme', 'Beta', 'Gamma'] },
|
|
dueDate: { type: 'string', format: 'date' },
|
|
status: { type: 'string', enum: ['pending', 'submitted', 'accepted'] },
|
|
priority: { type: 'integer', minimum: 1, maximum: 5 },
|
|
done: { type: 'boolean' },
|
|
tags: {
|
|
type: 'array',
|
|
uniqueItems: true,
|
|
items: { type: 'string', enum: ['blue', 'green', 'red'] },
|
|
},
|
|
// A nested-object cell — should punt to navigation rather
|
|
// than mount an inline editor.
|
|
owner: {
|
|
type: 'object',
|
|
properties: {
|
|
name: { type: 'string' },
|
|
email: { type: 'string', format: 'email' },
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const SCHEMA_COLUMNS = [
|
|
{ field: 'id', title: 'ID', width: '6em' },
|
|
{ field: 'title', title: 'Title' },
|
|
{ field: 'party', title: 'Party' },
|
|
{ field: 'dueDate', title: 'Due', format: 'date' },
|
|
{ field: 'status', title: 'Status' },
|
|
{ field: 'priority', title: 'Priority' },
|
|
{ field: 'done', title: 'Done' },
|
|
{ field: 'tags', title: 'Tags' },
|
|
{ field: 'owner', title: 'Owner' },
|
|
];
|
|
|
|
function makeSchemaRow(over) {
|
|
return {
|
|
url: `/Working/MDL/${over.id || 'D-001'}.yaml.html`,
|
|
data: Object.assign({
|
|
id: 'D-001', title: 'Sample', party: 'Acme', dueDate: '2026-05-12',
|
|
status: 'pending', priority: 3, done: false, tags: ['blue'],
|
|
owner: { name: 'Casey', email: 'c@example.com' },
|
|
}, over.data || {}),
|
|
editable: true,
|
|
};
|
|
}
|
|
|
|
const SCHEMA_ROWS = [makeSchemaRow({ id: 'D-001' }), makeSchemaRow({ id: 'D-002' })];
|
|
|
|
function colIdx(field) {
|
|
return SCHEMA_COLUMNS.findIndex(c => c.field === field);
|
|
}
|
|
|
|
test('Phase 2: enum column edits via select dropdown', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
rowSchema: ROW_SCHEMA,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const partyCell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('party'));
|
|
await partyCell.dblclick();
|
|
const select = partyCell.locator('select.zddc-table__cell-input');
|
|
await expect(select).toBeVisible();
|
|
// Empty placeholder + 3 enum options.
|
|
await expect(select.locator('option')).toHaveCount(4);
|
|
await select.selectOption('Beta');
|
|
await page.keyboard.press('Enter');
|
|
await expect(partyCell).toContainText('Beta');
|
|
});
|
|
|
|
test('Phase 2: integer column gives a number input with min/max', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
rowSchema: ROW_SCHEMA,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const cell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('priority'));
|
|
await cell.dblclick();
|
|
const input = cell.locator('input.zddc-table__cell-input');
|
|
await expect(input).toHaveAttribute('type', 'number');
|
|
await expect(input).toHaveAttribute('min', '1');
|
|
await expect(input).toHaveAttribute('max', '5');
|
|
await expect(input).toHaveAttribute('step', '1');
|
|
|
|
await input.fill('4');
|
|
await page.keyboard.press('Enter');
|
|
await expect(cell).toContainText('4');
|
|
|
|
// Draft holds a Number, not a string.
|
|
const draftType = await page.evaluate(() => {
|
|
const drafts = window.tablesApp.state.drafts;
|
|
const rowId = Object.keys(drafts)[0];
|
|
return typeof drafts[rowId].priority;
|
|
});
|
|
expect(draftType).toBe('number');
|
|
});
|
|
|
|
test('Phase 2: boolean column gives a checkbox', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
rowSchema: ROW_SCHEMA,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const cell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('done'));
|
|
await cell.dblclick();
|
|
const cb = cell.locator('input.zddc-table__cell-input');
|
|
await expect(cb).toHaveAttribute('type', 'checkbox');
|
|
// Toggle via Space (the keyboard contract a screen-reader user
|
|
// would use). Avoids the click+blur race that Playwright's
|
|
// .check() helper hits on a focused-checkbox-inside-grid-cell.
|
|
await page.keyboard.press('Space');
|
|
await page.keyboard.press('Enter');
|
|
|
|
const draftValue = await page.evaluate(() => {
|
|
const drafts = window.tablesApp.state.drafts;
|
|
const rowId = Object.keys(drafts)[0];
|
|
return drafts[rowId].done;
|
|
});
|
|
expect(draftValue).toBe(true);
|
|
});
|
|
|
|
test('Phase 2: format:date column gives a date input', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
rowSchema: ROW_SCHEMA,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const cell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('dueDate'));
|
|
await cell.dblclick();
|
|
const input = cell.locator('input.zddc-table__cell-input');
|
|
await expect(input).toHaveAttribute('type', 'date');
|
|
await expect(input).toHaveValue('2026-05-12');
|
|
});
|
|
|
|
test('Phase 2: multi-select enum-array column gives a multi-select', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
rowSchema: ROW_SCHEMA,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const cell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('tags'));
|
|
await cell.dblclick();
|
|
const select = cell.locator('select.zddc-table__cell-input');
|
|
await expect(select).toBeVisible();
|
|
await expect(select).toHaveAttribute('multiple', '');
|
|
});
|
|
|
|
test('Phase 2: complex (object) column navigates to the row form on edit', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
rowSchema: ROW_SCHEMA,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
// Stub navigation seam — see how the editor punts to the
|
|
// form for inline-uneditable types.
|
|
await page.evaluate(() => {
|
|
window.__navTarget = null;
|
|
window.tablesApp.navigateTo = url => { window.__navTarget = url; };
|
|
});
|
|
|
|
const cell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('owner'));
|
|
await cell.dblclick();
|
|
// No inline editor mounted.
|
|
await expect(cell.locator('.zddc-table__cell-input')).toHaveCount(0);
|
|
const target = await page.evaluate(() => window.__navTarget);
|
|
expect(target).toContain('.yaml.html');
|
|
});
|
|
|
|
test('Phase 2: no rowSchema → falls back to plain text editor', async ({ page }) => {
|
|
await loadTableWithContext(page, {
|
|
// No rowSchema in the context — same as a directory with
|
|
// table.yaml but no form.yaml.
|
|
columns: SCHEMA_COLUMNS,
|
|
rows: SCHEMA_ROWS,
|
|
});
|
|
await page.waitForSelector('#table-root tbody tr');
|
|
|
|
const cell = page.locator('#table-root tbody tr').nth(0)
|
|
.locator('[role="gridcell"]').nth(colIdx('party'));
|
|
await cell.dblclick();
|
|
// Default text input — even for a column that COULD have been
|
|
// an enum dropdown if the schema had been provided.
|
|
const input = cell.locator('input.zddc-table__cell-input');
|
|
await expect(input).toHaveAttribute('type', 'text');
|
|
});
|
|
});
|