@khanacademy/wonder-blocks-testing 8.0.21 → 9.1.0

package/src/harness/adapters/router.tsx

@@ -98,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 (
@@ -142,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>
@@ -164,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>
@@ -178,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.",
         );
@@ -191,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,37 @@
+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 configuration: set config to null to turn this adapter off",
+            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/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/src/harness/types.ts

@@ -6,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,8 +4,7 @@ import {SettleSignal} from "./settle-signal";
  * A controller for the `RespondWith` API to control response settlement.
  */
 export class SettleController {
-    // @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() {
@@ -30,6 +29,6 @@ export class SettleController {
      * @throws {Error} if the signal has already been settled.
      */
     settle(): void {
-        this._settleFn();
+        this._settleFn?.();
     }
 }