refactor: solid leaderboards (@fehmer)

frontend/__tests__/components/common/AsyncContent.spec.tsx

@@ -1,5 +1,10 @@
 import { render, screen, waitFor } from "@solidjs/testing-library";
-import { createResource, Resource, Show } from "solid-js";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/solid-query";
+import { JSXElement, Show } from "solid-js";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import AsyncContent from "../../../src/ts/components/common/AsyncContent";
@@ -11,14 +16,12 @@ describe("AsyncContent", () => {
   beforeEach(() => {
     addNotificationMock.mockClear();
   });
-  describe("with resource", () => {
-    it("renders loading state while resource is pending", () => {
-      const [resource] = createResource(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        return "data";
-      });
 
-      const { container } = renderWithResource(resource);
+  describe("with single query", () => {
+    const queryClient = new QueryClient();
+
+    it("renders loading state while pending", () => {
+      const { container } = renderWithQuery({ result: "data" });
 
       const preloader = container.querySelector(".preloader");
       expect(preloader).toBeInTheDocument();
@@ -31,24 +34,64 @@ describe("AsyncContent", () => {
       );
     });
 
-    it("renders data when resource resolves", async () => {
-      const [resource] = createResource(async () => {
-        return "Test Data";
+    it("renders on resolve", async () => {
+      renderWithQuery({ result: "Test Data" });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
       });
+    });
 
-      renderWithResource(resource);
+    it("renders default error message on fail", async () => {
+      renderWithQuery({ result: new Error("Test error") });
+
+      await waitFor(() => {
+        expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "An error occurred: Test error",
+        -1,
+      );
+    });
+
+    it("renders custom error message on fail", async () => {
+      renderWithQuery(
+        { result: new Error("Test error") },
+        { errorMessage: "Custom error message" },
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "Custom error message: Test error",
+        -1,
+      );
+    });
+
+    it("renders on pending if alwaysShowContent", async () => {
+      const { container } = renderWithQuery({ result: "Test Data" });
 
       await waitFor(() => {
         expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
       });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
     });
 
-    it("renders error message when resource fails", async () => {
-      const [resource] = createResource(async () => {
-        throw new Error("Test error");
+    it("renders on resolve if alwaysShowContent", async () => {
+      renderWithQuery({ result: "Test Data" }, { alwaysShowContent: true });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
       });
+    });
 
-      renderWithResource(resource, "Custom error message");
+    it("renders on fail if alwaysShowContent", async () => {
+      renderWithQuery(
+        { result: new Error("Test error") },
+        { errorMessage: "Custom error message" },
+      );
 
       await waitFor(() => {
         expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
@@ -59,12 +102,89 @@ describe("AsyncContent", () => {
       );
     });
 
-    it("renders default error message when no custom message provided", async () => {
-      const [resource] = createResource(async () => {
-        throw new Error("Test error");
+    function renderWithQuery(
+      query: {
+        result: string | Error;
+      },
+      options?: {
+        errorMessage?: string;
+        alwaysShowContent?: true;
+      },
+    ): {
+      container: HTMLElement;
+    } {
+      const wrapper = (): JSXElement => {
+        const myQuery = useQuery(() => ({
+          queryKey: ["test", Math.random() * 1000],
+          queryFn: async () => {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            if (query.result instanceof Error) {
+              throw query.result;
+            }
+            return query.result;
+          },
+          retry: 0,
+        }));
+
+        return (
+          <AsyncContent
+            query={myQuery}
+            errorMessage={options?.errorMessage}
+            alwaysShowContent={options?.alwaysShowContent}
+          >
+            {(data: string | undefined) => (
+              <>
+                foo
+                <Show when={data !== undefined} fallback={<div>no data</div>}>
+                  <div data-testid="content">{data}</div>
+                </Show>
+              </>
+            )}
+          </AsyncContent>
+        );
+      };
+      const { container } = render(() => (
+        <QueryClientProvider client={queryClient}>
+          {wrapper()}
+        </QueryClientProvider>
+      ));
+
+      return {
+        container,
+      };
+    }
+  });
+
+  describe("with multiple queries", () => {
+    const queryClient = new QueryClient();
+
+    it("renders loading state while pending", () => {
+      const { container } = renderWithQuery({ first: "data", second: "data" });
+
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).toBeInTheDocument();
+      expect(preloader).toHaveClass("preloader");
+      expect(preloader?.querySelector("i")).toHaveClass(
+        "fas",
+        "fa-fw",
+        "fa-spin",
+        "fa-circle-notch",
+      );
+    });
+
+    it("renders on resolve", async () => {
+      renderWithQuery({ first: "First Data", second: "Second Data" });
+
+      await waitFor(() => {
+        expect(screen.getByTestId("first")).toHaveTextContent("First Data");
       });
+      await waitFor(() => {
+        expect(screen.getByTestId("second")).toHaveTextContent("Second Data");
+      });
+    });
 
-      renderWithResource(resource);
+    it("renders default error message on fail", async () => {
+      renderWithQuery({ first: "data", second: new Error("Test error") });
 
       await waitFor(() => {
         expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
@@ -75,42 +195,56 @@ describe("AsyncContent", () => {
       );
     });
 
-    it("renders content while resource is pending if alwaysShowContent", () => {
-      const [resource] = createResource(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        return "data";
+    it("renders custom error message on fail", async () => {
+      renderWithQuery(
+        { first: new Error("Test error"), second: new Error("Test error") },
+        { errorMessage: "Custom error message" },
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
       });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "Custom error message: Test error",
+        -1,
+      );
+    });
 
-      const { container } = renderWithResource(resource, undefined, true);
+    it("renders on pending if alwaysShowContent", async () => {
+      const { container } = renderWithQuery(
+        {
+          first: undefined,
+          second: undefined,
+        },
+        { alwaysShowContent: true },
+      );
 
       const preloader = container.querySelector(".preloader");
       expect(preloader).not.toBeInTheDocument();
-      expect(container.querySelector("div")).toHaveTextContent("no data");
-    });
 
-    it("renders data when resource resolves if alwaysShowContent", async () => {
-      const [resource] = createResource(async () => {
-        return "Test Data";
+      await waitFor(() => {
+        expect(screen.getByText(/no data/)).toBeInTheDocument();
       });
+    });
 
-      const { container } = renderWithResource(resource, undefined, true);
+    it("renders on resolve if alwaysShowContent", async () => {
+      renderWithQuery({
+        first: "First Data",
+        second: "Second Data",
+      });
 
       await waitFor(() => {
-        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+        expect(screen.getByTestId("first")).toHaveTextContent("First Data");
       });
-      const preloader = container.querySelector(".preloader");
-      expect(preloader).not.toBeInTheDocument();
-    });
-
-    it("renders error message when resource fails if alwaysShowContent", async () => {
-      const [resource] = createResource(async () => {
-        throw new Error("Test error");
+      await waitFor(() => {
+        expect(screen.getByTestId("second")).toHaveTextContent("Second Data");
       });
+    });
 
-      const { container } = renderWithResource(
-        resource,
-        "Custom error message",
-        true,
+    it("renders on fail if alwaysShowContent", async () => {
+      renderWithQuery(
+        { first: "data", second: new Error("Test error") },
+        { errorMessage: "Custom error message" },
       );
 
       await waitFor(() => {
@@ -120,30 +254,73 @@ describe("AsyncContent", () => {
         "Custom error message: Test error",
         -1,
       );
-      console.log(container.innerHTML);
     });
-    function renderWithResource<T>(
-      resource: Resource<T>,
-      errorMessage?: string,
-      alwaysShowContent?: true,
+
+    function renderWithQuery(
+      queries: {
+        first: string | Error | undefined;
+        second: string | Error | undefined;
+      },
+      options?: {
+        errorMessage?: string;
+        alwaysShowContent?: true;
+      },
     ): {
       container: HTMLElement;
     } {
+      const wrapper = (): JSXElement => {
+        const firstQuery = useQuery(() => ({
+          queryKey: ["first", Math.random() * 1000],
+          queryFn: async () => {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            if (queries.first instanceof Error) {
+              throw queries.first;
+            }
+            return queries.first;
+          },
+          retry: 0,
+        }));
+        const secondQuery = useQuery(() => ({
+          queryKey: ["second", Math.random() * 1000],
+          queryFn: async () => {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            if (queries.second instanceof Error) {
+              throw queries.second;
+            }
+            return queries.second;
+          },
+          retry: 0,
+        }));
+
+        return (
+          <AsyncContent
+            queries={{ first: firstQuery, second: secondQuery }}
+            errorMessage={options?.errorMessage}
+            alwaysShowContent={options?.alwaysShowContent}
+          >
+            {(results: {
+              first: string | undefined;
+              second: string | undefined;
+            }) => (
+              <>
+                <Show
+                  when={
+                    results.first !== undefined && results.second !== undefined
+                  }
+                  fallback={<div>no data</div>}
+                >
+                  <div data-testid="first">{results.first}</div>
+                  <div data-testid="second">{results.second}</div>
+                </Show>
+              </>
+            )}
+          </AsyncContent>
+        );
+      };
       const { container } = render(() => (
-        <AsyncContent
-          resource={resource}
-          errorMessage={errorMessage}
-          alwaysShowContent={alwaysShowContent}
-        >
-          {(data: T | undefined) => (
-            <>
-              foo
-              <Show when={data !== undefined} fallback={<div>no data</div>}>
-                <div data-testid="content">{String(data)}</div>
-              </Show>
-            </>
-          )}
-        </AsyncContent>
+        <QueryClientProvider client={queryClient}>
+          {wrapper()}
+        </QueryClientProvider>
       ));
 
       return {