WD-17065 - chore(tests): add tests for the identity list

ui/src/pages/identities/DeleteIdentityBtn/index.ts

@@ -1 +1,2 @@
 export { default } from "./DeleteIdentityBtn";
+export { TestId as DeleteIdentityBtnTestId } from "./test-types";

ui/src/pages/identities/DeleteIdentityBtn/test-types.ts

@@ -0,0 +1,3 @@
+export enum TestId {
+  COMPONENT = "DeleteIdentityBtn",
+}

ui/src/pages/identities/IdentityList/IdentityList.test.tsx

@@ -0,0 +1,95 @@
+import { screen, within } from "@testing-library/dom";
+import MockAdapter from "axios-mock-adapter";
+import userEvent from "@testing-library/user-event";
+import { faker } from "@faker-js/faker";
+
+import { axiosInstance } from "api/axios";
+import { customWithin } from "test/queries/within";
+import { isoTimeToString } from "util/date";
+import { LoaderTestId } from "components/Loader";
+import { mockIdentity } from "test/mocks/identities";
+import { mockPaginatedResponse } from "test/mocks/responses";
+import { PAGE_SIZE } from "util/api";
+import { renderComponent } from "test/utils";
+
+import { DeleteIdentityBtnTestId } from "../DeleteIdentityBtn";
+
+import { Label } from "./types";
+import IdentityList from "./IdentityList";
+import { Location } from "react-router-dom";
+import { panels } from "util/usePanelParams";
+
+const mock = new MockAdapter(axiosInstance);
+
+beforeEach(() => {
+  mock.reset();
+  mock
+    .onGet(`/identities?page_token=&page_size=${PAGE_SIZE}`)
+    .reply(200, mockPaginatedResponse([], { _meta: {} }));
+});
+
+test("displays loading state", () => {
+  renderComponent(<IdentityList />);
+  expect(screen.getByTestId(LoaderTestId.COMPONENT)).toBeInTheDocument();
+});
+
+test("displays empty state", async () => {
+  renderComponent(<IdentityList />);
+  expect(
+    await within(await screen.findByRole("grid")).findByText(Label.NO_DATA),
+  ).toBeInTheDocument();
+});
+
+test("displays identity rows", async () => {
+  const createdAt = faker.date.anytime().toISOString();
+  const identity = mockIdentity({
+    created_at: createdAt,
+  });
+  const identities = [identity];
+  mock
+    .onGet(`/identities?page_token=&size=${PAGE_SIZE}`)
+    .reply(200, mockPaginatedResponse(identities, { _meta: {} }));
+  renderComponent(<IdentityList />);
+  const row = await screen.findByRole("row", {
+    name: new RegExp(identity.id),
+  });
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_ID, { role: "rowheader" }),
+  ).toHaveTextContent(identity.id);
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_SCHEMA, {
+      role: "gridcell",
+      hasRowHeader: true,
+    }),
+  ).toHaveTextContent(identity.schema_id);
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_CREATED_AT, {
+      role: "gridcell",
+      hasRowHeader: true,
+    }),
+  ).toHaveTextContent(isoTimeToString(createdAt));
+});
+
+test("opens add identity panel", async () => {
+  let location: Location | null = null;
+  renderComponent(<IdentityList />, {
+    setLocation: (newLocation) => {
+      location = newLocation;
+    },
+  });
+  await userEvent.click(screen.getByRole("button", { name: Label.ADD }));
+  expect((location as Location | null)?.search).toBe(
+    `?panel=${panels.identityCreate}`,
+  );
+});
+
+test("displays delete button", async () => {
+  const identities = [mockIdentity()];
+  mock
+    .onGet(`/identities?page_token=&size=${PAGE_SIZE}`)
+    .reply(200, mockPaginatedResponse(identities, { _meta: {} }));
+  renderComponent(<IdentityList />);
+  expect(
+    await screen.findByTestId(DeleteIdentityBtnTestId.COMPONENT),
+  ).toBeInTheDocument();
+});

ui/src/pages/identities/IdentityList/IdentityList.tsx

@@ -15,6 +15,7 @@ import usePanelParams from "util/usePanelParams";
 import { usePagination } from "util/usePagination";
 import Pagination from "components/Pagination";
 import DeleteIdentityBtn from "pages/identities/DeleteIdentityBtn";
+import { Label } from "./types";
 
 const IdentityList: FC = () => {
   const panelParams = usePanelParams();
@@ -36,7 +37,7 @@ const IdentityList: FC = () => {
             appearance="positive"
             onClick={panelParams.openIdentityCreate}
           >
-            Add identity
+            {Label.ADD}
           </Button>
         </div>
       </div>
@@ -48,39 +49,32 @@ const IdentityList: FC = () => {
               className="u-table-layout--auto"
               responsive
               headers={[
-                { content: "Id" },
-                { content: "Schema" },
-                { content: "Created at" },
-                { content: "Actions" },
+                { content: Label.HEADER_ID },
+                { content: Label.HEADER_SCHEMA },
+                { content: Label.HEADER_CREATED_AT },
+                { content: Label.HEADER_ACTIONS },
               ]}
               rows={response?.data.map((identity) => {
                 return {
                   columns: [
                     {
                       content: identity.traits?.email ?? identity.id,
                       role: "rowheader",
-                      "aria-label": "Id",
                     },
                     {
                       content: identity.schema_id,
-                      role: "rowheader",
-                      "aria-label": "Schema",
                     },
                     {
                       content: identity.created_at
                         ? isoTimeToString(identity.created_at)
                         : "",
-                      role: "rowheader",
-                      "aria-label": "Created at",
                     },
                     {
                       content: (
                         <>
                           <DeleteIdentityBtn identity={identity} />
                         </>
                       ),
-                      role: "rowheader",
-                      "aria-label": "Actions",
                     },
                   ],
                 };
@@ -89,7 +83,7 @@ const IdentityList: FC = () => {
                 isLoading ? (
                   <Loader text="Loading identities..." />
                 ) : (
-                  "No data to display"
+                  Label.NO_DATA
                 )
               }
             />

ui/src/pages/identities/IdentityList/types.ts

@@ -0,0 +1,8 @@
+export enum Label {
+  ADD = "Add identity",
+  HEADER_ACTIONS = "Actions",
+  HEADER_CREATED_AT = "Created at",
+  HEADER_ID = "Id",
+  HEADER_SCHEMA = "Schema",
+  NO_DATA = "No data to display",
+}