chore: Add publisher members tests

Author: steverydz

static/js/publisher/pages/Members/__tests__/Members.test.tsx

@@ -0,0 +1,105 @@
+import { RecoilRoot } from "recoil";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
+import { setupServer } from "msw/node";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import {
+  RecoilObserver,
+  brandStoreRequests,
+  storesResponse,
+} from "../../../test-utils";
+import { brandStoresState } from "../../../state/brandStoreState";
+
+import Members from "../Members";
+
+import type { MutableSnapshot } from "recoil";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({
+    id: "test-store-id",
+  }),
+}));
+
+function renderComponent() {
+  const queryClient = new QueryClient();
+
+  render(
+    <RecoilRoot
+      initializeState={(snapshot: MutableSnapshot) => {
+        return snapshot.set(brandStoresState, storesResponse);
+      }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <RecoilObserver node={brandStoresState} event={jest.fn()} />
+          <Members />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </RecoilRoot>,
+  );
+}
+
+const server = setupServer();
+
+beforeAll(() => {
+  server.listen();
+});
+
+beforeEach(() => {
+  brandStoreRequests(server);
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  server.close();
+});
+
+describe("Members", () => {
+  test("shows correct store name in title", async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("heading", { level: 1, name: "Test store / Members" }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("shows members table", async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(/2 members/)).toBeInTheDocument();
+    });
+  });
+
+  test("shows invites table", async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(/2 invites/)).toBeInTheDocument();
+    });
+  });
+
+  test("filters members table", async () => {
+    renderComponent();
+
+    const user = userEvent.setup();
+
+    await waitFor(() => {
+      user.type(screen.getByLabelText("Search and filter"), "joh");
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByText("john.doe@canonical.com")).toHaveLength(2);
+      expect(screen.getAllByText("jane.doe@canonical.com")).toHaveLength(1);
+    });
+  });
+});

static/js/publisher/test-utils/brand-store-requests.ts

@@ -6,6 +6,7 @@ import {
   membersResponse,
   storesResponse,
   searchResponse,
+  invitesResponse,
 } from "./brand-store-responses";
 
 // @ts-expect-error - Unknown type
@@ -28,6 +29,12 @@ function brandStoreRequests(server) {
     }),
   );
 
+  server.use(
+    http.get("/api/store/test-store-id/invites", () => {
+      return HttpResponse.json(invitesResponse);
+    }),
+  );
+
   server.use(
     http.get("/api/stores", () => {
       return HttpResponse.json({

static/js/publisher/test-utils/brand-store-responses.ts

@@ -1,4 +1,4 @@
-import type { Snap, Member, Store } from "../types/shared";
+import type { Snap, Member, Store, Invite } from "../types/shared";
 
 export const accountResponse = {
   publisher: {
@@ -86,6 +86,13 @@ export const membersResponse = [
     roles: ["admin", "review", "view", "access"],
     username: "johndoe",
   },
+  {
+    displayname: "Jane Doe",
+    email: "jane.doe@canonical.com",
+    id: "jane-doe-id",
+    roles: ["admin"],
+    username: "janedoe",
+  },
 ] as Member[];
 
 export const storesResponse = [
@@ -126,3 +133,18 @@ export const searchResponse = [
     ],
   },
 ] as Snap[];
+
+export const invitesResponse = [
+  {
+    email: "john.doe@canonical.com",
+    "expiration-date": "2025-04-13T12:40:55Z",
+    roles: ["admin"],
+    status: "Expired",
+  },
+  {
+    email: "jane.doe@canonical.com",
+    "expiration-date": "2025-04-13T12:40:55Z",
+    roles: ["view"],
+    status: "Pending",
+  },
+] as Invite[];