@coveord/plasma-mantine 53.1.4 → 54.0.0

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

@@ -1,8 +1,8 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, within} from '@test-utils';
+import {render, screen, userEvent, waitFor, within} from '@test-utils';
 
-import {Button} from '../../button';
 import {Table} from '../Table';
+import {useTable} from '../use-table';
 
 type RowData = {name: string};
 
@@ -11,14 +11,27 @@ const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enabl
 
 describe('Table.Actions', () => {
     it('displays the actions when the row is selected', async () => {
-        const user = userEvent.setup({delay: null});
-        render(
-            <Table<RowData> data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
-                <Table.Header>
-                    <Table.Actions>{(datum: RowData) => <Button>Eat {datum.name}</Button>}</Table.Actions>
-                </Table.Header>
-            </Table>,
-        );
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table<RowData>
+                    store={store}
+                    data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                    getRowId={(row) => row.name}
+                    columns={columns}
+                    getRowActions={(selected: RowData[]) => [
+                        {
+                            group: '$$primary',
+                            component: <Table.ActionItem leftSection={null}>Eat {selected[0].name}</Table.ActionItem>,
+                        },
+                    ]}
+                >
+                    <Table.Header />
+                </Table>
+            );
+        };
+        render(<Fixture />);
 
         // no row is selected, no actions should be visible
         expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
@@ -35,15 +48,74 @@ describe('Table.Actions', () => {
         expect(screen.getByRole('button', {name: 'Eat vegetable'})).toBeVisible();
     });
 
+    it('displays the secondary actions when the row is selected and the user clicks on more', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table<RowData>
+                    store={store}
+                    data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                    columns={columns}
+                    getRowActions={(selected: RowData[]) => [
+                        {
+                            group: 'secondary',
+                            component: (
+                                <Table.ActionItem key="peel" leftSection={null}>
+                                    Peel {selected[0].name}
+                                </Table.ActionItem>
+                            ),
+                        },
+                        {
+                            group: 'secondary',
+                            component: (
+                                <Table.ActionItem key="chop" leftSection={null}>
+                                    Chop {selected[0].name}
+                                </Table.ActionItem>
+                            ),
+                        },
+                    ]}
+                >
+                    <Table.Header />
+                </Table>
+            );
+        };
+        render(<Fixture />);
+
+        // no row is selected, no actions should be visible
+        expect(screen.queryByRole('button', {name: /more/i})).not.toBeInTheDocument();
+
+        // select the fruit row
+        await user.click(screen.getByRole('cell', {name: 'fruit'}));
+        expect(screen.getByRole('button', {name: /more/i})).toBeVisible();
+
+        await user.click(screen.getByRole('button', {name: /more/i}));
+        await waitFor(() => expect(screen.getByRole('menuitem', {name: 'Peel fruit'})).toBeVisible());
+        expect(screen.getByRole('menuitem', {name: 'Chop fruit'})).toBeVisible();
+    });
+
     it('does not display the action when a loading row is selected', async () => {
-        const user = userEvent.setup({delay: null});
-        render(
-            <Table<RowData> data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} loading={true}>
-                <Table.Header>
-                    <Table.Actions>{(datum: RowData) => <Button>Eat {datum.name}</Button>}</Table.Actions>
-                </Table.Header>
-            </Table>,
-        );
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table<RowData>
+                    store={store}
+                    data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                    columns={columns}
+                    loading={true}
+                    getRowActions={(selected: RowData[]) => [
+                        {
+                            group: '$$primary',
+                            component: <Table.ActionItem leftSection={null}>Eat {selected[0].name}</Table.ActionItem>,
+                        },
+                    ]}
+                >
+                    <Table.Header />
+                </Table>
+            );
+        };
+        render(<Fixture />);
         await user.click(screen.getByRole('cell', {name: 'fruit'}));
         expect(screen.getByRole('row', {name: 'fruit', selected: false})).toBeInTheDocument();
         expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
@@ -51,25 +123,64 @@ describe('Table.Actions', () => {
         expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
     });
 
-    describe('when multi row selection is enabled', () => {
-        it('passes down an array of selected rows', async () => {
-            const user = userEvent.setup({delay: null});
-            const renderSpy = vi.fn().mockImplementation(() => <div />);
-            render(
+    it('does not display the action in the header when the header showActions prop is false', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
                 <Table<RowData>
-                    getRowId={(row) => row.name}
-                    data={[{name: 'fruit'}, {name: 'vegetable'}, {name: 'bread'}]}
+                    store={store}
+                    data={[{name: 'fruit'}, {name: 'vegetable'}]}
                     columns={columns}
-                    multiRowSelectionEnabled
+                    getRowActions={(selected: RowData[]) => [
+                        {
+                            group: '$$primary',
+                            component: <Table.ActionItem leftSection={null}>Eat {selected[0].name}</Table.ActionItem>,
+                        },
+                    ]}
                 >
-                    <Table.Header>
-                        <Table.Actions>{renderSpy}</Table.Actions>
-                    </Table.Header>
-                </Table>,
+                    <Table.Header showActions={false} />
+                </Table>
             );
+        };
+        render(<Fixture />);
+        await user.click(screen.getByRole('cell', {name: 'fruit'}));
+        expect(screen.getByRole('row', {name: 'fruit'})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
+        expect(screen.getByRole('row', {name: 'vegetable', selected: false})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
+    });
+
+    describe('when multi row selection is enabled', () => {
+        it('passes down an array of selected rows', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>({enableMultiRowSelection: true});
+                return (
+                    <Table<RowData>
+                        store={store}
+                        getRowId={(row) => row.name}
+                        data={[{name: 'fruit'}, {name: 'vegetable'}, {name: 'bread'}]}
+                        columns={columns}
+                        getRowActions={(data: RowData[]) => [
+                            {
+                                group: '$$primary',
+                                component: (
+                                    <Table.ActionItem leftSection={null}>
+                                        Eat {data.map((d) => d.name).join(', ')}
+                                    </Table.ActionItem>
+                                ),
+                            },
+                        ]}
+                    >
+                        <Table.Header />
+                    </Table>
+                );
+            };
+            render(<Fixture />);
             await user.click(within(screen.getByRole('row', {name: /fruit/})).getByRole('checkbox'));
             await user.click(within(screen.getByRole('row', {name: /vegetable/})).getByRole('checkbox'));
-            expect(renderSpy).toHaveBeenCalledWith([{name: 'fruit'}, {name: 'vegetable'}]);
+            expect(screen.getByRole('button', {name: 'Eat fruit, vegetable'})).toBeVisible();
         });
     });
 });

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

@@ -0,0 +1,88 @@
+import {Box} from '@mantine/core';
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+import {waitFor} from '@testing-library/react';
+import {Table} from '../Table';
+import {useTable} from '../use-table';
+
+const mockData = [
+    {
+        id: 'a',
+        name: 'John Doe',
+        body: 'coucou',
+    },
+    {
+        id: 'b',
+        name: 'Jane Doe',
+        body: 'coucou 2',
+    },
+] satisfies RowData[];
+
+type RowData = {
+    id: string;
+    name: string;
+    body: string;
+};
+
+const columnHelper = createColumnHelper<RowData>();
+const baseColumns: Array<ColumnDef<RowData>> = [
+    columnHelper.accessor('name', {header: 'Name', enableSorting: false}),
+    Table.CollapsibleColumn as ColumnDef<RowData>,
+];
+
+describe('TableCollapsibleColumn', () => {
+    it('expands the rows when the user clicks on a cell', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const store = useTable<RowData>();
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={baseColumns}
+                    getRowId={(datum: RowData) => datum.id}
+                    getRowExpandedContent={(datum: RowData) => (
+                        <Box data-testid={`row-content-${datum.id}`}>{datum.body}</Box>
+                    )}
+                />
+            );
+        };
+        render(<Fixture />);
+
+        expect(screen.queryByTestId('row-content-a')).not.toBeVisible();
+        expect(screen.queryByTestId('row-content-b')).not.toBeVisible();
+        await user.click(screen.getByRole('cell', {name: 'Jane Doe'}));
+
+        await waitFor(() => expect(screen.getByTestId('row-content-b')).toBeVisible());
+        expect(screen.queryByTestId('row-content-a')).not.toBeVisible();
+        expect(screen.getByTestId('row-content-b')).toHaveTextContent('coucou 2');
+    });
+
+    it('expands the rows according to the initial state', () => {
+        const Fixture = ({expanded}: {expanded: string}) => {
+            const store = useTable<RowData>({initialState: {expanded: {[expanded]: true}}});
+            return (
+                <Table
+                    store={store}
+                    data={mockData}
+                    columns={baseColumns}
+                    getRowId={(datum: RowData) => datum.id}
+                    getRowExpandedContent={(datum: RowData) => (
+                        <Box data-testid={`row-content-${datum.id}`}>{datum.body}</Box>
+                    )}
+                />
+            );
+        };
+        const {unmount} = render(<Fixture expanded="b" />);
+
+        expect(screen.queryByTestId('row-content-a')).not.toBeVisible();
+        expect(screen.queryByTestId('row-content-b')).toBeVisible();
+
+        // unmount and mount a new component to be able to use initialState
+        unmount();
+        render(<Fixture expanded="a" />);
+
+        expect(screen.queryByTestId('row-content-a')).toBeVisible();
+        expect(screen.queryByTestId('row-content-b')).not.toBeVisible();
+    });
+});