[Customer Portal][FE][Web] Deprecate Legacy Mock Infrastructure

apps/customer-portal/webapp/src/AppWithConfig.tsx

@@ -23,7 +23,6 @@ import { AsgardeoProvider } from "@asgardeo/react";
 import { themeConfig } from "@config/themeConfig";
 import { loggerConfig } from "@config/loggerConfig";
 import LoggerProvider from "@context/logger/LoggerProvider";
-import { MockConfigProvider } from "@providers/MockConfigProvider";
 import { authConfig } from "@config/authConfig";
 
 const queryClient: QueryClient = new QueryClient();
@@ -38,16 +37,14 @@ export default function AppWithConfig(): JSX.Element {
       scopes={["openid", "email", "groups"]}
       storage="localStorage"
     >
-      <MockConfigProvider>
-        <LoggerProvider config={loggerConfig}>
-          <OxygenUIThemeProvider theme={themeConfig}>
-            <QueryClientProvider client={queryClient}>
-              <App />
-              <ReactQueryDevtools initialIsOpen={false} />
-            </QueryClientProvider>
-          </OxygenUIThemeProvider>
-        </LoggerProvider>
-      </MockConfigProvider>
+      <LoggerProvider config={loggerConfig}>
+        <OxygenUIThemeProvider theme={themeConfig}>
+          <QueryClientProvider client={queryClient}>
+            <App />
+            <ReactQueryDevtools initialIsOpen={false} />
+          </QueryClientProvider>
+        </OxygenUIThemeProvider>
+      </LoggerProvider>
     </AsgardeoProvider>
   );
 }

apps/customer-portal/webapp/src/api/__tests__/useGetCallRequests.test.tsx

@@ -19,7 +19,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import type { ReactNode } from "react";
 import { useGetCallRequests } from "@api/useGetCallRequests";
-import { mockCallRequests } from "@models/mockData";
+
+const mockCallRequestsResponse = { callRequests: [] };
 
 const mockLogger = {
   debug: vi.fn(),
@@ -43,13 +44,6 @@ vi.mock("@context/AuthApiContext", () => ({
     vi.fn().mockImplementation((url, init) => fetch(url, init)),
 }));
 
-let mockIsMockEnabled = false;
-vi.mock("@/providers/MockConfigProvider", () => ({
-  useMockConfig: () => ({
-    isMockEnabled: mockIsMockEnabled,
-  }),
-}));
-
 describe("useGetCallRequests", () => {
   let queryClient: QueryClient;
   const originalConfig = window.config;
@@ -68,7 +62,6 @@ describe("useGetCallRequests", () => {
         },
       },
     });
-    mockIsMockEnabled = false;
     mockIsSignedIn = true;
     mockIsAuthLoading = false;
     vi.clearAllMocks();
@@ -83,7 +76,7 @@ describe("useGetCallRequests", () => {
   });
 
   it("should fetch call requests from API successfully", async () => {
-    const mockResponse = mockCallRequests;
+    const mockResponse = mockCallRequestsResponse;
     const mockFetch = vi.fn().mockResolvedValue({
       ok: true,
       status: 200,
@@ -103,24 +96,11 @@ describe("useGetCallRequests", () => {
     );
   });
 
-  it("should return mock data when isMockEnabled is true", async () => {
-    mockIsMockEnabled = true;
-
-    const { result } = renderHook(() => useGetCallRequests(projectId, caseId), {
-      wrapper,
-    });
-
-    await waitFor(() => expect(result.current.isSuccess).toBe(true), {
-      timeout: 2000,
-    });
-    expect(result.current.data).toEqual(mockCallRequests);
-  });
-
   it("should have correct query options", () => {
     renderHook(() => useGetCallRequests(projectId, caseId), { wrapper });
 
     const query = queryClient.getQueryCache().findAll({
-      queryKey: ["case-call-requests", projectId, caseId, false],
+      queryKey: ["case-call-requests", projectId, caseId],
     })[0];
 
     expect((query?.options as { staleTime?: number }).staleTime).toBe(
@@ -163,7 +143,7 @@ describe("useGetCallRequests", () => {
     expect(mockFetch).not.toHaveBeenCalled();
   });
 
-  it("should not fetch when user is not signed in and mock is disabled", async () => {
+  it("should not fetch when user is not signed in", async () => {
     mockIsSignedIn = false;
 
     const { result } = renderHook(() => useGetCallRequests(projectId, caseId), {

apps/customer-portal/webapp/src/api/__tests__/useGetCaseAttachments.test.tsx

@@ -18,16 +18,15 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import useGetCaseAttachments from "@api/useGetCaseAttachments";
-import { mockCaseAttachments } from "@models/mockData";
-
-vi.mock("@constants/apiConstants", async (importOriginal) => {
-  const actual =
-    await importOriginal<typeof import("@constants/apiConstants")>();
-  return {
-    ...actual,
-    API_MOCK_DELAY: 0,
-  };
-});
+
+const mockAttachmentsResponse = {
+  attachments: [
+    { id: "a1", name: "file.txt", size: 100, createdOn: "", createdBy: "" },
+  ],
+  totalRecords: 1,
+  offset: 0,
+  limit: 50,
+};
 
 vi.mock("@asgardeo/react", () => ({
   useAsgardeo: () => ({
@@ -37,10 +36,12 @@ vi.mock("@asgardeo/react", () => ({
   }),
 }));
 
-const mockUseMockConfig = vi.fn().mockReturnValue({ isMockEnabled: true });
-
-vi.mock("@providers/MockConfigProvider", () => ({
-  useMockConfig: () => mockUseMockConfig(),
+const mockAuthFetch = vi.fn().mockResolvedValue({
+  ok: true,
+  json: () => Promise.resolve(mockAttachmentsResponse),
+});
+vi.mock("@context/AuthApiContext", () => ({
+  useAuthApiClient: () => mockAuthFetch,
 }));
 
 vi.mock("@hooks/useLogger", () => ({
@@ -59,10 +60,16 @@ describe("useGetCaseAttachments", () => {
   beforeEach(() => {
     queryClient.clear();
     vi.clearAllMocks();
-    mockUseMockConfig.mockReturnValue({ isMockEnabled: true });
+    mockAuthFetch.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAttachmentsResponse),
+    });
+    (window as unknown as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+      CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.test",
+    };
   });
 
-  it("should return mock attachments when isMockEnabled is true", async () => {
+  it("should return attachments from API", async () => {
     const { result } = renderHook(() => useGetCaseAttachments("case-001"), {
       wrapper,
     });
@@ -72,9 +79,9 @@ describe("useGetCaseAttachments", () => {
     expect(result.current.data).toBeDefined();
     expect(result.current.data?.attachments).toBeDefined();
     expect(result.current.data?.attachments.length).toBe(
-      mockCaseAttachments.length,
+      mockAttachmentsResponse.attachments.length,
     );
-    expect(result.current.data?.totalRecords).toBe(mockCaseAttachments.length);
+    expect(result.current.data?.totalRecords).toBe(mockAttachmentsResponse.totalRecords);
     expect(result.current.data?.offset).toBe(0);
     expect(result.current.data?.limit).toBe(50);
   });
@@ -87,12 +94,22 @@ describe("useGetCaseAttachments", () => {
   it("should use correct query key", () => {
     renderHook(() => useGetCaseAttachments("case-001"), { wrapper });
     const query = queryClient.getQueryCache().findAll({
-      queryKey: ["case-attachments", "case-001", 50, 0, true],
+      queryKey: ["case-attachments", "case-001", 50, 0],
     })[0];
     expect(query).toBeDefined();
   });
 
-  it("should respect limit and offset options when mock is enabled", async () => {
+  it("should respect limit and offset options", async () => {
+    const limitedResponse = {
+      ...mockAttachmentsResponse,
+      limit: 2,
+      offset: 1,
+      attachments: mockAttachmentsResponse.attachments.slice(0, 2),
+    };
+    mockAuthFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve(limitedResponse),
+    });
     const { result } = renderHook(
       () => useGetCaseAttachments("case-001", { limit: 2, offset: 1 }),
       { wrapper },
@@ -103,6 +120,6 @@ describe("useGetCaseAttachments", () => {
     expect(result.current.data?.limit).toBe(2);
     expect(result.current.data?.offset).toBe(1);
     expect(result.current.data?.attachments.length).toBeLessThanOrEqual(2);
-    expect(result.current.data?.totalRecords).toBe(mockCaseAttachments.length);
+    expect(result.current.data?.totalRecords).toBe(mockAttachmentsResponse.totalRecords);
   });
 });

apps/customer-portal/webapp/src/api/__tests__/useGetCaseComments.test.tsx

@@ -16,18 +16,17 @@
 
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import useGetCaseComments from "@api/useGetCaseComments";
-import { mockCaseComments } from "@models/mockData";
-
-vi.mock("@constants/apiConstants", async (importOriginal) => {
-  const actual =
-    await importOriginal<typeof import("@constants/apiConstants")>();
-  return {
-    ...actual,
-    API_MOCK_DELAY: 0,
-  };
-});
+
+const mockCommentsResponse = {
+  comments: [
+    { id: "c1", content: "Comment one", type: "comments", createdOn: "", createdBy: "", isEscalated: false },
+  ],
+  totalRecords: 1,
+  offset: 0,
+  limit: 20,
+};
 
 vi.mock("@asgardeo/react", () => ({
   useAsgardeo: () => ({
@@ -37,10 +36,10 @@ vi.mock("@asgardeo/react", () => ({
   }),
 }));
 
-const mockUseMockConfig = vi.fn().mockReturnValue({ isMockEnabled: true });
+const mockAuthFetch = vi.fn();
 
-vi.mock("@providers/MockConfigProvider", () => ({
-  useMockConfig: () => mockUseMockConfig(),
+vi.mock("@context/AuthApiContext", () => ({
+  useAuthApiClient: () => mockAuthFetch,
 }));
 
 vi.mock("@hooks/useLogger", () => ({
@@ -59,10 +58,20 @@ describe("useGetCaseComments", () => {
   beforeEach(() => {
     queryClient.clear();
     vi.clearAllMocks();
-    mockUseMockConfig.mockReturnValue({ isMockEnabled: true });
+    mockAuthFetch.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockCommentsResponse),
+    });
+    (window as unknown as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+      CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.test",
+    };
+  });
+
+  afterEach(() => {
+    mockAuthFetch.mockReset();
   });
 
-  it("should return mock comments when isMockEnabled is true", async () => {
+  it("should return comments from API", async () => {
     const { result } = renderHook(
       () => useGetCaseComments("project-1", "case-001"),
       { wrapper },
@@ -72,8 +81,8 @@ describe("useGetCaseComments", () => {
 
     expect(result.current.data).toBeDefined();
     expect(result.current.data?.comments).toBeDefined();
-    expect(result.current.data?.comments.length).toBe(mockCaseComments.length);
-    expect(result.current.data?.totalRecords).toBe(mockCaseComments.length);
+    expect(result.current.data?.comments.length).toBe(mockCommentsResponse.comments.length);
+    expect(result.current.data?.totalRecords).toBe(mockCommentsResponse.totalRecords);
     expect(result.current.data?.offset).toBe(0);
     expect(result.current.data?.limit).toBe(20);
   });
@@ -95,7 +104,7 @@ describe("useGetCaseComments", () => {
   it("should use correct query key", () => {
     renderHook(() => useGetCaseComments("project-1", "case-001"), { wrapper });
     const query = queryClient.getQueryCache().findAll({
-      queryKey: ["case-comments", "project-1", "case-001", 0, 20, true],
+      queryKey: ["case-comments", "project-1", "case-001", 0, 20],
     })[0];
     expect(query).toBeDefined();
   });

apps/customer-portal/webapp/src/api/__tests__/useGetCaseDetails.test.tsx

@@ -18,16 +18,12 @@ import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import useGetCaseDetails from "@api/useGetCaseDetails";
-import { mockCaseDetails } from "@models/mockData";
 
-vi.mock("@constants/apiConstants", async (importOriginal) => {
-  const actual =
-    await importOriginal<typeof import("@constants/apiConstants")>();
-  return {
-    ...actual,
-    API_MOCK_DELAY: 0,
-  };
-});
+const mockCaseDetails = {
+  id: "case-001",
+  number: "CS0001001",
+  title: "Application crashes on startup",
+};
 
 vi.mock("@asgardeo/react", () => ({
   useAsgardeo: () => ({
@@ -37,10 +33,12 @@ vi.mock("@asgardeo/react", () => ({
   }),
 }));
 
-const mockUseMockConfig = vi.fn().mockReturnValue({ isMockEnabled: true });
-
-vi.mock("@providers/MockConfigProvider", () => ({
-  useMockConfig: () => mockUseMockConfig(),
+vi.mock("@context/AuthApiContext", () => ({
+  useAuthApiClient: () =>
+    vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockCaseDetails),
+    }),
 }));
 
 vi.mock("@hooks/useLogger", () => ({
@@ -59,10 +57,12 @@ describe("useGetCaseDetails", () => {
   beforeEach(() => {
     queryClient.clear();
     vi.clearAllMocks();
-    mockUseMockConfig.mockReturnValue({ isMockEnabled: true });
+    (window as unknown as { config?: { CUSTOMER_PORTAL_BACKEND_BASE_URL?: string } }).config = {
+      CUSTOMER_PORTAL_BACKEND_BASE_URL: "https://api.test",
+    };
   });
 
-  it("should return mock case details when isMockEnabled is true", async () => {
+  it("should return case details from API", async () => {
     const { result } = renderHook(
       () => useGetCaseDetails("project-1", "case-001"),
       { wrapper },
@@ -92,7 +92,7 @@ describe("useGetCaseDetails", () => {
   it("should use correct query key", () => {
     renderHook(() => useGetCaseDetails("project-1", "case-001"), { wrapper });
     const query = queryClient.getQueryCache().findAll({
-      queryKey: ["case-details", "project-1", "case-001", true],
+      queryKey: ["case-details", "project-1", "case-001"],
     })[0];
     expect(query).toBeDefined();
   });