chore: add tests to the get upgrade info hook

web/package.json

@@ -96,7 +96,9 @@
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.4",
     "mini-css-extract-plugin": "^2.9.1",
+    "msw": "^2.4.10",
     "object-assign": "^4.1.1",
     "os-browserify": "^0.3.0",
     "path": "^0.12.7",
@@ -192,6 +194,11 @@
     "not dead"
   ],
   "jest": {
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        ""
+      ]
+    },
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(scss|css|less)$": "<rootDir>/__mocks__/styleMock.js",

web/src/components/upgrade_service/hooks/getUpgradeInfo.test.jsx

@@ -0,0 +1,110 @@
+/**
+ * @jest-environment jest-fixed-jsdom
+ */
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook } from "@testing-library/react-hooks";
+import { useGetUpgradeInfo } from "./getUpgradeInfo";
+
+describe("useGetUpgradeInfo", () => {
+  const api = "http://test-api";
+  let server;
+  let queryClient;
+  let wrapper;
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    server.close();
+  });
+
+  beforeEach(() => {
+    queryClient = new QueryClient();
+    wrapper = function wrapperFunc({ children }) {
+      return (
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      );
+    };
+  });
+
+  it("normal response", async () => {
+    const slug = "my-test-app";
+    server = setupServer(
+      http.get(`${api}/upgrade-service/app/${slug}`, () => {
+        console.log("On handler");
+        return HttpResponse.json({
+          isConfigurable: true,
+          hasPreflight: false,
+        });
+      })
+    );
+    server.listen();
+
+    const { result, waitFor } = renderHook(useGetUpgradeInfo, {
+      initialProps: { api, slug },
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    expect(result.current.data.isConfigurable).toBe.true;
+    expect(result.current.data.hasPreflight).toBe.false;
+  });
+
+  it("non JSON response throws an error and is handled by the hook", async () => {
+    const slug = "my-test-app";
+    server = setupServer(
+      http.get(`${api}/upgrade-service/app/${slug}`, () => {
+        return HttpResponse.text("this should produce an error");
+      })
+    );
+    server.listen();
+
+    const { result, waitFor } = renderHook(useGetUpgradeInfo, {
+      initialProps: { api, slug, retry: 0 },
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isError);
+    expect(result.current.error).toBeDefined();
+  });
+
+  it("4xx response throws an error and is handled by the hook", async () => {
+    const slug = "my-test-app";
+    server = setupServer(
+      http.get(`${api}/upgrade-service/app/${slug}`, () => {
+        return new HttpResponse("Not found", { status: 404 });
+      })
+    );
+    server.listen();
+
+    const { result, waitFor } = renderHook(useGetUpgradeInfo, {
+      initialProps: { api, slug, retry: 0 },
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isError);
+    expect(result.current.error).toBeDefined();
+  });
+
+  it("5xx response throws an error and is handled by the hook", async () => {
+    const slug = "my-test-app";
+    server = setupServer(
+      http.get(`${api}/upgrade-service/app/${slug}`, () => {
+        return new HttpResponse("Something is really broken", { status: 503 });
+      })
+    );
+    server.listen();
+
+    const { result, waitFor } = renderHook(useGetUpgradeInfo, {
+      initialProps: { api, slug, retry: 0 },
+      wrapper,
+    });
+
+    await waitFor(() => result.current.isError);
+    expect(result.current.error).toBeDefined();
+  });
+});

web/src/components/upgrade_service/hooks/getUpgradeInfo.tsx

@@ -5,21 +5,23 @@ type UpgradeInfoResponse = {
   hasPreflight: boolean;
 };
 
+type UpgradeInfoParams = {
+  api?: string;
+  retry?: number;
+  slug: string;
+};
+
 async function getUpgradeInfo({
+  api = process.env.API_ENDPOINT,
   slug,
-}: {
-  slug: string;
-}): Promise<UpgradeInfoResponse> {
-  const jsonResponse = await fetch(
-    `${process.env.API_ENDPOINT}/upgrade-service/app/${slug}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      credentials: "include",
-    }
-  );
+}: UpgradeInfoParams): Promise<UpgradeInfoResponse> {
+  const jsonResponse = await fetch(`${api}/upgrade-service/app/${slug}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
 
   if (!jsonResponse.ok) {
     throw new Error(
@@ -37,10 +39,11 @@ async function getUpgradeInfo({
   }
 }
 
-function useGetUpgradeInfo({ slug }: { slug: string }) {
+function useGetUpgradeInfo({ slug, api, retry = 3 }: UpgradeInfoParams) {
   return useQuery({
-    queryFn: () => getUpgradeInfo({ slug }),
+    queryFn: () => getUpgradeInfo({ slug, api }),
     queryKey: ["upgrade-info", slug],
+    retry,
     onError: (err: Error) => {
       console.log(err);
     },