@khanacademy/wonder-blocks-testing 7.1.10 → 7.1.12

package/src/harness/{make-test-harness.js → make-test-harness.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import {renderAdapters} from "./render-adapters";
@@ -20,40 +19,38 @@ import type {TestHarnessAdapters, TestHarnessConfigs} from "./types";
  *     configs?: $Shape<Configs<TAdapters>>,
  * ) => React.AbstractComponent<TProps, Instance>} A test harness.
  */
-export const makeTestHarness = <TAdapters: TestHarnessAdapters>(
+export const makeTestHarness = <TAdapters extends TestHarnessAdapters>(
     adapters: TAdapters,
     defaultConfigs: TestHarnessConfigs<TAdapters>,
-): (<-TProps, +Instance = mixed>(
-    Component: React.AbstractComponent<TProps, Instance>,
-    configs?: $Shape<TestHarnessConfigs<TAdapters>>,
-) => React.AbstractComponent<TProps, Instance>) => {
+): (<TProps extends object>(
+    Component: React.ComponentType<TProps>,
+    configs?: Partial<TestHarnessConfigs<TAdapters>>,
+) => React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<TProps> & React.RefAttributes<unknown>
+>) => {
     /**
      * Create a harnessed version of the given component.
      *
-     * @param {React.AbstractComponent<TProps, Instance>} component The
+     * @param {React.ComponentType<TProps>} component The
      * component to be wrapped.
-     * @param {$Shape<Configs<TAdapters>>} [configs] Any adapter
+     * @param {Partial<TestHarnessConfigs<TAdapters>>} [configs] Any adapter
      * configuration that you want to override from the `defaultConfigs` values.
      */
-    return <-TProps, +Instance = mixed>(
-        Component: React.AbstractComponent<TProps, Instance>,
-        configs?: $Shape<TestHarnessConfigs<TAdapters>>,
-    ): React.AbstractComponent<TProps, Instance> => {
-        /**
-         * $FlowIgnore[cannot-spread-indexer]
-         * We know `configs` may overwrite `DefaultConfigs` and we're ok with it.
-         * The interface definition handles the typing for us so we're ok
-         * with it not being inferred here.
-         */
+    return <TProps extends object>(
+        Component: React.ComponentType<TProps>,
+        configs?: Partial<TestHarnessConfigs<TAdapters>>,
+    ): React.ForwardRefExoticComponent<
+        React.PropsWithoutRef<TProps> & React.RefAttributes<unknown>
+    > => {
         const fullConfig: TestHarnessConfigs<TAdapters> = {
             ...defaultConfigs,
             ...configs,
         };
-        const harnessedComponent = React.forwardRef((props, ref) =>
+        const harnessedComponent = React.forwardRef((props: TProps, ref) =>
             renderAdapters<TAdapters>(
                 adapters,
                 fullConfig,
-                <Component {...props} ref={ref} />,
+                <Component {...(props as TProps)} ref={ref} />,
             ),
         );
 

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import type {TestHarnessConfigs, TestHarnessAdapters} from "./types";
@@ -6,11 +5,11 @@ import type {TestHarnessConfigs, TestHarnessAdapters} from "./types";
 /**
  * Render test adapters around a child component.
  */
-export const renderAdapters = <TAdapters: TestHarnessAdapters>(
+export const renderAdapters = <TAdapters extends TestHarnessAdapters>(
     adapters: TAdapters,
     configs: TestHarnessConfigs<TAdapters>,
-    children: React.Node,
-): React.Node => {
+    children: React.ReactNode,
+): React.ReactElement => {
     let currentChildren = children;
     for (const adapterName of Object.keys(adapters)) {
         const adapter = adapters[adapterName];
@@ -23,5 +22,6 @@ export const renderAdapters = <TAdapters: 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;
 };

package/src/harness/{test-harness.js → test-harness.ts}

@@ -1,11 +1,6 @@
-// @flow
-import * as React from "react";
-
 import {makeTestHarness} from "./make-test-harness";
 import {DefaultAdapters, DefaultConfigs} from "./adapters/adapters";
 
-import type {TestHarnessConfigs} from "./types";
-
 /**
  * Wrap a component with a test harness using Wonder Blocks default adapters.
  *
@@ -15,10 +10,4 @@ import type {TestHarnessConfigs} from "./types";
  * configurations, use `makeTestHarness` to create a new `testHarness`
  * function.
  */
-export const testHarness: <-TProps, +Instance = mixed>(
-    Component: React.AbstractComponent<TProps, Instance>,
-    configs?: $Shape<TestHarnessConfigs<typeof DefaultAdapters>>,
-) => React.AbstractComponent<TProps, Instance> = makeTestHarness(
-    DefaultAdapters,
-    DefaultConfigs,
-);
+export const testHarness = makeTestHarness(DefaultAdapters, DefaultConfigs);

package/src/harness/{types.js → types.ts}

@@ -1,13 +1,12 @@
-// @flow
 import * as React from "react";
 
 /**
  * A adapter to be composed with our test harnass infrastructure.
  */
 export type TestHarnessAdapter<TConfig> = (
-    children: React.Node,
+    children: React.ReactNode,
     config: TConfig,
-) => React.Element<any>;
+) => React.ReactElement<any>;
 
 /**
  * A general map of adapters by their identifiers.
@@ -21,22 +20,25 @@ export type TestHarnessAdapter<TConfig> = (
  * should infer their type in most cases to ensure the strongest typing of
  * the adapters.
  */
-export type TestHarnessAdapters = {|
-    [adapterID: string]: TestHarnessAdapter<any>,
-|};
+export type TestHarnessAdapters = {
+    [adapterID: string]: TestHarnessAdapter<any>;
+};
 
 /**
  * Mapping functions from a adapter-like function to config type.
  */
-type ExtractConfig = <TConfig>(TestHarnessAdapter<TConfig>) => TConfig;
-type ExtractMaybeConfig = <TConfig>(TestHarnessAdapter<TConfig>) => ?TConfig;
+type ExtractConfig = <TConfig>(arg1: TestHarnessAdapter<TConfig>) => TConfig;
+type ExtractMaybeConfig = <TConfig>(
+    arg1: TestHarnessAdapter<TConfig>,
+) => TConfig | null | undefined;
 
 /**
  * Type for easily defining an adapter's config type.
  *
  * This is the `TestHarnessAdapter` equivalent of `React.ElementConfig`.
  */
-export type TestHarnessConfig<TAdapter> = $Call<ExtractConfig, TAdapter>;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type TestHarnessConfig<TAdapter> = ReturnType<ExtractConfig>;
 
 /**
  * The `TestHarnessConfigs` type as defined by parsing a given set of adapters.
@@ -45,13 +47,13 @@ export type TestHarnessConfig<TAdapter> = $Call<ExtractConfig, TAdapter>;
  * 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
+ * marked as `TestHarnessAdapter<TConfig>` - TypeScript 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.
  */
-export type TestHarnessConfigs<TAdapters: TestHarnessAdapters> = $ObjMap<
+export type TestHarnessConfigs<TAdapters extends TestHarnessAdapters> = ObjMap<
     TAdapters,
-    ExtractMaybeConfig,
+    ExtractMaybeConfig
 >;

package/src/{index.js → index.ts}

@@ -1,5 +1,3 @@
-// @flow
-
 // Fixtures framework
 export {fixtures} from "./fixtures/fixtures";
 export type {FixtureFn, FixtureProps, GetPropsOptions} from "./fixtures/types";

package/src/{mock-requester.js → mock-requester.ts}

@@ -1,4 +1,3 @@
-// @flow
 import type {MockResponse} from "./respond-with";
 import type {OperationMock, OperationMatcher, MockFn} from "./types";
 
@@ -7,7 +6,7 @@ import type {OperationMock, OperationMatcher, MockFn} from "./types";
  */
 export const mockRequester = <
     TOperationType,
-    TOperationMock: OperationMock<TOperationType>,
+    TOperationMock extends OperationMock<TOperationType> = OperationMock<TOperationType>,
 >(
     operationMatcher: OperationMatcher<any>,
     operationToString: (
@@ -39,9 +38,11 @@ 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:
-    ${operationToString(...args)}`),
+    ${operation}`),
         );
     };
 

package/src/{respond-with.js → respond-with.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {SettleSignal} from "./settle-signal";
 import {ResponseImpl} from "./response-impl";
 import type {GraphQLJson} from "./types";
@@ -8,33 +7,33 @@ import type {GraphQLJson} from "./types";
 // the graphql mocking framework might want to assert a response is returning
 // the expected data structure. We could use `opaque` but that would then
 // hide the `toPromise` call we want to provide.
-/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Describes a mock response to a fetch request.
  */
-export type MockResponse<TData> = {|
+export type MockResponse<TData> = {
     /**
      * Create a promise from the mocked response.
      *
      * If a signal was provided when the mock response was created, the promise
      * will only settle to resolution or rejection if the signal is raised.
      */
-    +toPromise: () => Promise<Response>,
-|};
-/* eslint-enable no-unused-vars */
+    readonly toPromise: () => Promise<Response>;
+};
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
 type InternalMockResponse =
-    | {|
-          +type: "text",
-          +text: string | (() => string),
-          +statusCode: number,
-          +signal: ?SettleSignal,
-      |}
-    | {|
-          +type: "reject",
-          +error: Error | (() => Error),
-          +signal: ?SettleSignal,
-      |};
+    | {
+          readonly type: "text";
+          readonly text: string | (() => string);
+          readonly statusCode: number;
+          readonly signal: SettleSignal | null | undefined;
+      }
+    | {
+          readonly type: "reject";
+          readonly error: Error | (() => Error);
+          readonly signal: SettleSignal | null | undefined;
+      };
 
 /**
  * Helper for creating a text-based mock response.
@@ -42,7 +41,7 @@ type InternalMockResponse =
 const textResponse = <TData>(
     text: string | (() => string),
     statusCode: number,
-    signal: ?SettleSignal,
+    signal?: SettleSignal | null,
 ): MockResponse<TData> => ({
     toPromise: () =>
         makeMockResponse({
@@ -58,8 +57,8 @@ const textResponse = <TData>(
  */
 const rejectResponse = (
     error: Error | (() => Error),
-    signal: ?SettleSignal,
-): MockResponse<empty> => ({
+    signal?: SettleSignal | null,
+): MockResponse<never> => ({
     toPromise: () =>
         makeMockResponse({
             type: "reject",
@@ -78,25 +77,25 @@ export const RespondWith = Object.freeze({
      */
     text: <TData = string>(
         text: string,
-        statusCode: number = 200,
-        signal: ?SettleSignal = null,
+        statusCode = 200,
+        signal: SettleSignal | null = null,
     ): MockResponse<TData> => textResponse<TData>(text, statusCode, signal),
 
     /**
      * Response with JSON body and status code 200.
      */
-    json: <TJson: {...}>(
+    json: <TJson extends Record<any, any>>(
         json: TJson,
-        signal: ?SettleSignal = null,
+        signal: SettleSignal | null = null,
     ): MockResponse<TJson> =>
         textResponse<TJson>(() => JSON.stringify(json), 200, signal),
 
     /**
      * Response with GraphQL data JSON body and status code 200.
      */
-    graphQLData: <TData: {...}>(
+    graphQLData: <TData extends Record<any, any>>(
         data: TData,
-        signal: ?SettleSignal = null,
+        signal: SettleSignal | null = null,
     ): MockResponse<GraphQLJson<TData>> =>
         textResponse<GraphQLJson<TData>>(
             () => JSON.stringify({data}),
@@ -107,13 +106,13 @@ export const RespondWith = Object.freeze({
     /**
      * Response with body that will not parse as JSON and status code 200.
      */
-    unparseableBody: (signal: ?SettleSignal = null): MockResponse<any> =>
+    unparseableBody: (signal: SettleSignal | null = null): MockResponse<any> =>
         textResponse("INVALID JSON", 200, signal),
 
     /**
      * Rejects with an AbortError to simulate an aborted request.
      */
-    abortedRequest: (signal: ?SettleSignal = null): MockResponse<any> =>
+    abortedRequest: (signal: SettleSignal | null = null): MockResponse<any> =>
         rejectResponse(() => {
             const abortError = new Error("Mock request aborted");
             abortError.name = "AbortError";
@@ -123,8 +122,10 @@ export const RespondWith = Object.freeze({
     /**
      * Rejects with the given error.
      */
-    reject: (error: Error, signal: ?SettleSignal = null): MockResponse<any> =>
-        rejectResponse(error, signal),
+    reject: (
+        error: Error,
+        signal: SettleSignal | null = null,
+    ): MockResponse<any> => rejectResponse(error, signal),
 
     /**
      * A non-200 status code with empty text body.
@@ -132,7 +133,7 @@ export const RespondWith = Object.freeze({
      */
     errorStatusCode: (
         statusCode: number,
-        signal: ?SettleSignal = null,
+        signal: SettleSignal | null = null,
     ): MockResponse<any> => {
         if (statusCode < 300) {
             throw new Error(`${statusCode} is not a valid error status code`);
@@ -143,7 +144,7 @@ export const RespondWith = Object.freeze({
     /**
      * Response body that is valid JSON but not a valid GraphQL response.
      */
-    nonGraphQLBody: (signal: ?SettleSignal = null): MockResponse<any> =>
+    nonGraphQLBody: (signal: SettleSignal | null = null): MockResponse<any> =>
         textResponse(
             () =>
                 JSON.stringify({
@@ -158,8 +159,8 @@ export const RespondWith = Object.freeze({
      * Response that is a GraphQL errors response with status code 200.
      */
     graphQLErrors: (
-        errorMessages: $ReadOnlyArray<string>,
-        signal: ?SettleSignal = null,
+        errorMessages: ReadonlyArray<string>,
+        signal: SettleSignal | null = null,
     ): MockResponse<GraphQLJson<any>> =>
         textResponse<GraphQLJson<any>>(
             () =>
@@ -173,7 +174,10 @@ export const RespondWith = Object.freeze({
         ),
 });
 
-const callOnSettled = (signal: ?SettleSignal, fn: () => void): void => {
+const callOnSettled = (
+    signal: SettleSignal | null | undefined,
+    fn: () => void,
+): void => {
     if (signal == null || signal.settled) {
         fn();
         return;
@@ -196,7 +200,7 @@ const makeMockResponse = (
 
     switch (response.type) {
         case "text":
-            return new Promise((resolve, reject) => {
+            return new Promise((resolve, reject: (error?: any) => void) => {
                 callOnSettled(signal, () => {
                     const text =
                         typeof response.text === "function"
@@ -209,7 +213,7 @@ const makeMockResponse = (
             });
 
         case "reject":
-            return new Promise((resolve, reject) => {
+            return new Promise((resolve, reject: (error?: any) => void) => {
                 callOnSettled(signal, () =>
                     reject(
                         response.error instanceof Error
@@ -224,6 +228,7 @@ 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'.
                 throw new Error(`Unknown response type: ${response.type}`);
             }
             // Production; assume a rejection.

package/src/{response-impl.js → response-impl.ts}

@@ -1,9 +1,8 @@
-// @flow
-
 // We need a version of Response. When we're in Jest JSDOM environment or a
 // version of Node that supports the fetch API (17 and up, possibly with
 // --experimental-fetch flag), then we're good, but otherwise we need an
 // implementation, so this uses node-fetch as a peer dependency and uses that
 // to provide the implementation if we don't already have one.
 export const ResponseImpl: typeof Response =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     typeof Response === "undefined" ? require("node-fetch").Response : Response;

package/src/{settle-controller.js → settle-controller.ts}

@@ -1,19 +1,21 @@
-// @flow
 import {SettleSignal} from "./settle-signal";
 
 /**
  * A controller for the `RespondWith` API to control response settlement.
  */
 export class SettleController {
-    #settleFn: () => void;
-    #signal: SettleSignal;
+    // `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 _signal: SettleSignal;
 
     constructor() {
         // Create our signal.
         // We pass in a method to capture it's settle function so that
         // only we can call it.
-        this.#signal = new SettleSignal(
-            (settleFn) => (this.#settleFn = settleFn),
+        this._signal = new SettleSignal(
+            (settleFn: () => void) => (this._settleFn = settleFn),
         );
     }
 
@@ -21,7 +23,7 @@ export class SettleController {
      * The signal to pass to the `RespondWith` API.
      */
     get signal(): SettleSignal {
-        return this.#signal;
+        return this._signal;
     }
 
     /**
@@ -30,6 +32,6 @@ export class SettleController {
      * @throws {Error} if the signal has already been settled.
      */
     settle(): void {
-        this.#settleFn();
+        this._settleFn();
     }
 }

package/src/{settle-signal.js → settle-signal.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * A signal for controlling the `RespondWith` API responses.
  *
@@ -6,19 +5,23 @@
  * complex test scenarios.
  */
 export class SettleSignal extends EventTarget {
-    #settled: boolean = false;
+    // `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(setSettleFn: ?(settleFn: () => void) => mixed = null) {
+    constructor(
+        setSettleFn: ((settleFn: () => void) => unknown) | null = null,
+    ) {
         super();
 
         // If we were given a function, we call it with a method that will
         // settle ourselves. This allows the appropriate SettleController
         // to be in charge of settling this instance.
         setSettleFn?.(() => {
-            if (this.#settled) {
+            if (this._settled) {
                 throw new Error("SettleSignal already settled");
             }
-            this.#settled = true;
+            this._settled = true;
             this.dispatchEvent(new Event("settled"));
         });
     }
@@ -28,7 +31,7 @@ export class SettleSignal extends EventTarget {
      */
     static settle(): SettleSignal {
         const signal = new SettleSignal();
-        signal.#settled = true;
+        signal._settled = true;
         return signal;
     }
 
@@ -36,6 +39,6 @@ export class SettleSignal extends EventTarget {
      * Has this signal been settled yet?
      */
     get settled(): boolean {
-        return this.#settled;
+        return this._settled;
     }
 }

package/src/types.ts

@@ -0,0 +1,40 @@
+import type {MockResponse} from "./respond-with";
+
+/**
+ * A valid GraphQL response as supported by our mocking framework.
+ * Note that we don't currently support both data and errors being set.
+ */
+export type GraphQLJson<TData extends Record<any, any>> =
+    | {
+          data: TData;
+      }
+    | {
+          errors: Array<{
+              message: string;
+          }>;
+      };
+
+export type MockFn<TOperationType> = {
+    (...args: Array<any>): Promise<Response>;
+    mockOperation: MockOperationFn<TOperationType>;
+    mockOperationOnce: MockOperationFn<TOperationType>;
+};
+
+export type OperationMock<TOperation> = {
+    operation: TOperation;
+    onceOnly: boolean;
+    used: boolean;
+    response: () => Promise<Response>;
+};
+
+export type OperationMatcher<TOperation> = (
+    operation: TOperation,
+    ...args: Array<any>
+) => boolean;
+
+export type MockOperationFn<TOperationType> = <
+    TOperation extends TOperationType,
+>(
+    operation: TOperation,
+    response: MockResponse<any>,
+) => MockFn<TOperationType>;

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "exclude": ["dist"],
+    "extends": "../tsconfig-shared.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "src",
+    },
+    "references": [
+        {"path": "../wonder-blocks-data"},
+    ]
+}