@khanacademy/wonder-blocks-data 10.0.5 → 10.1.1

package/src/hooks/__tests__/{use-cached-effect.test.js → use-cached-effect.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {
     renderHook as clientRenderHook,
@@ -6,28 +5,25 @@ import {
 } from "@testing-library/react-hooks";
 import {renderHook as serverRenderHook} from "@testing-library/react-hooks/server";
 import {render, act as reactAct} from "@testing-library/react";
+import {values} from "@khanacademy/wonder-stuff-core";
 
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {Status} from "../../util/status.js";
+import {Status} from "../../util/status";
 
-import {RequestFulfillment} from "../../util/request-fulfillment.js";
-import * as UseRequestInterception from "../use-request-interception.js";
-import * as UseSharedCache from "../use-shared-cache.js";
+import {RequestFulfillment} from "../../util/request-fulfillment";
+import * as UseRequestInterception from "../use-request-interception";
+import * as UseSharedCache from "../use-shared-cache";
 
-import {useCachedEffect} from "../use-cached-effect.js";
+import {useCachedEffect} from "../use-cached-effect";
 
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {FetchPolicy} from "../../util/types.js";
+import {FetchPolicy} from "../../util/types";
 
-jest.mock("../use-request-interception.js");
-jest.mock("../use-shared-cache.js");
+jest.mock("../use-request-interception");
+jest.mock("../use-shared-cache");
 
-const allPolicies = Array.from(FetchPolicy.members());
-const allPoliciesBut = (policy: FetchPolicy) =>
-    allPolicies.filter((p) => p !== policy);
+const allPolicies = Array.from(values(FetchPolicy));
+const allPoliciesBut = (policy: typeof FetchPolicy[keyof typeof FetchPolicy]) =>
+    allPolicies.filter((p: any) => p !== policy);
 
 describe("#useCachedEffect", () => {
     beforeEach(() => {
@@ -41,14 +37,14 @@ describe("#useCachedEffect", () => {
         jest.spyOn(
             UseRequestInterception,
             "useRequestInterception",
-        ).mockImplementation((_, handler) => handler);
+        ).mockImplementation((_: any, handler: any) => handler);
 
         // We need the cache to work a little so that we get our result.
-        const cache = {};
+        const cache: Record<string, any> = {};
         jest.spyOn(UseSharedCache, "useSharedCache").mockImplementation(
-            (id, _, defaultValue) => {
+            (id: any, _: any, defaultValue: any) => {
                 const setCache = React.useCallback(
-                    (v) => (cache[id] = v),
+                    (v: any) => (cache[id] = v),
                     [id],
                 );
                 return [cache[id] ?? defaultValue, setCache];
@@ -84,7 +80,7 @@ describe("#useCachedEffect", () => {
             ${"foo"}     | ${"foo"}
         `(
             "should call useSharedCache with id, scope=$scope, without a default",
-            ({scope, cachedResult, expectedScope}) => {
+            ({scope, cachedResult, expectedScope}: any) => {
                 const fakeHandler = jest.fn();
                 const useSharedCacheSpy = jest.spyOn(
                     UseSharedCache,
@@ -106,7 +102,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPolicies)(
             "should not request data for FetchPolicy.%s",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 // Arrange
                 const fakeHandler = jest.fn().mockResolvedValue("data");
 
@@ -122,7 +118,7 @@ describe("#useCachedEffect", () => {
 
         describe.each(allPolicies)(
             "with FetchPolicy.%s without cached result",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 it("should return a loading result", () => {
                     // Arrange
                     const fakeHandler = jest.fn();
@@ -144,7 +140,7 @@ describe("#useCachedEffect", () => {
 
         describe.each(allPoliciesBut(FetchPolicy.NetworkOnly))(
             "with FetchPolicy.%s with cached result",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 it("should return the result", () => {
                     // Arrange
                     const fakeHandler = jest.fn();
@@ -219,7 +215,7 @@ describe("#useCachedEffect", () => {
 
         it("should share inflight requests for the same requestId", () => {
             // Arrange
-            const pending = new Promise((resolve, reject) => {
+            const pending = new Promise((resolve: any, reject: any) => {
                 /*pending*/
             });
             const fakeHandler = jest.fn().mockReturnValue(pending);
@@ -234,7 +230,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should provide function that causes refetch with FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA1");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -248,9 +244,11 @@ describe("#useCachedEffect", () => {
                     useCachedEffect("ID", fakeHandler, {fetchPolicy}),
                 );
                 fakeHandler.mockClear();
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
                 act(refetch);
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
 
                 // Assert
                 expect(fakeHandler).toHaveBeenCalledTimes(1);
@@ -281,7 +279,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should fulfill request when there is no cached value and FetchPolicy.%s",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 // Arrange
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
@@ -301,7 +299,7 @@ describe("#useCachedEffect", () => {
 
         it.each([FetchPolicy.CacheAndNetwork, FetchPolicy.NetworkOnly])(
             "should fulfill request when there is a cached value and FetchPolicy.%s",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 // Arrange
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
@@ -328,7 +326,7 @@ describe("#useCachedEffect", () => {
             ${Status.aborted()}
         `(
             "should not fulfill request when there is a cached response of $cachedResult and FetchPolicy.CacheBeforeNetwork",
-            ({cachedResult}) => {
+            ({cachedResult}: any) => {
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
                     cachedResult,
@@ -355,7 +353,7 @@ describe("#useCachedEffect", () => {
             ${Status.aborted()}
         `(
             "should not fulfill request when there is a cached response of $cachedResult and FetchPolicy.CacheOnly",
-            ({cachedResult}) => {
+            ({cachedResult}: any) => {
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
                     cachedResult,
@@ -395,7 +393,7 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, waitForNextUpdate} = clientRenderHook(
-                ({requestId}) => useCachedEffect(requestId, fakeHandler),
+                ({requestId}: any) => useCachedEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
@@ -437,15 +435,13 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useCachedEffect(requestId, fakeHandler),
+                ({requestId}: any) => useCachedEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
             );
             rerender({requestId: "ID2"});
-            await act((): Promise<mixed> =>
-                Promise.all([response1, response2]),
-            );
+            await act((): Promise<any> => Promise.all([response1, response2]));
 
             // Assert
             expect(result.all).not.toContainEqual(Status.success("DATA1"));
@@ -462,15 +458,13 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useCachedEffect(requestId, fakeHandler),
+                ({requestId}: any) => useCachedEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
             );
             rerender({requestId: "ID2"});
-            await act((): Promise<mixed> =>
-                Promise.all([response1, response2]),
-            );
+            await act((): Promise<any> => Promise.all([response1, response2]));
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA2"));
@@ -496,13 +490,14 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({skip}) => useCachedEffect("ID", fakeHandler, {skip}),
+                ({skip}: any) => useCachedEffect("ID", fakeHandler, {skip}),
                 {
                     initialProps: {skip: false},
                 },
             );
             rerender({skip: true});
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
 
             // Assert
             expect(result.all).not.toContainEqual(Status.success("DATA1"));
@@ -517,15 +512,13 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({handler}) => useCachedEffect("ID", handler),
+                ({handler}: any) => useCachedEffect("ID", handler),
                 {
                     initialProps: {handler: fakeHandler1},
                 },
             );
             rerender({handler: fakeHandler2});
-            await act((): Promise<mixed> =>
-                Promise.all([response1, response2]),
-            );
+            await act((): Promise<any> => Promise.all([response1, response2]));
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA1"));
@@ -538,17 +531,19 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({options}) => useCachedEffect("ID", fakeHandler),
+                ({options}: any) => useCachedEffect("ID", fakeHandler),
                 {
                     initialProps: {options: undefined},
                 },
             );
             rerender({
+                // @ts-expect-error [FEI-5019] - TS2322 - Type '{ scope: string; }' is not assignable to type 'undefined'.
                 options: {
                     scope: "BLAH!",
                 },
             });
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA1"));
@@ -569,7 +564,7 @@ describe("#useCachedEffect", () => {
                 result: hookResult,
                 waitForNextUpdate,
             } = clientRenderHook(
-                ({requestId}) =>
+                ({requestId}: any) =>
                     useCachedEffect(requestId, fakeHandler, {
                         retainResultOnChange: true,
                     }),
@@ -577,7 +572,8 @@ describe("#useCachedEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
             rerender({requestId: "ID2"});
             const [result] = hookResult.current;
             await waitForNextUpdate();
@@ -599,7 +595,7 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) =>
+                ({requestId}: any) =>
                     useCachedEffect(requestId, fakeHandler, {
                         retainResultOnChange: false,
                     }),
@@ -607,7 +603,8 @@ describe("#useCachedEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
             rerender({requestId: "ID2"});
 
             // Assert
@@ -616,7 +613,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should trigger render when request is fulfilled and onResultChanged is undefined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -629,7 +626,8 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                await reactAct((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await reactAct((): Promise<unknown> => response);
 
                 // Assert
                 expect(renderCount).toBe(2);
@@ -638,7 +636,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should trigger render once per inflight request being fulfilled and onResultChanged is undefined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -659,7 +657,8 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                await reactAct((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await reactAct((): Promise<unknown> => response);
 
                 // Assert
                 expect(renderCount).toBe(2);
@@ -668,7 +667,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should not trigger render when request is fulfilled and onResultChanged is defined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -684,7 +683,8 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                await reactAct((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await reactAct((): Promise<unknown> => response);
 
                 // Assert
                 expect(renderCount).toBe(1);
@@ -693,7 +693,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should call onResultChanged when request is fulfilled and onResultChanged is defined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -706,7 +706,8 @@ describe("#useCachedEffect", () => {
                         fetchPolicy,
                     }),
                 );
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
 
                 // Assert
                 expect(onResultChanged).toHaveBeenCalledWith(
@@ -717,7 +718,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should call onResultChanged once per inflight request being fulfilled and onResultChanged is defined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -738,7 +739,8 @@ describe("#useCachedEffect", () => {
                 act(refetch);
                 act(refetch);
                 act(refetch);
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
 
                 // Assert
                 expect(onResultChanged).toHaveBeenCalledTimes(1);

package/src/hooks/__tests__/{use-gql-router-context.test.js → use-gql-router-context.test.tsx}

@@ -1,9 +1,8 @@
-// @flow
 import * as React from "react";
 import {renderHook} from "@testing-library/react-hooks";
 
-import {GqlRouterContext} from "../../util/gql-router-context.js";
-import {useGqlRouterContext} from "../use-gql-router-context.js";
+import {GqlRouterContext} from "../../util/gql-router-context";
+import {useGqlRouterContext} from "../use-gql-router-context";
 
 describe("#useGqlRouterContext", () => {
     it("should throw if there is no GqlRouterContext", () => {
@@ -27,7 +26,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -50,7 +49,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -76,7 +75,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -85,7 +84,7 @@ describe("#useGqlRouterContext", () => {
 
         // Act
         const wrapper = renderHook(
-            ({overrides}) => useGqlRouterContext(overrides),
+            ({overrides}: any) => useGqlRouterContext(overrides),
             {
                 wrapper: Wrapper,
                 initialProps: {},
@@ -106,7 +105,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -115,7 +114,7 @@ describe("#useGqlRouterContext", () => {
 
         // Act
         const wrapper = renderHook(
-            ({overrides}) => useGqlRouterContext(overrides),
+            ({overrides}: any) => useGqlRouterContext(overrides),
             {
                 wrapper: Wrapper,
                 initialProps: {
@@ -124,6 +123,7 @@ describe("#useGqlRouterContext", () => {
             },
         );
         const result1 = wrapper.result.current;
+        // @ts-expect-error [FEI-5019] - TS2741 - Property 'fiz' is missing in type '{}' but required in type '{ fiz: string; }'.
         wrapper.rerender({overrides: {}});
         const result2 = wrapper.result.current;
 

package/src/hooks/__tests__/{use-gql.test.js → use-gql.test.tsx}

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 import {renderHook} from "@testing-library/react-hooks";
 
-import * as GetGqlDataFromResponse from "../../util/get-gql-data-from-response.js";
-import {GqlRouterContext} from "../../util/gql-router-context.js";
-import {useGql} from "../use-gql.js";
+import * as GetGqlDataFromResponse from "../../util/get-gql-data-from-response";
+import {GqlRouterContext} from "../../util/gql-router-context";
+import {useGql} from "../use-gql";
 
 describe("#useGql", () => {
     beforeEach(() => {
@@ -30,13 +29,13 @@ describe("#useGql", () => {
         const gqlRouterContext = {
             fetch: jest.fn(),
             defaultContext: {},
-        };
+        } as const;
 
         // Act
         const {
             result: {current: result},
         } = renderHook(() => useGql(), {
-            wrapper: ({children}) => (
+            wrapper: ({children}: any) => (
                 <GqlRouterContext.Provider value={gqlRouterContext}>
                     {children}
                 </GqlRouterContext.Provider>
@@ -58,18 +57,18 @@ describe("#useGql", () => {
             });
             const fetchFake = jest
                 .fn()
-                .mockResolvedValue(("FAKE_RESPONSE": any));
+                .mockResolvedValue("FAKE_RESPONSE" as any);
             const gqlRouterContext = {
                 fetch: fetchFake,
                 defaultContext: {
                     a: "defaultA",
                     b: "defaultB",
                 },
-            };
+            } as const;
             const {
                 result: {current: gqlFetch},
             } = renderHook(() => useGql(), {
-                wrapper: ({children}) => (
+                wrapper: ({children}: any) => (
                     <GqlRouterContext.Provider value={gqlRouterContext}>
                         {children}
                     </GqlRouterContext.Provider>
@@ -78,14 +77,14 @@ describe("#useGql", () => {
             const gqlOp = {
                 type: "query",
                 id: "MyQuery",
-            };
+            } as const;
             const gqlOpContext = {
                 a: undefined, // This should not get included.
                 b: "overrideB",
-            };
+            } as const;
             const gqlOpVariables = {
                 var1: "val1",
-            };
+            } as const;
 
             // Act
             await gqlFetch(gqlOp, {
@@ -108,13 +107,13 @@ describe("#useGql", () => {
                     some: "data",
                 });
             const gqlRouterContext = {
-                fetch: jest.fn().mockResolvedValue(("FAKE_RESPONSE": any)),
+                fetch: jest.fn().mockResolvedValue("FAKE_RESPONSE" as any),
                 defaultContext: {},
-            };
+            } as const;
             const {
                 result: {current: gqlFetch},
             } = renderHook(() => useGql(), {
-                wrapper: ({children}) => (
+                wrapper: ({children}: any) => (
                     <GqlRouterContext.Provider value={gqlRouterContext}>
                         {children}
                     </GqlRouterContext.Provider>
@@ -123,7 +122,7 @@ describe("#useGql", () => {
             const gqlOp = {
                 type: "query",
                 id: "MyQuery",
-            };
+            } as const;
 
             // Act
             await gqlFetch(gqlOp);
@@ -141,13 +140,13 @@ describe("#useGql", () => {
                 "getGqlDataFromResponse",
             ).mockRejectedValue(new Error("FAKE_ERROR"));
             const gqlRouterContext = {
-                fetch: jest.fn().mockResolvedValue(("FAKE_RESPONSE": any)),
+                fetch: jest.fn().mockResolvedValue("FAKE_RESPONSE" as any),
                 defaultContext: {},
-            };
+            } as const;
             const {
                 result: {current: gqlFetch},
             } = renderHook(() => useGql(), {
-                wrapper: ({children}) => (
+                wrapper: ({children}: any) => (
                     <GqlRouterContext.Provider value={gqlRouterContext}>
                         {children}
                     </GqlRouterContext.Provider>
@@ -156,7 +155,7 @@ describe("#useGql", () => {
             const gqlOp = {
                 type: "query",
                 id: "MyQuery",
-            };
+            } as const;
 
             // Act
             const act = gqlFetch(gqlOp);
@@ -176,13 +175,13 @@ describe("#useGql", () => {
                 some: "data",
             });
             const gqlRouterContext = {
-                fetch: jest.fn().mockResolvedValue(("FAKE_RESPONSE": any)),
+                fetch: jest.fn().mockResolvedValue("FAKE_RESPONSE" as any),
                 defaultContext: {},
-            };
+            } as const;
             const {
                 result: {current: gqlFetch},
             } = renderHook(() => useGql(), {
-                wrapper: ({children}) => (
+                wrapper: ({children}: any) => (
                     <GqlRouterContext.Provider value={gqlRouterContext}>
                         {children}
                     </GqlRouterContext.Provider>
@@ -191,7 +190,7 @@ describe("#useGql", () => {
             const gqlOp = {
                 type: "mutation",
                 id: "MyMutation",
-            };
+            } as const;
 
             // Act
             const result = await gqlFetch(gqlOp);