noecosystem-design 0.2.3 → 0.4.0

package/packages/data-ui/src/table/data-table-visual.evidence.browser.test.tsx

@@ -0,0 +1,157 @@
+import type * as React from 'react';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import '../../../design-tokens/src/tailwind.css';
+
+import type { DataColumn, DataSort } from './contracts';
+import { DataTable } from './data-table';
+
+/**
+ * Deterministic PNG evidence for the NOE DataTable (docs/design-system/visual-qa.md).
+ * Captures regular/compact density, RTL Persian, selection and loading states
+ * into evidence/data-table/. Pure layout evidence: no mock data leaves the repo.
+ *
+ * All variants render once; per-variant wrappers are captured individually
+ * because repeated render/unmount cycles invalidate the shared mount wrapper.
+ */
+
+// Resolved relative to this test file by the browser screenshot driver.
+const OUT = '../../../../evidence/data-table';
+
+type Row = { id: string; service: string; owner: string; status: string; updated: string };
+
+const columns: DataColumn<Row>[] = [
+  { key: 'service', header: 'Service', technical: true },
+  { key: 'owner', header: 'Owner' },
+  { key: 'status', header: 'Status' },
+  { key: 'updated', header: 'Updated', technical: true, align: 'end' },
+];
+
+const rows: Row[] = [
+  { id: '1', service: 'catalog-api', owner: 'Platform', status: 'Healthy', updated: '2m ago' },
+  {
+    id: '2',
+    service: 'agent-runner',
+    owner: 'AI Platform',
+    status: 'Degraded',
+    updated: '11m ago',
+  },
+  {
+    id: '3',
+    service: 'registry-sync',
+    owner: 'Design Systems',
+    status: 'Healthy',
+    updated: '1h ago',
+  },
+  {
+    id: '4',
+    service: 'registry-api',
+    owner: 'Design Systems',
+    status: 'Healthy',
+    updated: '3h ago',
+  },
+  { id: '5', service: 'agent-gateway', owner: 'AI Platform', status: 'Healthy', updated: '5h ago' },
+];
+
+const faColumns: DataColumn<Row>[] = [
+  { key: 'service', header: 'سرویس', technical: true },
+  { key: 'owner', header: 'مالک' },
+  { key: 'status', header: 'وضعیت' },
+];
+const faSorting: DataSort[] = [{ field: 'service', direction: 'asc' }];
+
+const captures: Array<{ name: string; ui: React.ReactElement }> = [
+  {
+    name: 'data-table-regular-en-light',
+    ui: (
+      <DataTable columns={columns} rows={rows} caption="Service health" empty="No services yet." />
+    ),
+  },
+  {
+    name: 'data-table-compact-fa-rtl',
+    ui: (
+      <div dir="rtl" lang="fa">
+        <DataTable
+          columns={faColumns}
+          rows={rows}
+          caption="وضعیت سرویس‌ها"
+          density="compact"
+          empty="هنوز سرویسی ثبت نشده است."
+          sorting={faSorting}
+          onSortingChange={() => {}}
+        />
+      </div>
+    ),
+  },
+  {
+    name: 'data-table-selection',
+    ui: (
+      <DataTable
+        columns={columns}
+        rows={rows}
+        caption="Service health"
+        empty="No services yet."
+        defaultSelection={['2']}
+        selectAllLabel="Select all services"
+        selectedCountLabel={(count: number) => `${count} selected`}
+        renderSelectionActions={() => <button type="button">Restart</button>}
+      />
+    ),
+  },
+  {
+    name: 'data-table-loading',
+    ui: (
+      <DataTable
+        columns={columns}
+        rows={[]}
+        caption="Service health"
+        empty="No services yet."
+        loading
+        loadingRows={4}
+      />
+    ),
+  },
+  {
+    name: 'data-table-selection-fa-dark-compact',
+    ui: (
+      <div
+        data-theme="dark"
+        dir="rtl"
+        lang="fa"
+        className="rounded-lg bg-background p-3 text-foreground"
+      >
+        <DataTable
+          columns={faColumns}
+          rows={rows}
+          caption="وضعیت سرویس‌ها"
+          density="compact"
+          empty="هنوز سرویسی ثبت نشده است."
+          defaultSelection={['2']}
+          selectAllLabel="انتخاب همه سرویس‌ها"
+          selectedCountLabel={(count: number) => `${count} مورد انتخاب شده`}
+        />
+      </div>
+    ),
+  },
+];
+
+test('captures DataTable visual evidence', async () => {
+  const screen = await render(
+    <div className="flex flex-col">
+      {captures.map(({ name, ui }) => (
+        <div data-testid={`capture-${name}`} key={name}>
+          {ui}
+        </div>
+      ))}
+    </div>,
+  );
+
+  for (const { name } of captures) {
+    await screen
+      .getByTestId(`capture-${name}`)
+      .screenshot({ animations: 'disabled', caret: 'hide', path: `${OUT}/${name}.png` });
+  }
+
+  expect(captures).toHaveLength(5);
+});

package/packages/data-ui/src/table/data-table.browser.test.tsx

@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import type { DataColumn } from './contracts';
+import { DataTable } from './data-table';
+
+type Row = { id: string; service: string; owner: string };
+
+const columns: DataColumn<Row>[] = [
+  { key: 'service', header: 'Service', technical: true },
+  { key: 'owner', header: 'Owner' },
+];
+
+const rows: Row[] = [
+  { id: '1', service: 'catalog-api', owner: 'Platform' },
+  { id: '2', service: 'agent-runner', owner: 'AI Platform' },
+  { id: '3', service: 'registry-sync', owner: 'Design Systems' },
+];
+
+interface ScreenLike {
+  getByRole(
+    role: 'table' | 'button' | 'checkbox' | 'columnheader',
+    options?: { name?: string },
+  ): {
+    element(): Element;
+    click(): Promise<void>;
+  };
+  getByText(text: string): { element(): Element };
+}
+
+const bodyRows = (screen: ScreenLike) =>
+  (screen.getByRole('table').element() as HTMLTableElement).querySelectorAll('tbody tr');
+
+test('renders a semantic table with logical alignment metadata', async () => {
+  const screen = await render(
+    <DataTable columns={columns} rows={rows} caption="Service health" empty="No services yet." />,
+  );
+
+  const table = screen.getByRole('table').element() as HTMLTableElement;
+  expect(table.querySelector('caption')?.textContent).toBe('Service health');
+  const header = screen
+    .getByRole('columnheader', { name: 'Service' })
+    .element() as HTMLTableCellElement;
+  expect(header.getAttribute('data-align')).toBe('start');
+  expect(header.getAttribute('aria-sort')).toBe('none');
+  expect(bodyRows(screen)).toHaveLength(3);
+});
+
+test('sorting cycles ascending, descending, then unsorted with aria-sort state', async () => {
+  const onSortingChange = vi.fn();
+  const screen = await render(
+    <DataTable
+      columns={columns}
+      rows={rows}
+      caption="Service health"
+      empty="No services yet."
+      onSortingChange={onSortingChange}
+    />,
+  );
+
+  const header = () =>
+    screen.getByRole('columnheader', { name: 'Service' }).element() as HTMLTableCellElement;
+  const firstRowService = () =>
+    (bodyRows(screen)[0] as HTMLTableRowElement).querySelector('td')?.textContent;
+
+  await screen.getByRole('button', { name: 'Service' }).click();
+  expect(header().getAttribute('aria-sort')).toBe('ascending');
+  expect(firstRowService()).toBe('agent-runner');
+  expect(onSortingChange).toHaveBeenLastCalledWith([{ field: 'service', direction: 'asc' }]);
+
+  await screen.getByRole('button', { name: 'Service' }).click();
+  expect(header().getAttribute('aria-sort')).toBe('descending');
+  expect(firstRowService()).toBe('registry-sync');
+  expect(onSortingChange).toHaveBeenLastCalledWith([{ field: 'service', direction: 'desc' }]);
+
+  await screen.getByRole('button', { name: 'Service' }).click();
+  expect(header().getAttribute('aria-sort')).toBe('none');
+  expect(firstRowService()).toBe('catalog-api');
+});
+
+test('selection keeps stable row ids and reflects indeterminate state', async () => {
+  const onSelectionChange = vi.fn();
+  const screen = await render(
+    <DataTable
+      columns={columns}
+      rows={rows}
+      caption="Service health"
+      empty="No services yet."
+      defaultSelection={['2']}
+      onSelectionChange={onSelectionChange}
+      selectAllLabel="Select all rows"
+      rowSelectionLabel={(row: Row) => `Select ${row.service}`}
+      selectedCountLabel={(count: number) => `${count} selected`}
+    />,
+  );
+
+  await screen.getByRole('checkbox', { name: 'Select catalog-api' }).click();
+  expect(onSelectionChange).toHaveBeenLastCalledWith(['1', '2']);
+  expect(
+    screen.getByRole('checkbox', { name: 'Select all rows' }).element() as HTMLInputElement,
+  ).toBePartiallyChecked();
+
+  await screen.getByRole('checkbox', { name: 'Select all rows' }).click();
+  expect(onSelectionChange).toHaveBeenLastCalledWith(['1', '2', '3']);
+  expect(screen.getByText('3 selected').element()).toBeTruthy();
+});
+
+test('client-side pagination slices rows and reports status', async () => {
+  function PaginationHost() {
+    const [page, setPage] = useState({ index: 0, size: 2 });
+    return (
+      <DataTable
+        columns={columns}
+        rows={rows}
+        caption="Service health"
+        empty="No services yet."
+        page={page}
+        onPageChange={setPage}
+        previousPageLabel="Previous page"
+        nextPageLabel="Next page"
+      />
+    );
+  }
+  const screen = await render(<PaginationHost />);
+
+  expect(bodyRows(screen)).toHaveLength(2);
+  expect(screen.getByRole('button', { name: 'Previous page' })).toBeDisabled();
+  expect(screen.getByText('1–2 / 3').element()).toBeTruthy();
+
+  await screen.getByRole('button', { name: 'Next page' }).click();
+  expect(bodyRows(screen)).toHaveLength(1);
+  expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+  expect(screen.getByText('3–3 / 3').element()).toBeTruthy();
+});
+
+test('renders logical alignment inside an RTL container without mirroring hacks', async () => {
+  const screen = await render(
+    <div dir="rtl">
+      <DataTable columns={columns} rows={rows} caption="Service health" empty="No services yet." />
+    </div>,
+  );
+
+  const header = screen
+    .getByRole('columnheader', { name: 'Owner' })
+    .element() as HTMLTableCellElement;
+  expect(header.getAttribute('data-align')).toBe('start');
+  expect(header.className).toContain('text-start');
+  const technicalCell = screen
+    .getByRole('cell', { name: 'catalog-api' })
+    .element() as HTMLTableCellElement;
+  expect(technicalCell.querySelector('[dir="ltr"]')).toBeTruthy();
+});
+
+test('loading renders skeleton rows instead of data', async () => {
+  const screen = await render(
+    <DataTable
+      columns={columns}
+      rows={rows}
+      caption="Service health"
+      empty="No services yet."
+      loading
+      loadingRows={2}
+    />,
+  );
+
+  expect(
+    (screen.getByRole('table').element() as HTMLTableElement).querySelectorAll(
+      '[data-slot="data-table-loading-row"]',
+    ),
+  ).toHaveLength(2);
+});
+
+test('empty model renders the empty affordance', async () => {
+  const screen = await render(
+    <DataTable columns={columns} rows={[]} caption="Service health" empty="No services yet." />,
+  );
+
+  expect(screen.getByText('No services yet.').element()).toBeTruthy();
+});