feat(ui): Improve test coverage

package.json

@@ -135,7 +135,7 @@
     "typescript": "^5.7.2",
     "webpack": "5",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.8.0",
     "workbox-webpack-plugin": "^6.5.4",
     "yaml-loader": "^0.8.0"

src/ui/components/CardDetails/CardDetailsBlock/CardBlock.tsx

@@ -21,11 +21,13 @@ const CardBlock = ({
   });
 
   const buttonTestId = testId ? `${testId}-nav-button` : undefined;
+  const containerTestId = testId ? `${testId}-card-block` : undefined;
 
   return (
     <CardDetailsBlock
       onClick={!copyContent ? onClick : undefined}
       className={classes}
+      dataTestId={containerTestId}
     >
       {title && (
         <CardDetailsItem

src/ui/components/CardDetails/CardDetailsBlock/CardDetailsBlock.tsx

@@ -8,12 +8,16 @@ const CardDetailsBlock = ({
   action,
   children,
   className,
+  dataTestId,
   onClick,
 }: CardDetailsBlockProps) => {
   const classes = combineClassNames("card-details-info-block", className);
 
   return (
-    <div className={classes}>
+    <div
+      data-testid={dataTestId}
+      className={classes}
+    >
       <div className="card-details-info-block-header">
         {title && (
           <h4
@@ -29,6 +33,7 @@ const CardDetailsBlock = ({
       </div>
       <IonCard
         onClick={onClick}
+        data-testid={`${dataTestId}-card`}
         className="card-details-info-block-inner"
       >
         {children}

src/ui/components/CardDetails/CardDetailsBlock/CardDetailsBlock.types.ts

@@ -6,6 +6,7 @@ interface CardDetailsBlockProps {
   children?: ReactNode;
   className?: string;
   onClick?: () => void;
+  dataTestId?: string;
 }
 
 enum FlatBorderType {

src/ui/components/CardDetails/CardDetailsExpandAttributes/CardDetailsAttribute.test.tsx

@@ -0,0 +1,87 @@
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import Eng_trans from "../../../../locales/en/en.json";
+import { store } from "../../../../store";
+import { CardDetailsAttribute } from "./CardDetailsAttribute";
+
+describe("CardDetailsAttribute", () => {
+  test("Render nested value", async () => {
+    const { getAllByTestId, getByText } = render(
+      <Provider store={store}>
+        <CardDetailsAttribute
+          attributeKey={""}
+          attributeValue={{
+            a: {
+              d: "EJ3HSnEqtSm3WiucWkeBbKspmEAIjf2N6wr5EKOcQ9Vl",
+              i: "EJWgO4hwKxNMxu2aUpmGFMozKt9Eq2Jz8n-xXR7CYtY_",
+              dt: "2024-01-22T16:03:44.643000+00:00",
+              LEI: "5493001KJTIIGC8Y1R17",
+            },
+            s: {
+              title: "Qualified vLEI Issuer Credential",
+              description:
+                "A vLEI Credential issued by GLEIF to Qualified vLEI Issuers which allows the Qualified vLEI Issuers to issue, verify and revoke Legal Entity vLEI Credentials and Legal Entity Official Organizational Role vLEI Credentials",
+              version: "1.0.0",
+            },
+          }}
+        />
+      </Provider>
+    );
+
+    expect(getAllByTestId("nested-attributes").length).toBe(3);
+    expect(
+      getByText(
+        Eng_trans.tabs.credentials.details.attributes.issuee.concat(":")
+      )
+    ).toBeVisible();
+    expect(
+      getByText(
+        Eng_trans.tabs.credentials.details.attributes.issuancedate.concat(":")
+      )
+    ).toBeVisible();
+    expect(
+      getByText(Eng_trans.tabs.credentials.details.status.label)
+    ).toBeVisible();
+    expect(
+      getByText("EJ3HSnEqtSm3WiucWkeBbKspmEAIjf2N6wr5EKOcQ9Vl")
+    ).toBeVisible();
+    expect(
+      getByText("EJWgO4hwKxNMxu2aUpmGFMozKt9Eq2Jz8n-xXR7CYtY_")
+    ).toBeVisible();
+    expect(getByText("5493001KJTIIGC8Y1R17")).toBeVisible();
+    expect(getByText("Qualified vLEI Issuer Credential")).toBeVisible();
+    expect(
+      getByText(
+        "A vLEI Credential issued by GLEIF to Qualified vLEI Issuers which allows the Qualified vLEI Issuers to issue, verify and revoke Legal Entity vLEI Credentials and Legal Entity Official Organizational Role vLEI Credentials"
+      )
+    ).toBeVisible();
+    expect(getByText("description:")).toBeVisible();
+  });
+
+  test("Ignore key", async () => {
+    const { queryAllByTestId } = render(
+      <Provider store={store}>
+        <CardDetailsAttribute
+          attributeKey={"dt"}
+          attributeValue={{
+            a: {
+              d: "EJ3HSnEqtSm3WiucWkeBbKspmEAIjf2N6wr5EKOcQ9Vl",
+              i: "EJWgO4hwKxNMxu2aUpmGFMozKt9Eq2Jz8n-xXR7CYtY_",
+              dt: "2024-01-22T16:03:44.643000+00:00",
+              LEI: "5493001KJTIIGC8Y1R17",
+            },
+            s: {
+              title: "Qualified vLEI Issuer Credential",
+              description:
+                "A vLEI Credential issued by GLEIF to Qualified vLEI Issuers which allows the Qualified vLEI Issuers to issue, verify and revoke Legal Entity vLEI Credentials and Legal Entity Official Organizational Role vLEI Credentials",
+              version: "1.0.0",
+            },
+          }}
+          ignoreKeys={["dt"]}
+        />
+      </Provider>
+    );
+
+    expect(queryAllByTestId("nested-attributes").length).toBe(0);
+  });
+});

src/ui/components/ListHeader/ListHeader.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import { ListHeader } from "./ListHeader";
+
+describe("List Header", () => {
+  test("Render back button", async () => {
+    const { getByTestId, getByText } = render(
+      <ListHeader
+        title="title"
+        hasAction
+      />
+    );
+
+    expect(getByText("title")).toBeVisible();
+    expect(getByTestId("list-header-first-icon")).toBeVisible();
+    expect(getByTestId("list-header-second-icon")).toBeVisible();
+  });
+});

src/ui/components/PageFooter/PageFooter.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render } from "@testing-library/react";
+import { chevronForwardOutline } from "ionicons/icons";
 import { PageFooter } from "./PageFooter";
 
 describe("Page Footer", () => {
@@ -9,17 +10,31 @@ describe("Page Footer", () => {
   const secondaryButtonAction = jest.fn();
   const tertiaryButtonText = "tertiaryButtonText";
   const tertiaryButtonAction = jest.fn();
+  const archiveButtonText = "archiveButtonText";
+  const archiveButtonAction = jest.fn();
+  const declineButtonText = "declineButtonText";
+  const declineButtonAction = jest.fn();
+  const deleteButtonText = "deleteButtonText";
+  const deleteButtonAction = jest.fn();
 
   test("Renders all enabled buttons + page id", () => {
     const { getByText, getByTestId } = render(
       <PageFooter
         pageId={pageId}
+        customClass="footer"
         primaryButtonText={primaryButtonText}
         primaryButtonAction={primaryButtonAction}
         secondaryButtonText={secondaryButtonText}
         secondaryButtonAction={secondaryButtonAction}
         tertiaryButtonText={tertiaryButtonText}
         tertiaryButtonAction={tertiaryButtonAction}
+        archiveButtonText={archiveButtonText}
+        archiveButtonAction={archiveButtonAction}
+        declineButtonText={declineButtonText}
+        declineButtonAction={declineButtonAction}
+        declineButtonIcon={chevronForwardOutline}
+        deleteButtonText={deleteButtonText}
+        deleteButtonAction={deleteButtonAction}
       />
     );
 
@@ -35,6 +50,15 @@ describe("Page Footer", () => {
 
     fireEvent.click(getByTestId(`tertiary-button${`-${pageId}`}`));
     expect(tertiaryButtonAction.mock.calls.length).toEqual(1);
+
+    fireEvent.click(getByTestId(`archive-button${`-${pageId}`}`));
+    expect(archiveButtonAction.mock.calls.length).toEqual(1);
+
+    fireEvent.click(getByTestId(`decline-button${`-${pageId}`}`));
+    expect(declineButtonAction.mock.calls.length).toEqual(1);
+
+    fireEvent.click(getByTestId(`delete-button${`-${pageId}`}`));
+    expect(deleteButtonAction.mock.calls.length).toEqual(1);
   });
 
   test("Renders all disabled buttons + no page id", () => {
@@ -43,21 +67,52 @@ describe("Page Footer", () => {
         primaryButtonText={primaryButtonText}
         primaryButtonAction={primaryButtonAction}
         primaryButtonDisabled={true}
+        primaryButtonIcon={chevronForwardOutline}
         secondaryButtonText={secondaryButtonText}
         secondaryButtonAction={secondaryButtonAction}
+        secondaryButtonIcon={chevronForwardOutline}
         secondaryButtonDisabled={true}
         tertiaryButtonText={tertiaryButtonText}
         tertiaryButtonAction={tertiaryButtonAction}
         tertiaryButtonDisabled={true}
+        tertiaryButtonIcon={chevronForwardOutline}
+        archiveButtonText={archiveButtonText}
+        archiveButtonAction={archiveButtonAction}
+        archiveButtonDisabled
+        declineButtonText={declineButtonText}
+        declineButtonAction={declineButtonAction}
+        declineButtonDisabled
+        declineButtonIcon={chevronForwardOutline}
+        deleteButtonText={deleteButtonText}
+        deleteButtonAction={deleteButtonAction}
+        deleteButtonDisabled
       />
     );
 
     expect(getByText(primaryButtonText)).toBeInTheDocument();
     expect(getByText(secondaryButtonText)).toBeInTheDocument();
     expect(getByText(tertiaryButtonText)).toBeInTheDocument();
+    expect(getByText(archiveButtonText)).toBeInTheDocument();
+    expect(getByText(declineButtonText)).toBeInTheDocument();
 
     expect(getByTestId("primary-button")).toHaveAttribute("disabled", "true");
     expect(getByTestId("secondary-button")).toHaveAttribute("disabled", "true");
     expect(getByTestId("tertiary-button")).toHaveAttribute("disabled", "true");
+    expect(getByTestId("primary-button")).toHaveAttribute("disabled", "true");
+    expect(getByTestId("archive-button")).toHaveAttribute("disabled", "true");
+    expect(getByTestId("decline-button")).toHaveAttribute("disabled", "true");
+  });
+
+  test("Render button with link", () => {
+    const link = "samplelink";
+
+    const { getByText } = render(
+      <PageFooter
+        primaryButtonText={primaryButtonText}
+        primaryButtonAction={link}
+      />
+    );
+
+    expect(getByText(primaryButtonText).getAttribute("href")).toBe(link);
   });
 });