@khanacademy/wonder-blocks-testing 7.1.10 → 7.1.12

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {withRouter, Prompt} from "react-router-dom";
 import {render} from "@testing-library/react";
@@ -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,4 +1,3 @@
-// @flow
 import * as css from "./css";
 import * as data from "./data";
 import * as portal from "./portal";
@@ -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,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import type {CSSProperties} from "aphrodite";
@@ -9,36 +8,40 @@ 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";
 
-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,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import type {TestHarnessAdapter} from "../types";
@@ -6,7 +5,7 @@ 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}

package/src/harness/adapters/router.tsx

@@ -0,0 +1,218 @@
+import * as React from "react";
+
+import {StaticRouter, MemoryRouter, Route, Switch} from "react-router-dom";
+
+// @ts-expect-error [FEI-5019] - TS2305 - Module '"react-router-dom"' has no exported member 'LocationShape'. | TS2305 - Module '"react-router-dom"' has no exported member 'Location'.
+import type {LocationShape, Location} from "react-router-dom";
+import type {TestHarnessAdapter} from "../types";
+
+type MemoryRouterProps = JSX.LibraryManagedAttributes<
+    typeof MemoryRouter,
+    React.ComponentProps<typeof MemoryRouter>
+>;
+
+/**
+ * Configuration for the withLocation test harness adapter.
+ */
+type Config = // The initial location to use.
+
+        | Readonly<
+              | {
+                    /**
+                     * See MemoryRouter prop for initialEntries.
+                     */
+                    initialEntries: MemoryRouterProps["initialEntries"];
+                    /**
+                     * See MemoryRouter prop for initialIndex.
+                     */
+                    initialIndex?: MemoryRouterProps["initialIndex"];
+                    /**
+                     * See MemoryRouter prop for getUserConfirmation.
+                     */
+                    getUserConfirmation?: MemoryRouterProps["getUserConfirmation"];
+                    /**
+                     * A path match to use.
+                     *
+                     * When this is specified, the harnessed component will be
+                     * rendered inside a `Route` handler with this path.
+                     *
+                     * If the path matches the location, then the route will
+                     * render the component.
+                     *
+                     * If the path does not match the location, then the route
+                     * will not render the component.
+                     */
+                    path?: string;
+                }
+              | {
+                    /**
+                     * The location to use.
+                     */
+                    location: string | Location;
+                    /**
+                     * Force the use of a StaticRouter, instead of MemoryRouter.
+                     */
+                    forceStatic: true;
+                    /**
+                     * A path match to use.
+                     *
+                     * When this is specified, the harnessed component will be
+                     * rendered inside a `Route` handler with this path.
+                     *
+                     * If the path matches the location, then the route will
+                     * render the component.
+                     *
+                     * If the path does not match the location, then the route
+                     * will not render the component.
+                     */
+                    path?: string;
+                }
+              | {
+                    /**
+                     * The initial location to use.
+                     */
+                    location: string | LocationShape;
+                    /**
+                     * A path match to use.
+                     *
+                     * When this is specified, the harnessed component will be
+                     * rendered inside a `Route` handler with this path.
+                     *
+                     * If the path matches the location, then the route will
+                     * render the component.
+                     *
+                     * If the path does not match the location, then the route
+                     * will not render the component.
+                     */
+                    path?: string;
+                }
+          >
+        | string;
+
+/**
+ * The default configuration for this adapter.
+ */
+export const defaultConfig = {location: "/"} as const;
+
+const maybeWithRoute = (
+    children: React.ReactNode,
+    path?: string | null,
+): React.ReactElement => {
+    if (path == null) {
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
+        return children;
+    }
+
+    return (
+        <Switch>
+            <Route exact={true} path={path}>
+                {children}
+            </Route>
+            <Route
+                path="*"
+                render={() => {
+                    throw new Error(
+                        "The configured path must match the configured location or your harnessed component will not render.",
+                    );
+                }}
+            />
+        </Switch>
+    );
+};
+
+/**
+ * Adapter that sets up a router and AppShell location-specific contexts.
+ *
+ * This allows you to ensure that components are being tested in the
+ * AppShell world.
+ *
+ * NOTE(somewhatabstract): The AppShell component itself already does
+ * the work of setting up routing and the AppShellContext and so using this
+ * adapter with the App component will have zero-effect since AppShell will
+ * override it.
+ */
+export const adapter: TestHarnessAdapter<Config> = (
+    children: React.ReactNode,
+    config: Config,
+): React.ReactElement<any> => {
+    if (typeof config === "string") {
+        config = {
+            location: config,
+        };
+    }
+
+    // Wrap children with the various contexts and routes, as per the config.
+    const wrappedWithRoute = maybeWithRoute(children, config.path);
+    // @ts-expect-error [FEI-5019] - TS2339 - Property 'forceStatic' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+    if (config.forceStatic) {
+        /**
+         * There may be times (SSR testing comes to mind) where we will be
+         * really strict about not permitting client-side navigation events.
+         */
+        return (
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'location' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+            <StaticRouter location={config.location} context={{}}>
+                {wrappedWithRoute}
+            </StaticRouter>
+        );
+    }
+
+    /**
+     * OK, we must be OK with a memory router.
+     *
+     * There are two flavors of config for this. The easy one with just a
+     * location, and the complex one for those gnarlier setups.
+     *
+     * First, the easy one.
+     */
+    // @ts-expect-error [FEI-5019] - TS2339 - Property 'location' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+    if (typeof config.location !== "undefined") {
+        return (
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'location' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+            <MemoryRouter initialEntries={[config.location]}>
+                {wrappedWithRoute}
+            </MemoryRouter>
+        );
+    }
+
+    /**
+     * If it's not the easy one, it should be the complex one.
+     * Let's make sure we have good data (also keeps TypeScript happy).
+     */
+    // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialEntries' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+    if (typeof config.initialEntries === "undefined") {
+        throw new Error(
+            "A location or initial history entries must be provided.",
+        );
+    }
+
+    /**
+     * What should happen if no entries were in the array?
+     * It likely uses the root one anyway, but a consistent API is what
+     * we want, so let's ensure we always have our default location at least.
+     */
+    const entries =
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialEntries' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+        config.initialEntries.length === 0
+            ? [defaultConfig.location]
+            : // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialEntries' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+              config.initialEntries;
+
+    // Memory router doesn't allow us to pass maybe types in its TypeScript types.
+    // So let's build props then spread them.
+    const routerProps: MemoryRouterProps = {
+        initialEntries: entries,
+    };
+    // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialIndex' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+    if (config.initialIndex != null) {
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialIndex' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+        routerProps.initialIndex = config.initialIndex;
+    }
+    // @ts-expect-error [FEI-5019] - TS2339 - Property 'getUserConfirmation' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+    if (config.getUserConfirmation != null) {
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'getUserConfirmation' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
+        routerProps.getUserConfirmation = config.getUserConfirmation;
+    }
+
+    return <MemoryRouter {...routerProps}>{wrappedWithRoute}</MemoryRouter>;
+};

package/src/harness/{hook-harness.js → hook-harness.ts}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import {makeHookHarness} from "./make-hook-harness";
@@ -16,8 +15,8 @@ import type {TestHarnessConfigs} from "./types";
  * function.
  */
 export const hookHarness: (
-    configs?: $Shape<TestHarnessConfigs<typeof DefaultAdapters>>,
-) => React.AbstractComponent<any, any> = makeHookHarness(
+    configs?: Partial<TestHarnessConfigs<typeof DefaultAdapters>>,
+) => React.ForwardRefExoticComponent<any> = makeHookHarness(
     DefaultAdapters,
     DefaultConfigs,
 );

package/src/harness/{make-hook-harness.js → make-hook-harness.ts}

@@ -1,10 +1,10 @@
-// @flow
 import * as React from "react";
 
 import {makeTestHarness} from "./make-test-harness";
 
 import type {TestHarnessAdapters, TestHarnessConfigs} from "./types";
 
+// @ts-expect-error [FEI-5019] - TS7031 - Binding element 'children' implicitly has an 'any' type.
 const HookHarness = ({children}) => children;
 
 /**
@@ -21,12 +21,12 @@ const HookHarness = ({children}) => children;
  *     configs?: $Shape<TestHarnessConfigs<TAdapters>>,
  * ) => React.AbstractComponent<any, any>} A test harness.
  */
-export const makeHookHarness = <TAdapters: TestHarnessAdapters>(
+export const makeHookHarness = <TAdapters extends TestHarnessAdapters>(
     adapters: TAdapters,
     defaultConfigs: TestHarnessConfigs<TAdapters>,
 ): ((
-    configs?: $Shape<TestHarnessConfigs<TAdapters>>,
-) => React.AbstractComponent<any, any>) => {
+    configs?: Partial<TestHarnessConfigs<TAdapters>>,
+) => React.ForwardRefExoticComponent<any>) => {
     const testHarness = makeTestHarness<TAdapters>(adapters, defaultConfigs);
     /**
      * Create a harness to use as a wrapper when rendering hooks.
@@ -34,6 +34,6 @@ export const makeHookHarness = <TAdapters: TestHarnessAdapters>(
      * @param {$Shape<Configs<typeof DefaultAdapters>>} [configs] Any adapter
      * configuration that you want to override from the DefaultConfigs values.
      */
-    return (configs?: $Shape<TestHarnessConfigs<TAdapters>>) =>
-        testHarness<any, any>(HookHarness, configs);
+    return (configs?: Partial<TestHarnessConfigs<TAdapters>>) =>
+        testHarness<any>(HookHarness, configs);
 };