chore(tests): add tests for the provider 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/providers/DeleteProviderBtn/index.ts

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

ui/src/pages/providers/DeleteProviderBtn/test-types.ts

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

ui/src/pages/providers/EditProviderBtn/EditProviderBtn.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 {
   providerId: string;
@@ -10,6 +13,7 @@ const EditProviderBtn: FC<Props> = ({ providerId }) => {
   return (
     <EditPanelButton
       openPanel={(panelParams) => panelParams.openProviderEdit(providerId)}
+      {...testId(TestId.COMPONENT)}
     />
   );
 };

ui/src/pages/providers/EditProviderBtn/index.ts

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

ui/src/pages/providers/EditProviderBtn/test-types.ts

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

ui/src/pages/providers/ProviderList/ProviderList.test.tsx

@@ -0,0 +1,76 @@
+import { screen } 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 { mockIdentityProvider } from "test/mocks/providers";
+import { mockPaginatedResponse } from "test/mocks/responses";
+import { renderComponent } from "test/utils";
+
+import { DeleteProviderBtnTestId } from "../DeleteProviderBtn";
+import { EditProviderBtnTestId } from "../EditProviderBtn";
+
+import { Label } from "./types";
+import ProviderList from "./ProviderList";
+import { Location } from "react-router-dom";
+import { panels } from "util/usePanelParams";
+
+const mock = new MockAdapter(axiosInstance);
+
+beforeEach(() => {
+  mock.reset();
+  mock.onGet("/idps").reply(200, mockPaginatedResponse([], { _meta: {} }));
+});
+
+test("displays provider rows", async () => {
+  const provider = {
+    id: faker.word.sample(),
+    provider: faker.word.sample(),
+  };
+  const providers = [mockIdentityProvider(provider)];
+  mock
+    .onGet("/idps")
+    .reply(200, mockPaginatedResponse(providers, { _meta: {} }));
+  renderComponent(<ProviderList />);
+  const row = await screen.findByRole("row", {
+    name: new RegExp(provider.id),
+  });
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_NAME, { role: "rowheader" }),
+  ).toHaveTextContent(provider.id);
+  expect(
+    customWithin(row).getCellByHeader(Label.HEADER_PROVIDER, {
+      role: "gridcell",
+      hasRowHeader: true,
+    }),
+  ).toHaveTextContent(provider.provider);
+});
+
+test("opens add provider panel", async () => {
+  let location: Location | null = null;
+  renderComponent(<ProviderList />, {
+    setLocation: (newLocation) => {
+      location = newLocation;
+    },
+  });
+  await userEvent.click(screen.getByRole("button", { name: Label.ADD }));
+  expect((location as Location | null)?.search).toBe(
+    `?panel=${panels.providerCreate}`,
+  );
+});
+
+test("displays edit and delete buttons", async () => {
+  const providers = [mockIdentityProvider()];
+  mock
+    .onGet("/idps")
+    .reply(200, mockPaginatedResponse(providers, { _meta: {} }));
+  renderComponent(<ProviderList />);
+  expect(
+    await screen.findByTestId(EditProviderBtnTestId.COMPONENT),
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByTestId(DeleteProviderBtnTestId.COMPONENT),
+  ).toBeInTheDocument();
+});

ui/src/pages/providers/ProviderList/ProviderList.tsx

@@ -12,6 +12,7 @@ import { fetchProviders } from "api/provider";
 import usePanelParams from "util/usePanelParams";
 import EditProviderBtn from "pages/providers/EditProviderBtn";
 import DeleteProviderBtn from "pages/providers/DeleteProviderBtn";
+import { Label } from "./types";
 
 const ProviderList: FC = () => {
   const panelParams = usePanelParams();
@@ -34,7 +35,7 @@ const ProviderList: FC = () => {
             appearance="positive"
             onClick={panelParams.openProviderCreate}
           >
-            Add ID provider
+            {Label.ADD}
           </Button>
         </div>
       </div>
@@ -47,22 +48,19 @@ const ProviderList: FC = () => {
               sortable
               responsive
               headers={[
-                { content: "Name", sortKey: "id" },
-                { content: "Provider", sortKey: "provider" },
-                { content: "Actions" },
+                { content: Label.HEADER_NAME, sortKey: "id" },
+                { content: Label.HEADER_PROVIDER, sortKey: "provider" },
+                { content: Label.HEADER_ACTIONS },
               ]}
               rows={providers?.data.map((provider) => {
                 return {
                   columns: [
                     {
                       content: provider.id,
                       role: "rowheader",
-                      "aria-label": "Name",
                     },
                     {
                       content: provider.provider,
-                      role: "rowheader",
-                      "aria-label": "Provider",
                     },
                     {
                       content: (
@@ -71,8 +69,6 @@ const ProviderList: FC = () => {
                           <DeleteProviderBtn provider={provider} />
                         </>
                       ),
-                      role: "rowheader",
-                      "aria-label": "Actions",
                     },
                   ],
                   sortData: {

ui/src/pages/providers/ProviderList/types.ts

@@ -0,0 +1,6 @@
+export enum Label {
+  ADD = "Add ID provider",
+  HEADER_ACTIONS = "Actions",
+  HEADER_NAME = "Name",
+  HEADER_PROVIDER = "Provider",
+}