@khanacademy/wonder-blocks-testing 10.1.1 → 11.0.1

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

@@ -1,248 +0,0 @@
-import * as React from "react";
-import {render, screen} 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>
-        `);
-    });
-
-    it("should not remount the component under test when rerendered", () => {
-        // Arrange
-        const MyComponent = ({value}: any) => {
-            const ref = React.useRef(value);
-
-            // If the ref matches the value, then things were just mounted
-            // as the ref was initialized with the value.
-            // If they don't match then we got re-rendered with a new value
-            // and the existing ref.
-            if (ref.current !== value) {
-                return <>RE-RENDERED</>;
-            }
-
-            return <>JUST MOUNTED</>;
-        };
-        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",
-        };
-        const {rerender} = render(
-            <Adapt adapters={adapters} configs={configs}>
-                <MyComponent value={1} />
-            </Adapt>,
-        );
-
-        // Act
-        rerender(
-            <Adapt adapters={adapters} configs={configs}>
-                <MyComponent value={2} />
-            </Adapt>,
-        );
-
-        // Assert
-        expect(screen.getByText(/RE-RENDERED/)).toBeInTheDocument();
-    });
-});

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

@@ -1,73 +0,0 @@
-import {jest as ws} from "@khanacademy/wonder-stuff-testing";
-import * as MHH from "../make-hook-harness";
-import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters";
-
-jest.mock("../make-hook-harness", () => {
-    const returnValueFake = {
-        thisisa: "PRETEND REACT COMPONENT",
-    } as const;
-    const harnessFake = jest.fn().mockReturnValue(returnValueFake);
-    return {
-        harnessFake,
-        returnValueFake,
-        makeHookHarness: jest.fn().mockReturnValue(harnessFake),
-    };
-});
-
-describe("#hookHarness", () => {
-    it("should be created by calling makeHookHarness with the DefaultAdapters and DefaultConfigs", async () => {
-        // Arrange
-        const makeHookHarnessSpy = jest.spyOn(MHH, "makeHookHarness");
-
-        // Act
-        await ws.isolateModules(() => import("../hook-harness"));
-
-        // Assert
-        expect(makeHookHarnessSpy).toHaveBeenCalledWith(
-            DefaultAdapters,
-            DefaultConfigs,
-        );
-    });
-
-    it("should invoke the function made by makeHookHarness", async () => {
-        // Arrange
-        const config = {
-            router: "/boo",
-        } as const;
-        // @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"),
-                import("../hook-harness"),
-            ]),
-        );
-
-        // Act
-        hookHarness(config);
-
-        // Assert
-        expect(harnessFake).toHaveBeenCalledWith(config);
-    });
-
-    it("should return the returned value of the function made by makeHookHarness", async () => {
-        // Arrange
-        const config = {
-            router: "/boo",
-        } as const;
-        // @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"),
-                import("../hook-harness"),
-            ]),
-        );
-
-        // Act
-        const result = hookHarness(config);
-
-        // Assert
-        expect(result).toBe(returnValueFake);
-    });
-});

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

@@ -1,93 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-import {makeHookHarness} from "../make-hook-harness";
-import * as MTH from "../make-test-harness";
-
-describe("#makeHookHarness", () => {
-    it("should call makeTestHarness", () => {
-        // Arrange
-        const makeTestHarnessSpy = jest.spyOn(MTH, "makeTestHarness");
-        const adapters = {
-            adapter: jest.fn(),
-        } as const;
-        const defaultConfigs = {
-            adapter: {},
-        } as const;
-
-        // Act
-        makeHookHarness(adapters, defaultConfigs);
-
-        // Assert
-        expect(makeTestHarnessSpy).toHaveBeenCalledWith(
-            adapters,
-            defaultConfigs,
-        );
-    });
-
-    it("should return a function", () => {
-        const adapters = {
-            adapter: jest.fn(),
-        } as const;
-        const defaultConfigs = {
-            adapter: {},
-        } as const;
-
-        // Act
-        const result = makeHookHarness(adapters, defaultConfigs);
-
-        // Assert
-        expect(result).toBeFunction();
-    });
-
-    describe("returned function", () => {
-        it("should invoke the function returned by makeTestHarness with component and the configs", () => {
-            // Arrange
-            const harnessSpy = jest.fn();
-            jest.spyOn(MTH, "makeTestHarness").mockReturnValue(harnessSpy);
-            const adapters = {
-                adapter: jest.fn(),
-            } as const;
-            const defaultConfigs = {
-                adapter: {},
-            } as const;
-            const configs = {
-                adapter: {},
-            } as const;
-            const hookHarness = makeHookHarness(adapters, defaultConfigs);
-
-            // Act
-            hookHarness(configs);
-
-            // Assert
-            expect(harnessSpy).toHaveBeenCalledWith(
-                expect.any(Function),
-                configs,
-            );
-        });
-
-        it("should pass a component that just renders the children it is given", () => {
-            // Arrange
-            const harnessSpy = jest.fn();
-            jest.spyOn(MTH, "makeTestHarness").mockReturnValue(harnessSpy);
-            const adapters = {
-                adapter: jest.fn(),
-            } as const;
-            const defaultConfigs = {
-                adapter: {},
-            } as const;
-            const configs = {
-                adapter: {},
-            } as const;
-            const children = "THE CHILDREN";
-
-            // Act
-            const hookHarness = makeHookHarness(adapters, defaultConfigs);
-            hookHarness(configs);
-            const Component = harnessSpy.mock.calls[0][0];
-            const {container} = render(<Component>{children}</Component>);
-
-            // Assert
-            expect(container).toHaveTextContent(children);
-        });
-    });
-});

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

@@ -1,195 +0,0 @@
-import * as React from "react";
-import {Route} from "react-router-dom";
-import {render} from "@testing-library/react";
-
-import * as RA from "../adapt";
-import {makeTestHarness} from "../make-test-harness";
-import {DefaultConfigs, DefaultAdapters} from "../adapters/adapters";
-
-describe("#makeTestHarness", () => {
-    it("should return a function", () => {
-        // Arrange
-
-        // Act
-        const result = makeTestHarness(DefaultAdapters, DefaultConfigs);
-
-        // Assert
-        expect(result).toBeFunction();
-    });
-
-    describe("returned function", () => {
-        describe("returned component", () => {
-            it("should have displayName generated from component displayName", () => {
-                // Arrange
-                const testHarness = makeTestHarness(
-                    DefaultAdapters,
-                    DefaultConfigs,
-                );
-                const Component = () => <div>test</div>;
-                Component.displayName = "MyNamedComponent";
-
-                // Act
-                const {displayName: result} = testHarness(Component);
-
-                // Assert
-                expect(result).toBe("testHarness(MyNamedComponent)");
-            });
-
-            it("should have displayName generated from component name in absence of displayName", () => {
-                // Arrange
-                const testHarness = makeTestHarness(
-                    DefaultAdapters,
-                    DefaultConfigs,
-                );
-                const Component = function MyFunctionNamedComponent() {
-                    return <div>test</div>;
-                };
-
-                // Act
-                const {displayName: result} = testHarness(Component);
-
-                // Assert
-                expect(result).toBe("testHarness(MyFunctionNamedComponent)");
-            });
-
-            it("should have default displayName in absence of displayName or name", () => {
-                // Arrange
-                const testHarness = makeTestHarness(
-                    DefaultAdapters,
-                    DefaultConfigs,
-                );
-                const Component = () => <div>test</div>;
-
-                // Act
-                const {displayName: result} = testHarness(Component);
-
-                // Assert
-                expect(result).toBe("testHarness(Component)");
-            });
-
-            describe("if config is omitted", () => {
-                it("should render with defaults", () => {
-                    // Arrange
-                    const testHarness = makeTestHarness(
-                        DefaultAdapters,
-                        DefaultConfigs,
-                    );
-                    const Component = () => <div>test</div>;
-                    const renderSpy = jest.spyOn(RA, "Adapt");
-
-                    // Act
-                    const HarnessedComponent = testHarness(Component);
-                    render(<HarnessedComponent />);
-
-                    // Assert
-                    expect(renderSpy).toHaveBeenCalledWith(
-                        {
-                            adapters: DefaultAdapters,
-                            configs: DefaultConfigs,
-                            children: expect.anything(),
-                        },
-                        {},
-                    );
-                });
-
-                it("should render harnessed component", () => {
-                    // Arrange
-                    const testHarness = makeTestHarness(
-                        DefaultAdapters,
-                        DefaultConfigs,
-                    );
-                    const Component = (props: {text: string}) => (
-                        <div>{props.text}</div>
-                    );
-
-                    // Act
-                    const HarnessedComponent = testHarness(Component, {
-                        // Need to provide a key as this a snapshot test that will
-                        // break because of MemoryRouter using random keys
-                        // otherwise. Could also use `forceStatic` to avoid this.
-                        router: {location: {pathname: "/", key: "root"}},
-                    });
-                    const {container} = render(
-                        <HarnessedComponent text="Test!" />,
-                    );
-
-                    // Assert
-                    expect(container).toMatchInlineSnapshot(`
-                        <div>
-                          <div>
-                            Test!
-                          </div>
-                        </div>
-                    `);
-                });
-            });
-
-            describe("if config overrides a default", () => {
-                it("should render with updated config", () => {
-                    // Arrange
-                    const testHarness = makeTestHarness(
-                        DefaultAdapters,
-                        DefaultConfigs,
-                    );
-                    const configOverrides: Partial<typeof DefaultConfigs> = {
-                        router: "/mysecretplace",
-                    };
-                    const Component = () => <div>test</div>;
-                    const renderSpy = jest.spyOn(RA, "Adapt");
-
-                    // Act
-                    const HarnessedComponent = testHarness(
-                        Component,
-                        configOverrides,
-                    );
-                    render(<HarnessedComponent />);
-
-                    // Assert
-                    expect(renderSpy).toHaveBeenCalledWith(
-                        {
-                            adapters: DefaultAdapters,
-                            configs: {
-                                ...DefaultConfigs,
-                                router: configOverrides.router,
-                            },
-                            children: expect.anything(),
-                        },
-                        {},
-                    );
-                });
-
-                it("should render harnessed component", () => {
-                    // Arrange
-                    const testHarness = makeTestHarness(
-                        DefaultAdapters,
-                        DefaultConfigs,
-                    );
-                    const configOverrides: Partial<typeof DefaultConfigs> = {
-                        router: "/mysecretplace/test",
-                    };
-                    // Render a route match that only works if we render our
-                    // overridden location.
-                    const Component = (props: {text: string}) => (
-                        <Route path="/mysecretplace/*">{props.text}</Route>
-                    );
-
-                    // Act
-                    const HarnessedComponent = testHarness(
-                        Component,
-                        configOverrides,
-                    );
-                    const {container} = render(
-                        <HarnessedComponent text="Test!" />,
-                    );
-
-                    // Assert
-                    expect(container).toMatchInlineSnapshot(`
-                        <div>
-                          Test!
-                        </div>
-                    `);
-                });
-            });
-        });
-    });
-});

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

@@ -1,75 +0,0 @@
-import {jest as ws} from "@khanacademy/wonder-stuff-testing";
-import * as MTH from "../make-test-harness";
-import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters";
-
-jest.mock("../make-test-harness", () => {
-    const returnValueFake = {
-        thisisa: "PRETEND REACT COMPONENT",
-    } as const;
-    const harnessFake = jest.fn().mockReturnValue(returnValueFake);
-    return {
-        harnessFake,
-        returnValueFake,
-        makeTestHarness: jest.fn().mockReturnValue(harnessFake),
-    };
-});
-
-describe("#testHarness", () => {
-    it("should be created by calling makeTestHarness with the DefaultAdapters and DefaultConfigs", async () => {
-        // Arrange
-        const makeTestHarnessSpy = jest.spyOn(MTH, "makeTestHarness");
-
-        // Act
-        await ws.isolateModules(() => import("../hook-harness"));
-
-        // Assert
-        expect(makeTestHarnessSpy).toHaveBeenCalledWith(
-            DefaultAdapters,
-            DefaultConfigs,
-        );
-    });
-
-    it("should invoke the function made by makeTestHarness", async () => {
-        // Arrange
-        const Component = () => null;
-        const config = {
-            router: "/boo",
-        } as const;
-        // @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"),
-                import("../test-harness"),
-            ]),
-        );
-
-        // Act
-        testHarness(Component, config);
-
-        // Assert
-        expect(harnessFake).toHaveBeenCalledWith(Component, config);
-    });
-
-    it("should return the returned value of the function made by makeTestHarness", async () => {
-        // Arrange
-        const Component = () => null;
-        const config = {
-            router: "/boo",
-        } as const;
-        // @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"),
-                import("../test-harness"),
-            ]),
-        );
-
-        // Act
-        const result = testHarness(Component, config);
-
-        // Assert
-        expect(result).toBe(returnValueFake);
-    });
-});