@coveord/plasma-mantine 53.1.4 → 54.0.0

package/src/components/table/__tests__/TableLastUpdated.spec.tsx

@@ -3,6 +3,7 @@ import {render, screen, userEvent} from '@test-utils';
 import {useState} from 'react';
 
 import {Table} from '../Table';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
@@ -19,64 +20,44 @@ describe('Table.LastUpdated', () => {
     });
 
     it('displays the label and time', () => {
-        const {rerender} = render(
-            <Table data={[{name: 'fruit'}]} columns={columns}>
-                <Table.LastUpdated />
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={[{name: 'fruit'}]} columns={columns}>
+                    <Table.LastUpdated />
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         expect(screen.getByText('Last update:')).toBeVisible();
         expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
-
-        rerender(
-            <Table data={[{name: 'fruit'}]} columns={columns}>
-                <Table.LastUpdated label="CUSTOM label:" />
-            </Table>,
-        );
-
-        expect(screen.queryByText('Last update:')).not.toBeInTheDocument();
-        expect(screen.getByText('CUSTOM label:')).toBeVisible();
-        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
     });
 
-    it('updates the time when a dependency changes', async () => {
-        const user = userEvent.setup({delay: null});
-
-        // Using a fixture to have a button that will trigger a change of a dependency
+    it('displays the label and time', () => {
         const Fixture = () => {
-            const [isClicked, setIsClicked] = useState(false);
+            const store = useTable<RowData>();
             return (
-                <>
-                    <button onClick={() => setIsClicked(true)}>Click me</button>
-                    <Table data={[{name: 'fruit'}]} columns={columns}>
-                        <Table.LastUpdated dependencies={[isClicked]} />
-                    </Table>
-                </>
+                <Table store={store} data={[{name: 'fruit'}]} columns={columns}>
+                    <Table.LastUpdated label="CUSTOM label:" />
+                </Table>
             );
         };
         render(<Fixture />);
 
-        expect(screen.getByText('Last update:')).toBeVisible();
-        expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
-
-        vi.setSystemTime(new Date(2022, 0, 15, 14, 11, 22));
-
-        // the date changed but the dependency didn't change yet, so the timer is still the same
+        expect(screen.getByText('CUSTOM label:')).toBeVisible();
         expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
-
-        // When we click on the button the isClicked switch from false to true which triggers an update
-        await user.click(screen.getByRole('button', {name: 'Click me'}));
-        expect(screen.getByRole('timer')).toHaveTextContent('2:11:22 PM');
     });
 
     it('updates the time when the data changes', async () => {
         const user = userEvent.setup({delay: null});
         const Fixture = () => {
+            const store = useTable<RowData>();
             const [data, setData] = useState([{name: 'fruit'}]);
             return (
                 <>
                     <button onClick={() => setData([{name: 'vegetable'}])}>Click me</button>
-                    <Table data={data} columns={columns}>
+                    <Table store={store} data={data} columns={columns}>
                         <Table.LastUpdated />
                     </Table>
                 </>

package/src/components/table/__tests__/TablePagination.spec.tsx

@@ -1,9 +1,8 @@
 import {ColumnDef, createColumnHelper, getPaginationRowModel} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
-import {useState} from 'react';
 
 import {Table} from '../Table';
-import {useTable} from '../TableContext';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
@@ -19,14 +18,24 @@ describe('Table.Pagination', () => {
         }
     });
 
-    it('displays the number of pages', () => {
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
-                <Table.Footer>
-                    <Table.Pagination totalPages={3} />
-                </Table.Footer>
-            </Table>,
-        );
+    it('calculates the number of pages based on the pageSize and the total number of entries', () => {
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
+        const Fixture = () => {
+            const store = useTable<RowData>({
+                initialState: {
+                    pagination: {pageSize: 1},
+                    totalEntries: 3,
+                },
+            });
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer>
+                        <Table.Pagination />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         const buttons = screen.getAllByRole('button');
         expect(buttons).toHaveLength(5);
@@ -37,50 +46,34 @@ describe('Table.Pagination', () => {
         expect(buttons[4]).toHaveAccessibleName('next page');
     });
 
-    it('calls onChange when clicking on a page number', async () => {
+    it('changes the page when the pagination is client side', async () => {
         const user = userEvent.setup();
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Footer>
-                    <Table.Pagination totalPages={5} />
-                </Table.Footer>
-            </Table>,
-        );
-
-        onChange.mockReset();
-
-        await user.click(screen.queryByRole('button', {name: '2'}));
+        const data = [
+            {name: 'fruits'},
+            {name: 'vegetables'},
+            {name: 'grains'},
+            {name: 'protein foods'},
+            {name: 'dairy'},
+        ];
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {pagination: {pageSize: 3}}});
 
-        await waitFor(() => {
-            expect(onChange).toHaveBeenCalledWith(
-                expect.objectContaining({pagination: expect.objectContaining({pageIndex: 1})}),
+            return (
+                <Table
+                    store={store}
+                    data={data}
+                    columns={columns}
+                    options={{
+                        getPaginationRowModel: getPaginationRowModel(),
+                    }}
+                >
+                    <Table.Footer>
+                        <Table.Pagination />
+                    </Table.Footer>
+                </Table>
             );
-        });
-    });
-
-    it('changes the page when the pagination is client side', async () => {
-        const user = userEvent.setup();
-        render(
-            <Table
-                data={[
-                    {name: 'fruits'},
-                    {name: 'vegetables'},
-                    {name: 'grains'},
-                    {name: 'protein foods'},
-                    {name: 'dairy'},
-                ]}
-                columns={columns}
-                initialState={{pagination: {pageSize: 3}}}
-                options={{
-                    getPaginationRowModel: getPaginationRowModel(),
-                }}
-            >
-                <Table.Footer>
-                    <Table.Pagination totalPages={null} />
-                </Table.Footer>
-            </Table>,
-        );
+        };
+        render(<Fixture />);
 
         expect(screen.getByText('fruits')).toBeVisible();
         expect(screen.getByText('vegetables')).toBeVisible();
@@ -94,9 +87,11 @@ describe('Table.Pagination', () => {
         expect(buttons[1]).toHaveAccessibleName('1');
         expect(buttons[2]).toHaveAccessibleName('2');
         expect(buttons[3]).toHaveAccessibleName('next page');
+        expect(screen.getByRole('button', {name: '1', current: 'page'})).toBeVisible();
 
         await user.click(screen.getByRole('button', {name: 'next page'}));
 
+        expect(screen.getByRole('button', {name: '2', current: 'page'})).toBeVisible();
         expect(screen.queryByText('fruits')).not.toBeInTheDocument();
         expect(screen.queryByText('vegetables')).not.toBeInTheDocument();
         expect(screen.queryByText('grains')).not.toBeInTheDocument();
@@ -107,18 +102,21 @@ describe('Table.Pagination', () => {
     it('triggers the onChangePage Callback with the right parameters', async () => {
         const user = userEvent.setup();
         const onChangePage = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
-                <Table.Footer>
-                    <Table.PerPage />
-                    <Table.Pagination totalPages={5} onPageChange={onChangePage} />
-                </Table.Footer>
-            </Table>,
-        );
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {pagination: {pageSize: 1}}});
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer>
+                        <Table.Pagination onPageChange={onChangePage} />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         onChangePage.mockReset();
 
-        await user.click(screen.getByRole('radio', {name: /100/i}));
         await user.click(screen.queryByRole('button', {name: '2'}));
 
         await waitFor(() => {
@@ -127,62 +125,48 @@ describe('Table.Pagination', () => {
     });
 
     it('renders nothing when there are no pages to show', () => {
-        render(
-            <Table data={[]} columns={columns} initialState={{globalFilter: 'filter'}}>
-                <Table.Footer data-testid="table-footer">
-                    <Table.Pagination totalPages={0} />
-                </Table.Footer>
-            </Table>,
-        );
-        expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
-    });
-
-    it('renders nothing if pages is null', () => {
-        render(
-            <Table data={[]} columns={columns} initialState={{globalFilter: 'filter'}}>
-                <Table.Footer data-testid="table-footer">
-                    <Table.Pagination totalPages={null} />
-                </Table.Footer>
-            </Table>,
-        );
-        expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
-    });
-
-    it('renders nothing if pages is undefined', () => {
-        render(
-            <Table data={[]} columns={columns} initialState={{globalFilter: 'filter'}}>
-                <Table.Footer data-testid="table-footer">
-                    <Table.Pagination totalPages={undefined} />
-                </Table.Footer>
-            </Table>,
-        );
+        const data: RowData[] = [];
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {globalFilter: 'filter'}});
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer data-testid="table-footer">
+                        <Table.Pagination />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
         expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
     });
 
     it('changes page when the current page is greater than the total number of pages', async () => {
         const user = userEvent.setup();
         const onChangePage = vi.fn();
+        const data = [{name: 'grains'}];
         const Fixture = () => {
-            const {state} = useTable();
-            const [totalPages, setTotalPages] = useState(state.pagination.pageIndex + 1);
-            const removeAPage = () => setTotalPages(totalPages - 1);
+            const store = useTable<RowData>({
+                initialState: {
+                    pagination: {pageSize: 1, pageIndex: 2},
+                    totalEntries: 3,
+                },
+            });
+            const removeAPage = () => store.setTotalEntries((prev) => prev - 1);
 
             return (
                 <>
                     <button data-testid="remove-page" onClick={removeAPage}>
                         change total pages
                     </button>
-                    <Table.Pagination totalPages={totalPages} onPageChange={onChangePage} />
+                    <Table store={store} data={data} columns={columns}>
+                        <Table.Footer>
+                            <Table.Pagination onPageChange={onChangePage} />
+                        </Table.Footer>
+                    </Table>
                 </>
             );
         };
-        render(
-            <Table data={[{name: 'grains'}]} columns={columns} initialState={{pagination: {pageSize: 1, pageIndex: 2}}}>
-                <Table.Footer>
-                    <Fixture />
-                </Table.Footer>
-            </Table>,
-        );
+        render(<Fixture />);
 
         expect(screen.getByRole('cell', {name: 'grains'})).toBeVisible();
         let buttons = screen.getAllByRole('button');

package/src/components/table/__tests__/TablePerPage.spec.tsx

@@ -2,6 +2,7 @@ import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
 
 import {Table} from '../Table';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
@@ -9,36 +10,36 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.PerPage', () => {
-    beforeEach(() => {
-        vi.useFakeTimers();
-    });
-    afterEach(() => {
-        vi.useRealTimers();
-    });
     it('displays the label', () => {
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
-                <Table.Footer>
-                    <Table.PerPage label="Per page" />
-                </Table.Footer>
-            </Table>,
-        );
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer>
+                        <Table.PerPage label="Per page" />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         expect(screen.getByText('Per page')).toBeVisible();
     });
 
     it('displays the values', () => {
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                initialState={{pagination: {pageSize: 2}}}
-            >
-                <Table.Footer>
-                    <Table.PerPage label="Per page" values={[2, 7, 12, 17]} />
-                </Table.Footer>
-            </Table>,
-        );
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {pagination: {pageSize: 2}}});
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer>
+                        <Table.PerPage label="Per page" values={[2, 7, 12, 17]} />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         const radios = screen.getAllByRole('radio');
         expect(radios).toHaveLength(4);
@@ -48,83 +49,54 @@ describe('Table.PerPage', () => {
         expect(radios[3]).toHaveAccessibleName('17');
     });
 
-    it('calls onMount with the initial value', () => {
-        const onMount = vi.fn();
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                onMount={onMount}
-                initialState={{pagination: {pageSize: 100}}}
-            >
-                <Table.Footer>
-                    <Table.PerPage />
-                </Table.Footer>
-            </Table>,
-        );
-
-        expect(onMount).toHaveBeenCalledWith(
-            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})}),
-        );
-    });
-
-    it('calls onChange when changing the number of items per page', async () => {
-        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
-        const onChange = vi.fn();
-        render(
-            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
-                <Table.Footer>
-                    <Table.PerPage />
-                </Table.Footer>
-            </Table>,
-        );
-
-        await user.click(screen.queryByRole('radio', {name: '100'}));
-        vi.advanceTimersByTime(500);
-        expect(onChange).toHaveBeenCalledWith(
-            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})}),
-        );
-    });
-
     it('resets page index when changing the number of items per page', async () => {
-        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
-        const onChange = vi.fn();
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                onChange={onChange}
-                initialState={{pagination: {pageIndex: 1, pageSize: 50}}}
-            >
-                <Table.Footer>
-                    <Table.Pagination totalPages={2} />
-                    <Table.PerPage />
-                </Table.Footer>
-            </Table>,
-        );
-
-        await user.click(screen.queryByRole('radio', {name: '100'}));
-        vi.advanceTimersByTime(500);
-        expect(onChange).toHaveBeenCalledWith(
-            expect.objectContaining({pagination: expect.objectContaining({pageIndex: 0})}),
-        );
+        const user = userEvent.setup();
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
+        const Fixture = () => {
+            const store = useTable<RowData>({
+                initialState: {
+                    pagination: {pageIndex: 1, pageSize: 50},
+                    totalEntries: 52,
+                },
+            });
+            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();
+
+        await user.click(screen.getByRole('radio', {name: '100'}));
+        expect(screen.getByRole('button', {name: '1', current: 'page'})).toBeVisible();
     });
 
-    it('triggers the onChangePage Callback with the right parameters', async () => {
-        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    it('triggers the onPerPageChange Callback with the right parameters', async () => {
+        const user = userEvent.setup();
+        const data = [{name: 'fruit'}, {name: 'vegetable'}];
         const onPerPageChange = vi.fn();
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                initialState={{pagination: {pageIndex: 1, pageSize: 50}}}
-            >
-                <Table.Footer>
-                    <Table.Pagination totalPages={2} />
-                    <Table.PerPage onPerPageChange={onPerPageChange} />
-                </Table.Footer>
-            </Table>,
-        );
+        const Fixture = () => {
+            const store = useTable<RowData>({
+                initialState: {
+                    pagination: {pageIndex: 1, pageSize: 50},
+                    totalEntries: 52,
+                },
+            });
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer>
+                        <Table.Pagination />
+                        <Table.PerPage onPerPageChange={onPerPageChange} />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         onPerPageChange.mockReset();
 
@@ -136,13 +108,18 @@ describe('Table.PerPage', () => {
     });
 
     it('renders nothing when there are no pages to show', () => {
-        render(
-            <Table data={[]} columns={columns} initialState={{globalFilter: 'filter'}}>
-                <Table.Footer data-testid="table-footer">
-                    <Table.PerPage />
-                </Table.Footer>
-            </Table>,
-        );
+        const data: RowData[] = [];
+        const Fixture = () => {
+            const store = useTable<RowData>({initialState: {globalFilter: 'filter'}});
+            return (
+                <Table store={store} data={data} columns={columns}>
+                    <Table.Footer data-testid="table-footer">
+                        <Table.PerPage />
+                    </Table.Footer>
+                </Table>
+            );
+        };
+        render(<Fixture />);
         expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
     });
 });