@khanacademy/wonder-blocks-testing 7.1.10 → 7.1.12

package/src/gql/{gql-request-matches-mock.js → gql-request-matches-mock.ts}

@@ -1,10 +1,7 @@
-// @flow
 import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
 import type {GqlMockOperation} from "./types";
 
 const safeHasOwnProperty = (obj: any, prop: string): boolean =>
-    // Flow really shouldn't be raising this error here.
-    // $FlowFixMe[method-unbinding]
     Object.prototype.hasOwnProperty.call(obj, prop);
 
 // TODO(somewhatabstract, FEI-4268): use a third-party library to do this and
@@ -38,7 +35,7 @@ const areObjectsEqual = (a: any, b: any): boolean => {
 export const gqlRequestMatchesMock = (
     mock: GqlMockOperation<any, any, any>,
     operation: GqlOperation<any, any>,
-    variables: ?{...},
+    variables: Record<any, any> | null | undefined,
     context: GqlContext,
 ): boolean => {
     // If they don't represent the same operation, then they can't match.

package/src/gql/{mock-gql-fetch.js → mock-gql-fetch.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {gqlRequestMatchesMock} from "./gql-request-matches-mock";
 import {mockRequester} from "../mock-requester";
 import type {GqlFetchMockFn, GqlMockOperation} from "./types";
@@ -7,12 +6,10 @@ import type {GqlFetchMockFn, GqlMockOperation} from "./types";
  * A mock for the fetch function passed to GqlRouter.
  */
 export const mockGqlFetch = (): GqlFetchMockFn =>
-    mockRequester<GqlMockOperation<any, any, any>, _>(
+    mockRequester<GqlMockOperation<any, any, any>, any>(
         gqlRequestMatchesMock,
         (operation, variables, context) =>
             `Operation: ${operation.type} ${operation.id}
-    Variables: ${
-        variables == null ? "None" : JSON.stringify(variables, null, 2)
-    }
-    Context: ${JSON.stringify(context, null, 2)}`,
+Variables: ${variables == null ? "None" : JSON.stringify(variables, null, 2)}
+Context: ${JSON.stringify(context, null, 2)}`,
     );

package/src/gql/types.ts

@@ -0,0 +1,33 @@
+import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
+import type {GraphQLJson} from "../types";
+import type {MockResponse} from "../respond-with";
+
+export type GqlMockOperation<
+    TData extends Record<any, any>,
+    TVariables extends Record<any, any>,
+    TContext extends GqlContext,
+> = {
+    operation: GqlOperation<TData, TVariables>;
+    variables?: TVariables;
+    context?: TContext;
+};
+
+type GqlMockOperationFn = <
+    TData extends Record<any, any>,
+    TVariables extends Record<any, any>,
+    TContext extends GqlContext,
+    TResponseData extends GraphQLJson<TData>,
+>(
+    operation: GqlMockOperation<TData, TVariables, TContext>,
+    response: MockResponse<TResponseData>,
+) => GqlFetchMockFn;
+
+export type GqlFetchMockFn = {
+    (
+        operation: GqlOperation<any, any>,
+        variables: Record<any, any> | null | undefined,
+        context: GqlContext,
+    ): Promise<Response>;
+    mockOperation: GqlMockOperationFn;
+    mockOperationOnce: GqlMockOperationFn;
+};

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

@@ -1,4 +1,3 @@
-// @flow
 import {jest as ws} from "@khanacademy/wonder-stuff-testing";
 import * as MHH from "../make-hook-harness";
 import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters";
@@ -6,7 +5,7 @@ import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters";
 jest.mock("../make-hook-harness", () => {
     const returnValueFake = {
         thisisa: "PRETEND REACT COMPONENT",
-    };
+    } as const;
     const harnessFake = jest.fn().mockReturnValue(returnValueFake);
     return {
         harnessFake,
@@ -34,8 +33,8 @@ describe("#hookHarness", () => {
         // Arrange
         const config = {
             router: "/boo",
-        };
-        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        } 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-hook-harness")'.
         const [{harnessFake}, {hookHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-hook-harness"),
@@ -54,8 +53,8 @@ describe("#hookHarness", () => {
         // Arrange
         const config = {
             router: "/boo",
-        };
-        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        } 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-hook-harness")'.
         const [{returnValueFake}, {hookHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-hook-harness"),

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render} from "@testing-library/react";
 import {makeHookHarness} from "../make-hook-harness";
@@ -10,10 +9,10 @@ describe("#makeHookHarness", () => {
         const makeTestHarnessSpy = jest.spyOn(MTH, "makeTestHarness");
         const adapters = {
             adapter: jest.fn(),
-        };
+        } as const;
         const defaultConfigs = {
             adapter: {},
-        };
+        } as const;
 
         // Act
         makeHookHarness(adapters, defaultConfigs);
@@ -28,10 +27,10 @@ describe("#makeHookHarness", () => {
     it("should return a function", () => {
         const adapters = {
             adapter: jest.fn(),
-        };
+        } as const;
         const defaultConfigs = {
             adapter: {},
-        };
+        } as const;
 
         // Act
         const result = makeHookHarness(adapters, defaultConfigs);
@@ -47,13 +46,13 @@ describe("#makeHookHarness", () => {
             jest.spyOn(MTH, "makeTestHarness").mockReturnValue(harnessSpy);
             const adapters = {
                 adapter: jest.fn(),
-            };
+            } as const;
             const defaultConfigs = {
                 adapter: {},
-            };
+            } as const;
             const configs = {
                 adapter: {},
-            };
+            } as const;
             const hookHarness = makeHookHarness(adapters, defaultConfigs);
 
             // Act
@@ -72,13 +71,13 @@ describe("#makeHookHarness", () => {
             jest.spyOn(MTH, "makeTestHarness").mockReturnValue(harnessSpy);
             const adapters = {
                 adapter: jest.fn(),
-            };
+            } as const;
             const defaultConfigs = {
                 adapter: {},
-            };
+            } as const;
             const configs = {
                 adapter: {},
-            };
+            } as const;
             const children = "THE CHILDREN";
 
             // Act

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {Route} from "react-router-dom";
 import {render} from "@testing-library/react";
@@ -96,7 +95,7 @@ describe("#makeTestHarness", () => {
                         DefaultAdapters,
                         DefaultConfigs,
                     );
-                    const Component = (props: {|text: string|}) => (
+                    const Component = (props: {text: string}) => (
                         <div>{props.text}</div>
                     );
 
@@ -129,7 +128,7 @@ describe("#makeTestHarness", () => {
                         DefaultAdapters,
                         DefaultConfigs,
                     );
-                    const configOverrides: $Shape<typeof DefaultConfigs> = {
+                    const configOverrides: Partial<typeof DefaultConfigs> = {
                         router: "/mysecretplace",
                     };
                     const Component = () => <div>test</div>;
@@ -159,12 +158,12 @@ describe("#makeTestHarness", () => {
                         DefaultAdapters,
                         DefaultConfigs,
                     );
-                    const configOverrides: $Shape<typeof DefaultConfigs> = {
+                    const configOverrides: Partial<typeof DefaultConfigs> = {
                         router: "/mysecretplace/test",
                     };
                     // Render a route match that only works if we render our
                     // overridden location.
-                    const Component = (props: {|text: string|}) => (
+                    const Component = (props: {text: string}) => (
                         <Route path="/mysecretplace/*">{props.text}</Route>
                     );
 

package/src/harness/__tests__/{render-adapters.test.js → render-adapters.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {renderAdapters} from "../render-adapters";
 
@@ -20,8 +19,8 @@ describe("#renderAdapters", () => {
         // Arrange
         const children = <div>Adapt me!</div>;
         const adapters = {
-            adapterA: ((jest.fn(): any): TestHarnessAdapter<string>),
-        };
+            adapterA: jest.fn() as TestHarnessAdapter<string>,
+        } as const;
         const configs: TestHarnessConfigs<typeof adapters> = {
             adapterA: "APPLY A CONFIG",
         };
@@ -39,15 +38,15 @@ describe("#renderAdapters", () => {
     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.
+        // @ts-expect-error: `string` is not a valid `ReactElement`.
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => {
             return `${conf}:${c}`;
         };
         const adapters = {
             adapterA: adapter,
             adapterB: adapter,
             adapterC: adapter,
-        };
+        } as const;
         const configs: TestHarnessConfigs<typeof adapters> = {
             adapterA: "A",
             adapterB: "B",
@@ -64,15 +63,15 @@ describe("#renderAdapters", () => {
     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.
+        // @ts-expect-error: `string` is not a valid `ReactElement`.
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => {
             return `${conf}:${c}`;
         };
         const adapters = {
             adapterA: adapter,
             adapterB: adapter,
             adapterC: adapter,
-        };
+        } as const;
         const configs: TestHarnessConfigs<typeof adapters> = {
             adapterA: "A",
             adapterB: null,

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

@@ -1,4 +1,3 @@
-// @flow
 import {jest as ws} from "@khanacademy/wonder-stuff-testing";
 import * as MTH from "../make-test-harness";
 import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters";
@@ -6,7 +5,7 @@ import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters";
 jest.mock("../make-test-harness", () => {
     const returnValueFake = {
         thisisa: "PRETEND REACT COMPONENT",
-    };
+    } as const;
     const harnessFake = jest.fn().mockReturnValue(returnValueFake);
     return {
         harnessFake,
@@ -35,8 +34,8 @@ describe("#testHarness", () => {
         const Component = () => null;
         const config = {
             router: "/boo",
-        };
-        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        } 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")'.
         const [{harnessFake}, {testHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-test-harness"),
@@ -56,8 +55,8 @@ describe("#testHarness", () => {
         const Component = () => null;
         const config = {
             router: "/boo",
-        };
-        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        } 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")'.
         const [{returnValueFake}, {testHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-test-harness"),

package/src/harness/__tests__/{types.flowtest.js → types.flowtest.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import type {
@@ -13,18 +12,19 @@ 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.Node,
+    children: React.ReactNode,
     // TConfig is string, but we typed this arg as a number
     // $FlowExpectedError[incompatible-cast]
     config: number,
-): React.Element<any> => <div />: TestHarnessAdapter<string>);
+): React.ReactElement<any> => <div />) as TestHarnessAdapter<string>;
 //<
 
 //>  should work for correct definition
-((children: React.Node, config: string): React.Element<any> => (
+((children: React.ReactNode, config: string): React.ReactElement<any> => (
     <div />
-): TestHarnessAdapter<string>);
+)) as TestHarnessAdapter<string>;
 //<
 
 /**
@@ -32,34 +32,34 @@ import type {
  */
 
 //>  should work for empty case
-({}: TestHarnessAdapters);
+({} as TestHarnessAdapters);
 //<
 
 //>  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.
 ({
     // String is not a adapter function
     // $FlowExpectedError[incompatible-cast]
     adapterString: "string",
-}: TestHarnessAdapters);
+} as TestHarnessAdapters);
 //<
 
 //>  should work for a function matching Adapter<TConfig>
 ({
     adapterA: (children, config) => <div>test</div>,
-}: TestHarnessAdapters);
+} as TestHarnessAdapters);
 //<
 
 /**
  * TestHarnessConfig<TAdapter>
  */
 //> should give the config type of an adapter
-("string": TestHarnessConfig<TestHarnessAdapter<string>>);
+"string" as TestHarnessConfig<TestHarnessAdapter<string>>;
 //<
 
 //> should error if the config type is wrong
 // 45 is not a string
-// $FlowExpectedError[incompatible-cast]
-(45: TestHarnessConfig<TestHarnessAdapter<string>>);
+45 as TestHarnessConfig<TestHarnessAdapter<string>>;
 //<
 
 /**
@@ -69,7 +69,7 @@ import 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
+ * 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`
@@ -77,32 +77,29 @@ import type {
  */
 const notadapters = "this is wrong";
 const adapterA: TestHarnessAdapter<string> = (
-    children: React.Node,
-    config: ?string,
-): React.Element<any> => <div />;
+    children: React.ReactNode,
+    config?: string | null,
+): React.ReactElement<any> => <div />;
 const adapterB: TestHarnessAdapter<number> = (
-    children: React.Node,
-    config: ?number,
-): React.Element<any> => <div />;
+    children: React.ReactNode,
+    config?: number | null,
+): React.ReactElement<any> => <div />;
 const adapters = {
     adapterA,
     adapterB,
-};
+} as const;
 
 //>  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>);
+// @ts-expect-error: Type 'string' does not satisfy the constraint 'TestHarnessAdapters'
+({} as TestHarnessConfigs<typeof notadapters>);
 //<
 
 //>  should expect one config per adapter
 // both adapter configs missing
-// $FlowExpectedError[incompatible-exact]
-({}: TestHarnessConfigs<typeof adapters>);
+({} as TestHarnessConfigs<typeof adapters>);
 // adapterB config missing
-// $FlowExpectedError[prop-missing]
-({adapterA: "test"}: TestHarnessConfigs<typeof adapters>);
+({adapterA: "test"} as TestHarnessConfigs<typeof adapters>);
 //<
 
 //>  should assert if config does not match adapter config
@@ -111,5 +108,5 @@ const adapters = {
     // 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>);
+} as TestHarnessConfigs<typeof adapters>);
 //<

package/src/harness/adapters/__tests__/{css.test.js → css.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
@@ -62,7 +61,7 @@ describe("Css.adapter", () => {
         ${{classes: ["class1", "class2"], style: {backgroundColor: "red"}}} | ${"class1 class2"}
     `(
         "should apply the given class names from $config to the container element",
-        ({config, expectation}) => {
+        ({config, expectation}: any) => {
             // Arrange
             const children = <div data-test-id="children">CHILDREN!</div>;
 
@@ -81,7 +80,7 @@ describe("Css.adapter", () => {
         ${{style: {backgroundColor: "red"}, classes: []}} | ${{backgroundColor: "red"}}
     `(
         "should apply the given styles from $config to the container element",
-        ({config, expectation}) => {
+        ({config, expectation}: any) => {
             // Arrange
             const children = <div data-test-id="children">CHILDREN!</div>;
 

package/src/harness/adapters/__tests__/{data.test.js → data.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 import {useCachedEffect} from "@khanacademy/wonder-blocks-data";
@@ -22,13 +21,14 @@ 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>;
         };
 
         // Act
         const {container} = render(
             Data.adapter(<TestFixture />, () =>
-                Promise.resolve(("INTERCEPTED!": any)),
+                Promise.resolve("INTERCEPTED!" as any),
             ),
         );
 
@@ -43,13 +43,14 @@ 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>;
         };
 
         // Act
         const {container} = render(
             Data.adapter(<TestFixture />, () =>
-                Promise.resolve(("INTERCEPTED!": any)),
+                Promise.resolve("INTERCEPTED!" as any),
             ),
         );
 

package/src/harness/adapters/__tests__/{portal.test.js → portal.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";