Merge pull request #2077 from IntersectMBO/fix/1875-missing-test-id-f…

…or-votes

[#1875] add missing testIds for submitted votes

CHANGELOG.md

@@ -16,7 +16,7 @@ changes.
 
 ### Fixed
 
--
+- Add missing testIds for submitted votes [Issue 1875](https://github.com/IntersectMBO/govtool/issues/1875)
 
 ### Changed
 

govtool/frontend/src/components/molecules/VotesSubmitted.tsx

@@ -1,7 +1,7 @@
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 
 import { IMAGES } from "@consts";
-import { VotePill } from "@atoms";
+import { Typography, VotePill } from "@atoms";
 import { useTranslation } from "@hooks";
 import { correctAdaFormat } from "@utils";
 import { SubmittedVotesData } from "@models";
@@ -10,27 +10,6 @@ type Props = {
   votes: SubmittedVotesData;
 };
 
-const Vote = ({
-  vote,
-  value,
-}: {
-  vote: "yes" | "no" | "abstain";
-  value: string | number;
-}) => (
-  <Box sx={{ alignItems: "center", display: "flex", flexWrap: "wrap" }}>
-    <VotePill vote={vote} maxWidth={82} />
-    <Typography
-      fontSize="16px"
-      sx={{
-        marginLeft: "12px",
-        wordBreak: "break-all",
-      }}
-    >
-      {value}
-    </Typography>
-  </Box>
-);
-
 export const VotesSubmitted = ({
   votes: {
     dRepYesVotes,
@@ -83,67 +62,93 @@ export const VotesSubmitted = ({
         sx={{
           display: "flex",
           flexDirection: "column",
-          gap: "12px",
+          gap: 4.5,
         }}
       >
-        <Typography
-          sx={{
-            fontSize: "18px",
-            fontWeight: "600",
-            lineHeight: "24px",
-          }}
-        >
-          {t("govActions.dReps")}
-        </Typography>
-        <Vote vote="yes" value={`₳ ${correctAdaFormat(dRepYesVotes)}`} />
-        <Vote
-          vote="abstain"
-          value={`₳ ${correctAdaFormat(dRepAbstainVotes)}`}
+        <VotesGroup
+          type="dReps"
+          yesVotes={dRepYesVotes}
+          noVotes={dRepNoVotes}
+          abstainVotes={dRepAbstainVotes}
+        />
+        <VotesGroup
+          type="sPos"
+          yesVotes={poolYesVotes}
+          noVotes={poolNoVotes}
+          abstainVotes={poolAbstainVotes}
+        />
+        <VotesGroup
+          type="ccCommittee"
+          yesVotes={ccYesVotes}
+          noVotes={ccNoVotes}
+          abstainVotes={ccAbstainVotes}
         />
-        <Vote vote="no" value={`₳ ${correctAdaFormat(dRepNoVotes)}`} />
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "12px",
-            mt: "24px",
-          }}
-        >
-          <Typography
-            sx={{
-              fontSize: "18px",
-              fontWeight: "600",
-              lineHeight: "24px",
-            }}
-          >
-            {t("govActions.sPos")}
-          </Typography>
-          <Vote vote="yes" value={poolYesVotes} />
-          <Vote vote="abstain" value={poolAbstainVotes} />
-          <Vote vote="no" value={poolNoVotes} />
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "12px",
-              mt: "24px",
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: "18px",
-                fontWeight: "600",
-                lineHeight: "24px",
-              }}
-            >
-              {t("govActions.ccCommittee")}
-            </Typography>
-            <Vote vote="yes" value={ccYesVotes} />
-            <Vote vote="abstain" value={ccAbstainVotes} />
-            <Vote vote="no" value={ccNoVotes} />
-          </Box>
-        </Box>
       </Box>
     </Box>
   );
 };
+
+type VotesGroupProps = {
+  type: "ccCommittee" | "dReps" | "sPos";
+  yesVotes: number;
+  noVotes: number;
+  abstainVotes: number;
+};
+
+const VotesGroup = ({
+  type,
+  yesVotes,
+  noVotes,
+  abstainVotes,
+}: VotesGroupProps) => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: "18px",
+          fontWeight: "600",
+          lineHeight: "24px",
+        }}
+      >
+        {t(`govActions.${type}`)}
+      </Typography>
+      <Vote type={type} vote="yes" value={yesVotes} />
+      <Vote type={type} vote="abstain" value={abstainVotes} />
+      <Vote type={type} vote="no" value={noVotes} />
+    </Box>
+  );
+};
+
+type VoteProps = {
+  type: "ccCommittee" | "dReps" | "sPos";
+  vote: "yes" | "no" | "abstain";
+  value: number;
+};
+const Vote = ({ type, vote, value }: VoteProps) => (
+  <Box
+    sx={{
+      alignItems: "center",
+      display: "flex",
+      flexWrap: "wrap",
+      columnGap: 1.5,
+    }}
+  >
+    <VotePill vote={vote} maxWidth={82} />
+    <Typography
+      data-testid={`submitted-votes-${type}-${vote}`}
+      sx={{
+        fontSize: 16,
+        wordBreak: "break-all",
+      }}
+    >
+      {type === "dReps" ? `₳ ${correctAdaFormat(value)}` : value}
+    </Typography>
+  </Box>
+);