@khanacademy/wonder-blocks-testing 8.0.21 → 9.1.0

package/src/fixtures/fixtures.tsx

@@ -27,8 +27,7 @@ export const fixtures = <
     let storyNumber = 1;
 
     const getPropsOptions = {
-        // @ts-expect-error [FEI-5019] - TS7006 - Parameter 'message' implicitly has an 'any' type. | TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
-        log: (message, ...args) => action(message)(...args),
+        log: (message: string, ...args: Array<any>) => action(message)(...args),
         logHandler: action,
     } as const;
 

package/src/gql/mock-gql-fetch.ts

@@ -6,7 +6,7 @@ import type {GqlFetchMockFn, GqlMockOperation} from "./types";
  * A mock for the fetch function passed to GqlRouter.
  */
 export const mockGqlFetch = (): GqlFetchMockFn =>
-    mockRequester<GqlMockOperation<any, any, any>, any>(
+    mockRequester<GqlMockOperation<any, any, any>>(
         gqlRequestMatchesMock,
         // Note that the identation at the start of each line is important.
         // TODO(somewhatabstract): Make a stringify that indents each line of

package/src/harness/__tests__/adapt.test.tsx

@@ -0,0 +1,200 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Adapt} from "../adapt";
+
+import type {TestHarnessAdapter, TestHarnessConfigs} from "../types";
+
+describe("Adapt", () => {
+    it("should render children if no adapters", () => {
+        // Arrange
+        const children = <div>Adapt me!</div>;
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={{}} configs={{}}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              <div>
+                Adapt me!
+              </div>
+            </div>
+        `);
+    });
+
+    it("should invoke the adapter with its corresponding config", () => {
+        // Arrange
+        const children = <div>Adapt me!</div>;
+        const adapters = {
+            adapterA: jest
+                .fn()
+                .mockReturnValue("ADAPTER A") as TestHarnessAdapter<string>,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "APPLY A CONFIG",
+        };
+
+        // Act
+        render(
+            <Adapt adapters={adapters} configs={configs}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(adapters.adapterA).toHaveBeenCalledWith(
+            expect.anything(),
+            "APPLY A CONFIG",
+        );
+    });
+
+    it("should render each adapter and the children", () => {
+        // Arrange
+        const children = "Adapt me!";
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => (
+            <>
+                {conf}
+                {c}
+            </>
+        );
+        const adapters = {
+            adapterA: adapter,
+            adapterB: adapter,
+            adapterC: adapter,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: "B",
+            adapterC: "C",
+        };
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              C
+              B
+              A
+              Adapt me!
+            </div>
+        `);
+    });
+
+    it("should skip adapters where the corresponding config is null", () => {
+        // Arrange
+        const children = "Adapt me!";
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => (
+            <>
+                {conf}
+                {c}
+            </>
+        );
+        const adapters = {
+            adapterA: adapter,
+            adapterB: adapter,
+            adapterC: adapter,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: null,
+            adapterC: "C",
+        };
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              C
+              A
+              Adapt me!
+            </div>
+        `);
+    });
+
+    it("should render such that contexts are properly setup in order", () => {
+        // Arrange
+        const MyContext = React.createContext("root");
+        const ContextRoot = ({children}: any): React.ReactElement => {
+            const value = React.useContext(MyContext);
+            if (value !== "root") {
+                throw new Error("Don't nest this");
+            }
+            return (
+                <MyContext.Provider value={"other"}>
+                    {children}
+                </MyContext.Provider>
+            );
+        };
+        const adapterNoContext: TestHarnessAdapter<string> = (
+            c: any,
+            conf: any,
+        ) => (
+            <>
+                {conf}
+                {c}
+            </>
+        );
+        const adapterWithContext: TestHarnessAdapter<string> = (
+            c: any,
+            conf: string,
+        ) => (
+            <ContextRoot>
+                {conf}
+                {c}
+            </ContextRoot>
+        );
+        const adapters = {
+            adapterA: adapterNoContext,
+            adapterB: adapterWithContext,
+            adapterC: adapterNoContext,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: "B",
+            adapterC: "C",
+        };
+        const ChildComponent = (props: any): React.ReactElement => {
+            const value = React.useContext(MyContext);
+            if (value === "default") {
+                throw new Error("Context not setup properly");
+            }
+            return <div>{value}</div>;
+        };
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                <ChildComponent />
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              C
+              B
+              A
+              <div>
+                other
+              </div>
+            </div>
+        `);
+    });
+});

package/src/harness/__tests__/adapter.test.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {TestHarnessAdapter} from "../types";
+
+import {Adapter} from "../adapter";
+
+describe("Adapter", () => {
+    it("should render only the children if the adapter config is nullish", () => {
+        // Arrange
+        const adapter: TestHarnessAdapter<string> = (children, config) => (
+            <div id="adapter">
+                {config}
+                {children}
+            </div>
+        );
+        const children = "Adapt me!";
+
+        // Act
+        const {container: result} = render(
+            <Adapter
+                adapter={adapter}
+                config={null as null | undefined | string}
+            >
+                {children}
+            </Adapter>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              Adapt me!
+            </div>
+        `);
+    });
+
+    it("should render the adapter around the children if the config is not nullish", () => {
+        // Arrange
+        const adapter: TestHarnessAdapter<string> = (children, config) => (
+            <div id="adapter">
+                {config}
+                {children}
+            </div>
+        );
+        const children = "Adapt me!";
+        const config = "this-is-the-config";
+
+        // Act
+        const {container: result} = render(
+            <Adapter adapter={adapter} config={config}>
+                {children}
+            </Adapter>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              <div
+                id="adapter"
+              >
+                this-is-the-config
+                Adapt me!
+              </div>
+            </div>
+        `);
+    });
+});

package/src/harness/__tests__/hook-harness.test.ts

@@ -34,7 +34,8 @@ describe("#hookHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'harnessFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-hook-harness")'.
+        // @ts-expect-error We know harnessFake isn't real, we add it in the
+        // mocks at the top of this file.
         const [{harnessFake}, {hookHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-hook-harness"),
@@ -54,7 +55,8 @@ describe("#hookHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'returnValueFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-hook-harness")'.
+        // @ts-expect-error We know harnessFake isn't real, we add it in the
+        // mocks at the top of this file.
         const [{returnValueFake}, {hookHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-hook-harness"),

package/src/harness/__tests__/make-test-harness.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {Route} from "react-router-dom";
 import {render} from "@testing-library/react";
 
-import * as RA from "../render-adapters";
+import * as RA from "../adapt";
 import {makeTestHarness} from "../make-test-harness";
 import {DefaultConfigs, DefaultAdapters} from "../adapters/adapters";
 
@@ -75,7 +75,7 @@ describe("#makeTestHarness", () => {
                         DefaultConfigs,
                     );
                     const Component = () => <div>test</div>;
-                    const renderSpy = jest.spyOn(RA, "renderAdapters");
+                    const renderSpy = jest.spyOn(RA, "Adapt");
 
                     // Act
                     const HarnessedComponent = testHarness(Component);
@@ -83,9 +83,12 @@ describe("#makeTestHarness", () => {
 
                     // Assert
                     expect(renderSpy).toHaveBeenCalledWith(
-                        DefaultAdapters,
-                        DefaultConfigs,
-                        expect.anything(),
+                        {
+                            adapters: DefaultAdapters,
+                            configs: DefaultConfigs,
+                            children: expect.anything(),
+                        },
+                        {},
                     );
                 });
 
@@ -132,7 +135,7 @@ describe("#makeTestHarness", () => {
                         router: "/mysecretplace",
                     };
                     const Component = () => <div>test</div>;
-                    const renderSpy = jest.spyOn(RA, "renderAdapters");
+                    const renderSpy = jest.spyOn(RA, "Adapt");
 
                     // Act
                     const HarnessedComponent = testHarness(
@@ -143,12 +146,15 @@ describe("#makeTestHarness", () => {
 
                     // Assert
                     expect(renderSpy).toHaveBeenCalledWith(
-                        DefaultAdapters,
                         {
-                            ...DefaultConfigs,
-                            router: configOverrides.router,
+                            adapters: DefaultAdapters,
+                            configs: {
+                                ...DefaultConfigs,
+                                router: configOverrides.router,
+                            },
+                            children: expect.anything(),
                         },
-                        expect.anything(),
+                        {},
                     );
                 });
 

package/src/harness/__tests__/test-harness.test.ts

@@ -35,7 +35,8 @@ describe("#testHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'harnessFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-test-harness")'.
+        // @ts-expect-error We know harnessFake isn't real, we add it in the
+        // mocks at the top of this file.
         const [{harnessFake}, {testHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-test-harness"),
@@ -56,7 +57,8 @@ describe("#testHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'returnValueFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-test-harness")'.
+        // @ts-expect-error We know harnessFake isn't real, we add it in the
+        // mocks at the top of this file.
         const [{returnValueFake}, {testHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-test-harness"),

package/src/harness/__tests__/types.typestest.tsx

@@ -12,13 +12,10 @@ import type {
  */
 
 //>  should assert type of config.
-// @ts-expect-error [FEI-5019] - TS2352 - Conversion of type '(children: React.ReactNode, config: number) => React.ReactElement<any>' to type 'TestHarnessAdapter<string>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
-((
-    children: React.ReactNode,
-    // TConfig is string, but we typed this arg as a number
-    // $FlowExpectedError[incompatible-cast]
-    config: number,
-): React.ReactElement<any> => <div />) as TestHarnessAdapter<string>;
+// @ts-expect-error TConfig is string, but we typed config as a number
+((children: React.ReactNode, config: number): React.ReactElement<any> => (
+    <div />
+)) as TestHarnessAdapter<string>;
 //<
 
 //>  should work for correct definition
@@ -36,10 +33,8 @@ import type {
 //<
 
 //>  should assert if adapter is not Adapter<TConfig>
-// @ts-expect-error [FEI-5019] - TS2352 - Conversion of type '{ adapterString: string; }' to type 'TestHarnessAdapters' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+// @ts-expect-error  String is not a adapter function
 ({
-    // String is not a adapter function
-    // $FlowExpectedError[incompatible-cast]
     adapterString: "string",
 } as TestHarnessAdapters);
 //<
@@ -100,11 +95,9 @@ const adapters = {
 //<
 
 //>  should assert if config does not match adapter config
-// @ts-expect-error: Conversion of type '{ adapterA: string; adapterB: string; }' to type 'TestHarnessConfigs<{ readonly adapterA: TestHarnessAdapter<string>; readonly adapterB: TestHarnessAdapter<number>; }>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Types of property 'adapterB' are incompatible. Type 'string' is not comparable to type 'number'.
+// @ts-expect-error: the config type here is a number, not a string
 ({
     adapterA: "a string, this is correct",
-    // the config type here is a number, not a string
-    // $FlowExpectedError[incompatible-cast]
     adapterB: "a string, but it should be a number",
 } as TestHarnessConfigs<typeof adapters>);
 //<

package/src/harness/adapt.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+import {Adapter} from "./adapter";
+
+import type {TestHarnessConfigs, TestHarnessAdapters} from "./types";
+
+type Props<TAdapters extends TestHarnessAdapters> = {
+    children: React.ReactNode;
+    adapters: TAdapters;
+    configs: TestHarnessConfigs<TAdapters>;
+};
+
+/**
+ * Render a set of adapters around the given children.
+ *
+ * Adapters are rendered with the last adapter being the outermost and the first
+ * adapter being the innermost, with children being the innermost of all. This
+ * ensures that we are backwards compatible with previous releases of the
+ * test harness.
+ */
+export const Adapt = <TAdapters extends TestHarnessAdapters>({
+    children,
+    adapters,
+    configs,
+}: Props<TAdapters>): React.ReactElement => {
+    // We start at the end of the adapter list and work backwards to be
+    // compatible with previous releases.
+    const thisAdapterName = Object.keys(adapters).at(-1);
+    if (thisAdapterName == null) {
+        // There are no adapters. Just render the children.
+        return <>{children}</>;
+    }
+
+    const thisAdapter = adapters[thisAdapterName];
+    const thisConfig = configs[thisAdapterName];
+
+    // NOTE: We could simplify this by using an array of tuples as the input
+    // prop, but that complicates other things like testing and I think
+    // for simplicities sake elsewhere, this is good enough.
+    const restAdapters = Object.fromEntries(
+        Object.entries(adapters).slice(0, -1),
+    );
+    const restConfigs = Object.fromEntries(
+        // The config object may not be ordered the same as the adapters so
+        // we must filter by adapter name here.
+        Object.entries(configs).filter(([name]) => name !== thisAdapterName),
+    );
+    return (
+        <Adapter adapter={thisAdapter} config={thisConfig}>
+            <Adapt adapters={restAdapters} configs={restConfigs}>
+                {children}
+            </Adapt>
+        </Adapter>
+    );
+};

package/src/harness/adapter.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+import type {TestHarnessAdapter} from "./types";
+
+type Props<TConfig, TAdapter extends TestHarnessAdapter<TConfig>> = {
+    children: React.ReactNode;
+    adapter: TAdapter;
+    config: TConfig | null | undefined;
+};
+
+/**
+ * Component that optionally renders a given adapter with the given config.
+ *
+ * If the config is nullish, then the children are rendered in a fragment,
+ * otherwise the children are rendered within the given adapter with the
+ * given config.
+ */
+export const Adapter = <TConfig, TAdapter extends TestHarnessAdapter<TConfig>>({
+    children,
+    adapter,
+    config,
+}: Props<TConfig, TAdapter>): React.ReactElement => {
+    if (config == null) {
+        return <>{children}</>;
+    }
+    return adapter(children, config);
+};

package/src/harness/adapters/__tests__/data.test.tsx

@@ -21,8 +21,12 @@ 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>;
+            return (
+                <div>
+                    CONTENT:{" "}
+                    {result.status === "success" ? result.data : undefined}
+                </div>
+            );
         };
 
         // Act
@@ -43,8 +47,12 @@ 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>;
+            return (
+                <div>
+                    CONTENT:
+                    {result.status === "success" ? result.data : undefined}
+                </div>
+            );
         };
 
         // Act

package/src/harness/adapters/__tests__/ssr.test.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+import * as WBCore from "@khanacademy/wonder-blocks-core";
+import {makeTestHarness} from "../../make-test-harness";
+
+import * as SSR from "../ssr";
+
+jest.mock("@khanacademy/wonder-stuff-core", () => {
+    const actualCore = jest.requireActual("@khanacademy/wonder-stuff-core");
+    return {
+        ...actualCore,
+        RenderStateRoot: (props: any) => (
+            <actualCore.RenderStateRoot {...props} />
+        ),
+    };
+});
+
+describe("SSR.adapter", () => {
+    it("should render the RenderStateRoot", () => {
+        // Arrange
+        const children = <div>CHILDREN!</div>;
+        const renderStateRootSpy = jest.spyOn(WBCore, "RenderStateRoot");
+
+        // Act
+        render(SSR.adapter(children, true));
+
+        // Assert
+        expect(renderStateRootSpy).toHaveBeenCalledWith(
+            {
+                children,
+            },
+            {},
+        );
+    });
+
+    it("should render the children correctly", () => {
+        // Arrange
+        const children = <div>CHILDREN!</div>;
+
+        // Act
+        render(SSR.adapter(children, true));
+
+        // Assert
+        expect(screen.getByText("CHILDREN!")).toBeInTheDocument();
+    });
+
+    it("should enable harnessing of components that require RenderStateRoot", () => {
+        // Arrange
+        const ComponentNeedsSsr = (props: any) => {
+            const idf = WBCore.useUniqueIdWithoutMock();
+            return <div>{idf?.get("my-id")}</div>;
+        };
+        const testHarness = makeTestHarness(
+            {
+                ssr: SSR.adapter,
+            },
+            {
+                ssr: true,
+            },
+        );
+        const Harnessed = testHarness(ComponentNeedsSsr);
+
+        // Act
+        const underTest = () => render(<Harnessed />);
+
+        // Assert
+        expect(underTest).not.toThrowError();
+    });
+
+    it("should throw on bad configuration", () => {
+        // Arrange
+        const children = <div>CHILDREN!</div>;
+
+        // Act
+        const underTest = () => render(SSR.adapter(children, false as any));
+
+        // Assert
+        expect(underTest).toThrowErrorMatchingInlineSnapshot(
+            `"Unexpected configuration: set config to null to turn this adapter off"`,
+        );
+    });
+});

package/src/harness/adapters/adapters.ts

@@ -2,6 +2,7 @@ import * as css from "./css";
 import * as data from "./data";
 import * as portal from "./portal";
 import * as router from "./router";
+import * as ssr from "./ssr";
 
 import type {TestHarnessConfigs} from "../types";
 
@@ -19,6 +20,7 @@ export const DefaultAdapters = {
     data: data.adapter,
     portal: portal.adapter,
     router: router.adapter,
+    ssr: ssr.adapter,
 } as const;
 
 /**
@@ -29,4 +31,5 @@ export const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters> = {
     data: data.defaultConfig,
     portal: portal.defaultConfig,
     router: router.defaultConfig,
+    ssr: ssr.defaultConfig,
 } as const;

package/src/harness/adapters/css.tsx

@@ -40,9 +40,7 @@ const normalizeConfig = (
             return config;
         }
 
-        // @ts-expect-error: at this point, `CSSProperties` is the only thing
-        // that `config` can be.
-        return {classes: [], style: config};
+        return {classes: [], style: config as CSSProperties};
     }
 
     throw new Error(`Invalid config: ${config}`);