@pixotope/query 0.6.0 → 0.8.0

package/src/useQuery.test.ts

@@ -1,210 +1,162 @@
 import { fireEvent } from "@testing-library/dom";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import { vi, describe, beforeEach, it, expect, test } from "vitest";
+import { vi, describe, it, expect, test } from "vitest";
 
 import { useQuery } from "./useQuery";
-import { MockUseQueryUtils } from "./mock/useQuery";
 const mockQueryKey = ["dummyQK"];
 
-function until(condition: boolean) {
-  return new Promise((resolve, reject) => {
-    if (condition) {
-      resolve(null);
-    } else {
-      reject();
-    }
-  });
-}
-
 describe("useQuery", () => {
-  let defaultQueryMock: MockUseQueryUtils;
-
-  beforeEach(() => {
-    defaultQueryMock = new MockUseQueryUtils({});
-  });
-
-  it("should call queryFn by on mount by default", () => {
-    const mockFunction = vi.fn(() => defaultQueryMock.getMockedQueryFn());
-    renderHook(() =>
-      useQuery({
-        queryFn: mockFunction,
-        key: mockQueryKey,
-      })
+  it("should call queryFn by on mount by default", async () => {
+    const mockFunction = vi.fn();
+    await act(() =>
+      renderHook(() =>
+        useQuery({
+          queryFn: mockFunction,
+          key: mockQueryKey,
+        })
+      )
     );
-
     expect(mockFunction).toBeCalledTimes(1);
   });
-  it("should be in loading state on mount", () => {
+  it("should be in loading state on mount", async () => {
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn(),
         key: mockQueryKey,
       })
     );
 
-    expect(result.current.status).toBe("loading");
+    await waitFor(() => expect(result.current.status).toBe("loading"));
   });
   it("should be in success state after queryFn resolves", async () => {
+    const mockFunction = vi.fn();
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: mockFunction,
         key: mockQueryKey,
       })
     );
     act(() => {
-      defaultQueryMock.resolve();
-    });
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
+      mockFunction.mockResolvedValue("test");
     });
+    await waitFor(() => expect(result.current.status).toBe("success"));
   });
   it("should be in error state after queryFn rejects", async () => {
+    const mockFunction = vi.fn().mockRejectedValue("test");
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: mockFunction,
         key: mockQueryKey,
       })
     );
-    act(() => defaultQueryMock.reject());
-    await waitFor(() => until(result.current.status === "error"), {
-      timeout: 1000,
-    });
-    expect(result.current.status).toBe("error");
+    await waitFor(() => expect(result.current.status).toBe("error"));
   });
   it("should be in timeout state after queryFn rejects with timeout", async () => {
+    const mockFunction = vi.fn(
+      () => new Promise((_, reject) => setTimeout(() => reject("test"), 10))
+    );
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: mockFunction,
         key: mockQueryKey,
         timeout: 0.01,
       })
     );
-    await waitFor(() => until(result.current.status === "error"), {
-      timeout: 1000,
-    });
-    expect(result.current.status === "error");
+    await waitFor(() => expect(result.current.status).toBe("error"));
   });
   it("should be in success state after queryFn resolves with initialData", async () => {
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockResolvedValue("test-test-2"),
         key: mockQueryKey,
         initialData: "test-test",
       })
     );
-    defaultQueryMock.resolve();
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
+    await waitFor(() => expect(result.current.status).toBe("success"));
   });
   it("should be in idle state if enabled is false", async () => {
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn(),
         key: mockQueryKey,
         enabled: false,
       })
     );
-    expect(result.current.status).toBe("idle");
+    await waitFor(() => expect(result.current.status).toBe("idle"));
   });
   test("refetch should trigger query function", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
-    const { result } = await act(() =>
-      renderHook(() =>
-        useQuery({
-          queryFn: resolver,
-          key: mockQueryKey,
-        })
-      )
+    const resolver = vi.fn().mockResolvedValue("test");
+    const { result } = renderHook(() =>
+      useQuery({
+        queryFn: resolver,
+        key: mockQueryKey,
+      })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
-    await act(() => result.current.refetch());
+    await waitFor(() => expect(result.current.status).toBe("success"));
+    await act(() => result.current.refetch({}));
     expect(resolver).toBeCalledTimes(2);
   });
-  test("select should return selected right data", async () => {
-    const queryMock = new MockUseQueryUtils({
-      foo: "bar",
-      baz: "qux",
-    });
+  test("select should return correctly selected data", async () => {
+    const resolver = vi.fn().mockResolvedValue({ foo: "bar" });
     const { result } = renderHook(() =>
       useQuery({
-        queryFn: () => queryMock.getMockedQueryFn(),
+        queryFn: resolver,
         key: mockQueryKey,
-        select: (data) => data?.foo,
+        select: (data: any) => data?.foo,
       })
     );
-    expect(result.current.data).toBeUndefined();
-    queryMock.resolve();
-    await waitFor(() => until(result.current.data !== undefined), {
-      timeout: 1000,
-    });
-    expect(result.current.data).toBe("bar");
+    await waitFor(() => expect(result.current.data).toBe("bar"));
   });
   test("onSuccess should be called after queryFn resolves", async () => {
     const onSuccess = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockResolvedValue("test"),
         key: mockQueryKey,
         onSuccess,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onSuccess).toBeCalledTimes(1);
+    await waitFor(() => expect(onSuccess).toBeCalledTimes(1));
+    expect(onSuccess).toBeCalledWith("test");
   });
   test("onError should be called after queryFn rejects", async () => {
     const onError = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockRejectedValue("test"),
         key: mockQueryKey,
         onError,
       })
     );
-    await act(() => defaultQueryMock.reject());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onError).toBeCalledTimes(1);
+    await waitFor(() => expect(onError).toBeCalledTimes(1));
+    expect(onError).toBeCalledWith("test");
   });
   test("onSettled should be called after queryFn resolves", async () => {
     const onSettled = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockResolvedValue("test"),
         key: mockQueryKey,
         onSettled,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onSettled).toBeCalledTimes(1);
+    await waitFor(() => expect(onSettled).toBeCalledTimes(1));
+    expect(onSettled).toBeCalledWith("test", undefined);
   });
   test("onSettled should be called after queryFn rejects", async () => {
     const onSettled = vi.fn();
     renderHook(() =>
       useQuery({
-        queryFn: () => defaultQueryMock.getMockedQueryFn(),
+        queryFn: vi.fn().mockRejectedValue("test"),
         key: mockQueryKey,
         onSettled,
       })
     );
-    await act(() => defaultQueryMock.reject());
-    await waitFor(() => {}, {
-      timeout: 1000,
-    });
-    expect(onSettled).toBeCalledTimes(1);
+    await waitFor(() => expect(onSettled).toBeCalledTimes(1));
+    expect(onSettled).toBeCalledWith(undefined, "test");
   });
   test("refetch is triggered on window focus", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
+    const resolver = vi.fn().mockResolvedValue("test");
     const { result } = await act(() =>
       renderHook(() =>
         useQuery({
@@ -214,15 +166,12 @@ describe("useQuery", () => {
         })
       )
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
+    await waitFor(() => expect(result.current.status).toBe("success"));
     await act(() => fireEvent(window, new FocusEvent("focus")));
     expect(resolver).toBeCalledTimes(2);
   });
   test("refetch interval should work", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
+    const resolver = vi.fn().mockResolvedValue("test");
     const { result } = renderHook(() =>
       useQuery({
         queryFn: resolver,
@@ -230,38 +179,31 @@ describe("useQuery", () => {
         key: mockQueryKey,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
-    waitFor(() => until(resolver.call.length > 1), { timeout: 1000 });
+    await waitFor(() => expect(result.current.status).toBe("success"));
+    await waitFor(() => expect(resolver.mock.calls.length).toBeGreaterThan(1));
   });
   test("refetch should automatically trigger if queryKey is changed", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
-    const { result, rerender } = await act(() =>
-      renderHook(
-        (props) =>
-          useQuery({
-            queryFn: resolver,
-            key: props.key,
-          }),
-        {
-          initialProps: {
-            key: ["dummyQK1"],
-          },
-        }
-      )
-    );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
+    const resolver = vi.fn().mockResolvedValue("test");
+    const { result, rerender } = renderHook(
+      (props) =>
+        useQuery({
+          queryFn: resolver,
+          key: props.key,
+        }),
+      {
+        initialProps: {
+          key: ["dummyQK1"],
+        },
+      }
+    );
+    await waitFor(() => expect(result.current.status).toBe("success"));
+    await waitFor(() => expect(resolver).toBeCalledTimes(1));
     rerender({ key: ["dummyQK2"] });
     rerender({ key: ["dummyQK3"] });
-    expect(resolver).toBeCalledTimes(3);
+    await waitFor(() => expect(resolver).toBeCalledTimes(3));
   });
   test("stateless mode", async () => {
-    const resolver = vi.fn(() => defaultQueryMock.getMockedQueryFn());
+    const resolver = vi.fn().mockResolvedValue("test");
     const { result } = renderHook(() =>
       useQuery({
         queryFn: resolver,
@@ -269,11 +211,7 @@ describe("useQuery", () => {
         stateless: true,
       })
     );
-    await act(() => defaultQueryMock.resolve());
-    await waitFor(() => until(result.current.status === "success"), {
-      timeout: 1000,
-    });
-
+    await waitFor(() => expect(result.current.status).toBe("success"));
     // Here ts should kick in and complain about but for testing purposes, all good
     // @ts-ignore
     expect(result.current.data).toBeUndefined();

package/src/useQuery.ts

@@ -259,14 +259,11 @@ export const useQuery = <
 
     // If the query should be refetched on an interval, add an interval
     if (refetchInterval > 0) {
-      const interval = setInterval(
-        () => {
-          if (shouldRefetch()) {
-            refetch();
-          }
-        },
-        Math.max(refetchInterval, 1000)
-      );
+      const interval = setInterval(() => {
+        if (shouldRefetch()) {
+          refetch();
+        }
+      }, refetchInterval);
 
       cleanups.push(() => {
         clearInterval(interval);

package/src/useSubscription.test.ts

@@ -0,0 +1,79 @@
+import { renderHook } from "@testing-library/react";
+import { vi, describe, expect, it } from "vitest";
+
+import {
+  buildServiceSubscriptionHook,
+  useSubscription,
+} from "./useSubscription";
+
+describe("useSubscription", () => {
+  it("should call subscription handler", () => {
+    const subscriptionHandler = vi.fn();
+    renderHook(() =>
+      useSubscription(subscriptionHandler, {
+        topic: "test",
+        service: "test",
+      })
+    );
+    expect(subscriptionHandler).toBeCalledTimes(1);
+  });
+
+  it("should correctly pass options to subscription handler", () => {
+    const subscriptionHandler = vi.fn();
+    renderHook(() =>
+      useSubscription(subscriptionHandler, {
+        topic: "test",
+        service: "test",
+        meta: { foo: "bar" },
+        maxDownwardDepth: 100,
+      })
+    );
+    expect(subscriptionHandler).toBeCalledTimes(1);
+    expect(subscriptionHandler).toHaveBeenCalledWith({
+      service: "test",
+      name: "test",
+      callback: expect.any(Function),
+      maxDownwardDepth: 100,
+      meta: { foo: "bar" },
+    });
+  });
+});
+
+describe("buildServiceSubscriptionHook", () => {
+  it("should correctly pass options to subscription handler", () => {
+    const subscriptionHandler = vi.fn();
+    const useHook = buildServiceSubscriptionHook(
+      subscriptionHandler,
+      () => "test"
+    );
+    renderHook(() => useHook({ topic: "test", meta: { foo: "bar" } }));
+    expect(subscriptionHandler).toHaveBeenCalledTimes(1);
+    expect(subscriptionHandler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        service: "test",
+        name: "test",
+        meta: { foo: "bar" },
+      })
+    );
+  });
+
+  it("should correctly handle overridden machine", () => {
+    const subscriptionHandler = vi.fn();
+    const useHook = buildServiceSubscriptionHook(
+      subscriptionHandler,
+      (machine) => machine || "test"
+    );
+    renderHook(() =>
+      useHook({
+        topic: "test",
+        machine: "myCustomMachineName",
+      })
+    );
+    expect(subscriptionHandler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        service: "myCustomMachineName",
+        name: "test",
+      })
+    );
+  });
+});

package/src/useSubscription.ts

@@ -7,6 +7,7 @@ export type SubscriptionOptions<
   TData,
   TMessage = unknown,
   Stateless extends true | undefined = undefined,
+  TMetadata extends {} = {},
 > = Omit<
   SubscriptionCoreOptions<TData, TMessage, Stateless>,
   "subscriberFn"
@@ -14,27 +15,35 @@ export type SubscriptionOptions<
   service: string;
   topic: string;
   maxDownwardDepth?: number;
+} & {
+  meta?: TMetadata;
 };
 
-export type TSubscriptionHandlerFunction<TMessage> = (opts: {
-  service: string;
-  name: string;
-  callback: (message: TMessage) => void;
-  maxDownwardDepth?: number;
-}) => () => void;
+export type TSubscriptionHandlerFunction<
+  TMessage,
+  TMetadata extends {} = {},
+> = (
+  opts: {
+    service: string;
+    name: string;
+    callback: (message: TMessage) => void;
+    maxDownwardDepth?: number;
+  } & { meta?: TMetadata }
+) => () => void;
 
 export function useSubscription<
   TData = unknown,
   TMessage = TData,
   Stateless extends true | undefined = undefined,
+  TMetadata extends {} = {},
 >(
-  subscriptionHandler: TSubscriptionHandlerFunction<TMessage>,
-  options: SubscriptionOptions<TData, TMessage, Stateless>
+  subscriptionHandler: TSubscriptionHandlerFunction<TMessage, TMetadata>,
+  options: SubscriptionOptions<TData, TMessage, Stateless, TMetadata>
 ) {
-  const { topic, service, maxDownwardDepth = 1000 } = options;
+  const { topic, service, maxDownwardDepth = 1000, meta, ...rest } = options;
 
   return useSubscriptionCore<TData, TMessage, Stateless>({
-    ...options,
+    ...rest,
     subscriberFn: (handler) => {
       const unsubscribe = subscriptionHandler({
         service,
@@ -43,6 +52,7 @@ export function useSubscription<
           handler(message);
         },
         maxDownwardDepth,
+        meta,
       });
 
       return unsubscribe;
@@ -50,8 +60,8 @@ export function useSubscription<
   });
 }
 
-export function buildServiceSubscriptionHook(
-  subscriptionHandler: TSubscriptionHandlerFunction<unknown>,
+export function buildServiceSubscriptionHook<TMetadata extends {} = {}>(
+  subscriptionHandler: TSubscriptionHandlerFunction<unknown, TMetadata>,
   targetMachine: (machine: string | undefined) => string
 ) {
   return function useSubscriptionBuilder<
@@ -60,7 +70,7 @@ export function buildServiceSubscriptionHook(
     Stateless extends true | undefined = undefined,
   >(
     options: Omit<
-      SubscriptionOptions<TData, TMessage, Stateless>,
+      SubscriptionOptions<TData, TMessage, Stateless, TMetadata>,
       "service"
     > & {
       machine?: string;

package/src/useSubscriptionCore.ts

@@ -8,7 +8,8 @@
 import { shallowEqual } from "@pixotope/utils/comparison";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-type SubscriptionState = "idle" | "subscribed" | "subscribing";
+type SubscriptionState = "idle" | "subscribed" | "subscribing" | "error";
+
 export type MessageHandler<TMessage> = (message: TMessage) => void;
 export type Connection = {
   acknowledge: () => void;
@@ -36,8 +37,9 @@ export type SubscriptionCoreOptions<
    */
   enabled?: boolean;
   /**
-   * @description Function that will be called to compare the message with the
-   * previous message. If the function returns true, the message will be ignored.
+   * @description Function that will be called before the message is processed.
+   * Returning `true` will cause the message to not be set to state and call {@link onError} if provided.
+   * Status will be set to `error`.
    */
   compareOrThrow?: (data: TMessage) => boolean;
   /**
@@ -165,6 +167,7 @@ export function useSubscriptionCore<
   const handler = useCallback(
     async (message: TMessage) => {
       if (internalCallbacksRef.current.compareOrThrow?.(message)) {
+        updateStatus("error");
         internalCallbacksRef.current.onError?.(message);
 
         return;

package/src/mock/useQuery.ts

@@ -1,48 +0,0 @@
-export class MockPromise<TData = any> {
-  private _data: TData;
-  private _resolve!: (value: TData) => void;
-  private _reject!: (reason?: any) => void;
-  public promise: Promise<TData>;
-
-  public constructor(data: TData) {
-    this._data = data;
-    this.promise = new Promise((resolve, reject) => {
-      this._resolve = resolve;
-      this._reject = reject;
-    });
-  }
-
-  public async resolve() {
-    this._resolve(this._data);
-  }
-
-  public async reject() {
-    this._reject();
-  }
-}
-
-export class MockUseQueryUtils<TData = any> {
-  private _data: TData;
-  private _mockPromise: MockPromise<TData>;
-
-  public constructor(data: TData) {
-    this._data = data;
-    this._mockPromise = new MockPromise(data);
-  }
-
-  public getMockedQueryFn() {
-    return this._mockPromise.promise;
-  }
-
-  public resolve() {
-    return this._mockPromise.resolve();
-  }
-
-  public reject() {
-    this._mockPromise.reject();
-  }
-
-  public getData() {
-    return this._data;
-  }
-}