Merge pull request #1310 from IntersectMBO/fix/1307-bug-storybook-com…

…ponents fix/1307-bug-storybook-components
IntersectMBO · Jun 18, 2024 · 800817b · 800817b
2 parents 070154f + 821dd30
commit 800817b
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 63 deletions.
diff --git a/govtool/frontend/src/components/atoms/VotingPowerChips.test.tsx b/govtool/frontend/src/components/atoms/VotingPowerChips.test.tsx
@@ -1,86 +1,53 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import * as Hooks from "@hooks";
-import * as Context from "@context";
 import * as Utils from "@utils";
 import { VotingPowerChips } from "@atoms";
 
 describe("VotingPowerChips", () => {
-  const mockUseCardano = vi.spyOn(Context, "useCardano");
-  const mockUseGetDRepVotingPowerQuery = vi.spyOn(
-    Hooks,
-    "useGetDRepVotingPowerQuery",
-  );
   const mockUseScreenDimension = vi.spyOn(Hooks, "useScreenDimension");
   const mockCorrectAdaFormat = vi.spyOn(Utils, "correctAdaFormat");
   const mockUseTranslation = vi.spyOn(Hooks, "useTranslation");
-  const mockUseGetVoterInfo = vi.spyOn(Hooks, "useGetVoterInfo");
 
   it("renders loading spinner when data is loading", () => {
-    mockUseCardano.mockReturnValue({
-      isEnableLoading: 'demos',
-    } as ReturnType<typeof Context.useCardano>);
-    mockUseGetDRepVotingPowerQuery.mockReturnValue(
-      {} as ReturnType<typeof Hooks.useGetDRepVotingPowerQuery>,
-    );
     mockUseScreenDimension.mockReturnValue({
       isMobile: false,
       screenWidth: 1024,
     } as ReturnType<typeof Hooks.useScreenDimension>);
     mockUseTranslation.mockReturnValue({
       t: (key: string) => key,
     } as ReturnType<typeof Hooks.useTranslation>);
-    mockUseGetVoterInfo.mockReturnValue(
-      { voter: { isRegisteredAsDRep: true } } as ReturnType<typeof Hooks.useGetVoterInfo>,
-    );
 
-    render(<VotingPowerChips />);
+    render(<VotingPowerChips isLoading isShown />);
     expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
 
   it("displays formatted ADA amount when data is available and not loading", () => {
-    mockUseCardano.mockReturnValue({
-      isEnableLoading: null,
-    } as ReturnType<typeof Context.useCardano>);
-    mockUseGetDRepVotingPowerQuery.mockReturnValue({
-      dRepVotingPower: 1000,
-    } as ReturnType<typeof Hooks.useGetDRepVotingPowerQuery>);
     mockUseScreenDimension.mockReturnValue({
       isMobile: false,
       screenWidth: 1024,
     } as ReturnType<typeof Hooks.useScreenDimension>);
     mockUseTranslation.mockReturnValue({
       t: (key: string) => key,
     } as ReturnType<typeof Hooks.useTranslation>);
-    mockUseGetVoterInfo.mockReturnValue({
-      voter: { isRegisteredAsDRep: true },
-    } as ReturnType<typeof Hooks.useGetVoterInfo>);
     mockCorrectAdaFormat.mockReturnValue(1000);
 
-    render(<VotingPowerChips />);
+    render(<VotingPowerChips isShown />);
     expect(screen.getByText(/₳ 1000/)).toBeInTheDocument();
   });
 
   it("displays the tooltip correctly for non-mobile DRep registered users", async () => {
-    mockUseCardano.mockReturnValue({
-      isEnableLoading: null,
-    } as ReturnType<typeof Context.useCardano>);
-    mockUseGetDRepVotingPowerQuery.mockReturnValue({
-      dRepVotingPower: 1000,
-    } as ReturnType<typeof Hooks.useGetDRepVotingPowerQuery>);
     mockUseScreenDimension.mockReturnValue({
       isMobile: false,
       screenWidth: 800,
     } as ReturnType<typeof Hooks.useScreenDimension>);
     mockUseTranslation.mockReturnValue({
       t: (key: string) => key,
     } as ReturnType<typeof Hooks.useTranslation>);
-    mockUseGetVoterInfo.mockReturnValue({
-      voter: { isRegisteredAsDRep: true },
-    } as ReturnType<typeof Hooks.useGetVoterInfo>);
+
     mockCorrectAdaFormat.mockReturnValue(1000);
 
-    render(<VotingPowerChips />);
+    render(<VotingPowerChips isShown />);
 
     const icon = screen.getByTestId("InfoOutlinedIcon");
     fireEvent.mouseOver(icon);

diff --git a/govtool/frontend/src/components/atoms/VotingPowerChips.tsx b/govtool/frontend/src/components/atoms/VotingPowerChips.tsx
@@ -2,24 +2,25 @@ import { Box, CircularProgress } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 import { Typography, Tooltip } from "@atoms";
-import { useCardano } from "@context";
-import {
-  useGetDRepVotingPowerQuery,
-  useGetVoterInfo,
-  useScreenDimension,
-  useTranslation,
-} from "@hooks";
+import { useScreenDimension, useTranslation } from "@hooks";
 import { correctAdaFormat } from "@utils";
 
-export const VotingPowerChips = () => {
-  const { isEnableLoading } = useCardano();
-  const { voter } = useGetVoterInfo();
-  const { dRepVotingPower } = useGetDRepVotingPowerQuery(voter);
+type VotingPowerChipsProps = {
+  votingPower?: number;
+  isLoading?: boolean;
+  isShown?: boolean;
+};
+
+export const VotingPowerChips = ({
+  isLoading,
+  isShown,
+  votingPower,
+}: VotingPowerChipsProps) => {
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
 
   return (
-    (voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter) && (
+    isShown && (
       <Box
         data-testid="voting-power-chips"
         sx={{
@@ -56,7 +57,7 @@ export const VotingPowerChips = () => {
             {t("votingPower")}:
           </Typography>
         )}
-        {dRepVotingPower === undefined || isEnableLoading || !voter ? (
+        {isLoading ? (
           <CircularProgress size={20} color="primary" />
         ) : (
           <Typography
@@ -66,7 +67,7 @@ export const VotingPowerChips = () => {
             fontWeight={600}
             sx={{ whiteSpace: "nowrap" }}
           >
-            ₳ {correctAdaFormat(dRepVotingPower) ?? 0}
+            ₳ {correctAdaFormat(votingPower) ?? 0}
           </Typography>
         )}
       </Box>

diff --git a/govtool/frontend/src/components/molecules/CopyableInfo.tsx b/govtool/frontend/src/components/molecules/CopyableInfo.tsx
@@ -20,7 +20,7 @@ export const CopyableInfo = ({
 }: CopyableInfoProps) => (
   <Card
     border
-    data-testid={dataTestId}
+    dataTestId={dataTestId}
     elevation={0}
     sx={{
       px: 1.5,

diff --git a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx
@@ -3,8 +3,13 @@ import { Box, IconButton } from "@mui/material";
 
 import { VotingPowerChips, Typography } from "@atoms";
 import { ICONS } from "@consts";
-import { useScreenDimension } from "@hooks";
+import {
+  useGetDRepVotingPowerQuery,
+  useGetVoterInfo,
+  useScreenDimension,
+} from "@hooks";
 import { DashboardDrawerMobile } from "@organisms";
+import { useCardano } from "@context";
 
 type DashboardTopNavProps = {
   title: string;
@@ -20,6 +25,9 @@ export const DashboardTopNav = ({
   const [windowScroll, setWindowScroll] = useState<number>(0);
   const { isMobile } = useScreenDimension();
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
+  const { isEnableLoading } = useCardano();
+  const { voter } = useGetVoterInfo();
+  const { dRepVotingPower } = useGetDRepVotingPowerQuery(voter);
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -76,7 +84,17 @@ export const DashboardTopNav = ({
           ) : null}
         </Box>
         <Box display="flex">
-          {!isVotingPowerHidden && <VotingPowerChips />}
+          {!isVotingPowerHidden && (
+            <VotingPowerChips
+              isLoading={
+                dRepVotingPower === undefined || !!isEnableLoading || !voter
+              }
+              isShown={
+                voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter
+              }
+              votingPower={dRepVotingPower}
+            />
+          )}
           {isMobile && (
             <IconButton
               data-testid="open-drawer-button"

diff --git a/...tend/src/stories/DashboardCard.stories.ts → ...end/src/stories/DashboardCard.stories.tsx b/...tend/src/stories/DashboardCard.stories.ts → ...end/src/stories/DashboardCard.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { DashboardActionCard } from "@molecules";
+import { CopyableInfo, DashboardActionCard } from "@molecules";
 import { expect } from "@storybook/jest";
 import { within } from "@storybook/testing-library";
 import { IMAGES } from "@/consts";
@@ -20,7 +20,7 @@ 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();
+  expect(canvas.queryAllByRole("img")).not.toHaveLength(0);
 }
 
 export const DashboardCardComponent: Story = {
@@ -43,17 +43,31 @@ export const DashboardCardComponent: Story = {
 
 export const WithDRepIdDashboardCardComponent: Story = {
   args: {
-    buttons: [{ children: "first button" }, { children: "second button" }],
+    buttons: [
+      { children: "first button", variant: "contained" },
+      { children: "second button" },
+    ],
     description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
     imageURL: IMAGES.govActionDelegateImage,
+    state: "active",
     title: "Action card",
+    children: (
+      <CopyableInfo
+        dataTestId="dRep-id-display-card-dashboard"
+        label="Your DRep ID"
+        sx={{ mt: 1 }}
+        value="drep133vmtzlem9asdkl4jfs3f9mrg5jg34tymf4uzwj2nx0fgwyg9ds"
+      />
+    ),
   },
   play: async ({ canvasElement }) => {
-    const dRepId = "";
+    const dRepId = "drep133vmtzlem9asdkl4jfs3f9mrg5jg34tymf4uzwj2nx0fgwyg9ds";
     const canvas = within(canvasElement);
 
     await assertCardInfo(canvas);
-    await expect(canvas.getByTestId("drep-id-info")).toHaveTextContent(dRepId);
+    await expect(
+      canvas.getByTestId("dRep-id-display-card-dashboard"),
+    ).toHaveTextContent(dRepId);
   },
 };
 

diff --git a/govtool/frontend/src/stories/TextArea.stories.tsx b/govtool/frontend/src/stories/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryFn } from "@storybook/react";
 
 import { Field } from "@molecules";
 import { userEvent, within } from "@storybook/testing-library";
-import { ComponentProps } from "react";
+import { ComponentProps, useState } from "react";
 
 const meta: Meta<typeof Field.TextArea> = {
   title: "Example/TextArea",
@@ -16,9 +16,17 @@ const meta: Meta<typeof Field.TextArea> = {
 
 export default meta;
 
-const Template: StoryFn<ComponentProps<typeof Field.TextArea>> = (args) => (
-  <Field.TextArea {...args} />
-);
+const Template: StoryFn<ComponentProps<typeof Field.TextArea>> = (args) => {
+  const [val, setVal] = useState("");
+
+  return (
+    <Field.TextArea
+      {...args}
+      value={val}
+      onChange={(e) => setVal(e.target.value)}
+    />
+  );
+};
 
 async function assertTextbox(canvas: ReturnType<typeof within>) {
   const text = "test";

diff --git a/govtool/frontend/src/stories/VotingPowerChips.stories.ts b/govtool/frontend/src/stories/VotingPowerChips.stories.ts
@@ -10,6 +10,7 @@ const meta = {
   parameters: {
     layout: "centered",
   },
+  args: { isShown: true },
   tags: ["autodocs"],
 } satisfies Meta<typeof VotingPowerChips>;