@khanacademy/wonder-blocks-data 10.0.5 → 10.1.1

package/src/hooks/__tests__/{use-hydratable-effect.test.js → use-hydratable-effect.test.ts}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {
     renderHook as clientRenderHook,
@@ -7,25 +6,18 @@ import {
 import {renderHook as serverRenderHook} from "@testing-library/react-hooks/server";
 
 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 UseServerEffect from "../use-server-effect.js";
-import * as UseSharedCache from "../use-shared-cache.js";
+import {RequestFulfillment} from "../../util/request-fulfillment";
+import * as UseRequestInterception from "../use-request-interception";
+import * as UseServerEffect from "../use-server-effect";
+import * as UseSharedCache from "../use-shared-cache";
 
-import {
-    useHydratableEffect,
-    // 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
-    WhenClientSide,
-} from "../use-hydratable-effect.js";
-
-jest.mock("../use-request-interception.js");
-jest.mock("../use-server-effect.js");
-jest.mock("../use-shared-cache.js");
+import {useHydratableEffect, WhenClientSide} from "../use-hydratable-effect";
+
+jest.mock("../use-request-interception");
+jest.mock("../use-server-effect");
+jest.mock("../use-shared-cache");
 
 describe("#useHydratableEffect", () => {
     beforeEach(() => {
@@ -39,14 +31,14 @@ describe("#useHydratableEffect", () => {
         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],
                 );
                 const currentValue =
@@ -91,7 +83,7 @@ describe("#useHydratableEffect", () => {
             ${undefined /*default*/}                     | ${true}
         `(
             "should call useServerEffect with the handler and hydrate=$hydrate for $clientBehavior",
-            ({hydrate, clientBehavior}) => {
+            ({hydrate, clientBehavior}: any) => {
                 // Arrange
                 const useServerEffectSpy = jest
                     .spyOn(UseServerEffect, "useServerEffect")
@@ -120,7 +112,7 @@ describe("#useHydratableEffect", () => {
             ${"foo"}     | ${"foo"}
         `(
             "should call useSharedCache with id, scope=$scope, and a function to set the default",
-            ({scope, expectedScope}) => {
+            ({scope, expectedScope}: any) => {
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseServerEffect, "useServerEffect").mockReturnValue(
                     Status.success({thisIs: "some data"}),
@@ -208,7 +200,7 @@ describe("#useHydratableEffect", () => {
             ${undefined /*default*/}                     | ${true}
         `(
             "should call useServerEffect with the handler and hydrate=$hydrate for $clientBehavior",
-            ({hydrate, clientBehavior}) => {
+            ({hydrate, clientBehavior}: any) => {
                 // Arrange
                 const useServerEffectSpy = jest
                     .spyOn(UseServerEffect, "useServerEffect")
@@ -247,7 +239,7 @@ describe("#useHydratableEffect", () => {
 
         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);
@@ -266,7 +258,7 @@ describe("#useHydratableEffect", () => {
             ${Status.error(new Error("some error"))}
         `(
             "should fulfill request when server value is $serverResult and clientBehavior is ExecuteWhenNoSuccessResult",
-            ({serverResult}) => {
+            ({serverResult}: any) => {
                 // Arrange
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseServerEffect, "useServerEffect").mockReturnValue(
@@ -293,7 +285,7 @@ describe("#useHydratableEffect", () => {
             ${Status.success("data")}
         `(
             "should fulfill request when server value is $serveResult and clientBehavior is AlwaysExecute",
-            ({serverResult}) => {
+            ({serverResult}: any) => {
                 // Arrange
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseServerEffect, "useServerEffect").mockReturnValue(
@@ -336,7 +328,7 @@ describe("#useHydratableEffect", () => {
             ${Status.success("data")}
         `(
             "should not fulfill request when server value is $serverResult and clientBehavior is ExecuteWhenNoResult",
-            ({serverResult}) => {
+            ({serverResult}: any) => {
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseServerEffect, "useServerEffect").mockReturnValue(
                     serverResult,
@@ -380,7 +372,8 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, waitForNextUpdate} = clientRenderHook(
-                ({requestId}) => useHydratableEffect(requestId, fakeHandler),
+                ({requestId}: any) =>
+                    useHydratableEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
@@ -405,7 +398,8 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useHydratableEffect(requestId, fakeHandler),
+                ({requestId}: any) =>
+                    useHydratableEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
@@ -449,15 +443,14 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useHydratableEffect(requestId, fakeHandler),
+                ({requestId}: any) =>
+                    useHydratableEffect(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"));
@@ -477,15 +470,14 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useHydratableEffect(requestId, fakeHandler),
+                ({requestId}: any) =>
+                    useHydratableEffect(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).toStrictEqual(Status.success("DATA2"));
@@ -517,13 +509,14 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({skip}) => useHydratableEffect("ID", fakeHandler, {skip}),
+                ({skip}: any) => useHydratableEffect("ID", fakeHandler, {skip}),
                 {
                     initialProps: {skip: false},
                 },
             );
             rerender({skip: true});
-            await act((): Promise<mixed> => response1);
+
+            await act((): Promise<any> => response1);
 
             // Assert
             expect(result.all).not.toContainEqual(Status.success("DATA1"));
@@ -541,15 +534,13 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({handler}) => useHydratableEffect("ID", handler),
+                ({handler}: any) => useHydratableEffect("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).toStrictEqual(Status.success("DATA1"));
@@ -565,17 +556,19 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({options}) => useHydratableEffect("ID", fakeHandler),
+                ({options}: any) => useHydratableEffect("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);
+
+            await act((): Promise<any> => response1);
 
             // Assert
             expect(result.current).toStrictEqual(Status.success("DATA1"));
@@ -599,7 +592,7 @@ describe("#useHydratableEffect", () => {
                 result: hookResult,
                 waitForNextUpdate,
             } = clientRenderHook(
-                ({requestId}) =>
+                ({requestId}: any) =>
                     useHydratableEffect(requestId, fakeHandler, {
                         retainResultOnChange: true,
                     }),
@@ -607,7 +600,8 @@ describe("#useHydratableEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            await act((): Promise<mixed> => response1);
+
+            await act((): Promise<any> => response1);
             rerender({requestId: "ID2"});
             const result = hookResult.current;
             await waitForNextUpdate();
@@ -632,7 +626,7 @@ describe("#useHydratableEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) =>
+                ({requestId}: any) =>
                     useHydratableEffect(requestId, fakeHandler, {
                         retainResultOnChange: false,
                     }),
@@ -640,7 +634,8 @@ describe("#useHydratableEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            await act((): Promise<mixed> => response1);
+
+            await act((): Promise<any> => response1);
             rerender({requestId: "ID2"});
 
             // Assert
@@ -659,7 +654,8 @@ describe("#useHydratableEffect", () => {
             const {result} = clientRenderHook(() =>
                 useHydratableEffect("ID", fakeHandler),
             );
-            await act((): Promise<mixed> => response);
+
+            await act((): Promise<any> => response);
 
             // Assert
             expect(result.current).toStrictEqual(Status.success("DATA"));
@@ -679,7 +675,8 @@ describe("#useHydratableEffect", () => {
                     onResultChanged: () => {},
                 }),
             );
-            await act((): Promise<mixed> => response);
+
+            await act((): Promise<any> => response);
 
             // Assert
             expect(result.current).toStrictEqual(Status.loading());
@@ -700,7 +697,8 @@ describe("#useHydratableEffect", () => {
                     onResultChanged,
                 }),
             );
-            await act((): Promise<mixed> => response);
+
+            await act((): Promise<any> => response);
 
             // Assert
             expect(onResultChanged).toHaveBeenCalledWith(

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

@@ -1,8 +1,7 @@
-// @flow
 import * as React from "react";
 import {renderHook} from "@testing-library/react-hooks";
-import InterceptRequests from "../../components/intercept-requests.js";
-import {useRequestInterception} from "../use-request-interception.js";
+import InterceptRequests from "../../components/intercept-requests";
+import {useRequestInterception} from "../use-request-interception";
 
 describe("#useRequestInterception", () => {
     it("should return a function", () => {
@@ -37,7 +36,7 @@ describe("#useRequestInterception", () => {
 
         // Act
         const wrapper = renderHook(
-            ({requestId}) => useRequestInterception(requestId, handler),
+            ({requestId}: any) => useRequestInterception(requestId, handler),
             {initialProps: {requestId: "ID"}},
         );
         const result1 = wrapper.result.current;
@@ -53,7 +52,7 @@ describe("#useRequestInterception", () => {
 
         // Act
         const wrapper = renderHook(
-            ({handler}) => useRequestInterception("ID", handler),
+            ({handler}: any) => useRequestInterception("ID", handler),
             {initialProps: {handler: jest.fn()}},
         );
         const result1 = wrapper.result.current;
@@ -81,6 +80,7 @@ describe("#useRequestInterception", () => {
             {wrapper: Wrapper, initialProps: {interceptor: interceptor1}},
         );
         const result1 = wrapper.result.current;
+        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '{ wrapper: ({ children, interceptor, }: any) => JSX.Element; interceptor: jest.Mock<any, any, any>; }' is not assignable to parameter of type '{ interceptor: jest.Mock<any, any, any>; }'.
         wrapper.rerender({wrapper: Wrapper, interceptor: interceptor2});
         const result2 = wrapper.result.current;
 
@@ -126,6 +126,7 @@ describe("#useRequestInterception", () => {
             interceptedHandler();
 
             // Assert
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'toHaveBeenCalledBefore' does not exist on type 'JestMatchers<Mock<null, [], any>>'.
             expect(interceptorNearest).toHaveBeenCalledBefore(
                 interceptorFurthest,
             );
@@ -153,6 +154,7 @@ describe("#useRequestInterception", () => {
             interceptedHandler();
 
             // Assert
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'toHaveBeenCalledBefore' does not exist on type 'JestMatchers<Mock<null, [], any>>'.
             expect(interceptorFurthest).toHaveBeenCalledBefore(handler);
         });
 

package/src/hooks/__tests__/{use-server-effect.test.js → use-server-effect.test.ts}

@@ -1,19 +1,18 @@
-// @flow
 import {renderHook as clientRenderHook} from "@testing-library/react-hooks";
 import {renderHook as serverRenderHook} from "@testing-library/react-hooks/server";
 
 import {Server} from "@khanacademy/wonder-blocks-core";
 
-import TrackData from "../../components/track-data.js";
-import {RequestFulfillment} from "../../util/request-fulfillment.js";
-import {SsrCache} from "../../util/ssr-cache.js";
-import {RequestTracker} from "../../util/request-tracking.js";
-import {DataError} from "../../util/data-error.js";
-import * as UseRequestInterception from "../use-request-interception.js";
+import TrackData from "../../components/track-data";
+import {RequestFulfillment} from "../../util/request-fulfillment";
+import {SsrCache} from "../../util/ssr-cache";
+import {RequestTracker} from "../../util/request-tracking";
+import {DataError} from "../../util/data-error";
+import * as UseRequestInterception from "../use-request-interception";
 
-import {useServerEffect} from "../use-server-effect.js";
+import {useServerEffect} from "../use-server-effect";
 
-jest.mock("../use-request-interception.js");
+jest.mock("../use-request-interception");
 
 describe("#useServerEffect", () => {
     beforeEach(() => {
@@ -33,7 +32,7 @@ describe("#useServerEffect", () => {
         jest.spyOn(
             UseRequestInterception,
             "useRequestInterception",
-        ).mockImplementation((_, handler) => handler);
+        ).mockImplementation((_: any, handler: any) => handler);
     });
 
     it("should call useRequestInterception", () => {
@@ -140,6 +139,7 @@ describe("#useServerEffect", () => {
             const interceptedHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
                 data: "DATA",
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
                 error: null,
             });
             jest.spyOn(
@@ -165,6 +165,7 @@ describe("#useServerEffect", () => {
             const fakeHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
                 data: "DATA",
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
                 error: null,
             });
 
@@ -181,7 +182,9 @@ describe("#useServerEffect", () => {
             // Arrange
             const fakeHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'ValidCacheData'.
                 data: null,
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'undefined'.
                 error: "ERROR",
             });
 
@@ -221,6 +224,7 @@ describe("#useServerEffect", () => {
             const fakeHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
                 data: "DATA",
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'undefined'.
                 error: null,
             });
 
@@ -237,7 +241,9 @@ describe("#useServerEffect", () => {
             // Arrange
             const fakeHandler = jest.fn();
             jest.spyOn(SsrCache.Default, "getEntry").mockReturnValueOnce({
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'ValidCacheData'.
                 data: null,
+                // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'undefined'.
                 error: "ERROR",
             });
 

package/src/hooks/__tests__/{use-shared-cache.test.js → use-shared-cache.test.ts}

@@ -1,7 +1,6 @@
-// @flow
 import {renderHook as clientRenderHook} from "@testing-library/react-hooks";
 
-import {useSharedCache, SharedCache} from "../use-shared-cache.js";
+import {useSharedCache, SharedCache} from "../use-shared-cache";
 
 describe("#useSharedCache", () => {
     beforeEach(() => {
@@ -14,7 +13,7 @@ describe("#useSharedCache", () => {
         ${""}
         ${5}
         ${() => "BOO"}
-    `("should throw if the id is $id", ({id}) => {
+    `("should throw if the id is $id", ({id}: any) => {
         // Arrange
 
         // Act
@@ -30,7 +29,7 @@ describe("#useSharedCache", () => {
         ${""}
         ${5}
         ${() => "BOO"}
-    `("should throw if the scope is $scope", ({scope}) => {
+    `("should throw if the scope is $scope", ({scope}: any) => {
         // Arrange
 
         // Act
@@ -49,6 +48,7 @@ describe("#useSharedCache", () => {
         } = clientRenderHook(() => useSharedCache("id", "scope"));
 
         // Assert
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'toBeArrayOfSize' does not exist on type 'JestMatchers<[ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]>'.
         expect(result).toBeArrayOfSize(2);
     });
 
@@ -110,7 +110,7 @@ describe("#useSharedCache", () => {
         it("should be the same function if the id and scope remain the same", () => {
             // Arrange
             const wrapper = clientRenderHook(
-                ({id, scope}) => useSharedCache(id, scope),
+                ({id, scope}: any) => useSharedCache(id, scope),
                 {initialProps: {id: "id", scope: "scope"}},
             );
 
@@ -123,14 +123,14 @@ describe("#useSharedCache", () => {
             const result2 = wrapper.result.current;
 
             // Assert
-            // $FlowIgnore[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Error | [ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]'.
             expect(result1[1]).toBe(result2[1]);
         });
 
         it("should be a new function if the id changes", () => {
             // Arrange
             const wrapper = clientRenderHook(
-                ({id}) => useSharedCache(id, "scope"),
+                ({id}: any) => useSharedCache(id, "scope"),
                 {
                     initialProps: {id: "id"},
                 },
@@ -142,14 +142,14 @@ describe("#useSharedCache", () => {
             const result2 = wrapper.result.current;
 
             // Assert
-            // $FlowIgnore[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Error | [ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]'.
             expect(result1[1]).not.toBe(result2[1]);
         });
 
         it("should be a new function if the scope changes", () => {
             // Arrange
             const wrapper = clientRenderHook(
-                ({scope}) => useSharedCache("id", scope),
+                ({scope}: any) => useSharedCache("id", scope),
                 {
                     initialProps: {scope: "scope"},
                 },
@@ -161,7 +161,7 @@ describe("#useSharedCache", () => {
             const result2 = wrapper.result.current;
 
             // Assert
-            // $FlowIgnore[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'Error | [ValidCacheData | null | undefined, CacheValueFn<ValidCacheData>]'.
             expect(result1[1]).not.toBe(result2[1]);
         });
 
@@ -186,7 +186,7 @@ describe("#useSharedCache", () => {
             value
             ${undefined}
             ${null}
-        `("should purge the value from the cache if $value", ({value}) => {
+        `("should purge the value from the cache if $value", ({value}: any) => {
             // Arrange
             const wrapper = clientRenderHook(() =>
                 useSharedCache("id", "scope"),
@@ -225,7 +225,7 @@ describe("#useSharedCache", () => {
         id
         ${"id1"}
         ${"id2"}
-    `("should not share cache if scope is different", ({id}) => {
+    `("should not share cache if scope is different", ({id}: any) => {
         // Arrange
         const hook1 = clientRenderHook(() => useSharedCache("id1", "scope1"));
         const hook2 = clientRenderHook(() => useSharedCache(id, "scope2"));
@@ -243,7 +243,7 @@ describe("#useSharedCache", () => {
         scope
         ${"scope1"}
         ${"scope2"}
-    `("should not share cache if id is different", ({scope}) => {
+    `("should not share cache if id is different", ({scope}: any) => {
         // Arrange
         const hook1 = clientRenderHook(() => useSharedCache("id1", "scope1"));
         const hook2 = clientRenderHook(() => useSharedCache("id2", scope));