parent
d6d23b3c9b
commit
0464111330
@ -0,0 +1,341 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { flushSync } from 'svelte';
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { createActiveDom } from '$adom';
|
||||
import { state } from '$libs/reactive';
|
||||
import type { Morfo } from '$uix/morfo';
|
||||
import { Soma } from '$soma/core/soma.svelte';
|
||||
import { createSomaRuntime, type SomaRuntimeSources } from '$soma/runtime.svelte';
|
||||
import {
|
||||
createTable,
|
||||
type ColumnDef,
|
||||
type TableCell,
|
||||
type TableHeader,
|
||||
type TableInstance,
|
||||
type TableRow
|
||||
} from '$libs/datagrid';
|
||||
|
||||
import {
|
||||
TableBodyProvider,
|
||||
TableCellProvider,
|
||||
TableColumnHeaderProvider,
|
||||
TableFooterProvider,
|
||||
TableHeaderProvider,
|
||||
TableProvider,
|
||||
TableRowDetailProvider,
|
||||
TableRowDetailTriggerProvider,
|
||||
tableRowDetailDomId,
|
||||
TableRowProvider
|
||||
} from './table-provider.svelte';
|
||||
|
||||
type Person = {
|
||||
id: string;
|
||||
name: string;
|
||||
age: number;
|
||||
status: 'active' | 'paused';
|
||||
score: number;
|
||||
};
|
||||
|
||||
const people: Person[] = [
|
||||
{ id: 'a', name: 'Ada', age: 36, status: 'active', score: 12 },
|
||||
{ id: 'b', name: 'Ben', age: 29, status: 'paused', score: 42 }
|
||||
];
|
||||
|
||||
const columns: ColumnDef<Person>[] = [
|
||||
{
|
||||
id: 'name',
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
enableSorting: true,
|
||||
enablePinning: true,
|
||||
enableResizing: true,
|
||||
size: 120
|
||||
},
|
||||
{
|
||||
id: 'age',
|
||||
accessorKey: 'age',
|
||||
header: 'Age',
|
||||
enableSorting: true,
|
||||
enablePinning: true,
|
||||
size: 80
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
accessorKey: 'status',
|
||||
header: 'Status',
|
||||
enableFiltering: true
|
||||
},
|
||||
{
|
||||
id: 'score',
|
||||
accessorFn: (row) => row.score,
|
||||
header: 'Score',
|
||||
enableSorting: true,
|
||||
enablePinning: true,
|
||||
enableResizing: true,
|
||||
size: 60
|
||||
}
|
||||
];
|
||||
|
||||
function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
|
||||
let result!: T;
|
||||
const cleanup = $effect.root(() => {
|
||||
result = fn();
|
||||
});
|
||||
return { result, cleanup };
|
||||
}
|
||||
|
||||
function installSomaHarness() {
|
||||
const dom = createActiveDom();
|
||||
const soma = {
|
||||
dom,
|
||||
langs: {
|
||||
ts: vi.fn((key: string) => {
|
||||
if (key.includes('collapse')) return 'Hide details';
|
||||
if (key.includes('expand')) return 'Show details';
|
||||
return 'Data table';
|
||||
})
|
||||
},
|
||||
runtime: (morfo: Morfo, sources: Omit<SomaRuntimeSources, 'dom' | 'eventEngine'>) =>
|
||||
createSomaRuntime(morfo, {
|
||||
dom,
|
||||
translate: (key) => key,
|
||||
...sources
|
||||
})
|
||||
} as unknown as Soma;
|
||||
|
||||
vi.spyOn(Soma, 'require').mockReturnValue(soma);
|
||||
vi.spyOn(TableProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
vi.spyOn(TableRowProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom };
|
||||
}
|
||||
|
||||
function createPersonTable(
|
||||
options: {
|
||||
selection?: 'none' | 'single' | 'multiple';
|
||||
detail?: boolean;
|
||||
} = {}
|
||||
) {
|
||||
return createTable<Person>({
|
||||
data: () => people,
|
||||
columns,
|
||||
getRowId: (row) => row.id,
|
||||
sorting: { enabled: true },
|
||||
selection: { mode: options.selection ?? 'none' },
|
||||
initialColumnPinning: { left: ['name'], right: ['age'] },
|
||||
getRowCanShowDetail: options.detail ? (row) => row.age >= 30 : undefined
|
||||
});
|
||||
}
|
||||
|
||||
function asProviderTable(table: TableInstance<Person>): TableInstance {
|
||||
return table as unknown as TableInstance;
|
||||
}
|
||||
|
||||
function asProviderHeader(header: TableHeader<Person>): TableHeader {
|
||||
return header as unknown as TableHeader;
|
||||
}
|
||||
|
||||
function asProviderRow(row: TableRow<Person>): TableRow {
|
||||
return row as unknown as TableRow;
|
||||
}
|
||||
|
||||
function asProviderCell(cell: TableCell<Person>): TableCell {
|
||||
return cell as unknown as TableCell;
|
||||
}
|
||||
|
||||
function tableOpts(table: TableInstance<Person>, tableEl = document.createElement('table')) {
|
||||
return {
|
||||
id: state('table-root'),
|
||||
ref: state<HTMLElement | null>(tableEl),
|
||||
table: state(asProviderTable(table)),
|
||||
label: state<string | undefined>(undefined),
|
||||
dir: state<'ltr' | 'rtl'>('ltr')
|
||||
};
|
||||
}
|
||||
|
||||
function partOpts(id: string, el: HTMLElement) {
|
||||
return {
|
||||
id: state(id),
|
||||
ref: state<HTMLElement | null>(el)
|
||||
};
|
||||
}
|
||||
|
||||
function keyEvent(key: string) {
|
||||
return {
|
||||
key,
|
||||
preventDefault: vi.fn(),
|
||||
stopPropagation: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
describe('TableProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('exposes root, section, header and cell props from the TableInstance', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const table = createPersonTable();
|
||||
const tableEl = document.createElement('table');
|
||||
document.body.appendChild(tableEl);
|
||||
const opts = tableOpts(table, tableEl);
|
||||
const firstHeader = table.headers[0]!;
|
||||
const firstRow = table.rows[0]!;
|
||||
const firstCell = firstRow.cells[0]!;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TableProvider.create(opts);
|
||||
vi.spyOn(TableProvider, 'require').mockReturnValue(provider);
|
||||
const header = TableHeaderProvider.create(
|
||||
partOpts('table-head', document.createElement('thead'))
|
||||
);
|
||||
const body = TableBodyProvider.create(
|
||||
partOpts('table-body', document.createElement('tbody'))
|
||||
);
|
||||
const footer = TableFooterProvider.create(
|
||||
partOpts('table-footer', document.createElement('tfoot'))
|
||||
);
|
||||
const columnHeader = TableColumnHeaderProvider.create({
|
||||
id: state('table-header-name'),
|
||||
ref: state<HTMLElement | null>(document.createElement('th')),
|
||||
header: state(asProviderHeader(firstHeader))
|
||||
});
|
||||
const cell = TableCellProvider.create({
|
||||
id: state('table-cell-a-name'),
|
||||
ref: state<HTMLElement | null>(document.createElement('td')),
|
||||
cell: state(asProviderCell(firstCell)),
|
||||
colIndex: state(0)
|
||||
});
|
||||
return { provider, header, body, footer, columnHeader, cell };
|
||||
});
|
||||
|
||||
expect(result.provider.props).toMatchObject({
|
||||
id: 'table-root',
|
||||
'data-table': '',
|
||||
dir: 'ltr',
|
||||
'aria-label': 'Data table'
|
||||
});
|
||||
expect(result.provider.label).toBe('Data table');
|
||||
expect(result.header.props).toMatchObject({ id: 'table-head', 'data-table-header': '' });
|
||||
expect(result.body.props).toMatchObject({ id: 'table-body', 'data-table-body': '' });
|
||||
expect(result.footer.props).toMatchObject({ id: 'table-footer', 'data-table-footer': '' });
|
||||
expect(result.columnHeader.props).toMatchObject({
|
||||
role: 'columnheader',
|
||||
'aria-sort': 'none',
|
||||
'data-sortable': '',
|
||||
'data-pinned': 'left',
|
||||
style: 'width:120px;min-width:120px;position:sticky;left:0px;z-index:1'
|
||||
});
|
||||
expect(result.cell.props).toMatchObject({
|
||||
role: 'gridcell',
|
||||
'aria-colindex': 1,
|
||||
'data-pinned': 'left',
|
||||
style: 'width:120px;min-width:120px;position:sticky;left:0px;z-index:1'
|
||||
});
|
||||
|
||||
table.toggleSort('name');
|
||||
flushSync();
|
||||
expect(result.columnHeader.props).toMatchObject({
|
||||
'aria-sort': 'ascending',
|
||||
'data-sorted': 'asc'
|
||||
});
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('delegates row selection and row detail disclosure to the TableInstance', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const table = createPersonTable({ selection: 'multiple', detail: true });
|
||||
const row = table.rows[0]!;
|
||||
const tableEl = document.createElement('table');
|
||||
document.body.appendChild(tableEl);
|
||||
const opts = tableOpts(table, tableEl);
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = TableProvider.create(opts);
|
||||
vi.spyOn(TableProvider, 'require').mockReturnValue(provider);
|
||||
const rowProvider = TableRowProvider.create({
|
||||
id: state('table-row-a'),
|
||||
ref: state<HTMLElement | null>(document.createElement('tr')),
|
||||
row: state(asProviderRow(row))
|
||||
});
|
||||
const detail = TableRowDetailProvider.create({
|
||||
id: state('custom-detail-id'),
|
||||
ref: state<HTMLElement | null>(document.createElement('tr')),
|
||||
row: state(asProviderRow(row))
|
||||
});
|
||||
const trigger = TableRowDetailTriggerProvider.create({
|
||||
id: state('table-row-a-detail-trigger'),
|
||||
ref: state<HTMLElement | null>(document.createElement('button')),
|
||||
row: state(asProviderRow(row)),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
return { provider, rowProvider, detail, trigger };
|
||||
});
|
||||
|
||||
expect(result.rowProvider.props).toMatchObject({
|
||||
role: 'row',
|
||||
'aria-rowindex': 1,
|
||||
'aria-selected': false,
|
||||
tabindex: 0,
|
||||
'data-selected': undefined
|
||||
});
|
||||
result.rowProvider.onclick();
|
||||
flushSync();
|
||||
expect(table.getIsRowSelected('a')).toBe(true);
|
||||
expect(result.rowProvider.props).toMatchObject({
|
||||
'aria-selected': true,
|
||||
'data-selected': ''
|
||||
});
|
||||
|
||||
const space = keyEvent(' ');
|
||||
result.rowProvider.onkeydown(space as never);
|
||||
flushSync();
|
||||
expect(space.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(table.getIsRowSelected('a')).toBe(false);
|
||||
|
||||
expect(result.detail.colSpan).toBe(4);
|
||||
expect(result.detail.props).toMatchObject({
|
||||
id: tableRowDetailDomId('a'),
|
||||
role: 'row',
|
||||
hidden: true,
|
||||
'data-state': 'closed'
|
||||
});
|
||||
expect(result.trigger.props).toMatchObject({
|
||||
type: 'button',
|
||||
'aria-expanded': false,
|
||||
'aria-controls': tableRowDetailDomId('a'),
|
||||
'aria-label': 'Show details',
|
||||
'data-state': 'closed'
|
||||
});
|
||||
|
||||
const click = { stopPropagation: vi.fn() };
|
||||
result.trigger.onclick(click as never);
|
||||
flushSync();
|
||||
expect(click.stopPropagation).toHaveBeenCalledOnce();
|
||||
expect(table.getIsRowDetailOpen('a')).toBe(true);
|
||||
expect(result.detail.props).toMatchObject({
|
||||
hidden: undefined,
|
||||
'data-state': 'open'
|
||||
});
|
||||
expect(result.trigger.props).toMatchObject({
|
||||
'aria-expanded': true,
|
||||
'aria-label': 'Hide details',
|
||||
'data-state': 'open'
|
||||
});
|
||||
|
||||
const enter = keyEvent('Enter');
|
||||
result.trigger.onkeydown(enter as never);
|
||||
flushSync();
|
||||
expect(enter.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(enter.stopPropagation).toHaveBeenCalledOnce();
|
||||
expect(table.getIsRowDetailOpen('a')).toBe(false);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue