@khanacademy/wonder-blocks-testing 9.0.0 → 9.2.0

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/adapt.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+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.
+    Object.entries(adapters).reduce((newChildren, [name, adapter]) => {
+        const config = configs[name];
+        if (config == null) {
+            return newChildren;
+        }
+        const Adapter: React.FunctionComponent = ({children}) =>
+            adapter(children, config);
+        Adapter.displayName = `Adapter(${name})`;
+        return <Adapter>{newChildren}</Adapter>;
+    }, <>{children}</>);

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

@@ -1,14 +1,19 @@
 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", () => ({
-    ...jest.requireActual("@khanacademy/wonder-stuff-core"),
-    RenderStateRoot: (props: any) => <div {...props} />,
-}));
+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", () => {
@@ -38,4 +43,40 @@ describe("SSR.adapter", () => {
         // 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/ssr.tsx

@@ -25,9 +25,13 @@ export const adapter: TestHarnessAdapter<Config> = (
     config: Config,
 ): React.ReactElement<any> => {
     if (config !== true) {
-        throw new KindError("Unexpected configuraiton", Errors.InvalidInput, {
-            metadata: {config},
-        });
+        throw new KindError(
+            "Unexpected configuration: set config to null to turn this adapter off",
+            Errors.InvalidInput,
+            {
+                metadata: {config},
+            },
+        );
     }
     return <RenderStateRoot>{children}</RenderStateRoot>;
 };

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {renderAdapters} from "./render-adapters";
+import {Adapt} from "./adapt";
 
 import type {TestHarnessAdapters, TestHarnessConfigs} from "./types";
 
@@ -43,13 +43,11 @@ export const makeTestHarness = <TAdapters extends TestHarnessAdapters>(
             ...defaultConfigs,
             ...configs,
         };
-        const harnessedComponent = React.forwardRef((props: TProps, ref) =>
-            renderAdapters<TAdapters>(
-                adapters,
-                fullConfig,
-                <Component {...(props as TProps)} ref={ref} />,
-            ),
-        );
+        const harnessedComponent = React.forwardRef((props: TProps, ref) => (
+            <Adapt adapters={adapters} configs={fullConfig}>
+                <Component {...(props as TProps)} ref={ref} />
+            </Adapt>
+        ));
 
         // We add a name for the component here so that we can detect that
         // later and also see it in traces and what have you.

package/tsconfig-build.json

@@ -6,6 +6,7 @@
         "rootDir": "src",
     },
     "references": [
+        {"path": "../wonder-blocks-core/tsconfig-build.json"},
         {"path": "../wonder-blocks-data/tsconfig-build.json"},
     ]
 }