67 lines
3.0 KiB
JavaScript
67 lines
3.0 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import test from 'node:test';
|
|
import { createTable, getCoreRowModel } from '@tanstack/table-core';
|
|
import { getColumnVirtualizerOptions, getOrderedVisibleColumns } from './columnLayoutUtils.js';
|
|
|
|
const createFixture = () => createTable({
|
|
data: [{ number: 1, amount: 100, name: 'Наименование', total: 200 }],
|
|
columns: [
|
|
{ accessorKey: 'number', size: 50 },
|
|
{ accessorKey: 'amount', size: 150 },
|
|
{ accessorKey: 'name', size: 400 },
|
|
{ accessorKey: 'total', size: 200 },
|
|
],
|
|
state: { columnPinning: { left: [], right: [] }, columnSizing: {}, columnOrder: [], columnVisibility: {} },
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
|
|
const updateState = (table, state) => table.setOptions((options) => ({ ...options, state: { ...options.state, ...state } }));
|
|
|
|
const assertLayoutMatchesBody = (table) => {
|
|
const cells = table.getRowModel().rows[0].getVisibleCells();
|
|
const columns = getOrderedVisibleColumns(table);
|
|
const virtualizer = getColumnVirtualizerOptions({ table });
|
|
assert.deepEqual(columns.map((column) => column.id), cells.map((cell) => cell.column.id));
|
|
for (const [index, cell] of cells.entries()) {
|
|
assert.equal(virtualizer.getItemKey(index), cell.column.id);
|
|
assert.equal(virtualizer.estimateSize(index), cell.column.getSize());
|
|
assert.equal(virtualizer.measureElement({ getAttribute: () => String(index) }), cell.column.getSize());
|
|
}
|
|
};
|
|
|
|
test('pinning a wide column keeps virtual widths in the same order as body cells', () => {
|
|
const table = createFixture();
|
|
assertLayoutMatchesBody(table);
|
|
updateState(table, { columnPinning: { left: ['name'], right: ['amount'] } });
|
|
assertLayoutMatchesBody(table);
|
|
assert.deepEqual(getOrderedVisibleColumns(table).map((column) => column.id), ['name', 'number', 'total', 'amount']);
|
|
updateState(table, { columnPinning: { left: [], right: [] } });
|
|
assertLayoutMatchesBody(table);
|
|
});
|
|
|
|
test('hiding and resizing pinned columns keeps offsets and visible ranges consistent', () => {
|
|
const table = createFixture();
|
|
updateState(table, {
|
|
columnPinning: { left: ['number', 'name'], right: ['total'] },
|
|
columnVisibility: { number: false },
|
|
columnSizing: { name: 480 },
|
|
});
|
|
assertLayoutMatchesBody(table);
|
|
const virtualizer = getColumnVirtualizerOptions({ table });
|
|
assert.equal(virtualizer.scrollPaddingStart, 480);
|
|
assert.equal(virtualizer.scrollPaddingEnd, 200);
|
|
assert.deepEqual(virtualizer.rangeExtractor({ startIndex: 1, endIndex: 1, overscan: 0, count: 3 }), [0, 1, 2]);
|
|
});
|
|
|
|
test('scrolling to the far edge keeps both pinned sides rendered', () => {
|
|
const table = createFixture();
|
|
updateState(table, { columnPinning: { left: ['name'], right: ['amount'] } });
|
|
const virtualizer = getColumnVirtualizerOptions({ table });
|
|
assert.deepEqual(virtualizer.rangeExtractor({ startIndex: 2, endIndex: 2, overscan: 0, count: 4 }), [0, 2, 3]);
|
|
assert.deepEqual(virtualizer.rangeExtractor({ startIndex: 0, endIndex: 0, overscan: 0, count: 4 }), [0, 3]);
|
|
});
|
|
|
|
test('column overscan is 3', () => {
|
|
assert.equal(getColumnVirtualizerOptions({ table: createFixture() }).overscan, 3);
|
|
});
|