@khanacademy/wonder-blocks-testing 7.1.9 → 7.1.11

package/src/harness/adapters/__tests__/{css.test.js → css.test.tsx}

@@ -1,8 +1,7 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import * as Css from "../css.js";
+import * as Css from "../css";
 
 describe("Css.adapter", () => {
     it("should throw if the config is invalid", () => {
@@ -62,7 +61,7 @@ describe("Css.adapter", () => {
         ${{classes: ["class1", "class2"], style: {backgroundColor: "red"}}} | ${"class1 class2"}
     `(
         "should apply the given class names from $config to the container element",
-        ({config, expectation}) => {
+        ({config, expectation}: any) => {
             // Arrange
             const children = <div data-test-id="children">CHILDREN!</div>;
 
@@ -81,7 +80,7 @@ describe("Css.adapter", () => {
         ${{style: {backgroundColor: "red"}, classes: []}} | ${{backgroundColor: "red"}}
     `(
         "should apply the given styles from $config to the container element",
-        ({config, expectation}) => {
+        ({config, expectation}: any) => {
             // Arrange
             const children = <div data-test-id="children">CHILDREN!</div>;
 

package/src/harness/adapters/__tests__/{data.test.js → data.test.tsx}

@@ -1,8 +1,7 @@
-// @flow
 import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 import {useCachedEffect} from "@khanacademy/wonder-blocks-data";
-import * as Data from "../data.js";
+import * as Data from "../data";
 
 describe("WonderBlocksData.adapter", () => {
     it("should render children when configuration arrays are empty", () => {
@@ -22,13 +21,14 @@ describe("WonderBlocksData.adapter", () => {
         const TestFixture = () => {
             const [result] = useCachedEffect("ID", jest.fn());
 
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'data' does not exist on type 'Result<ValidCacheData>'.
             return <div>CONTENT: {result?.data}</div>;
         };
 
         // Act
         const {container} = render(
             Data.adapter(<TestFixture />, () =>
-                Promise.resolve(("INTERCEPTED!": any)),
+                Promise.resolve("INTERCEPTED!" as any),
             ),
         );
 
@@ -43,13 +43,14 @@ describe("WonderBlocksData.adapter", () => {
         const TestFixture = () => {
             const [result] = useCachedEffect("ID", jest.fn());
 
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'data' does not exist on type 'Result<ValidCacheData>'.
             return <div>CONTENT:{result?.data}</div>;
         };
 
         // Act
         const {container} = render(
             Data.adapter(<TestFixture />, () =>
-                Promise.resolve(("INTERCEPTED!": any)),
+                Promise.resolve("INTERCEPTED!" as any),
             ),
         );
 

package/src/harness/adapters/__tests__/{portal.test.js → portal.test.tsx}

@@ -1,8 +1,7 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
-import * as Portal from "../portal.js";
+import * as Portal from "../portal";
 
 describe("Portal.adapter", () => {
     it("should render a portal root element", () => {

package/src/harness/adapters/__tests__/{router.test.js → router.test.tsx}

@@ -1,8 +1,7 @@
-// @flow
 import * as React from "react";
 import {withRouter, Prompt} from "react-router-dom";
 import {render} from "@testing-library/react";
-import * as Router from "../router.js";
+import * as Router from "../router";
 
 describe("Router.adapter", () => {
     it("should throw if the config does not match any expecations", () => {
@@ -25,17 +24,22 @@ describe("Router.adapter", () => {
         ${"string"}   | ${"/math"}
         ${"location"} | ${{location: "/math"}}
         ${"full"}     | ${{initialEntries: ["/math"]}}
-    `("with $type config", ({config}) => {
+    `("with $type config", ({config}: any) => {
         it("should allow navigation", () => {
             // Arrange
             const historyListen = jest.fn();
-            const HistoryListener = withRouter(({history}): React.Node => {
-                React.useEffect(() => history.listen(historyListen), [history]);
-                if (history.location.pathname === "/math") {
-                    history.push("/math/calculator");
-                }
-                return null;
-            });
+            const HistoryListener = withRouter(
+                ({history}: any): React.ReactElement | null => {
+                    React.useEffect(
+                        () => history.listen(historyListen),
+                        [history],
+                    );
+                    if (history.location.pathname === "/math") {
+                        history.push("/math/calculator");
+                    }
+                    return null;
+                },
+            );
 
             // Act
             render(Router.adapter(<HistoryListener />, config));
@@ -47,15 +51,17 @@ describe("Router.adapter", () => {
         it("should have default route match of root /", () => {
             // Arrange
             const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(({match, history}): React.Node => {
-                React.useEffect(() => {
-                    if (history.location.pathname === "/math") {
-                        history.push("/math/calculator");
-                    }
-                    matchCatcherFn(match);
-                }, [match, history]);
-                return null;
-            });
+            const MatchCatcher = withRouter(
+                ({match, history}: any): React.ReactElement | null => {
+                    React.useEffect(() => {
+                        if (history.location.pathname === "/math") {
+                            history.push("/math/calculator");
+                        }
+                        matchCatcherFn(match);
+                    }, [match, history]);
+                    return null;
+                },
+            );
 
             // Act
             render(Router.adapter(<MatchCatcher />, config));
@@ -74,16 +80,18 @@ describe("Router.adapter", () => {
         type          | config
         ${"location"} | ${{location: "/math/calculator", path: "/math/*"}}
         ${"full"}     | ${{initialEntries: ["/math/calculator"], path: "/math/*"}}
-    `("with $type config including path", ({config}) => {
+    `("with $type config including path", ({config}: any) => {
         it("should include routing for the given path", () => {
             // Arrange
             const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(({match}): React.Node => {
-                React.useEffect(() => {
-                    matchCatcherFn(match);
-                }, [match]);
-                return null;
-            });
+            const MatchCatcher = withRouter(
+                ({match}: any): React.ReactElement | null => {
+                    React.useEffect(() => {
+                        matchCatcherFn(match);
+                    }, [match]);
+                    return null;
+                },
+            );
 
             // Act
             render(Router.adapter(<MatchCatcher />, config));
@@ -106,7 +114,7 @@ describe("Router.adapter", () => {
             const badConfig = {
                 ...config,
                 path: "/something/else/entirely",
-            };
+            } as const;
 
             // Act
             const underTest = () =>
@@ -121,13 +129,18 @@ describe("Router.adapter", () => {
         it("should not navigate", () => {
             // Arrange
             const historyListen = jest.fn();
-            const HistoryListener = withRouter(({history}): React.Node => {
-                React.useEffect(() => history.listen(historyListen), [history]);
-                if (history.location.pathname === "/math") {
-                    history.push("/math/calculator");
-                }
-                return null;
-            });
+            const HistoryListener = withRouter(
+                ({history}: any): React.ReactElement | null => {
+                    React.useEffect(
+                        () => history.listen(historyListen),
+                        [history],
+                    );
+                    if (history.location.pathname === "/math") {
+                        history.push("/math/calculator");
+                    }
+                    return null;
+                },
+            );
 
             // Act
             render(
@@ -146,12 +159,14 @@ describe("Router.adapter", () => {
         it("should use the defaultConfig location if initialEntries is empty", () => {
             // Arrange
             const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(({match, history}): React.Node => {
-                React.useEffect(() => {
-                    matchCatcherFn(match);
-                }, [match, history]);
-                return null;
-            });
+            const MatchCatcher = withRouter(
+                ({match, history}: any): React.ReactElement | null => {
+                    React.useEffect(() => {
+                        matchCatcherFn(match);
+                    }, [match, history]);
+                    return null;
+                },
+            );
 
             // Act
             render(
@@ -171,12 +186,14 @@ describe("Router.adapter", () => {
         it("should set initialIndex prop on MemoryRouter if given in configuration", () => {
             // Arrange
             const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(({match}): React.Node => {
-                React.useEffect(() => {
-                    matchCatcherFn(match);
-                }, [match]);
-                return null;
-            });
+            const MatchCatcher = withRouter(
+                ({match}: any): React.ReactElement | null => {
+                    React.useEffect(() => {
+                        matchCatcherFn(match);
+                    }, [match]);
+                    return null;
+                },
+            );
 
             // Act
             render(
@@ -199,20 +216,22 @@ describe("Router.adapter", () => {
             // Arrange
             const getUserConfirmationSpy = jest
                 .fn()
-                .mockImplementation((message, cb) => {
+                .mockImplementation((message: any, cb: any) => {
                     cb(true);
                 });
             const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(({match, history}): React.Node => {
-                React.useEffect(() => {
-                    if (history.location.pathname === "/location/old") {
-                        // Fire off a location change.
-                        history.goForward();
-                    }
-                    matchCatcherFn(match);
-                }, [match, history]);
-                return <Prompt message="Are you sure?" />;
-            });
+            const MatchCatcher = withRouter(
+                ({match, history}: any): React.ReactElement => {
+                    React.useEffect(() => {
+                        if (history.location.pathname === "/location/old") {
+                            // Fire off a location change.
+                            history.goForward();
+                        }
+                        matchCatcherFn(match);
+                    }, [match, history]);
+                    return <Prompt message="Are you sure?" />;
+                },
+            );
 
             // Act
             render(

package/src/harness/adapters/{adapters.js → adapters.ts}

@@ -1,10 +1,9 @@
-// @flow
-import * as css from "./css.js";
-import * as data from "./data.js";
-import * as portal from "./portal.js";
-import * as router from "./router.js";
+import * as css from "./css";
+import * as data from "./data";
+import * as portal from "./portal";
+import * as router from "./router";
 
-import type {TestHarnessConfigs} from "../types.js";
+import type {TestHarnessConfigs} from "../types";
 
 /**
  * NOTE: We do not type `DefaultAdapters` with `Adapters` here because we want
@@ -20,7 +19,7 @@ export const DefaultAdapters = {
     data: data.adapter,
     portal: portal.adapter,
     router: router.adapter,
-};
+} as const;
 
 /**
  * The default configurations to use with the `DefaultAdapters`.

package/src/harness/adapters/{css.js → css.tsx}

@@ -1,44 +1,47 @@
-// @flow
 import * as React from "react";
 
 import type {CSSProperties} from "aphrodite";
 
-import type {TestHarnessAdapter} from "../types.js";
+import type {TestHarnessAdapter} from "../types";
 
 type Config =
     | string
     | Array<string>
     | CSSProperties
-    | {|
-          classes: Array<string>,
-          style: CSSProperties,
-      |};
+    | {
+          classes: Array<string>;
+          style: CSSProperties;
+      };
 
 // The default configuration is to omit this adapter.
-export const defaultConfig: ?Config = null;
+export const defaultConfig: Config | null | undefined = null;
 
 const normalizeConfig = (
     config: Config,
-): {|classes: Array<string>, style: CSSProperties|} => {
+): {
+    classes: Array<string>;
+    style: CSSProperties;
+} => {
     if (typeof config === "string") {
-        return {classes: [config], style: ({}: $Shape<CSSProperties>)};
+        return {classes: [config], style: {} as Partial<CSSProperties>};
     }
 
     if (Array.isArray(config)) {
-        return {classes: config, style: ({}: $Shape<CSSProperties>)};
+        return {classes: config, style: {} as Partial<CSSProperties>};
     }
 
     if (typeof config === "object") {
-        if (config.classes != null && config.style != null) {
-            // This is a heuristic check and by nature isn't perfect.
-            // So we have to tell flow to just accept it.
-            // $FlowIgnore[prop-missing]
+        if (
+            "classes" in config &&
+            config.classes != null &&
+            "style" in config &&
+            config.style != null
+        ) {
             return config;
         }
 
-        // Again, since the previous check is heuristic, so is this outcome
-        // and so we still have to assure flow everything is OK.
-        // $FlowIgnore[prop-missing]
+        // @ts-expect-error: at this point, `CSSProperties` is the only thing
+        // that `config` can be.
         return {classes: [], style: config};
     }
 
@@ -49,9 +52,9 @@ const normalizeConfig = (
  * Test harness adapter for adding CSS to the harnessed component wrapper.
  */
 export const adapter: TestHarnessAdapter<Config> = (
-    children: React.Node,
+    children: React.ReactNode,
     config: Config,
-): React.Element<any> => {
+): React.ReactElement<any> => {
     const {classes, style} = normalizeConfig(config);
     return (
         <div

package/src/harness/adapters/{data.js → data.tsx}

@@ -1,16 +1,18 @@
-// @flow
 import * as React from "react";
 import {InterceptRequests} from "@khanacademy/wonder-blocks-data";
-import type {TestHarnessAdapter} from "../types.js";
+import type {TestHarnessAdapter} from "../types";
 
-type Interceptor = React.ElementConfig<typeof InterceptRequests>["interceptor"];
+type Interceptor = JSX.LibraryManagedAttributes<
+    typeof InterceptRequests,
+    React.ComponentProps<typeof InterceptRequests>
+>["interceptor"];
 
 type Config = Interceptor | Array<Interceptor>;
 
 /**
  * Default configuration for the Wonder Blocks Data adapter.
  */
-export const defaultConfig = ([]: Array<Interceptor>);
+export const defaultConfig = [] as Array<Interceptor>;
 
 /**
  * Test harness adapter to mock Wonder Blocks Data usage.
@@ -20,9 +22,9 @@ export const defaultConfig = ([]: Array<Interceptor>);
  * are not overriding one another.
  */
 export const adapter: TestHarnessAdapter<Config> = (
-    children: React.Node,
+    children: React.ReactNode,
     config: Config,
-): React.Element<any> => {
+): React.ReactElement<any> => {
     // First we render the cache intercepts.
     let currentChildren = children;
 

package/src/harness/adapters/{portal.js → portal.tsx}

@@ -1,12 +1,11 @@
-// @flow
 import * as React from "react";
 
-import type {TestHarnessAdapter} from "../types.js";
+import type {TestHarnessAdapter} from "../types";
 
 type Config = string;
 
 // The default configuration is to omit this adapter.
-export const defaultConfig: ?Config = null;
+export const defaultConfig: Config | null | undefined = null;
 
 /**
  * Test harness adapter for supporting portals.
@@ -16,9 +15,9 @@ export const defaultConfig: ?Config = null;
  * identifier.
  */
 export const adapter: TestHarnessAdapter<Config> = (
-    children: React.Node,
+    children: React.ReactNode,
     config: Config,
-): React.Element<any> => (
+): React.ReactElement<any> => (
     <>
         <div id={config} data-test-id={config} />
         {children}