@khanacademy/wonder-blocks-testing 10.1.1 → 11.0.0

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__/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/css.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-
-import type {CSSProperties} from "aphrodite";
-
-import type {TestHarnessAdapter} from "../types";
-
-type Config =
-    | string
-    | Array<string>
-    | CSSProperties
-    | {
-          classes: Array<string>;
-          style: CSSProperties;
-      };
-
-// The default configuration is to omit this adapter.
-export const defaultConfig: Config | null | undefined = null;
-
-const normalizeConfig = (
-    config: Config,
-): {
-    classes: Array<string>;
-    style: CSSProperties;
-} => {
-    if (typeof config === "string") {
-        return {classes: [config], style: {} as Partial<CSSProperties>};
-    }
-
-    if (Array.isArray(config)) {
-        return {classes: config, style: {} as Partial<CSSProperties>};
-    }
-
-    if (typeof config === "object") {
-        if (
-            "classes" in config &&
-            config.classes != null &&
-            "style" in config &&
-            config.style != null
-        ) {
-            return config;
-        }
-
-        return {classes: [], style: config as CSSProperties};
-    }
-
-    throw new Error(`Invalid config: ${config}`);
-};
-
-/**
- * Test harness adapter for adding CSS to the harnessed component wrapper.
- */
-export const adapter: TestHarnessAdapter<Config> = (
-    children: React.ReactNode,
-    config: Config,
-): React.ReactElement<any> => {
-    const {classes, style} = normalizeConfig(config);
-    return (
-        <div
-            data-testid="css-adapter-container"
-            className={classes.join(" ")}
-            style={style}
-        >
-            {children}
-        </div>
-    );
-};

package/src/harness/adapters/portal.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-
-import type {TestHarnessAdapter} from "../types";
-
-type Config = string;
-
-// The default configuration is to omit this adapter.
-export const defaultConfig: Config | null | undefined = null;
-
-/**
- * Test harness adapter for supporting portals.
- *
- * Some components rely on rendering with a React Portal. This adapter ensures
- * that the DOM contains a mounting point for the portal with the expected
- * identifier.
- */
-export const adapter: TestHarnessAdapter<Config> = (
-    children: React.ReactNode,
-    config: Config,
-): React.ReactElement<any> => (
-    <>
-        <div id={config} data-testid={config} />
-        {children}
-    </>
-);