ZDDC/tests/tables.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('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('enum filter limits rows to selected values', async ({ page }) => {
        await loadTableWithContext(page, {
            columns: MDL_COLUMNS,
            rows: ROWS,
        });
        await page.waitForSelector('#table-root tbody tr');

        // Status column is enum; pick "pending" only.
        const statusSelect = page.locator('.zddc-table__filter-row select').nth(1); // 0=party, 1=status
        await statusSelect.selectOption({ value: 'pending' });
        await expect(page.locator('#table-root tbody tr')).toHaveCount(2);
    });

    test('click on editable row navigates to the row URL', async ({ page }) => {
        await loadTableWithContext(page, {
            columns: MDL_COLUMNS,
            rows: ROWS,
        });
        await page.waitForSelector('#table-root tbody tr');

        // Stub the navigate seam render.js consults before falling back
        // to window.location.assign (which Chromium won't let us override
        // directly via a plain property assignment).
        await page.evaluate(() => {
            window.__navTarget = null;
            window.tablesApp.navigateTo = url => { window.__navTarget = url; };
        });

        await page.locator('#table-root tbody tr').first().click();
        const target = await page.evaluate(() => window.__navTarget);
        expect(target).toBeTruthy();
        expect(target).toContain('.yaml.html');
    });

    test('non-editable rows do not navigate on click', async ({ page }) => {
        const readOnlyRows = ROWS.map(r => ({ ...r, editable: false }));
        await loadTableWithContext(page, {
            columns: MDL_COLUMNS,
            rows: readOnlyRows,
        });
        await page.waitForSelector('#table-root tbody tr');

        await page.evaluate(() => {
            window.__navTarget = null;
            window.tablesApp.navigateTo = url => { window.__navTarget = url; };
        });

        await page.locator('#table-root tbody tr').first().click();
        const target = await page.evaluate(() => window.__navTarget);
        expect(target).toBeNull();

        // Read-only rows should also lack the editable visual class.
        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();
    });
});