Skip to content

Commit

Permalink
feat(mantine): add syncWithUrl option to table hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdostie
gdostie committed Dec 18, 2024
1 parent 9db7974 commit 77c6f6c
Show file tree
Hide file tree
Showing 12 changed files with 668 additions and 20 deletions.
51 changes: 51 additions & 0 deletions packages/mantine/src/components/table/__tests__/TableColumnsSelector.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,4 +298,55 @@ describe('TableColumnsSelector', () => {
await waitFor(() => expect(screen.getByText('You can display so many patate')).toBeVisible());
});
});

describe('when url sync is activated', () => {
afterEach(() => {
window.history.replaceState(null, '', '/');
});

it('sets the current visible column ids in the url', async () => {
const user = userEvent.setup();
const Fixture = () => {
const store = useTable<RowData>({
syncWithUrl: true,
initialState: {columnVisibility: {email: false, phone: true}},
});
return (
<Table store={store} data={mockData} columns={baseColumns}>
<Table.Header>
<TableColumnsSelector />
</Table.Header>
</Table>
);
};
render(<Fixture />);
await user.click(screen.getByRole('button', {name: 'Edit columns'}));
const emailCheckBox = await screen.findByRole('checkbox', {name: /email/i});
await user.click(emailCheckBox);
await user.click(screen.getByRole('checkbox', {name: /phone/i}));
expect(window.location.search).toBe('?show=email&hide=phone');
});

it('determines the initial visible columns from the url', async () => {
window.history.replaceState(null, '', '?show=email%2Cphone');
const user = userEvent.setup();
const Fixture = () => {
const store = useTable<RowData>({
syncWithUrl: true,
initialState: {columnVisibility: {email: false, phone: false}},
});
return (
<Table store={store} data={mockData} columns={baseColumns}>
<Table.Header>
<TableColumnsSelector />
</Table.Header>
</Table>
);
};
render(<Fixture />);
await user.click(screen.getByRole('button', {name: 'Edit columns'}));
expect(await screen.findByRole('checkbox', {name: /email/i})).toBeChecked();
expect(screen.getByRole('checkbox', {name: /phone/i})).toBeChecked();
});
});
});
54 changes: 53 additions & 1 deletion packages/mantine/src/components/table/__tests__/TableDateRangePicker.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
import {render, screen} from '@test-utils';
import {render, screen, userEvent} from '@test-utils';

import {Table} from '../Table';
import {useTable} from '../use-table';
Expand All @@ -25,4 +25,56 @@ describe('Table.DateRangePicker', () => {

expect(screen.getByRole('button', {name: /jan 01, 2022 - jan 07, 2022/i})).toBeVisible();
});

describe('when url sync is activated', () => {
afterEach(() => {
window.history.replaceState(null, '', '/');
});

it('sets the selected date range in the url', async () => {
const user = userEvent.setup();
const Fixture = () => {
const store = useTable<RowData>({
initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]},
syncWithUrl: true,
});
return (
<Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
<Table.Header>
<Table.DateRangePicker />
</Table.Header>
</Table>
);
};
render(<Fixture />);
await user.click(screen.getByRole('button', {name: /jan 01, 2022 - jan 07, 2022/i}));
await screen.findByRole('dialog');
await user.clear(screen.getByRole('textbox', {name: /start/i}));
await user.type(screen.getByRole('textbox', {name: /start/i}), '2022-01-02');
await user.clear(screen.getByRole('textbox', {name: /end/i}));
await user.type(screen.getByRole('textbox', {name: /end/i}), '2022-01-08');
await user.click(screen.getByRole('button', {name: /apply/i}));
expect(window.location.search).toBe('?from=2022-01-02T00%3A00%3A00.000Z&to=2022-01-08T23%3A59%3A59.999Z');
});

it('initially selects the specified date range from in the url', async () => {
window.history.replaceState(null, '', '?from=2022-01-02T00%3A00%3A00.000Z&to=2022-01-08T23%3A59%3A59.999Z');
const user = userEvent.setup();

Check warning on line 62 in packages/mantine/src/components/table/__tests__/TableDateRangePicker.spec.tsx

View workflow job for this annotation

GitHub Actions / Lint Changed Files 

'user' is assigned a value but never used. Allowed unused vars must match /^_/u
const Fixture = () => {
const store = useTable<RowData>({
initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]},
syncWithUrl: true,
});
return (
<Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
<Table.Header>
<Table.DateRangePicker />
</Table.Header>
</Table>
);
};
render(<Fixture />);
expect(screen.getByRole('button', {name: /jan 02, 2022 - jan 08, 2022/i})).toBeVisible();
});
});
});
43 changes: 43 additions & 0 deletions packages/mantine/src/components/table/__tests__/TableFilter.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,4 +102,47 @@ describe('Table.Filter', () => {
expect(screen.getByRole('button', {name: /1 selected/i})).toBeInTheDocument();
});
});

describe('when url sync is activated', () => {
afterEach(() => {
window.history.replaceState(null, '', '/');
});

it('sets the current filter value in the url using the parameter "filter"', async () => {
const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
const Fixture = () => {
const store = useTable<RowData>({initialState: {globalFilter: ''}, syncWithUrl: true});
return (
<Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
<Table.Header>
<Table.Filter />
</Table.Header>
</Table>
);
};
render(<Fixture />);
await user.type(screen.getByRole('textbox'), 'veg');
act(() => {
// 300 ms debounce on TableFilter input
vi.advanceTimersByTime(300);
});
expect(window.location.search).toBe('?filter=veg');
});

it('determines the initial filter value from the url', async () => {
window.history.replaceState(null, '', '?filter=veg');
const Fixture = () => {
const store = useTable<RowData>({initialState: {globalFilter: ''}, syncWithUrl: true});
return (
<Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
<Table.Header>
<Table.Filter />
</Table.Header>
</Table>
);
};
render(<Fixture />);
expect(screen.getByRole('textbox')).toHaveValue('veg');
});
});
});
54 changes: 54 additions & 0 deletions packages/mantine/src/components/table/__tests__/TablePagination.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,4 +217,58 @@ describe('Table.Pagination', () => {
expect(buttons).toHaveLength(1);
expect(buttons[0]).toHaveAccessibleName('change total pages');
});

describe('when url sync is activated', () => {
afterEach(() => {
window.history.replaceState(null, '', '/');
});

it('sets the current page in the url using the parameter "page" counting from 1', async () => {
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const user = userEvent.setup();
const Fixture = () => {
const store = useTable<RowData>({
initialState: {
pagination: {pageSize: 1, pageIndex: 0},
totalEntries: 3,
},
syncWithUrl: true,
});
return (
<Table store={store} data={data} columns={columns}>
<Table.Footer>
<Table.Pagination />
</Table.Footer>
</Table>
);
};
render(<Fixture />);
await user.click(screen.queryByRole('button', {name: '2'}));
expect(window.location.search).toBe('?page=2');
});

it('determines the initial page index from the url', async () => {
window.history.replaceState(null, '', '?page=2');
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const Fixture = () => {
const store = useTable<RowData>({
initialState: {
pagination: {pageSize: 1, pageIndex: 0},
totalEntries: 3,
},
syncWithUrl: true,
});
return (
<Table store={store} data={data} columns={columns}>
<Table.Footer>
<Table.Pagination />
<Table.PerPage />
</Table.Footer>
</Table>
);
};
render(<Fixture />);
expect(screen.getByRole('button', {name: '2', current: 'page'})).toBeVisible();
});
});
});
55 changes: 55 additions & 0 deletions packages/mantine/src/components/table/__tests__/TablePerPage.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,4 +122,59 @@ describe('Table.PerPage', () => {
render(<Fixture />);
expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
});

describe('when url sync is activated', () => {
afterEach(() => {
window.history.replaceState(null, '', '/');
});

it('sets the current page size in the url using the parameter "pageSize"', async () => {
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const user = userEvent.setup();
const Fixture = () => {
const store = useTable<RowData>({
initialState: {
pagination: {pageIndex: 0, pageSize: 50},
totalEntries: 52,
},
syncWithUrl: true,
});
return (
<Table store={store} data={data} columns={columns}>
<Table.Footer>
<Table.Pagination />
<Table.PerPage />
</Table.Footer>
</Table>
);
};
render(<Fixture />);
await user.click(screen.getByRole('radio', {name: '100'}));
expect(window.location.search).toBe('?pageSize=100');
});

it('determines the initial pageSize from the url', async () => {
window.history.replaceState(null, '', '?pageSize=100');
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const Fixture = () => {
const store = useTable<RowData>({
initialState: {
pagination: {pageIndex: 0, pageSize: 50},
totalEntries: 52,
},
syncWithUrl: true,
});
return (
<Table store={store} data={data} columns={columns}>
<Table.Footer>
<Table.Pagination />
<Table.PerPage />
</Table.Footer>
</Table>
);
};
render(<Fixture />);
expect(screen.getByRole('radio', {name: '100'})).toBeChecked();
});
});
});
69 changes: 69 additions & 0 deletions packages/mantine/src/components/table/__tests__/TablePredicate.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enabl

describe('Table.Predicate', () => {
it('goes back to the first page when changing the predicate', async () => {
if (!HTMLElement.prototype.scrollIntoView) {
HTMLElement.prototype.scrollIntoView = () => {
vi.fn();
};
}
const user = userEvent.setup();
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const Fixture = () => {
Expand Down Expand Up @@ -40,4 +45,68 @@ describe('Table.Predicate', () => {
await user.click(screen.getByRole('option', {name: 'First'}));
expect(screen.getByRole('button', {name: '1', current: 'page'})).toBeVisible();
});

describe('when url sync is activated', () => {
afterEach(() => {
window.history.replaceState(null, '', '/');
});

it('sets the current predicate value in the url using the predicate id as key', async () => {
const user = userEvent.setup();
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const Fixture = () => {
const store = useTable<RowData>({
initialState: {predicates: {rank: 'ALL'}, pagination: {pageIndex: 0}, totalEntries: 52},
syncWithUrl: true,
});
return (
<Table store={store} data={data} columns={columns}>
<Table.Header>
<Table.Predicate
id="rank"
label="Rank"
data={[
{value: 'ALL', label: 'All'},
{value: 'first', label: 'First'},
{value: 'second', label: 'Second'},
]}
/>
</Table.Header>
</Table>
);
};
render(<Fixture />);
await user.click(screen.getByRole('textbox', {name: 'Rank'}));
await user.click(screen.getByRole('option', {name: 'First'}));
expect(window.location.search).toBe('?rank=first');
});

it('determines the initial predicate value from the url', async () => {
window.history.replaceState(null, '', '?rank=second');
const data = [{name: 'fruit'}, {name: 'vegetable'}];
const Fixture = () => {
const store = useTable<RowData>({
initialState: {predicates: {rank: 'ALL'}, pagination: {pageIndex: 0}, totalEntries: 52},
syncWithUrl: true,
});
return (
<Table store={store} data={data} columns={columns}>
<Table.Header>
<Table.Predicate
id="rank"
label="Rank"
data={[
{value: 'ALL', label: 'All'},
{value: 'first', label: 'First'},
{value: 'second', label: 'Second'},
]}
/>
</Table.Header>
</Table>
);
};
render(<Fixture />);
expect(screen.getByRole('textbox', {name: 'Rank'})).toHaveValue('Second');
});
});
});
Loading

0 comments on commit 77c6f6c

Please sign in to comment.