fix: suspense respects enabled and stale (#238)

* fix: suspense respects enabled and stale

* test: suspense tests

* fix: suspense test against disabled specifically

Author: DamianOsipiuk

jest.config.ts

@@ -16,6 +16,7 @@ const config: Config.InitialOptions = {
     // Exlude devtools
     "!src/vuejs/devtools/**/*",
   ],
+  clearMocks: true,
 };
 
 export default config;

src/vuejs/__tests__/mutationCache.test.ts

@@ -9,10 +9,6 @@ describe("MutationCache", () => {
     jest.spyOn(MutationCacheOrigin.prototype, "findAll");
   });
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   describe("find", () => {
     test("should properly unwrap parameters", async () => {
       const mutationCache = new MutationCache();

src/vuejs/__tests__/queryCache.test.ts

@@ -9,10 +9,6 @@ describe("QueryCache", () => {
     jest.spyOn(QueryCacheOrigin.prototype, "findAll");
   });
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   describe("find", () => {
     test("should properly unwrap parameters", async () => {
       const queryCache = new QueryCache();

src/vuejs/__tests__/queryClient.test.ts

@@ -16,10 +16,6 @@ describe("QueryCache", () => {
   //   jest.spyOn(QueryCacheOrigin.prototype, "findAll");
   // });
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   describe("isFetching", () => {
     test("should properly unwrap 1 parameter", async () => {
       const queryClient = new QueryClient();

src/vuejs/__tests__/useInfiniteQuery.test.ts

@@ -4,10 +4,6 @@ import { useInfiniteQuery } from "../useInfiniteQuery";
 jest.mock("../useQueryClient");
 
 describe("useQuery", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test("should properly execute infinite query", async () => {
     const { data, fetchNextPage, status } = useInfiniteQuery(
       ["infiniteQuery"],

src/vuejs/__tests__/useIsFetching.test.ts

@@ -7,10 +7,6 @@ import { parseFilterArgs, useIsFetching } from "../useIsFetching";
 jest.mock("../useQueryClient");
 
 describe("useIsFetching", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test("should properly return isFetching state", async () => {
     const { isFetching: isFetchingQuery } = useQuery(
       ["isFetching1"],

src/vuejs/__tests__/useIsMutating.test.ts

@@ -8,10 +8,6 @@ import { useQueryClient } from "../useQueryClient";
 jest.mock("../useQueryClient");
 
 describe("useIsMutating", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test("should properly return isMutating state", async () => {
     const mutation = useMutation((params: string) => successMutator(params));
     const mutation2 = useMutation((params: string) => successMutator(params));

src/vuejs/__tests__/useMutation.test.ts

@@ -6,10 +6,6 @@ import { useQueryClient } from "../useQueryClient";
 jest.mock("../useQueryClient");
 
 describe("useMutation", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test("should be in idle state initially", () => {
     const mutation = useMutation((params) => successMutator(params));
 

src/vuejs/__tests__/useQueries.test.ts

@@ -11,10 +11,6 @@ import { useQueries } from "../useQueries";
 jest.mock("../useQueryClient");
 
 describe("useQueries", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test("should return result for each query", () => {
     const queries = [
       {

src/vuejs/__tests__/useQuery.test.ts

@@ -20,10 +20,6 @@ jest.mock("../useQueryClient");
 jest.mock("../useBaseQuery");
 
 describe("useQuery", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test("should properly execute query", () => {
     useQuery(["key0"], simpleFetcher, { staleTime: 1000 });
 
@@ -239,10 +235,47 @@ describe("useQuery", () => {
       const getCurrentInstanceSpy = getCurrentInstance as jest.Mock;
       getCurrentInstanceSpy.mockImplementation(() => ({ suspense: {} }));
 
-      const query = useQuery(["suspense3"], simpleFetcher);
+      const query = useQuery(["suspense"], simpleFetcher);
       const result = query.suspense();
 
       expect(result).toBeInstanceOf(Promise);
     });
+
+    test("should resolve after being enabled", () => {
+      const getCurrentInstanceSpy = getCurrentInstance as jest.Mock;
+      getCurrentInstanceSpy.mockImplementation(() => ({ suspense: {} }));
+
+      let afterTimeout = false;
+      const isEnabeld = ref(false);
+      const query = useQuery(["suspense"], simpleFetcher, {
+        enabled: isEnabeld,
+      });
+
+      setTimeout(() => {
+        afterTimeout = true;
+        isEnabeld.value = true;
+      }, 200);
+
+      return query.suspense().then((result) => {
+        expect(afterTimeout).toBe(true);
+      });
+    });
+
+    test("should resolve immidiately when stale without refetching", () => {
+      const getCurrentInstanceSpy = getCurrentInstance as jest.Mock;
+      getCurrentInstanceSpy.mockImplementation(() => ({ suspense: {} }));
+
+      const fetcherSpy = jest.fn(() => simpleFetcher());
+
+      // let afterTimeout = false;
+      const query = useQuery(["suspense"], simpleFetcher, {
+        staleTime: 10000,
+        initialData: "foo",
+      });
+
+      return query.suspense().then(() => {
+        expect(fetcherSpy).toHaveBeenCalledTimes(0);
+      });
+    });
   });
 });

src/vuejs/__tests__/useQueryClient.test.ts

@@ -8,7 +8,6 @@ describe("useQueryClient", () => {
 
   beforeEach(() => {
     jest.restoreAllMocks();
-    jest.clearAllMocks();
   });
 
   test("should return queryClient when it is provided in the context", () => {

src/vuejs/__tests__/vueQueryPlugin.test.ts

@@ -37,7 +37,6 @@ function getAppMock(withUnmountHook = false): TestApp {
 
 describe("VueQueryPlugin", () => {
   beforeEach(() => {
-    jest.clearAllMocks();
     window.__VUE_QUERY_CONTEXT__ = undefined;
   });
 

src/vuejs/useBaseQuery.ts

@@ -76,9 +76,31 @@ export function useBaseQuery<
     unsubscribe();
   });
 
+  const suspense = () => {
+    return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
+      const run = () => {
+        const newOptions = queryClient.defaultQueryOptions(
+          getQueryUnreffedOptions()
+        );
+        if (newOptions.enabled !== false) {
+          const optimisticResult = observer.getOptimisticResult(newOptions);
+          if (optimisticResult.isStale) {
+            resolve(observer.fetchOptimistic(defaultedOptions));
+          } else {
+            resolve(optimisticResult);
+          }
+        }
+      };
+
+      run();
+
+      watch([() => arg1, () => arg2, () => arg3], run, { deep: true });
+    });
+  };
+
   return {
     ...(toRefs(readonly(state)) as UseQueryReturnType<TData, TError>),
-    suspense: () => observer.fetchOptimistic(defaultedOptions),
+    suspense,
   };
 
   /**