@khanacademy/wonder-blocks-testing-core 1.0.0 → 1.0.2

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

@@ -1,103 +0,0 @@
-import * as React from "react";
-
-import type {
-    TestHarnessAdapter,
-    TestHarnessAdapters,
-    TestHarnessConfig,
-    TestHarnessConfigs,
-} from "../types";
-
-/**
- * TestHarnessAdapter<TConfig>
- */
-
-//>  should assert type of config.
-// @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
-((children: React.ReactNode, config: string): React.ReactElement<any> => (
-    <div />
-)) as TestHarnessAdapter<string>;
-//<
-
-/**
- * TestHarnessAdapters
- */
-
-//>  should work for empty case
-({} as TestHarnessAdapters);
-//<
-
-//>  should assert if adapter is not Adapter<TConfig>
-// @ts-expect-error  String is not a adapter function
-({
-    adapterString: "string",
-} as TestHarnessAdapters);
-//<
-
-//>  should work for a function matching Adapter<TConfig>
-({
-    adapterA: (children, config) => <div>test</div>,
-} as TestHarnessAdapters);
-//<
-
-/**
- * TestHarnessConfig<TAdapter>
- */
-//> should give the config type of an adapter
-"string" as TestHarnessConfig<TestHarnessAdapter<string>>;
-//<
-
-//> should error if the config type is wrong
-// 45 is not a string
-// @ts-expect-error: Type '45' is not assignable to type 'string'.
-45 as TestHarnessConfig<TestHarnessAdapter<string>>;
-//<
-
-/**
- * TestHarnessConfigs<TAdapters>
- *
- * NOTE: This only works if the properties of the passed THarnasses type
- * are explicitly typed as `TestHarnessAdapter<TConfig>` so if passing in a
- * non-Adapters type (which we should be, to get strong TConfig types instead
- * of `any`), then that object should make sure that each adapter is strongly
- * marked as `TestHarnessAdapter<TConfig>`.
- */
-const notadapters = "this is wrong";
-const adapterA: TestHarnessAdapter<string> = (
-    children: React.ReactNode,
-    config?: string | null,
-): React.ReactElement<any> => <div />;
-const adapterB: TestHarnessAdapter<number> = (
-    children: React.ReactNode,
-    config?: number | null,
-): React.ReactElement<any> => <div />;
-const adapters = {
-    adapterA,
-    adapterB,
-} as const;
-
-//>  should assert if parameterized type is not valid Adapters
-// string is not a valid Adapter
-// @ts-expect-error: Type 'string' does not satisfy the constraint 'TestHarnessAdapters'
-({} as TestHarnessConfigs<typeof notadapters>);
-//<
-
-//>  should expect one config per adapter
-// both adapter configs missing
-({} as TestHarnessConfigs<typeof adapters>);
-// adapterB config missing
-({adapterA: "test"} as TestHarnessConfigs<typeof adapters>);
-//<
-
-//>  should assert if config does not match adapter config
-// @ts-expect-error: the config type here is a number, not a string
-({
-    adapterA: "a string, this is correct",
-    adapterB: "a string, but it should be a number",
-} as TestHarnessConfigs<typeof adapters>);
-//<

package/src/harness/adapt.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-
-import {getNamedAdapterComponent} from "./get-named-adapter-component";
-
-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 => {
-    // Here we reduce the adapters in order, such that each one becomes the
-    // child of the next, that way the first adapter in the list is the
-    // innermost and the last is the outermost.
-    return Object.entries(adapters).reduce((newChildren, [name, adapter]) => {
-        const theConfig = configs[name];
-        if (theConfig == null) {
-            return newChildren;
-        }
-        const Adapter = getNamedAdapterComponent(name);
-        return (
-            <Adapter key={name} adapter={adapter} config={theConfig}>
-                {newChildren}
-            </Adapter>
-        );
-    }, <>{children}</>);
-};

package/src/harness/adapters/__tests__/__snapshots__/router.test.tsx.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Router.adapter with full config including path should throw if the path does not match the location 1`] = `"The configured path must match the configured location or your harnessed component will not render."`;
-
-exports[`Router.adapter with location config including path should throw if the path does not match the location 1`] = `"The configured path must match the configured location or your harnessed component will not render."`;

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

@@ -1,95 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import * as Css from "../css";
-
-describe("Css.adapter", () => {
-    it("should throw if the config is invalid", () => {
-        // Arrange
-        const badConfig: any = 42;
-
-        // Act
-        const underTest = () => Css.adapter("CHILDREN", badConfig);
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"Invalid config: 42"`,
-        );
-    });
-
-    it("should render the children", () => {
-        // Arrange
-        const children = <div data-testid="children">CHILDREN!</div>;
-
-        // Act
-        render(Css.adapter(children, "test"));
-        const result = screen.getByTestId("children");
-
-        // Assert
-        expect(result).toBeInTheDocument();
-    });
-
-    it("should render a container element", () => {
-        // Arrange
-        const children = <div data-testid="children">CHILDREN!</div>;
-
-        // Act
-        render(Css.adapter(children, "test"));
-        const result = screen.getByTestId("css-adapter-container");
-
-        // Assert
-        expect(result).toBeInTheDocument();
-    });
-
-    it("should render children as a child of the container element", () => {
-        // Arrange
-        const children = <div data-testid="children">CHILDREN!</div>;
-
-        // Act
-        render(Css.adapter(children, "test"));
-        const renderedContainer = screen.getByTestId("css-adapter-container");
-        const renderedChildren = screen.getByTestId("children");
-
-        // Assert
-        expect(renderedContainer).toContainElement(renderedChildren);
-    });
-
-    it.each`
-        config                                                              | expectation
-        ${"class1"}                                                         | ${"class1"}
-        ${["class1", "class2"]}                                             | ${"class1 class2"}
-        ${{classes: ["class1", "class2"], style: {backgroundColor: "red"}}} | ${"class1 class2"}
-    `(
-        "should apply the given class names from $config to the container element",
-        ({config, expectation}: any) => {
-            // Arrange
-            const children = <div data-testid="children">CHILDREN!</div>;
-
-            // Act
-            render(Css.adapter(children, config));
-            const result = screen.getByTestId("css-adapter-container");
-
-            // Assert
-            expect(result).toHaveClass(expectation);
-        },
-    );
-
-    it.each`
-        config                                            | expectation
-        ${{backgroundColor: "red"}}                       | ${{backgroundColor: "red"}}
-        ${{style: {backgroundColor: "red"}, classes: []}} | ${{backgroundColor: "red"}}
-    `(
-        "should apply the given styles from $config to the container element",
-        ({config, expectation}: any) => {
-            // Arrange
-            const children = <div data-testid="children">CHILDREN!</div>;
-
-            // Act
-            render(Css.adapter(children, config));
-            const result = screen.getByTestId("css-adapter-container");
-
-            // Assert
-            expect(result).toHaveStyle(expectation);
-        },
-    );
-});

package/src/harness/adapters/__tests__/error-boundary.test.tsx

@@ -1,121 +0,0 @@
-import * as React from "react";
-import {it, describe, expect} from "@jest/globals";
-import {render} from "@testing-library/react";
-import {renderHook} from "@testing-library/react-hooks";
-
-import * as ErrorBoundary from "../error-boundary";
-
-describe("ErrorBoundary.adapter", () => {
-    describe("when rendering components", () => {
-        it("should render the children when no error is thrown", () => {
-            // Arrange
-            const onError = jest.fn();
-
-            // Act
-            const {container} = render(
-                ErrorBoundary.adapter(<div>CHILDREN</div>, onError),
-            );
-
-            // Assert
-            expect(container).toHaveTextContent("CHILDREN");
-        });
-
-        it("should not call the onError callback when no error is thrown during rendering", () => {
-            // Arrange
-            const onError = jest.fn();
-            const Component = () => <>SUCCESS</>;
-
-            // Act
-            render(ErrorBoundary.adapter(<Component />, onError));
-
-            // Assert
-            expect(onError).not.toHaveBeenCalled();
-        });
-
-        it("should call the onError callback when an error is thrown during rendering", () => {
-            // Arrange
-            jest.spyOn(console, "error").mockImplementation(() => {});
-            const onError = jest.fn();
-            const error = new Error("ErrorComponent");
-            const ErrorComponent = () => {
-                throw error;
-            };
-
-            // Act
-            render(ErrorBoundary.adapter(<ErrorComponent />, onError));
-
-            // Assert
-            expect(onError).toHaveBeenCalledWith(error, expect.anything());
-        });
-
-        it("should render the error message returned by onError", () => {
-            // Arrange
-            jest.spyOn(console, "error").mockImplementation(() => {});
-            const onError = jest.fn(() => "ERROR");
-            const error = new Error("ErrorComponent");
-            const ErrorComponent = () => {
-                throw error;
-            };
-
-            // Act
-            const {container} = render(
-                ErrorBoundary.adapter(<ErrorComponent />, onError),
-            );
-
-            // Assert
-            expect(container).toHaveTextContent("ERROR");
-        });
-
-        it("should render a default error message if onError does not return anything", () => {
-            // Arrange
-            jest.spyOn(console, "error").mockImplementation(() => {});
-            const onError = jest.fn();
-            const error = new Error("ErrorComponent");
-            const ErrorComponent = () => {
-                throw error;
-            };
-
-            // Act
-            const {container} = render(
-                ErrorBoundary.adapter(<ErrorComponent />, onError),
-            );
-
-            // Assert
-            expect(container).toHaveTextContent("An error occurred");
-        });
-    });
-
-    describe("when rendering hooks", () => {
-        it("should call the onError callback when an error is thrown during rendering", () => {
-            // Arrange
-            jest.spyOn(console, "error").mockImplementation(() => {});
-            const onError = jest.fn();
-            const error = new Error("ErrorHook");
-            const hook = () => {
-                throw error;
-            };
-            const Component = ({children}: any) =>
-                ErrorBoundary.adapter(children, onError);
-
-            // Act
-            renderHook(hook, {wrapper: Component});
-
-            // Assert
-            expect(onError).toHaveBeenCalledWith(error, expect.anything());
-        });
-
-        it("should not call the onError callback when no error is thrown during rendering", () => {
-            // Arrange
-            const onError = jest.fn();
-            const hook = () => "SUCCESS";
-            const Component = ({children}: any) =>
-                ErrorBoundary.adapter(children, onError);
-
-            // Act
-            renderHook(hook, {wrapper: Component});
-
-            // Assert
-            expect(onError).not.toHaveBeenCalled();
-        });
-    });
-});

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

@@ -1,30 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import * as Portal from "../portal";
-
-describe("Portal.adapter", () => {
-    it("should render a portal root element", () => {
-        // Arrange
-        const children = <div>CHILDREN!</div>;
-        const portalId = "portal-test-id";
-
-        // Act
-        render(Portal.adapter(children, portalId));
-
-        // Assert
-        expect(screen.getByTestId(portalId)).toBeInTheDocument();
-    });
-
-    it("should render the children correctly", () => {
-        // Arrange
-        const portalId = "portal-test-id";
-        const children = <div>CHILDREN!</div>;
-
-        // Act
-        render(Portal.adapter(children, portalId));
-
-        // Assert
-        expect(screen.getByText("CHILDREN!")).toBeInTheDocument();
-    });
-});

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

@@ -1,252 +0,0 @@
-import * as React from "react";
-import {withRouter, Prompt} from "react-router-dom";
-import {render} from "@testing-library/react";
-import * as Router from "../router";
-
-describe("Router.adapter", () => {
-    it("should throw if the config does not match any expecations", () => {
-        // Arrange
-        const badConfig: any = {
-            bad: "config",
-        };
-
-        // Act
-        const underTest = () => Router.adapter("CHILDREN", badConfig);
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"A location or initial history entries must be provided."`,
-        );
-    });
-
-    describe.each`
-        type          | config
-        ${"string"}   | ${"/math"}
-        ${"location"} | ${{location: "/math"}}
-        ${"full"}     | ${{initialEntries: ["/math"]}}
-    `("with $type config", ({config}: any) => {
-        it("should allow navigation", () => {
-            // Arrange
-            const historyListen = jest.fn();
-            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));
-
-            // Assert
-            expect(historyListen).not.toHaveBeenCalled();
-        });
-
-        it("should have default route match of root /", () => {
-            // Arrange
-            const matchCatcherFn = jest.fn();
-            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));
-
-            // Assert
-            expect(matchCatcherFn).toHaveBeenLastCalledWith(
-                expect.objectContaining({
-                    path: "/",
-                    url: "/",
-                }),
-            );
-        });
-    });
-
-    describe.each`
-        type          | config
-        ${"location"} | ${{location: "/math/calculator", path: "/math/*"}}
-        ${"full"}     | ${{initialEntries: ["/math/calculator"], path: "/math/*"}}
-    `("with $type config including path", ({config}: any) => {
-        it("should include routing for the given path", () => {
-            // Arrange
-            const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(
-                ({match}: any): React.ReactElement | null => {
-                    React.useEffect(() => {
-                        matchCatcherFn(match);
-                    }, [match]);
-                    return null;
-                },
-            );
-
-            // Act
-            render(Router.adapter(<MatchCatcher />, config));
-
-            // Assert
-            expect(matchCatcherFn).toHaveBeenLastCalledWith(
-                expect.objectContaining({
-                    isExact: true,
-                    path: "/math/*",
-                    url: "/math/calculator",
-                }),
-            );
-        });
-
-        it("should throw if the path does not match the location", () => {
-            // Arrange
-            // This is going to cause an error to be logged, so let's silence
-            // that.
-            jest.spyOn(console, "error").mockImplementation(() => {});
-            const badConfig = {
-                ...config,
-                path: "/something/else/entirely",
-            } as const;
-
-            // Act
-            const underTest = () =>
-                render(Router.adapter("CHILDREN", badConfig));
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
-        });
-    });
-
-    describe("with forceStatic", () => {
-        it("should not navigate", () => {
-            // Arrange
-            const historyListen = jest.fn();
-            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 />, {
-                    location: "/math",
-                    forceStatic: true,
-                }),
-            );
-
-            // Assert
-            expect(historyListen).not.toHaveBeenCalled();
-        });
-    });
-
-    describe("with initialEntries", () => {
-        it("should use the defaultConfig location if initialEntries is empty", () => {
-            // Arrange
-            const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(
-                ({match, history}: any): React.ReactElement | null => {
-                    React.useEffect(() => {
-                        matchCatcherFn(match);
-                    }, [match, history]);
-                    return null;
-                },
-            );
-
-            // Act
-            render(
-                Router.adapter(<MatchCatcher />, {
-                    initialEntries: [],
-                }),
-            );
-
-            // Assert
-            expect(matchCatcherFn).toHaveBeenLastCalledWith(
-                expect.objectContaining({
-                    url: Router.defaultConfig.location,
-                }),
-            );
-        });
-
-        it("should set initialIndex prop on MemoryRouter if given in configuration", () => {
-            // Arrange
-            const matchCatcherFn = jest.fn();
-            const MatchCatcher = withRouter(
-                ({match}: any): React.ReactElement | null => {
-                    React.useEffect(() => {
-                        matchCatcherFn(match);
-                    }, [match]);
-                    return null;
-                },
-            );
-
-            // Act
-            render(
-                Router.adapter(<MatchCatcher />, {
-                    initialEntries: ["/location/old", "/location/current"],
-                    initialIndex: 1,
-                    path: "/location/*",
-                }),
-            );
-
-            // Assert
-            expect(matchCatcherFn).toHaveBeenLastCalledWith(
-                expect.objectContaining({
-                    url: "/location/current",
-                }),
-            );
-        });
-
-        it("should set getUserConfirmation prop on MemoryRouter if given in configuration", () => {
-            // Arrange
-            const getUserConfirmationSpy = jest
-                .fn()
-                .mockImplementation((message: any, cb: any) => {
-                    cb(true);
-                });
-            const matchCatcherFn = jest.fn();
-            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(
-                Router.adapter(<MatchCatcher />, {
-                    initialEntries: ["/location/old", "/location/current"],
-                    getUserConfirmation: getUserConfirmationSpy,
-                    path: "/location/*",
-                }),
-            );
-
-            // Assert
-            expect(getUserConfirmationSpy).toHaveBeenCalledWith(
-                "Are you sure?",
-                expect.any(Function),
-            );
-        });
-    });
-});

package/src/harness/adapters/adapters.ts

@@ -1,35 +0,0 @@
-import * as css from "./css";
-import * as errorBoundary from "./error-boundary";
-import * as portal from "./portal";
-import * as router from "./router";
-
-import type {TestHarnessConfigs} from "../types";
-
-/**
- * NOTE: We do not type `DefaultAdapters` with `Adapters` here because we want
- * the individual config types of each adapter to remain intact rather than
- * getting changed to `any`.
- */
-
-/**
- * The default adapters provided by Wonder Blocks.
- */
-export const DefaultAdapters = {
-    // The error boundary is as close to the component under test as possible,
-    // so that other adapters don't soil it with their own errors, if that
-    // should happen.
-    boundary: errorBoundary.adapter,
-    css: css.adapter,
-    portal: portal.adapter,
-    router: router.adapter,
-} as const;
-
-/**
- * The default configurations to use with the `DefaultAdapters`.
- */
-export const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters> = {
-    boundary: errorBoundary.defaultConfig,
-    css: css.defaultConfig,
-    portal: portal.defaultConfig,
-    router: router.defaultConfig,
-} as const;