test(TAA-163): begin adding tests for the individual approval-request…

… components

.eslintrc.js

@@ -34,7 +34,10 @@ module.exports = {
     "@typescript-eslint/consistent-type-imports": "error",
     "check-file/folder-naming-convention": [
       "error",
-      { "src/**/": "KEBAB_CASE" },
+      {
+        "src/**/": "KEBAB_CASE",
+        "src/**/__tests__/": true, // This allows the __tests__ directory name
+      },
     ],
     "check-file/filename-naming-convention": [
       "error",

package.json

@@ -68,7 +68,7 @@
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^17.0.62",

src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx

@@ -43,10 +43,7 @@ function CustomFieldValue({
 }: {
   value: string | boolean | Array<string> | undefined;
 }) {
-  if (!value) {
-    return <MD>{NULL_VALUE_PLACEHOLDER}</MD>;
-  }
-  if (Array.isArray(value)) {
+  if (Array.isArray(value) && value.length > 0) {
     return (
       <MD>
         {value.map((val) => (
@@ -62,6 +59,10 @@ function CustomFieldValue({
     return <MD>{value ? "Yes" : "No"}</MD>;
   }
 
+  if (!value || (Array.isArray(value) && value.length === 0)) {
+    return <MD>{NULL_VALUE_PLACEHOLDER}</MD>;
+  }
+
   return <MD>{value}</MD>;
 }
 

src/modules/approval-requests/components/approval-request/__tests__/ApprovalRequestDetails.test.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import { ThemeProvider } from "@zendeskgarden/react-theming";
+import ApprovalRequestDetails from "../ApprovalRequestDetails";
+import type { ApprovalRequest } from "../../../types";
+
+const renderWithTheme = (ui: React.ReactElement) => {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+};
+
+const mockApprovalRequest: ApprovalRequest = {
+  id: "123",
+  subject: "Test approval request",
+  message: "Please review this request",
+  status: "active",
+  created_at: "2024-02-20T10:30:00Z",
+  created_by_user: {
+    id: 123,
+    name: "John Sender",
+    photo: {
+      content_url: null,
+    },
+  },
+  assignee_user: {
+    id: 456,
+    name: "Jane Approver",
+    photo: {
+      content_url: null,
+    },
+  },
+  decided_at: null,
+  decision_notes: [],
+  ticket_details: {
+    id: "789",
+    priority: "normal",
+    custom_fields: [],
+    requester: {
+      id: 789,
+      name: "Request Creator",
+      photo: {
+        content_url: null,
+      },
+    },
+  },
+};
+
+describe("ApprovalRequestDetails", () => {
+  it("renders the basic approval request details without the decision notes and decided date", () => {
+    renderWithTheme(
+      <ApprovalRequestDetails
+        approvalRequest={mockApprovalRequest}
+        baseLocale="en-US"
+      />
+    );
+
+    expect(screen.getByText("Approval request details")).toBeInTheDocument();
+    expect(screen.getByText("John Sender")).toBeInTheDocument();
+    expect(screen.getByText("Jane Approver")).toBeInTheDocument();
+    expect(screen.getByText("Decision pending")).toBeInTheDocument();
+    expect(screen.queryByText("Comment")).not.toBeInTheDocument();
+    expect(screen.queryByText("Decided")).not.toBeInTheDocument();
+  });
+
+  it("renders the decision notes and decided date when present", () => {
+    const approvalRequestWithNotesAndDecision: ApprovalRequest = {
+      ...mockApprovalRequest,
+      status: "approved",
+      decided_at: "2024-02-21T15:45:00Z",
+      decision_notes: ["This looks good to me"],
+    };
+
+    renderWithTheme(
+      <ApprovalRequestDetails
+        approvalRequest={approvalRequestWithNotesAndDecision}
+        baseLocale="en-US"
+      />
+    );
+
+    expect(screen.getByText("Comment")).toBeInTheDocument();
+    expect(screen.getByText(/this looks good to me/i)).toBeInTheDocument();
+    expect(screen.getByText("Decided")).toBeInTheDocument();
+    expect(screen.getByText(/this looks good to me/i)).toBeInTheDocument();
+  });
+});

src/modules/approval-requests/components/approval-request/__tests__/ApprovalStatusTag.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import { ThemeProvider } from "@zendeskgarden/react-theming";
+import ApprovalStatusTag from "../ApprovalStatusTag";
+
+const renderWithTheme = (ui: React.ReactElement) => {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+};
+
+describe("ApprovalStatusTag", () => {
+  it("renders the active status tag correctly", () => {
+    renderWithTheme(<ApprovalStatusTag status="active" />);
+
+    expect(screen.getByText("Decision pending")).toBeInTheDocument();
+  });
+
+  it("renders the approved status tag correctly", () => {
+    renderWithTheme(<ApprovalStatusTag status="approved" />);
+
+    expect(screen.getByText("Approved")).toBeInTheDocument();
+  });
+
+  it("renders the rejected status tag correctly", () => {
+    renderWithTheme(<ApprovalStatusTag status="rejected" />);
+
+    expect(screen.getByText("Denied")).toBeInTheDocument();
+  });
+
+  it("renders the withdrawn status tag correctly", () => {
+    renderWithTheme(<ApprovalStatusTag status="withdrawn" />);
+
+    expect(screen.getByText("Withdrawn")).toBeInTheDocument();
+  });
+});

src/modules/approval-requests/components/approval-request/__tests__/ApprovalTicketDetails.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import { ThemeProvider } from "@zendeskgarden/react-theming";
+import ApprovalTicketDetails from "../ApprovalTicketDetails";
+import type { ApprovalRequestTicket } from "../../../types";
+
+const renderWithTheme = (ui: React.ReactElement) => {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+};
+
+const mockTicket: ApprovalRequestTicket = {
+  id: "123",
+  priority: "normal",
+  requester: {
+    id: 456,
+    name: "John Requester",
+    photo: {
+      content_url: null,
+    },
+  },
+  custom_fields: [],
+};
+
+describe("ApprovalTicketDetails", () => {
+  it("renders basic ticket details", () => {
+    renderWithTheme(<ApprovalTicketDetails ticket={mockTicket} />);
+
+    expect(screen.getByText("Ticket Details")).toBeInTheDocument();
+    expect(screen.getByText("John Requester")).toBeInTheDocument();
+    expect(screen.getByText("123")).toBeInTheDocument();
+    expect(screen.getByText("normal")).toBeInTheDocument();
+  });
+
+  it("renders custom fields with string values", () => {
+    const ticketWithCustomFields: ApprovalRequestTicket = {
+      ...mockTicket,
+      custom_fields: [
+        { id: "field1", title_in_portal: "Department", value: "IT" },
+        { id: "field2", title_in_portal: "Cost Center", value: "123-45" },
+      ],
+    };
+
+    renderWithTheme(<ApprovalTicketDetails ticket={ticketWithCustomFields} />);
+
+    expect(screen.getByText("Department")).toBeInTheDocument();
+    expect(screen.getByText("IT")).toBeInTheDocument();
+    expect(screen.getByText("Cost Center")).toBeInTheDocument();
+    expect(screen.getByText("123-45")).toBeInTheDocument();
+  });
+
+  it("renders custom fields with boolean values", () => {
+    const ticketWithBooleanFields: ApprovalRequestTicket = {
+      ...mockTicket,
+      custom_fields: [
+        { id: "field1", title_in_portal: "Urgent", value: true },
+        { id: "field2", title_in_portal: "Reviewed", value: false },
+      ],
+    };
+
+    renderWithTheme(<ApprovalTicketDetails ticket={ticketWithBooleanFields} />);
+
+    expect(screen.getByText("Urgent")).toBeInTheDocument();
+    expect(screen.getByText("Yes")).toBeInTheDocument();
+    expect(screen.getByText("Reviewed")).toBeInTheDocument();
+    expect(screen.getByText("No")).toBeInTheDocument();
+  });
+
+  it("renders custom fields with array values", () => {
+    const ticketWithArrayFields: ApprovalRequestTicket = {
+      ...mockTicket,
+      custom_fields: [
+        {
+          id: "field1",
+          title_in_portal: "Categories",
+          value: ["Hardware", "Software"],
+        },
+      ],
+    };
+
+    renderWithTheme(<ApprovalTicketDetails ticket={ticketWithArrayFields} />);
+
+    expect(screen.getByText("Categories")).toBeInTheDocument();
+    expect(screen.getByText("Hardware")).toBeInTheDocument();
+    expect(screen.getByText("Software")).toBeInTheDocument();
+  });
+
+  it("renders placeholder for empty or undefined custom field values", () => {
+    const ticketWithEmptyFields: ApprovalRequestTicket = {
+      ...mockTicket,
+      custom_fields: [
+        { id: "field1", title_in_portal: "Empty Field", value: undefined },
+        { id: "field2", title_in_portal: "Empty Array", value: [] },
+      ],
+    };
+
+    renderWithTheme(<ApprovalTicketDetails ticket={ticketWithEmptyFields} />);
+
+    expect(screen.getByText("Empty Field")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(2);
+  });
+});