@khanacademy/wonder-blocks-testing 8.0.20 → 9.0.0

package/src/harness/__tests__/render-adapters.test.tsx

@@ -4,7 +4,7 @@ import {renderAdapters} from "../render-adapters";
 import type {TestHarnessAdapter, TestHarnessConfigs} from "../types";
 
 describe("#renderAdapters", () => {
-    it("should return children if no adapters", () => {
+    it("should render children if no adapters", () => {
         // Arrange
         const children = <div>Adapt me!</div>;
 
@@ -12,7 +12,13 @@ describe("#renderAdapters", () => {
         const result = renderAdapters({}, {}, children);
 
         // Assert
-        expect(result).toBe(children);
+        expect(result).toMatchInlineSnapshot(`
+            <React.Fragment>
+              <div>
+                Adapt me!
+              </div>
+            </React.Fragment>
+        `);
     });
 
     it("should invoke the adapter with its corresponding config", () => {
@@ -38,10 +44,8 @@ describe("#renderAdapters", () => {
     it("should render each adapter and the children", () => {
         // Arrange
         const children = "Adapt me!";
-        // @ts-expect-error: `string` is not a valid `ReactElement`.
-        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => {
-            return `${conf}:${c}`;
-        };
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) =>
+            `${conf}:${c}` as any;
         const adapters = {
             adapterA: adapter,
             adapterB: adapter,
@@ -57,16 +61,18 @@ describe("#renderAdapters", () => {
         const result = renderAdapters(adapters, configs, children);
 
         // Assert
-        expect(result).toMatchInlineSnapshot(`"C:B:A:Adapt me!"`);
+        expect(result).toMatchInlineSnapshot(`
+            <React.Fragment>
+              C:B:A:Adapt me!
+            </React.Fragment>
+        `);
     });
 
     it("should skip adapters where the corresponding config is null", () => {
         // Arrange
         const children = "Adapt me!";
-        // @ts-expect-error: `string` is not a valid `ReactElement`.
-        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => {
-            return `${conf}:${c}`;
-        };
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) =>
+            `${conf}:${c}` as any;
         const adapters = {
             adapterA: adapter,
             adapterB: adapter,
@@ -82,6 +88,10 @@ describe("#renderAdapters", () => {
         const result = renderAdapters(adapters, configs, children);
 
         // Assert
-        expect(result).toMatchInlineSnapshot(`"C:A:Adapt me!"`);
+        expect(result).toMatchInlineSnapshot(`
+            <React.Fragment>
+              C:A:Adapt me!
+            </React.Fragment>
+        `);
     });
 });

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

@@ -35,7 +35,8 @@ describe("#testHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'harnessFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-test-harness")'.
+        // @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"),
@@ -56,7 +57,8 @@ describe("#testHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'returnValueFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-test-harness")'.
+        // @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"),

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

@@ -12,13 +12,10 @@ import type {
  */
 
 //>  should assert type of config.
-// @ts-expect-error [FEI-5019] - TS2352 - Conversion of type '(children: React.ReactNode, config: number) => React.ReactElement<any>' to type 'TestHarnessAdapter<string>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
-((
-    children: React.ReactNode,
-    // TConfig is string, but we typed this arg as a number
-    // $FlowExpectedError[incompatible-cast]
-    config: number,
-): React.ReactElement<any> => <div />) as TestHarnessAdapter<string>;
+// @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
@@ -36,10 +33,8 @@ import type {
 //<
 
 //>  should assert if adapter is not Adapter<TConfig>
-// @ts-expect-error [FEI-5019] - TS2352 - Conversion of type '{ adapterString: string; }' to type 'TestHarnessAdapters' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+// @ts-expect-error  String is not a adapter function
 ({
-    // String is not a adapter function
-    // $FlowExpectedError[incompatible-cast]
     adapterString: "string",
 } as TestHarnessAdapters);
 //<
@@ -100,11 +95,9 @@ const adapters = {
 //<
 
 //>  should assert if config does not match adapter config
-// @ts-expect-error: Conversion of type '{ adapterA: string; adapterB: string; }' to type 'TestHarnessConfigs<{ readonly adapterA: TestHarnessAdapter<string>; readonly adapterB: TestHarnessAdapter<number>; }>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Types of property 'adapterB' are incompatible. Type 'string' is not comparable to type 'number'.
+// @ts-expect-error: the config type here is a number, not a string
 ({
     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",
 } as TestHarnessConfigs<typeof adapters>);
 //<

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

@@ -21,8 +21,12 @@ describe("WonderBlocksData.adapter", () => {
         const TestFixture = () => {
             const [result] = useCachedEffect("ID", jest.fn());
 
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'data' does not exist on type 'Result<ValidCacheData>'.
-            return <div>CONTENT: {result?.data}</div>;
+            return (
+                <div>
+                    CONTENT:{" "}
+                    {result.status === "success" ? result.data : undefined}
+                </div>
+            );
         };
 
         // Act
@@ -43,8 +47,12 @@ describe("WonderBlocksData.adapter", () => {
         const TestFixture = () => {
             const [result] = useCachedEffect("ID", jest.fn());
 
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'data' does not exist on type 'Result<ValidCacheData>'.
-            return <div>CONTENT:{result?.data}</div>;
+            return (
+                <div>
+                    CONTENT:
+                    {result.status === "success" ? result.data : undefined}
+                </div>
+            );
         };
 
         // Act

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import * as WBCore from "@khanacademy/wonder-blocks-core";
+
+import * as SSR from "../ssr";
+
+jest.mock("@khanacademy/wonder-stuff-core", () => ({
+    ...jest.requireActual("@khanacademy/wonder-stuff-core"),
+    RenderStateRoot: (props: any) => <div {...props} />,
+}));
+
+describe("SSR.adapter", () => {
+    it("should render the RenderStateRoot", () => {
+        // Arrange
+        const children = <div>CHILDREN!</div>;
+        const renderStateRootSpy = jest.spyOn(WBCore, "RenderStateRoot");
+
+        // Act
+        render(SSR.adapter(children, true));
+
+        // Assert
+        expect(renderStateRootSpy).toHaveBeenCalledWith(
+            {
+                children,
+            },
+            {},
+        );
+    });
+
+    it("should render the children correctly", () => {
+        // Arrange
+        const children = <div>CHILDREN!</div>;
+
+        // Act
+        render(SSR.adapter(children, true));
+
+        // Assert
+        expect(screen.getByText("CHILDREN!")).toBeInTheDocument();
+    });
+});

package/src/harness/adapters/adapters.ts

@@ -1,10 +1,8 @@
-// WARNING: If you modify this file you may need to update adapters.js.flow
-// to ensure that the Flow types are still correct.
-
 import * as css from "./css";
 import * as data from "./data";
 import * as portal from "./portal";
 import * as router from "./router";
+import * as ssr from "./ssr";
 
 import type {TestHarnessConfigs} from "../types";
 
@@ -22,6 +20,7 @@ export const DefaultAdapters = {
     data: data.adapter,
     portal: portal.adapter,
     router: router.adapter,
+    ssr: ssr.adapter,
 } as const;
 
 /**
@@ -32,4 +31,5 @@ export const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters> = {
     data: data.defaultConfig,
     portal: portal.defaultConfig,
     router: router.defaultConfig,
+    ssr: ssr.defaultConfig,
 } as const;

package/src/harness/adapters/css.tsx

@@ -40,9 +40,7 @@ const normalizeConfig = (
             return config;
         }
 
-        // @ts-expect-error: at this point, `CSSProperties` is the only thing
-        // that `config` can be.
-        return {classes: [], style: config};
+        return {classes: [], style: config as CSSProperties};
     }
 
     throw new Error(`Invalid config: ${config}`);

package/src/harness/adapters/router.tsx

@@ -1,5 +1,3 @@
-// WARNING: If you modify this file you may need to update router.jsx.flow
-// to ensure that the Flow types are still correct.
 import * as React from "react";
 
 import {StaticRouter, MemoryRouter, Route, Switch} from "react-router-dom";
@@ -100,8 +98,7 @@ const maybeWithRoute = (
     path?: string | null,
 ): React.ReactElement => {
     if (path == null) {
-        // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-        return children;
+        return <>{children}</>;
     }
 
     return (
@@ -144,14 +141,12 @@ export const adapter: TestHarnessAdapter<Config> = (
 
     // Wrap children with the various contexts and routes, as per the config.
     const wrappedWithRoute = maybeWithRoute(children, config.path);
-    // @ts-expect-error [FEI-5019] - TS2339 - Property 'forceStatic' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
-    if (config.forceStatic) {
+    if ("forceStatic" in config && config.forceStatic) {
         /**
          * There may be times (SSR testing comes to mind) where we will be
          * really strict about not permitting client-side navigation events.
          */
         return (
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'location' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
             <StaticRouter location={config.location} context={{}}>
                 {wrappedWithRoute}
             </StaticRouter>
@@ -166,10 +161,8 @@ export const adapter: TestHarnessAdapter<Config> = (
      *
      * First, the easy one.
      */
-    // @ts-expect-error [FEI-5019] - TS2339 - Property 'location' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
-    if (typeof config.location !== "undefined") {
+    if ("location" in config && config.location !== undefined) {
         return (
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'location' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
             <MemoryRouter initialEntries={[config.location]}>
                 {wrappedWithRoute}
             </MemoryRouter>
@@ -180,8 +173,7 @@ export const adapter: TestHarnessAdapter<Config> = (
      * If it's not the easy one, it should be the complex one.
      * Let's make sure we have good data (also keeps TypeScript happy).
      */
-    // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialEntries' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
-    if (typeof config.initialEntries === "undefined") {
+    if (!("initialEntries" in config) || config.initialEntries === undefined) {
         throw new Error(
             "A location or initial history entries must be provided.",
         );
@@ -193,25 +185,19 @@ export const adapter: TestHarnessAdapter<Config> = (
      * we want, so let's ensure we always have our default location at least.
      */
     const entries =
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialEntries' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
         config.initialEntries.length === 0
             ? [defaultConfig.location]
-            : // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialEntries' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
-              config.initialEntries;
+            : config.initialEntries;
 
     // Memory router doesn't allow us to pass maybe types in its TypeScript types.
     // So let's build props then spread them.
     const routerProps: MemoryRouterProps = {
         initialEntries: entries,
     };
-    // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialIndex' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
     if (config.initialIndex != null) {
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'initialIndex' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
         routerProps.initialIndex = config.initialIndex;
     }
-    // @ts-expect-error [FEI-5019] - TS2339 - Property 'getUserConfirmation' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
     if (config.getUserConfirmation != null) {
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'getUserConfirmation' does not exist on type 'Readonly<{ initialEntries: LocationDescriptor<unknown>[] | undefined; initialIndex?: number | undefined; getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined; path?: string | undefined; } | { ...; } | { ...; }>'.
         routerProps.getUserConfirmation = config.getUserConfirmation;
     }
 

package/src/harness/adapters/ssr.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import {KindError, Errors} from "@khanacademy/wonder-stuff-core";
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+
+import type {TestHarnessAdapter} from "../types";
+
+// We only support one configuration for this adapter; the default
+// behavior - it's either on or off.
+type Config = true | null;
+
+// The default configuration is off since this will likely cause state changes
+// and add Testing Library act/waitFor calls in tests using the harness when
+// its enabled.
+export const defaultConfig: Config = 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> => {
+    if (config !== true) {
+        throw new KindError("Unexpected configuraiton", Errors.InvalidInput, {
+            metadata: {config},
+        });
+    }
+    return <RenderStateRoot>{children}</RenderStateRoot>;
+};

package/src/harness/{make-hook-harness.ts → make-hook-harness.tsx}

@@ -4,8 +4,9 @@ import {makeTestHarness} from "./make-test-harness";
 
 import type {TestHarnessAdapters, TestHarnessConfigs} from "./types";
 
-// @ts-expect-error [FEI-5019] - TS7031 - Binding element 'children' implicitly has an 'any' type.
-const HookHarness = ({children}) => children;
+const HookHarness = ({
+    children,
+}: React.PropsWithChildren<unknown>): React.ReactElement => <>{children}</>;
 
 /**
  * Create a test harness method for use with React hooks.

package/src/harness/{render-adapters.ts → render-adapters.tsx}

@@ -22,6 +22,5 @@ export const renderAdapters = <TAdapters extends TestHarnessAdapters>(
             currentChildren = adapter(currentChildren, config);
         }
     }
-    // @ts-expect-error [FEI-5019] - TS2322 - Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-    return currentChildren;
+    return <>{currentChildren}</>;
 };

package/src/harness/types.ts

@@ -1,5 +1,3 @@
-// WARNING: If you modify this file you may need to update types.js.flow
-// to ensure that the Flow types are still correct.
 import * as React from "react";
 
 /**
@@ -8,7 +6,7 @@ import * as React from "react";
 export type TestHarnessAdapter<TConfig> = (
     children: React.ReactNode,
     config: TConfig,
-) => React.ReactElement<any>;
+) => React.ReactElement;
 
 /**
  * A general map of adapters by their identifiers.

package/src/mock-requester.ts

@@ -4,23 +4,17 @@ import type {OperationMock, OperationMatcher, MockFn} from "./types";
 /**
  * A generic mock request function for using when mocking fetch or gqlFetch.
  */
-export const mockRequester = <
-    TOperationType,
-    TOperationMock extends OperationMock<TOperationType> = OperationMock<TOperationType>,
->(
+export const mockRequester = <TOperationType>(
     operationMatcher: OperationMatcher<any>,
-    operationToString: (
-        operationMock: TOperationMock,
-        ...args: Array<any>
-    ) => string,
+    operationToString: (...args: Array<any>) => string,
 ): MockFn<TOperationType> => {
     // We want this to work in jest and in fixtures to make life easy for folks.
     // This is the array of mocked operations that we will traverse and
     // manipulate.
     const mocks: Array<OperationMock<any>> = [];
 
-    // What we return has to be a drop in for the fetch function that is
-    // provided to `GqlRouter` which is how folks will then use this mock.
+    // What we return has to be a drop in replacement for the mocked function
+    // which is how folks will then use this mock.
     const mockFn: MockFn<TOperationType> = (
         ...args: Array<any>
     ): Promise<Response> => {
@@ -38,7 +32,6 @@ export const mockRequester = <
 
         // Default is to reject with some helpful info on what request
         // we rejected.
-        // @ts-expect-error [FEI-5019] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
         const operation = operationToString(...args);
         return Promise.reject(
             new Error(`No matching mock response found for request:

package/src/respond-with.ts

@@ -228,7 +228,8 @@ const makeMockResponse = (
             if (process.env.NODE_ENV !== "production") {
                 // If we're not in production, give an immediate signal that the
                 // dev forgot to support this new type.
-                // @ts-expect-error [FEI-5019] - TS2339 - Property 'type' does not exist on type 'never'.
+                // @ts-expect-error TS knows we can't get here and so sees
+                // `response` as `never`.
                 throw new Error(`Unknown response type: ${response.type}`);
             }
             // Production; assume a rejection.

package/src/settle-controller.ts

@@ -4,10 +4,7 @@ import {SettleSignal} from "./settle-signal";
  * A controller for the `RespondWith` API to control response settlement.
  */
 export class SettleController {
-    // `flowgen` can't handle `#` so we're using `_` and TypeScript `private` access modifier.
-    // TODO(FEI-5000): Replace `_` with `#` after all code is on TypeScript.
-    // @ts-expect-error [FEI-5019] - TS2564 - Property '#settleFn' has no initializer and is not definitely assigned in the constructor.
-    private _settleFn: () => void;
+    private _settleFn: undefined | (() => void);
     private _signal: SettleSignal;
 
     constructor() {
@@ -32,6 +29,6 @@ export class SettleController {
      * @throws {Error} if the signal has already been settled.
      */
     settle(): void {
-        this._settleFn();
+        this._settleFn?.();
     }
 }

package/src/settle-signal.ts

@@ -5,8 +5,6 @@
  * complex test scenarios.
  */
 export class SettleSignal extends EventTarget {
-    // `flowgen` can't handle `#` so we're using `_` and TypeScript `private` access modifier.
-    // TODO(FEI-5000): Replace `_` with `#` after all code is on TypeScript.
     private _settled = false;
 
     constructor(