chore(tests): add tests for the client list

ui/src/components/EditPanelButton/EditPanelButton.tsx

@@ -5,14 +5,15 @@ import usePanelParams from "util/usePanelParams";
 
 import { Label, Props } from "./types";
 
-const EditPanelButton: FC<Props> = ({ openPanel }: Props) => {
+const EditPanelButton: FC<Props> = ({ openPanel, ...props }: Props) => {
   const panelParams = usePanelParams();
 
   return (
     <Button
       className="u-no-margin--bottom"
       hasIcon
       onClick={() => openPanel(panelParams)}
+      {...props}
     >
       <Icon name="edit" />
       <span>{Label.EDIT}</span>

ui/src/pages/clients/ClientList/ClientList.test.tsx

@@ -0,0 +1,97 @@
+import { screen, within } from "@testing-library/dom";
+import MockAdapter from "axios-mock-adapter";
+import userEvent from "@testing-library/user-event";
+
+import { axiosInstance } from "api/axios";
+import { customWithin } from "test/queries/within";
+import { isoTimeToString } from "util/date";
+import { LoaderTestId } from "components/Loader";
+import { mockClient } from "test/mocks/clients";
+import { mockPaginatedResponse } from "test/mocks/responses";
+import { PAGE_SIZE } from "util/api";
+import { renderComponent } from "test/utils";
+
+import { DeleteClientBtnTestId } from "../DeleteClientBtn";
+import { EditClientBtnTestId } from "../EditClientBtn";
+
+import { Label } from "./types";
+import ClientList from "./ClientList";
+import { Location } from "react-router-dom";
+import { panels } from "util/usePanelParams";
+
+const mock = new MockAdapter(axiosInstance);
+
+beforeEach(() => {
+  mock.reset();
+  mock
+    .onGet(`/clients?page_token=&page_size=${PAGE_SIZE}`)
+    .reply(200, mockPaginatedResponse([], { _meta: {} }));
+});
+
+test("displays loading state", () => {
+  renderComponent(<ClientList />);
+  expect(screen.getByTestId(LoaderTestId.COMPONENT)).toBeInTheDocument();
+});
+
+test("displays empty state", async () => {
+  renderComponent(<ClientList />);
+  expect(
+    await within(await screen.findByRole("grid")).findByText(Label.NO_DATA),
+  ).toBeInTheDocument();
+});
+
+test("displays client rows", async () => {
+  const client = mockClient();
+  const clients = [client];
+  mock
+    .onGet(`/clients?page_token=&size=${PAGE_SIZE}`)
+    .reply(200, mockPaginatedResponse(clients, { _meta: {} }));
+  renderComponent(<ClientList />);
+  const row = await screen.findByRole("row", {
+    name: new RegExp(client.client_id),
+  });
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_ID, { role: "rowheader" }),
+  ).toHaveTextContent(client.client_id);
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_NAME, {
+      role: "gridcell",
+      hasRowHeader: true,
+    }),
+  ).toHaveTextContent(client.client_name);
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_DATE, {
+      role: "gridcell",
+      hasRowHeader: true,
+    }),
+  ).toHaveTextContent(
+    `Created: ${isoTimeToString(client.created_at)}Updated: ${isoTimeToString(client.updated_at)}`,
+  );
+});
+
+test("opens add client panel", async () => {
+  let location: Location | null = null;
+  renderComponent(<ClientList />, {
+    setLocation: (newLocation) => {
+      location = newLocation;
+    },
+  });
+  await userEvent.click(screen.getByRole("button", { name: Label.ADD }));
+  expect((location as Location | null)?.search).toBe(
+    `?panel=${panels.clientCreate}`,
+  );
+});
+
+test("displays edit and delete buttons", async () => {
+  const clients = [mockClient()];
+  mock
+    .onGet(`/clients?page_token=&size=${PAGE_SIZE}`)
+    .reply(200, mockPaginatedResponse(clients, { _meta: {} }));
+  renderComponent(<ClientList />);
+  expect(
+    await screen.findByTestId(EditClientBtnTestId.COMPONENT),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByTestId(DeleteClientBtnTestId.COMPONENT),
+  ).toBeInTheDocument();
+});

ui/src/pages/clients/ClientList/ClientList.tsx

@@ -16,6 +16,7 @@ import DeleteClientBtn from "pages/clients/DeleteClientBtn";
 import Loader from "components/Loader";
 import Pagination from "components/Pagination";
 import { usePagination } from "util/usePagination";
+import { Label } from "./types";
 
 const ClientList: FC = () => {
   const panelParams = usePanelParams();
@@ -34,7 +35,7 @@ const ClientList: FC = () => {
         </div>
         <div className="p-panel__controls">
           <Button appearance="positive" onClick={panelParams.openClientCreate}>
-            Add client
+            {Label.ADD}
           </Button>
         </div>
       </div>
@@ -46,23 +47,20 @@ const ClientList: FC = () => {
               className="u-table-layout--auto"
               responsive
               headers={[
-                { content: "Id" },
-                { content: "Name" },
-                { content: "Date" },
-                { content: "Actions" },
+                { content: Label.HEADER_ID },
+                { content: Label.HEADER_NAME },
+                { content: Label.HEADER_DATE },
+                { content: Label.HEADER_ACTIONS },
               ]}
               rows={response?.data.map((client) => {
                 return {
                   columns: [
                     {
                       content: client.client_id,
                       role: "rowheader",
-                      "aria-label": "Id",
                     },
                     {
                       content: client.client_name,
-                      role: "rowheader",
-                      "aria-label": "Name",
                     },
                     {
                       content: (
@@ -75,8 +73,6 @@ const ClientList: FC = () => {
                           </div>
                         </>
                       ),
-                      role: "rowheader",
-                      "aria-label": "Created",
                     },
                     {
                       content: (
@@ -85,18 +81,12 @@ const ClientList: FC = () => {
                           <DeleteClientBtn client={client} />
                         </>
                       ),
-                      role: "rowheader",
-                      "aria-label": "Actions",
                     },
                   ],
                 };
               })}
               emptyStateMsg={
-                isLoading ? (
-                  <Loader text="Loading clients..." />
-                ) : (
-                  "No data to display"
-                )
+                isLoading ? <Loader text="Loading clients..." /> : Label.NO_DATA
               }
             />
             <Pagination response={response} />

ui/src/pages/clients/ClientList/types.ts

@@ -0,0 +1,8 @@
+export enum Label {
+  ADD = "Add client",
+  HEADER_ACTIONS = "Actions",
+  HEADER_DATE = "Date",
+  HEADER_ID = "Id",
+  HEADER_NAME = "Name",
+  NO_DATA = "No data to display",
+}

ui/src/pages/clients/DeleteClientBtn/index.ts

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

ui/src/pages/clients/DeleteClientBtn/test-types.ts

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

ui/src/pages/clients/EditClientBtn/EditClientBtn.tsx

@@ -1,6 +1,9 @@
 import { FC } from "react";
 
 import EditPanelButton from "components/EditPanelButton";
+import { testId } from "test/utils";
+
+import { TestId } from "./test-types";
 
 interface Props {
   clientId: string;
@@ -10,6 +13,7 @@ const EditClientBtn: FC<Props> = ({ clientId }) => {
   return (
     <EditPanelButton
       openPanel={(panelParams) => panelParams.openClientEdit(clientId)}
+      {...testId(TestId.COMPONENT)}
     />
   );
 };

ui/src/pages/clients/EditClientBtn/index.ts

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

ui/src/pages/clients/EditClientBtn/test-types.ts

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

ui/src/test/mocks/clients.ts

@@ -11,7 +11,7 @@ export const mockClient = (overrides?: Partial<Client>): Client => ({
   client_secret_expires_at: faker.number.int(),
   client_uri: faker.word.sample(),
   contacts: [],
-  created_at: faker.word.sample(),
+  created_at: faker.date.anytime().toISOString(),
   grant_types: [],
   logo_uri: faker.word.sample(),
   owner: faker.word.sample(),
@@ -23,7 +23,7 @@ export const mockClient = (overrides?: Partial<Client>): Client => ({
   subject_type: faker.word.sample(),
   token_endpoint_auth_method: faker.word.sample(),
   tos_uri: faker.word.sample(),
-  updated_at: faker.word.sample(),
+  updated_at: faker.date.anytime().toISOString(),
   userinfo_signed_response_alg: faker.word.sample(),
   ...overrides,
 });