@khanacademy/wonder-blocks-testing 4.0.3 → 5.0.1

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

@@ -0,0 +1,190 @@
+// @flow
+import * as React from "react";
+import {Route} from "react-router-dom";
+import {render} from "@testing-library/react";
+
+import * as RA from "../render-adapters.js";
+import {makeTestHarness} from "../make-test-harness.js";
+import {DefaultConfigs, DefaultAdapters} from "../adapters/adapters.js";
+
+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, "renderAdapters");
+
+                    // Act
+                    const HarnessedComponent = testHarness(Component);
+                    render(<HarnessedComponent />);
+
+                    // Assert
+                    expect(renderSpy).toHaveBeenCalledWith(
+                        DefaultAdapters,
+                        DefaultConfigs,
+                        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: $Shape<typeof DefaultConfigs> = {
+                        router: "/mysecretplace",
+                    };
+                    const Component = () => <div>test</div>;
+                    const renderSpy = jest.spyOn(RA, "renderAdapters");
+
+                    // Act
+                    const HarnessedComponent = testHarness(
+                        Component,
+                        configOverrides,
+                    );
+                    render(<HarnessedComponent />);
+
+                    // Assert
+                    expect(renderSpy).toHaveBeenCalledWith(
+                        DefaultAdapters,
+                        {
+                            ...DefaultConfigs,
+                            router: configOverrides.router,
+                        },
+                        expect.anything(),
+                    );
+                });
+
+                it("should render harnessed component", () => {
+                    // Arrange
+                    const testHarness = makeTestHarness(
+                        DefaultAdapters,
+                        DefaultConfigs,
+                    );
+                    const configOverrides: $Shape<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__/render-adapters.test.js

@@ -0,0 +1,88 @@
+// @flow
+import * as React from "react";
+import {renderAdapters} from "../render-adapters.js";
+
+import type {TestHarnessAdapter, TestHarnessConfigs} from "../types.js";
+
+describe("#renderAdapters", () => {
+    it("should return children if no adapters", () => {
+        // Arrange
+        const children = <div>Adapt me!</div>;
+
+        // Act
+        const result = renderAdapters({}, {}, children);
+
+        // Assert
+        expect(result).toBe(children);
+    });
+
+    it("should invoke the adapter with its corresponding config", () => {
+        // Arrange
+        const children = <div>Adapt me!</div>;
+        const adapters = {
+            adapterA: ((jest.fn(): any): TestHarnessAdapter<string>),
+        };
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "APPLY A CONFIG",
+        };
+
+        // Act
+        renderAdapters(adapters, configs, children);
+
+        // Assert
+        expect(adapters.adapterA).toHaveBeenCalledWith(
+            children,
+            "APPLY A CONFIG",
+        );
+    });
+
+    it("should render each adapter and the children", () => {
+        // Arrange
+        const children = "Adapt me!";
+        const adapter: TestHarnessAdapter<string> = (c, conf) => {
+            // $FlowIgnore[incompatible-type] We know, it's ok.
+            return `${conf}:${c}`;
+        };
+        const adapters = {
+            adapterA: adapter,
+            adapterB: adapter,
+            adapterC: adapter,
+        };
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: "B",
+            adapterC: "C",
+        };
+
+        // Act
+        const result = renderAdapters(adapters, configs, children);
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"C:B:A:Adapt me!"`);
+    });
+
+    it("should skip adapters where the corresponding config is null", () => {
+        // Arrange
+        const children = "Adapt me!";
+        const adapter: TestHarnessAdapter<string> = (c, conf) => {
+            // $FlowIgnore[incompatible-type] We know, it's ok.
+            return `${conf}:${c}`;
+        };
+        const adapters = {
+            adapterA: adapter,
+            adapterB: adapter,
+            adapterC: adapter,
+        };
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: null,
+            adapterC: "C",
+        };
+
+        // Act
+        const result = renderAdapters(adapters, configs, children);
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`"C:A:Adapt me!"`);
+    });
+});

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

@@ -0,0 +1,74 @@
+// @flow
+import {jest as ws} from "@khanacademy/wonder-stuff-testing";
+import * as MTH from "../make-test-harness.js";
+import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters.js";
+
+jest.mock("../make-test-harness.js", () => {
+    const returnValueFake = {
+        thisisa: "PRETEND REACT COMPONENT",
+    };
+    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.js"));
+
+        // Assert
+        expect(makeTestHarnessSpy).toHaveBeenCalledWith(
+            DefaultAdapters,
+            DefaultConfigs,
+        );
+    });
+
+    it("should invoke the function made by makeTestHarness", async () => {
+        // Arrange
+        const Component = () => null;
+        const config = {
+            router: "/boo",
+        };
+        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        const [{harnessFake}, {testHarness}] = await ws.isolateModules(() =>
+            Promise.all([
+                import("../make-test-harness.js"),
+                import("../test-harness.js"),
+            ]),
+        );
+
+        // 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",
+        };
+        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        const [{returnValueFake}, {testHarness}] = await ws.isolateModules(() =>
+            Promise.all([
+                import("../make-test-harness.js"),
+                import("../test-harness.js"),
+            ]),
+        );
+
+        // Act
+        const result = testHarness(Component, config);
+
+        // Assert
+        expect(result).toBe(returnValueFake);
+    });
+});

package/src/harness/__tests__/types.flowtest.js

@@ -0,0 +1,115 @@
+// @flow
+import * as React from "react";
+
+import type {
+    TestHarnessAdapter,
+    TestHarnessAdapters,
+    TestHarnessConfig,
+    TestHarnessConfigs,
+} from "../types.js";
+
+/**
+ * TestHarnessAdapter<TConfig>
+ */
+
+//>  should assert type of config.
+((
+    children: React.Node,
+    // TConfig is string, but we typed this arg as a number
+    // $FlowExpectedError[incompatible-cast]
+    config: number,
+): React.Element<any> => <div />: TestHarnessAdapter<string>);
+//<
+
+//>  should work for correct definition
+((children: React.Node, config: string): React.Element<any> => (
+    <div />
+): TestHarnessAdapter<string>);
+//<
+
+/**
+ * TestHarnessAdapters
+ */
+
+//>  should work for empty case
+({}: TestHarnessAdapters);
+//<
+
+//>  should assert if adapter is not Adapter<TConfig>
+({
+    // String is not a adapter function
+    // $FlowExpectedError[incompatible-cast]
+    adapterString: "string",
+}: TestHarnessAdapters);
+//<
+
+//>  should work for a function matching Adapter<TConfig>
+({
+    adapterA: (children, config) => <div>test</div>,
+}: TestHarnessAdapters);
+//<
+
+/**
+ * TestHarnessConfig<TAdapter>
+ */
+//> should give the config type of an adapter
+("string": TestHarnessConfig<TestHarnessAdapter<string>>);
+//<
+
+//> should error if the config type is wrong
+// 45 is not a string
+// $FlowExpectedError[incompatible-cast]
+(45: 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>` - flow does not appear to pattern
+ * match against the type definition when invoking the ExtractConfig type and I
+ * haven't worked out how to get it to multi-dispatch so that it matches
+ * functions too. Even worse, if the type doesn't match, it just allows `any`
+ * in the configs object, rather than indicating any kind of problem.
+ */
+const notadapters = "this is wrong";
+const adapterA: TestHarnessAdapter<string> = (
+    children: React.Node,
+    config: ?string,
+): React.Element<any> => <div />;
+const adapterB: TestHarnessAdapter<number> = (
+    children: React.Node,
+    config: ?number,
+): React.Element<any> => <div />;
+const adapters = {
+    adapterA,
+    adapterB,
+};
+
+//>  should assert if parameterized type is not valid Adapters
+// string is not a valid Adapter
+// $FlowExpectedError[incompatible-use]
+// $FlowExpectedError[incompatible-type-arg]
+({}: TestHarnessConfigs<typeof notadapters>);
+//<
+
+//>  should expect one config per adapter
+// both adapter configs missing
+// $FlowExpectedError[incompatible-exact]
+({}: TestHarnessConfigs<typeof adapters>);
+// adapterB config missing
+// $FlowExpectedError[prop-missing]
+({adapterA: "test"}: TestHarnessConfigs<typeof adapters>);
+//<
+
+//>  should assert if config does not match adapter config
+({
+    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",
+}: TestHarnessConfigs<typeof adapters>);
+//<

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

@@ -0,0 +1,5 @@
+// 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.js

@@ -0,0 +1,96 @@
+// @flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import * as Css from "../css.js";
+
+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-test-id="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-test-id="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-test-id="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}) => {
+            // Arrange
+            const children = <div data-test-id="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}) => {
+            // Arrange
+            const children = <div data-test-id="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__/data.test.js

@@ -0,0 +1,66 @@
+// @flow
+import * as React from "react";
+import {mount} from "enzyme"; // eslint-disable-line no-restricted-imports
+import "jest-enzyme";
+import * as Data from "../data.js";
+
+describe("WonderBlocksData.adapter", () => {
+    it("should render children when configuration arrays are empty", () => {
+        // Arrange
+        const children = <div>CONTENT</div>;
+
+        // Act
+        const wrapper = mount(Data.adapter(children, []), {
+            includeDefaultTestHarness: false,
+        });
+
+        // Assert
+        expect(wrapper).toHaveHTML("<div>CONTENT</div>");
+    });
+
+    it("should render children within InterceptRequests when dataIntercepts configured", () => {
+        // Arrange
+        const children = <div>CONTENT</div>;
+
+        // Act
+        const wrapper = mount(
+            Data.adapter(children, () =>
+                Promise.resolve(("INTERCEPTED!": any)),
+            ),
+            {
+                includeDefaultTestHarness: false,
+            },
+        );
+
+        // Assert
+        expect(wrapper).toContainMatchingElement("InterceptRequests");
+    });
+
+    it("should render like we expect", () => {
+        // Snapshot test is handy to visualize what's going on and help debug
+        // test failures of the other cases. The other cases assert specifics.
+        // Arrange
+        const children = <div>CONTENT</div>;
+
+        // Act
+        const wrapper = mount(
+            Data.adapter(children, () =>
+                Promise.resolve(("INTERCEPTED!": any)),
+            ),
+            {
+                includeDefaultTestHarness: false,
+            },
+        );
+
+        // Assert
+        expect(wrapper).toMatchInlineSnapshot(`
+            <InterceptRequests
+              interceptor={[Function]}
+            >
+              <div>
+                CONTENT
+              </div>
+            </InterceptRequests>
+        `);
+    });
+});

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

@@ -0,0 +1,31 @@
+// @flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import * as Portal from "../portal.js";
+
+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();
+    });
+});