chore/add-data-test-id-in-drep-directory

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

@@ -4,7 +4,7 @@ import { Button, LoadingButton, Typography } from "@atoms";
 import { primaryBlue } from "@consts";
 import { useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { openInNewTab } from "@utils";
+import { openInNewTab, testIdFromLabel } from "@utils";
 
 import { Card } from "./Card";
 import { AutomatedVotingCardProps } from "./types";
@@ -24,6 +24,7 @@ export const AutomatedVotingCard = ({
   const { isMobile, screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
+  const testIdLabel = testIdFromLabel(title);
 
   const onClickShowTransaction = () =>
     openInNewTab(`https://sancho.cexplorer.io/tx/${transactionId}`);
@@ -121,7 +122,7 @@ export const AutomatedVotingCard = ({
             }}
           >
             <Button
-              // TODO handle button click
+              data-testid={`${testIdLabel}-info-button`}
               onClick={onClickInfo}
               size={isMobile ? "medium" : "large"}
               sx={{ flex: screenWidth < 768 ? 1 : undefined }}
@@ -131,6 +132,7 @@ export const AutomatedVotingCard = ({
             </Button>
             {!isConnected ? (
               <Button
+                data-testid={`${testIdLabel}-connect-to-delegate-button`}
                 onClick={() => openModal({ type: "chooseWallet" })}
                 size={isMobile ? "medium" : "large"}
                 sx={{ flex: screenWidth < 768 ? 1 : undefined }}
@@ -140,6 +142,7 @@ export const AutomatedVotingCard = ({
             ) : (
               !isSelected && (
                 <LoadingButton
+                  data-testid={`${testIdLabel}-delegate-button`}
                   isLoading={isDelegateLoading}
                   onClick={onClickDelegate}
                   size={isMobile ? "medium" : "large"}

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

@@ -33,6 +33,7 @@ export const Share = ({ link }: { link: string }) => {
   return (
     <>
       <ButtonBase
+        data-testid="share-button"
         aria-describedby={id}
         onClick={handleClick}
         sx={(theme) => ({
@@ -44,11 +45,11 @@ export const Share = ({ link }: { link: string }) => {
           display: "flex",
           justifyContent: "center",
           padding: 1.5,
-          transition: 'all 0.3s',
-          '&:hover': {
+          transition: "all 0.3s",
+          "&:hover": {
             boxShadow: theme.shadows[1],
             bgcolor: "#F7F9FB",
-          }
+          },
         })}
       >
         <img alt="" height={24} width={24} src={ICONS.share} />
@@ -82,6 +83,7 @@ export const Share = ({ link }: { link: string }) => {
         >
           <Typography sx={{ alignSelf: "flex-start" }}>{t("share")}</Typography>
           <ButtonBase
+            data-testid="copy-link-from-share-button"
             onClick={onCopy}
             sx={{
               alignItems: "center",
@@ -99,7 +101,9 @@ export const Share = ({ link }: { link: string }) => {
           >
             <img alt="link" height={24} src={ICONS.link} width={24} />
           </ButtonBase>
-          <Typography variant="caption">{isActive ? t("clickToCopyLink") : t("linkCopied")}</Typography>
+          <Typography variant="caption">
+            {isActive ? t("clickToCopyLink") : t("linkCopied")}
+          </Typography>
         </Box>
       </Popover>
     </>

govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx

@@ -42,6 +42,7 @@ export const AutomatedVotingOptions = ({
 
   return (
     <Accordion
+      data-testid="automated-voting-options-accordion"
       elevation={3}
       expanded={isOpen}
       onChange={(_, isExpanded) => setIsOpen(isExpanded)}

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/ChooseGovernanceActionType.tsx

@@ -43,6 +43,7 @@ export const ChooseGovernanceActionType = ({
           <div key={type}>
             <ActionRadio
               isChecked={isChecked}
+              dataTestId={`${type}-radio`}
               onChange={onChangeType}
               title={type}
               value={type}

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -80,6 +80,7 @@ export const DRepCard = ({
             <Box flex={1} minWidth={0}>
               <Typography sx={ellipsisStyles}>{type}</Typography>
               <ButtonBase
+                data-testid={`${view}-copy-id-button`}
                 onClick={(e) => {
                   navigator.clipboard.writeText(view);
                   addSuccessAlert(t("alerts.copiedToClipboard"));
@@ -145,6 +146,7 @@ export const DRepCard = ({
           }}
         >
           <Button
+            data-testid={`${view}-view-details-button`}
             variant="outlined"
             onClick={() =>
               navigate(
@@ -162,10 +164,18 @@ export const DRepCard = ({
             onDelegate &&
             !isMe &&
             !isInProgress && (
-              <Button onClick={onDelegate}>{t("delegate")}</Button>
+              <Button
+                data-testid={`${view}-delegate-button`}
+                onClick={onDelegate}
+              >
+                {t("delegate")}
+              </Button>
             )}
           {status === "Active" && !isConnected && (
-            <Button onClick={openChooseWalletModal}>
+            <Button
+              data-testid={`${view}-connect-to-delegate-button`}
+              onClick={openChooseWalletModal}
+            >
               {t("connectToDelegate")}
             </Button>
           )}

govtool/frontend/src/components/organisms/Footer.tsx

@@ -4,7 +4,7 @@ import { Button, Typography } from "@atoms";
 import { ICONS } from "@consts";
 import { useUsersnapApi } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { openInNewTab } from "@utils";
+import { openInNewTab, testIdFromLabel } from "@utils";
 
 type FooterLinkProps = {
   label: string;
@@ -13,6 +13,7 @@ type FooterLinkProps = {
 
 const FooterLink = ({ label, onClick }: FooterLinkProps) => (
   <Link
+    data-testid={`${testIdFromLabel(label)}-footer-link`}
     onClick={onClick}
     sx={{
       color: "textBlack",
@@ -91,6 +92,7 @@ export const Footer = () => {
           }}
         >
           <Button
+            data-testid="help-footer-button"
             onClick={onClickHelp}
             size="small"
             startIcon={<img alt="helpIcon" src={ICONS.helpIcon} />}
@@ -99,7 +101,12 @@ export const Footer = () => {
           >
             {t("menu.help")}
           </Button>
-          <Button onClick={onClickFeedback} size="small" variant="outlined">
+          <Button
+            data-testid="feedback-footer-button"
+            onClick={onClickFeedback}
+            size="small"
+            variant="outlined"
+          >
             {t("feedback")}
           </Button>
         </Box>

govtool/frontend/src/pages/DRepDetails.tsx

@@ -12,7 +12,12 @@ import {
   useTranslation,
 } from "@hooks";
 import { Card, LinkWithIcon, Share } from "@molecules";
-import { correctAdaFormat, isSameDRep, openInNewTab } from "@utils";
+import {
+  correctAdaFormat,
+  isSameDRep,
+  openInNewTab,
+  testIdFromLabel,
+} from "@utils";
 
 const LINKS = [
   "darlenelonglink1.DRepwebsiteorwhatever.com",
@@ -70,6 +75,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
   return (
     <>
       <LinkWithIcon
+        data-testid="back-to-list-button"
         label={t("backToList")}
         onClick={() =>
           navigate(
@@ -128,6 +134,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
           </Typography>
           {isMe && (
             <Button
+              data-testid="edit-drep-data-button"
               onClick={() => navigate(PATHS.editDrepMetadata)}
               variant="outlined"
             >
@@ -192,6 +199,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
           )}
           {!isConnected && status === "Active" && (
             <Button
+              data-testid="connect-to-delegate-button"
               onClick={() =>
                 openModal({
                   type: "chooseWallet",
@@ -255,6 +263,7 @@ const DRepDetailsInfoItem = ({ children, label }: DrepDetailsInfoItemProps) => (
 
 const DRepId = ({ children }: PropsWithChildren) => (
   <ButtonBase
+    data-testid="copy-drep-id-button"
     sx={{
       gap: 1,
       maxWidth: "100%",
@@ -281,6 +290,7 @@ const MoreInfoLink = ({ label, navTo }: LinkWithIconProps) => {
 
   return (
     <ButtonBase
+      data-testid={`${testIdFromLabel(label)}-link`}
       onClick={openLink}
       sx={{
         gap: 0.5,

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -195,7 +195,11 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
       </>
       {dRepListHasNextPage && (
         <Box sx={{ justifyContent: "center", display: "flex" }}>
-          <Button variant="outlined" onClick={() => dRepListFetchNextPage()}>
+          <Button
+            data-testid="show-more-button"
+            variant="outlined"
+            onClick={() => dRepListFetchNextPage()}
+          >
             {t("showMore")}
           </Button>
         </Box>

govtool/frontend/src/utils/index.ts

@@ -11,6 +11,7 @@ export * from "./ellipsizeText";
 export * from "./formatDate";
 export * from "./generateAnchor";
 export * from "./generateJsonld";
+export * from "./generateMetadataBody";
 export * from "./getDRepID";
 export * from "./getGovActionId";
 export * from "./getLengthInBytes";
@@ -22,6 +23,6 @@ export * from "./localStorage";
 export * from "./numberValidation";
 export * from "./openInNewTab";
 export * from "./removeDuplicatedProposals";
+export * from "./testIdFromLabel";
 export * from "./validateMetadataHash";
 export * from "./wait";
-export * from "./generateMetadataBody";

govtool/frontend/src/utils/testIdFromLabel.ts

@@ -0,0 +1,2 @@
+export const testIdFromLabel = (label: string) =>
+  label.trim().replace(/ /g, "-").toLocaleLowerCase();

govtool/frontend/src/utils/tests/testIdFromLabel.test.ts

@@ -0,0 +1,57 @@
+import { testIdFromLabel } from "..";
+
+describe("testIdFromLabel function", () => {
+  it("replaces spaces with dashes and converts the label to lowercase", () => {
+    const label = "Hello World";
+    const expectedTestId = "hello-world";
+
+    const result = testIdFromLabel(label);
+
+    expect(result).toEqual(expectedTestId);
+  });
+
+  it("handles labels with multiple spaces", () => {
+    const label = "Multiple     Spaces";
+    const expectedTestId = "multiple-----spaces";
+
+    const result = testIdFromLabel(label);
+
+    expect(result).toEqual(expectedTestId);
+  });
+
+  it("handles labels with leading and trailing spaces", () => {
+    const label = "   Leading and Trailing Spaces   ";
+    const expectedTestId = "leading-and-trailing-spaces";
+
+    const result = testIdFromLabel(label);
+
+    expect(result).toEqual(expectedTestId);
+  });
+
+  it("handles labels with special characters", () => {
+    const label = "!@#$%^&*()";
+    const expectedTestId = "!@#$%^&*()";
+
+    const result = testIdFromLabel(label);
+
+    expect(result).toEqual(expectedTestId);
+  });
+
+  it("handles empty labels", () => {
+    const label = "";
+    const expectedTestId = "";
+
+    const result = testIdFromLabel(label);
+
+    expect(result).toEqual(expectedTestId);
+  });
+
+  it("handles labels with all spaces", () => {
+    const label = "   ";
+    const expectedTestId = "";
+
+    const result = testIdFromLabel(label);
+
+    expect(result).toEqual(expectedTestId);
+  });
+});