Add a spec for useFindFirst

Author: airhorns

packages/react/spec/useFindFirst.spec.ts

@@ -0,0 +1,173 @@
+import type { GadgetRecord } from "@gadgetinc/api-client-core";
+import { renderHook } from "@testing-library/react";
+import type { IsExact } from "conditional-type-checks";
+import { assert } from "conditional-type-checks";
+import { useFindFirst } from "../src/index.js";
+import type { ErrorWrapper } from "../src/utils.js";
+import { relatedProductsApi } from "./apis.js";
+import { MockClientWrapper, mockUrqlClient } from "./testWrappers.js";
+
+describe("useFindFirst", () => {
+  // these functions are typechecked but never run to avoid actually making API calls
+  const _TestFindFirstReturnsTypedDataWithExplicitSelection = () => {
+    const [{ data, fetching, error }, refresh] = useFindFirst(relatedProductsApi.user, {
+      filter: { email: { equals: "[email protected]" } },
+      select: { id: true, email: true },
+    });
+
+    assert<IsExact<typeof fetching, boolean>>(true);
+    assert<IsExact<typeof data, undefined | GadgetRecord<{ id: string; email: string | null }>>>(true);
+    assert<IsExact<typeof error, ErrorWrapper | undefined>>(true);
+
+    // data is accessible via dot access
+    if (data) {
+      data.id;
+      data.email;
+    }
+
+    // hook return value includes the urql refresh function
+    refresh();
+  };
+
+  const _TestFindFirstReturnsTypedDataWithNoSelection = () => {
+    const [{ data }] = useFindFirst(relatedProductsApi.user);
+
+    if (data) {
+      data.id;
+      data.email;
+    }
+  };
+
+  test("it can find the first record", async () => {
+    const { result } = renderHook(() => useFindFirst(relatedProductsApi.user), {
+      wrapper: MockClientWrapper(relatedProductsApi),
+    });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(true);
+    expect(result.current[0].error).toBeFalsy();
+
+    expect(mockUrqlClient.executeQuery).toBeCalledTimes(1);
+
+    mockUrqlClient.executeQuery.pushResponse("users", {
+      data: {
+        users: {
+          edges: [{ cursor: "123", node: { id: "123", email: "[email protected]" } }],
+          pageInfo: {
+            startCursor: "123",
+            endCursor: "123",
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    expect(result.current[0].data!.id).toEqual("123");
+    expect(result.current[0].data!.email).toEqual("[email protected]");
+    expect(result.current[0].fetching).toBe(false);
+    expect(result.current[0].error).toBeFalsy();
+  });
+
+  test("it return null if the record with the given field value can't be found", async () => {
+    const { result } = renderHook(() => useFindFirst(relatedProductsApi.user), {
+      wrapper: MockClientWrapper(relatedProductsApi),
+    });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(true);
+    expect(result.current[0].error).toBeFalsy();
+
+    expect(mockUrqlClient.executeQuery).toBeCalledTimes(1);
+
+    mockUrqlClient.executeQuery.pushResponse("users", {
+      data: {
+        users: {
+          edges: [],
+          pageInfo: {
+            startCursor: null,
+            endCursor: null,
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    expect(result.current[0].data).toBeFalsy();
+    expect(result.current[0].fetching).toBe(false);
+    expect(result.current[0].error).toBeUndefined();
+  });
+
+  test("returns the same data object on rerender", async () => {
+    const { result, rerender } = renderHook(() => useFindFirst(relatedProductsApi.user), {
+      wrapper: MockClientWrapper(relatedProductsApi),
+    });
+
+    expect(mockUrqlClient.executeQuery).toBeCalledTimes(1);
+
+    mockUrqlClient.executeQuery.pushResponse("users", {
+      data: {
+        users: {
+          edges: [{ cursor: "123", node: { id: "123", email: "[email protected]" } }],
+          pageInfo: {
+            startCursor: "123",
+            endCursor: "123",
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    const data = result.current[0].data;
+    expect(data).toBeTruthy();
+
+    rerender();
+
+    expect(result.current[0].data).toBe(data);
+  });
+
+  test("it can suspend when finding data", async () => {
+    const { result, rerender } = renderHook(() => useFindFirst(relatedProductsApi.user, { suspense: true }), {
+      wrapper: MockClientWrapper(relatedProductsApi),
+    });
+
+    // first render never completes as the component suspends
+    expect(result.current).toBeFalsy();
+    expect(mockUrqlClient.executeQuery).toBeCalledTimes(1);
+
+    mockUrqlClient.executeQuery.pushResponse("users", {
+      data: {
+        users: {
+          edges: [{ cursor: "123", node: { id: "123", email: "[email protected]" } }],
+          pageInfo: {
+            startCursor: "123",
+            endCursor: "123",
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+        },
+      },
+      stale: false,
+      hasNext: false,
+    });
+
+    // rerender as react would do when the suspense promise resolves
+    rerender();
+    expect(result.current).toBeTruthy();
+    expect(result.current[0].data!.id).toEqual("123");
+    expect(result.current[0].data!.email).toEqual("[email protected]");
+    expect(result.current[0].error).toBeFalsy();
+
+    const beforeObject = result.current[0];
+    rerender();
+    expect(result.current[0]).toBe(beforeObject);
+  });
+});