Enhance Storybook Testing with Additional and Refactored Tests

govtool/frontend/.storybook/preview.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import type { Preview } from "@storybook/react";
 import { ThemeProvider } from "@emotion/react";
-import { theme } from "../src/theme";
-import { MemoryRouter, Routes, Route } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
+import type { Preview } from "@storybook/react";
+import React from "react";
 import { I18nextProvider } from "react-i18next";
-import i18n from "../src/i18n";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { ModalProvider } from "../src/context/modal";
+import i18n from "../src/i18n";
+import { theme } from "../src/theme";
 
 const queryClient = new QueryClient();
 
@@ -23,9 +23,9 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <ModalProvider>
-          <I18nextProvider i18n={i18n}>
-            <ThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
+          <ModalProvider>
+            <I18nextProvider i18n={i18n}>
               <MemoryRouter>
                 <Routes>
                   <Route
@@ -44,9 +44,9 @@ const preview: Preview = {
                   />
                 </Routes>
               </MemoryRouter>
-            </ThemeProvider>
-          </I18nextProvider>
-        </ModalProvider>
+            </I18nextProvider>
+          </ModalProvider>
+        </ThemeProvider>
       </QueryClientProvider>
     ),
   ],

govtool/frontend/.storybook/test-runner-jest.js

@@ -0,0 +1,13 @@
+const { getJestConfig } = require("@storybook/test-runner");
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  // The default configuration comes from @storybook/test-runner
+  ...getJestConfig(),
+  /** Add your own overrides below
+   * @see https://jestjs.io/docs/configuration
+   */
+  testTimeout: 30000,
+};

govtool/frontend/src/stories/ActionsBar.stories.ts

@@ -1,15 +1,19 @@
-import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
-import type { Meta, StoryObj } from "@storybook/react";
 import {
   GOVERNANCE_ACTIONS_FILTERS,
   GOVERNANCE_ACTIONS_SORTING,
 } from "@consts";
+import { expect, jest } from "@storybook/jest";
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
 import { DataActionsBar } from "@/components/molecules";
 
 const meta = {
   title: "Example/DataActionsBar",
   component: DataActionsBar,
+  args: {
+    filterOptions: GOVERNANCE_ACTIONS_FILTERS,
+    sortOptions: GOVERNANCE_ACTIONS_SORTING,
+  },
   parameters: {
     layout: "centered",
   },
@@ -25,6 +29,7 @@ export const ActionsBarComponent: Story = {
     searchText: "",
     sortingActive: false,
     sortOpen: false,
+    filterOptions: GOVERNANCE_ACTIONS_FILTERS,
     isFiltering: true,
     setFiltersOpen: jest.fn(),
     setSortOpen: jest.fn(),

govtool/frontend/src/stories/Button.stories.ts

@@ -1,6 +1,6 @@
+import { expect, jest } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/testing-library";
-import { expect, jest } from "@storybook/jest";
 
 import { Button } from "@atoms";
 
@@ -10,12 +10,6 @@ const meta = {
   args: {
     onClick: jest.fn(),
   },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByRole("button")).toHaveTextContent("Button");
-    await userEvent.click(canvas.getByRole("button"));
-    await expect(args.onClick).toHaveBeenCalled();
-  },
   parameters: {
     layout: "centered",
   },
@@ -31,10 +25,22 @@ export const Contained: Story = {
     size: "medium",
     variant: "contained",
   },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("button")).toHaveTextContent("Button");
+    await userEvent.click(canvas.getByRole("button"));
+    await expect(args.onClick).toHaveBeenCalled();
+  },
 };
 
 export const Outlined: Story = {
   args: { size: "small", variant: "outlined", children: "Button" },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("button")).toHaveTextContent("Button");
+    await userEvent.click(canvas.getByRole("button"));
+    await expect(args.onClick).toHaveBeenCalled();
+  },
 };
 
 export const Text: Story = {
@@ -43,6 +49,12 @@ export const Text: Story = {
     variant: "text",
     children: "Button",
   },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("button")).toHaveTextContent("Button");
+    await userEvent.click(canvas.getByRole("button"));
+    await expect(args.onClick).toHaveBeenCalled();
+  },
 };
 
 export const LoadingButton: Story = {
@@ -52,4 +64,9 @@ export const LoadingButton: Story = {
     variant: "contained",
     isLoading: true,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("button")).toHaveTextContent("Button");
+    await expect(canvas.getByRole("button")).toBeDisabled();
+  },
 };

govtool/frontend/src/stories/Card.stories.tsx

@@ -1,6 +1,8 @@
+import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Card } from "@molecules";
+import { within } from "@storybook/testing-library";
 
 const meta = {
   title: "Example/Card",
@@ -33,10 +35,23 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.getByText("Put here whatever you want to display in the card."),
+    ).toBeVisible();
+  },
 };
 
 export const WithLabel: Story = {
   args: {
     label: "Label goes here",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.getByText("Put here whatever you want to display in the card."),
+    ).toBeVisible();
+    await expect(canvas.getByText("Label goes here")).toBeVisible();
+  },
 };

govtool/frontend/src/stories/Checkbox.stories.tsx

@@ -1,6 +1,8 @@
+import { expect } from "@storybook/jest";
 import type { Meta, StoryFn } from "@storybook/react";
 
 import { Field } from "@molecules";
+import { within } from "@storybook/testing-library";
 import { ComponentProps } from "react";
 
 const meta = {
@@ -19,19 +21,43 @@ const Template: StoryFn<ComponentProps<typeof Field.Checkbox>> = (args) => (
 );
 
 export const Default = Template.bind({});
+Default.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  expect(canvas.getByRole("checkbox")).not.toBeChecked();
+};
 
 export const WithLabel = Template.bind({});
 WithLabel.args = {
   label: "Label",
 };
+WithLabel.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  expect(canvas.getByRole("checkbox")).not.toBeChecked();
+  expect(canvas.getByText("Label")).toBeVisible();
+};
 
 export const Error = Template.bind({});
 Error.args = {
   errorMessage: "Error message",
 };
+Error.play = async ({ canvasElement, args }) => {
+  const canvas = within(canvasElement);
+  const errorId = args.errorMessage!.toLowerCase().split(" ").join("-");
+
+  expect(canvas.getByRole("checkbox")).not.toBeChecked();
+  expect(canvas.getByTestId(`${errorId}-error`)).toBeVisible();
+};
 
 export const ErrorAndLabel = Template.bind({});
 ErrorAndLabel.args = {
   errorMessage: "Error message",
   label: "Label",
 };
+ErrorAndLabel.play = async ({ canvasElement, args }) => {
+  const canvas = within(canvasElement);
+  const errorId = args.errorMessage!.toLowerCase().split(" ").join("-");
+
+  expect(canvas.getByRole("checkbox")).not.toBeChecked();
+  expect(canvas.getByText("Label")).toBeVisible();
+  expect(canvas.getByTestId(`${errorId}-error`)).toBeVisible();
+};

govtool/frontend/src/stories/DashboardCard.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { DashboardActionCard } from "@molecules";
-import { within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
+import { within } from "@storybook/testing-library";
 import { IMAGES } from "@/consts";
 
 const meta = {
@@ -17,52 +17,57 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+async function assertCardInfo(canvas: ReturnType<typeof within>) {
+  expect(canvas.getByText("Action card")).toBeVisible();
+  expect(canvas.queryByText(/lorem/i)).toBeInTheDocument();
+  expect(canvas.queryByRole("img")).toBeInTheDocument();
+}
+
 export const DashboardCardComponent: Story = {
   args: {
-    buttons: [
-      { children: "first button" },
-      { children: "second button" },
-    ],
+    buttons: [{ children: "first button" }, { children: "second button" }],
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     imageURL: IMAGES.govActionDelegateImage,
     title: "Action card",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.getByText("Action card")).toBeInTheDocument();
-    expect(canvas.getByText(/lorem/i)).toBeInTheDocument();
+
+    await assertCardInfo(canvas);
+
     const buttons = canvas.getAllByRole("button");
     await expect(buttons[0].textContent).toBe("first button");
     await expect(buttons[1].textContent).toBe("second button");
-    expect(canvas.getByRole("img")).toBeInTheDocument();
   },
 };
 
 export const WithDRepIdDashboardCardComponent: Story = {
   args: {
-    buttons: [
-      { children: "first button" },
-      { children: "second button" },
-    ],
+    buttons: [{ children: "first button" }, { children: "second button" }],
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     imageURL: IMAGES.govActionDelegateImage,
     title: "Action card",
   },
+  play: async ({ canvasElement }) => {
+    const dRepId = "";
+    const canvas = within(canvasElement);
+
+    await assertCardInfo(canvas);
+    await expect(canvas.getByTestId("drep-id-info")).toHaveTextContent(dRepId);
+  },
 };
 
 export const LoadingDashboardCard: Story = {
   args: {
-    buttons: [
-      { children: "first button" },
-      { children: "second button" },
-    ],
+    buttons: [{ children: "first button" }, { children: "second button" }],
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     imageURL: IMAGES.govActionDelegateImage,
     title: "Action card",
     isLoading: true,
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+
     expect(canvas.queryByText("Action card")).not.toBeInTheDocument();
     expect(canvas.queryByText(/lorem/i)).not.toBeInTheDocument();
     await expect(canvas.queryAllByRole("button")).toHaveLength(0);
@@ -72,17 +77,16 @@ export const LoadingDashboardCard: Story = {
 
 export const InProgressDashboardCard: Story = {
   args: {
-    buttons: [
-      { children: "first button" },
-      { children: "second button" },
-    ],
+    buttons: [{ children: "first button" }, { children: "second button" }],
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     imageURL: IMAGES.govActionDelegateImage,
     title: "Action card",
     state: "inProgress",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+
+    await assertCardInfo(canvas);
     await expect(canvas.getAllByText(/in progress/i)).toHaveLength(2);
   },
 };

govtool/frontend/src/stories/DashboardTopNav.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { DashboardTopNav } from "@organisms";
-import { within, userEvent, waitFor, screen } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
+import { within } from "@storybook/testing-library";
 
 const meta = {
   title: "Example/DashboardTopNav",
@@ -18,15 +18,5 @@ export const DashboardTopNavComponent: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.getByText("Example title")).toBeInTheDocument();
-    await expect(canvas.getByText("Voting power:")).toBeInTheDocument();
-
-    await expect(canvas.getByTestId("InfoOutlinedIcon")).toBeInTheDocument();
-    await userEvent.hover(canvas.getByTestId("InfoOutlinedIcon"));
-    await waitFor(async () => {
-      await expect(screen.getByRole("tooltip")).toBeInTheDocument();
-      await expect(screen.getByRole("tooltip")).toHaveTextContent(
-        /DRep Voting Power/i,
-      );
-    });
   },
 };