From d5bd4801cc154719a170857dec0fae140270d297 Mon Sep 17 00:00:00 2001 From: SeSo Date: Tue, 19 Nov 2024 15:52:10 -0800 Subject: [PATCH] test: add frontend tests Signed-off-by: SeSo --- .../UserOperatorDataGrid.test.tsx | 116 ++++++++++++++++++ .../userOperators/UserOperatorsPage.test.tsx | 46 +++++++ bciers/libs/testConfig/src/mocks.ts | 2 + 3 files changed, 164 insertions(+) create mode 100644 bciers/apps/administration/tests/components/userOperators/UserOperatorDataGrid.test.tsx create mode 100644 bciers/apps/administration/tests/components/userOperators/UserOperatorsPage.test.tsx diff --git a/bciers/apps/administration/tests/components/userOperators/UserOperatorDataGrid.test.tsx b/bciers/apps/administration/tests/components/userOperators/UserOperatorDataGrid.test.tsx new file mode 100644 index 0000000000..b397c29162 --- /dev/null +++ b/bciers/apps/administration/tests/components/userOperators/UserOperatorDataGrid.test.tsx @@ -0,0 +1,116 @@ +import { render, screen, within } from "@testing-library/react"; +import { useRouter, useSearchParams } from "@bciers/testConfig/mocks"; +import { UserOperatorStatus } from "@bciers/utils/src/enums"; +import UserOperatorDataGrid from "@/administration/app/components/userOperators/UserOperatorDataGrid"; +import { expect } from "vitest"; + +useRouter.mockReturnValue({ + query: {}, + replace: vi.fn(), +}); + +useSearchParams.mockReturnValue({ + get: vi.fn(), +}); + +const mockResponse = { + rows: [ + { + id: 1, + user_friendly_id: "1", + status: UserOperatorStatus.APPROVED, + user__first_name: "John", + user__last_name: "Doe", + user__email: "john.doe@example.com", + user__bceid_business_name: "John Doe Inc.", + operator__legal_name: "FakeOperator 1", + }, + { + id: 2, + user_friendly_id: "2", + status: UserOperatorStatus.PENDING, + user__first_name: "Jane", + user__last_name: "Smith", + user__email: "jane.smith@example.com", + user__bceid_business_name: "Jane Smith Inc.", + operator__legal_name: "FakeOperator 2", + }, + { + id: 3, + user_friendly_id: "3", + status: UserOperatorStatus.DECLINED, + user__first_name: "Alice", + user__last_name: "Brown", + user__email: "alice.brown@example.com", + user__bceid_business_name: "Alice Brown Inc.", + operator__legal_name: "FakeOperator 3", + }, + { + id: 4, + user_friendly_id: "4", + status: UserOperatorStatus.APPROVED, + user__first_name: "Bob", + user__last_name: "White", + user__email: "bob.white@example.com", + user__bceid_business_name: "Bob White Inc.", + operator__legal_name: "FakeOperator 4", + }, + ], + row_count: 4, +}; + +describe("UserOperatorDataGrid component", () => { + beforeEach(async () => { + vi.clearAllMocks(); + }); + it("renders the UserOperatorDataGrid grid", async () => { + render(); + + // correct headers + expect( + screen.getByRole("columnheader", { name: "Request ID" }), + ).toBeVisible(); + expect( + screen.getByRole("columnheader", { name: "First Name" }), + ).toBeVisible(); + expect( + screen.getByRole("columnheader", { name: "Last Name" }), + ).toBeVisible(); + expect(screen.getByRole("columnheader", { name: "Email" })).toBeVisible(); + expect( + screen.getByRole("columnheader", { name: "BCeID Business Name" }), + ).toBeVisible(); + expect( + screen.getByRole("columnheader", { name: "Operator" }), + ).toBeVisible(); + expect(screen.getByRole("columnheader", { name: "Status" })).toBeVisible(); + + expect(screen.getByRole("columnheader", { name: "Actions" })).toBeVisible(); + expect(screen.queryAllByPlaceholderText(/Search/i)).toHaveLength(7); + + // Check data displays + const allRows = screen.getAllByRole("row"); + expect(allRows).toHaveLength(6); // 4 rows + 1 header + 1 filter row + const firstUserOperatorRow = allRows[2]; // first row of data + expect(within(firstUserOperatorRow).getByText("1")).toBeVisible(); + expect(within(firstUserOperatorRow).getByText("John")).toBeVisible(); + expect(within(firstUserOperatorRow).getByText("Doe")).toBeVisible(); + expect( + within(firstUserOperatorRow).getByText(/admin access/i), + ).toBeVisible(); + expect( + within(firstUserOperatorRow).getByText(/john.doe@example.com/i), + ).toBeVisible(); + expect( + within(firstUserOperatorRow).getByText(/John Doe Inc./i), + ).toBeVisible(); + expect( + within(firstUserOperatorRow).getByText(/FakeOperator 1/i), + ).toBeVisible(); + expect(screen.getAllByText(/view details/i)).toHaveLength(4); + expect(screen.getAllByText(/view details/i)[0]).toHaveAttribute( + "href", + "TBD", + ); + }); +}); diff --git a/bciers/apps/administration/tests/components/userOperators/UserOperatorsPage.test.tsx b/bciers/apps/administration/tests/components/userOperators/UserOperatorsPage.test.tsx new file mode 100644 index 0000000000..5bba41ebeb --- /dev/null +++ b/bciers/apps/administration/tests/components/userOperators/UserOperatorsPage.test.tsx @@ -0,0 +1,46 @@ +import { render, screen } from "@testing-library/react"; +import { + getUserOperatorsPageData, + useSearchParams, +} from "@bciers/testConfig/mocks"; +import UserOperatorsPage from "@/administration/app/components/userOperators/UserOperatorsPage"; +import { expect } from "vitest"; + +useSearchParams.mockReturnValue({ + get: vi.fn(), +}); + +vi.mock( + "@/administration/app/components/userOperators/getUserOperatorsPageData", + () => ({ + default: getUserOperatorsPageData, + }), +); + +describe("User Operators (External Access Requests) Page", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders UserOperatorsPage with the note on top of the page", async () => { + getUserOperatorsPageData.mockReturnValueOnce({ + data: [], + row_count: 0, + }); + render(await UserOperatorsPage({ searchParams: {} })); + expect(screen.getByTestId("note")).toBeVisible(); + expect( + screen.getByText( + /once "approved", the user will have access to their operator dashboard with full admin permissions,and can grant access and designate permissions to other authorized users there\./i, + ), + ).toBeVisible(); + expect(screen.queryByRole("grid")).toBeInTheDocument(); + expect(screen.getByText(/No records found/i)).toBeVisible(); + }); + it("renders the appropriate error component when getUserOperatorsPageData fails", async () => { + getUserOperatorsPageData.mockReturnValueOnce(undefined); + expect(async () => + render(await UserOperatorsPage({ searchParams: {} })), + ).rejects.toThrow("Failed to retrieve admin requests."); + }); +}); diff --git a/bciers/libs/testConfig/src/mocks.ts b/bciers/libs/testConfig/src/mocks.ts index e71a39018b..7e44b03006 100644 --- a/bciers/libs/testConfig/src/mocks.ts +++ b/bciers/libs/testConfig/src/mocks.ts @@ -35,6 +35,7 @@ const useSession = vi.fn(); const auth = vi.fn(); const fetchOperationsPageData = vi.fn(); const fetchOperatorsPageData = vi.fn(); +const getUserOperatorsPageData = vi.fn(); export { actionHandler, @@ -48,5 +49,6 @@ export { useSession, fetchOperationsPageData, fetchOperatorsPageData, + getUserOperatorsPageData, notFound, };