chore: Add tests for publisher builds page (#5027)

Author: steverydz

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-fixed-jsdom",
   testEnvironmentOptions: {
     url: "http://localhost.test",
   },

package.json

@@ -127,6 +127,8 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-fixed-jsdom": "0.0.9",
+    "msw": "2.7.0",
     "sass-loader": "16.0.4",
     "stylelint": "16.12.0",
     "stylelint-config-standard-scss": "14.0.0",

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

@@ -0,0 +1,97 @@
+import { RecoilRoot } from "recoil";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import Builds from "../Builds";
+
+jest.mock("react-router-dom", () => {
+  return {
+    ...jest.requireActual("react-router-dom"),
+    useParams: () => ({
+      snapId: "test-snap-id",
+    }),
+  };
+});
+
+const queryClient = new QueryClient();
+
+function renderComponent() {
+  return render(
+    <RecoilRoot>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Builds />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </RecoilRoot>,
+  );
+}
+
+const server = setupServer();
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  server.close();
+});
+
+describe("Build", () => {
+  test("it shows login to GitHub", async () => {
+    server.use(
+      http.get("/api/test-snap-id/repo", () => {
+        return HttpResponse.json({ data: null });
+      }),
+    );
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Login to your GitHub account to start building/),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test("it shows connected to GitHub", async () => {
+    server.use(
+      http.get("/api/test-snap-id/repo", () => {
+        return HttpResponse.json({
+          success: true,
+          message: "",
+          data: {
+            github_orgs: [
+              {
+                login: "canonical",
+                name: "Canonical",
+              },
+            ],
+            github_repository: null,
+            github_user: {
+              avatarUrl: "https://gravatar.com/avatar",
+              login: "johndoe",
+              name: "John Doe",
+            },
+          },
+        });
+      }),
+    );
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Your GitHub account is connected/),
+      ).toBeInTheDocument();
+    });
+  });
+});