Add grid-story with interactive cells and add tests for interactions

Author: jamesricky

storybook/src/admin/data-grid/ClickableRowsWithInteractiveCells.stories.tsx

@@ -0,0 +1,216 @@
+import { type GridColDef, StackPage, StackSwitch, Toolbar, ToolbarBackButton, ToolbarTitleItem } from "@comet/admin";
+import { Favorite } from "@comet/admin-icons";
+import { IconButton } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { type StoryObj } from "@storybook/react-webpack5";
+import { expect, waitFor, within } from "storybook/test";
+
+import { exampleColumns, exampleRows } from "../../helpers/ExampleDataGrid";
+import { stackRouteDecorator } from "../../helpers/storyDecorators";
+import { storyRouterDecorator } from "../../story-router.decorator";
+import { DummyTextInContentOverflow } from "./utils/DummyTextInContentOverflow";
+import { DummyVisibilitySelect } from "./utils/DummyVisibilitySelect";
+import { useEditGridRow } from "./utils/useEditGridRow";
+
+export default {
+    title: "@comet/admin/data-grid/Clickable Rows With Interactive Cells",
+    decorators: [stackRouteDecorator(), storyRouterDecorator()],
+};
+
+export const Story = () => {
+    // Grid must be a separate component to make sure the stackSwitchApi context is correct
+    const Grid = () => {
+        const { handleDataGridRowClick, EditIconButton } = useEditGridRow();
+
+        const columns: GridColDef[] = [
+            ...exampleColumns,
+            {
+                field: "description",
+                type: "actions",
+                headerName: "Description",
+                renderCell: () => <DummyTextInContentOverflow />,
+                flex: 2,
+            },
+            {
+                field: "visible",
+                type: "actions",
+                headerName: "Visible",
+                width: 120,
+                renderCell: () => <DummyVisibilitySelect />,
+            },
+            {
+                field: "actions",
+                type: "actions",
+                headerName: "",
+                width: 84,
+                renderCell: (params) => (
+                    <>
+                        <IconButton color="secondary" aria-label="Add to favorites">
+                            <Favorite />
+                        </IconButton>
+                        <EditIconButton id={params.row.id} />
+                    </>
+                ),
+            },
+        ];
+        return <DataGrid checkboxSelection rows={exampleRows} columns={columns} onRowClick={handleDataGridRowClick} />;
+    };
+
+    return (
+        <StackSwitch>
+            <StackPage name="grid">
+                <Grid />
+            </StackPage>
+            <StackPage name="edit">
+                {(id) => {
+                    const row = exampleRows.find((row) => row.id.toString() === id);
+                    if (!row) return null;
+
+                    return (
+                        <Toolbar>
+                            <ToolbarBackButton />
+                            <ToolbarTitleItem>
+                                Editing {row.firstName} {row.lastName} (ID: {id})
+                            </ToolbarTitleItem>
+                        </Toolbar>
+                    );
+                }}
+            </StackPage>
+        </StackSwitch>
+    );
+};
+
+export const TestClickingEditButton: StoryObj<typeof Story> = {
+    render: Story,
+    play: async ({ canvas, userEvent, step }) => {
+        await step("Click on edit button", async () => {
+            const gridRowsContainer = canvas.getByRole("rowgroup");
+            const firstRow = within(gridRowsContainer).getAllByRole("row")[0];
+            const firstNameCell = within(firstRow).getAllByRole("gridcell")[1];
+            const firstName = firstNameCell.textContent;
+
+            const editButton = within(firstRow).getByLabelText(/edit/i);
+            await userEvent.click(editButton);
+
+            const toolbarEditText = await within(document.body).findByText(new RegExp(`Editing ${firstName}`));
+
+            expect(toolbarEditText).toBeInTheDocument();
+            expect(firstNameCell).not.toBeInTheDocument();
+            expect(editButton).not.toBeInTheDocument();
+        });
+    },
+};
+
+export const TestClickingRow: StoryObj<typeof Story> = {
+    render: Story,
+    play: async ({ canvas, userEvent, step }) => {
+        await step("Click on row (first cell)", async () => {
+            const gridRowsContainer = canvas.getByRole("rowgroup");
+            const firstRow = within(gridRowsContainer).getAllByRole("row")[0];
+            const firstNameCell = within(firstRow).getAllByRole("gridcell")[1];
+            const firstName = firstNameCell.textContent;
+
+            await userEvent.click(firstNameCell);
+
+            const toolbarEditText = await within(document.body).findByText(new RegExp(`Editing ${firstName}`));
+
+            expect(toolbarEditText).toBeInTheDocument();
+            expect(firstNameCell).not.toBeInTheDocument();
+        });
+    },
+};
+
+export const TestClickingCheckbox: StoryObj<typeof Story> = {
+    render: Story,
+    play: async ({ canvas, userEvent, step }) => {
+        await step("Click on checkbox", async () => {
+            const gridRowsContainer = canvas.getByRole("rowgroup");
+            const firstRow = within(gridRowsContainer).getAllByRole("row")[0];
+
+            const inputTypeCheckbox = within(firstRow).getByRole("checkbox");
+            await userEvent.click(inputTypeCheckbox);
+
+            expect(firstRow).toBeInTheDocument();
+            expect(inputTypeCheckbox).toBeChecked();
+
+            const toolbarEditText = within(document.body).queryByText(new RegExp(`Editing`));
+            expect(toolbarEditText).toBeNull();
+        });
+    },
+};
+
+export const TestClickingFavoriteButton: StoryObj<typeof Story> = {
+    render: Story,
+    play: async ({ canvas, userEvent, step }) => {
+        await step("Click on favorite button", async () => {
+            const gridRowsContainer = canvas.getByRole("rowgroup");
+            const firstRow = within(gridRowsContainer).getAllByRole("row")[0];
+
+            const favoriteButton = within(firstRow).getByLabelText(/add to favorites/i);
+            await userEvent.click(favoriteButton);
+
+            expect(firstRow).toBeInTheDocument();
+
+            const toolbarEditText = within(document.body).queryByText(new RegExp(`Editing`));
+            expect(toolbarEditText).toBeNull();
+        });
+    },
+};
+
+export const TestSettingInvisible: StoryObj<typeof Story> = {
+    render: Story,
+    play: async ({ canvas, userEvent, step }) => {
+        const gridRowsContainer = canvas.getByRole("rowgroup");
+        const firstRow = within(gridRowsContainer).getAllByRole("row")[0];
+        const selectVisibilityButton = within(firstRow).getByLabelText(/select visibility/i);
+
+        await step("Open visibility menu", async () => {
+            await userEvent.click(selectVisibilityButton);
+
+            expect(firstRow).toBeInTheDocument();
+            const toolbarEditText = within(document.body).queryByText(new RegExp(`Editing`));
+            expect(toolbarEditText).toBeNull();
+        });
+        await step("Click on invisible option", async () => {
+            const menu = await waitFor(() => within(document.body).getByRole("menu"), { timeout: 4000 });
+            const invisibleOption = within(menu).getByText(/invisible/i);
+            await userEvent.click(invisibleOption);
+
+            expect(firstRow).toBeInTheDocument();
+            expect(selectVisibilityButton).toHaveTextContent(/invisible/i);
+            const toolbarEditText = within(document.body).queryByText(new RegExp(`Editing`));
+            expect(toolbarEditText).toBeNull();
+        });
+    },
+};
+
+export const TestOpeningContentOverflow: StoryObj<typeof Story> = {
+    render: Story,
+    play: async ({ canvas, userEvent, step }) => {
+        const startTextOfContentOverflow = "Ornare Inceptos Egestas Bibendum";
+
+        await step("Open visibility menu", async () => {
+            const gridRowsContainer = canvas.getByRole("rowgroup");
+            const firstRow = within(gridRowsContainer).getAllByRole("row")[0];
+
+            const buttonsInRow = within(firstRow).getAllByRole("button");
+            const descriptionButton = buttonsInRow.find((button) => button.textContent?.includes(startTextOfContentOverflow));
+
+            if (!descriptionButton) {
+                throw new Error("Description button not found in row");
+            }
+
+            await userEvent.click(descriptionButton);
+
+            expect(firstRow).toBeInTheDocument();
+            const toolbarEditText = within(document.body).queryByText(new RegExp(`Editing`));
+            expect(toolbarEditText).toBeNull();
+
+            const dialog = await waitFor(() => within(document.body).getByRole("dialog"), { timeout: 4000 });
+            expect(dialog).toBeInTheDocument();
+
+            const dialogTitleText = within(dialog).queryByText(new RegExp(`${startTextOfContentOverflow}`));
+            expect(dialogTitleText).toBeInTheDocument();
+        });
+    },
+};

storybook/src/admin/data-grid/utils/DummyTextInContentOverflow.tsx

@@ -0,0 +1,19 @@
+import { ContentOverflow } from "@comet/admin";
+import { Typography } from "@mui/material";
+
+export const DummyTextInContentOverflow = () => {
+    const paragraphsCount = 5;
+    return (
+        <ContentOverflow>
+            <Typography fontWeight={600} gutterBottom>
+                Ornare Inceptos Egestas Bibendum
+            </Typography>
+            {Array.from({ length: paragraphsCount }).map((_, index) => (
+                <Typography key={index} variant="body2" gutterBottom={index !== paragraphsCount - 1}>
+                    Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet
+                    fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+                </Typography>
+            ))}
+        </ContentOverflow>
+    );
+};

storybook/src/admin/data-grid/utils/DummyVisibilitySelect.tsx

@@ -0,0 +1,40 @@
+import { ChevronDown, Invisible, Visible } from "@comet/admin-icons";
+import { Chip, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
+import { useState } from "react";
+
+export const DummyVisibilitySelect = () => {
+    const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+    const [visible, setVisible] = useState(true);
+
+    const handleMenuItemClick = (visible: boolean) => {
+        setVisible(visible);
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Chip
+                component="button"
+                aria-label="Select visibility"
+                color={visible ? "success" : "default"}
+                icon={<ChevronDown />}
+                label={visible ? "Visible" : "Invisible"}
+                onClick={(event) => setAnchorEl(event.currentTarget)}
+            />
+            <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+                <MenuItem onClick={() => handleMenuItemClick(true)}>
+                    <ListItemIcon>
+                        <Visible />
+                    </ListItemIcon>
+                    <ListItemText primary="Visible" />
+                </MenuItem>
+                <MenuItem onClick={() => handleMenuItemClick(false)}>
+                    <ListItemIcon>
+                        <Invisible />
+                    </ListItemIcon>
+                    <ListItemText primary="Invisible" />
+                </MenuItem>
+            </Menu>
+        </>
+    );
+};