@khanacademy/wonder-blocks-testing 7.1.10 → 7.1.11

package/src/fixtures/{fixtures.defaultwrapper.stories.js → fixtures.defaultwrapper.stories.tsx}

@@ -1,14 +1,14 @@
-// @flow
 import * as React from "react";
 
 import {fixtures} from "../index";
 
-type Props = {...};
+type Props = Record<any, any>;
 
-const MyComponent = (props: Props) =>
-    `My props: ${JSON.stringify(props, null, 2)}`;
+const MyComponent: React.FC<Props> = (props): React.ReactElement => (
+    <>{`My props: ${JSON.stringify(props, null, 2)}`}</>
+);
 
-const Wrapper = (props) => (
+const Wrapper = (props: any) => (
     <>
         Wrapper &gt;&gt;&gt;
         <MyComponent {...props} />
@@ -16,7 +16,7 @@ const Wrapper = (props) => (
     </>
 );
 
-const DefaultWrapper = (props: Props): React.Node => (
+const DefaultWrapper: React.FC<Props> = (props): React.ReactElement => (
     <>
         DefaultWrapper &gt;&gt;&gt;
         <MyComponent {...props} />
@@ -26,7 +26,7 @@ const DefaultWrapper = (props: Props): React.Node => (
 
 const fixture = fixtures(DefaultWrapper);
 
-export const F1: mixed = fixture(
+export const F1: unknown = fixture(
     "This is a fixture with some regular props and the default wrapper",
     {
         see: "this is a prop",
@@ -34,7 +34,7 @@ export const F1: mixed = fixture(
     },
 );
 
-export const F2: mixed = fixture(
+export const F2: unknown = fixture(
     "This fixture uses a custom wrapper",
     {
         just: "some props again",

package/src/fixtures/{fixtures.js → fixtures.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {action} from "@storybook/addon-actions";
 
@@ -21,8 +20,11 @@ import type {FixtureFn, FixtureProps} from "./types";
  * ) => mixed} A function to create a CSF compatible story.
  */
 export const fixtures = <
-    TComponent: React.ComponentType<any>,
-    TProps: React.ElementConfig<TComponent>,
+    TComponent extends React.ComponentType<any>,
+    TProps extends JSX.LibraryManagedAttributes<
+        TComponent,
+        React.ComponentProps<TComponent>
+    >,
 >(
     Component: TComponent,
 ): FixtureFn<TProps> => {
@@ -31,18 +33,21 @@ export const fixtures = <
     let storyNumber = 1;
 
     const getPropsOptions = {
+        // @ts-expect-error [FEI-5019] - TS7006 - Parameter 'message' implicitly has an 'any' type. | TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
         log: (message, ...args) => action(message)(...args),
         logHandler: action,
-    };
+    } as const;
 
     const makeStory = (
         description: string,
         props: FixtureProps<TProps>,
-        wrapper: ?React.ComponentType<TProps> = null,
-    ): mixed => {
+        wrapper: React.ComponentType<TProps> | null = null,
+    ): unknown => {
         const storyName = `${storyNumber++} ${description}`;
-        const getProps = (options) =>
-            typeof props === "function" ? props(options) : props;
+        const getProps = (options: {
+            log: (message: string, ...args: Array<any>) => any;
+            logHandler: any;
+        }) => (typeof props === "function" ? props(options) : props);
 
         const RealComponent = wrapper || Component;
 
@@ -52,10 +57,10 @@ export const fixtures = <
         // component. We don't use decorators for the wrapper
         // because we may not be in a storybook context and it
         // keeps the framework API simpler this way.
-        let Template = templateMap.get((RealComponent: any));
+        let Template = templateMap.get(RealComponent as any);
         if (Template == null) {
-            Template = (args) => <RealComponent {...args} />;
-            templateMap.set((RealComponent: any), Template);
+            Template = (args: any) => <RealComponent {...args} />;
+            templateMap.set(RealComponent as any, Template);
         }
 
         // Each story that shares that component then reuses that

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

@@ -1,46 +1,42 @@
-// @flow
 import * as React from "react";
 
 /**
  * Options injected to the function that returns the fixture props.
  */
-export type GetPropsOptions = {|
+export type GetPropsOptions = {
     /**
      * A function to call that will log output.
      */
-    log: (message: string, ...args: Array<any>) => void,
-
+    log: (message: string, ...args: Array<any>) => void;
     /**
      * A function to make a handler that will log all arguments with the given
      * name or message. Useful for logging events as it avoids the boilerplate
      * of the `log` function.
      */
-    logHandler: (name: string) => (...args: Array<any>) => void,
-|};
+    logHandler: (name: string) => (...args: Array<any>) => void;
+};
 
-export type FixtureProps<TProps: {...}> =
-    | $ReadOnly<TProps>
-    | ((options: $ReadOnly<GetPropsOptions>) => $ReadOnly<TProps>);
+export type FixtureProps<TProps extends Record<any, any>> =
+    | Readonly<TProps>
+    | ((options: Readonly<GetPropsOptions>) => Readonly<TProps>);
 
 /**
  * A function for defining a fixture.
  */
-export type FixtureFn<TProps: {...}> = (
+export type FixtureFn<TProps extends Record<any, any>> = (
     /**
      * The name of the fixture.
      */
     description: string,
-
     /**
      * The props for the fixture or a function that returns the props.
      * The function is injected with an API to facilitate logging.
      */
     props: FixtureProps<TProps>,
-
     /**
      * An alternative component to render for the fixture.
      * Useful if the fixture requires some additional setup for testing the
      * component.
      */
     wrapper?: React.ComponentType<TProps>,
-) => mixed;
+) => unknown;

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

@@ -1,4 +1,3 @@
-// @flow
 import {gqlRequestMatchesMock} from "../gql-request-matches-mock";
 
 describe("#gqlRequestMatchesMock", () => {
@@ -9,11 +8,11 @@ describe("#gqlRequestMatchesMock", () => {
                 id: "foo",
                 type: "query",
             },
-        };
+        } as const;
         const operation = {
             id: "foo",
             type: "mutation",
-        };
+        } as const;
 
         // Act
         const result = gqlRequestMatchesMock(mock, operation, null, {});
@@ -29,7 +28,7 @@ describe("#gqlRequestMatchesMock", () => {
                 id: "foo",
                 type: "query",
             },
-        };
+        } as const;
 
         // Act
         const result = gqlRequestMatchesMock(
@@ -48,7 +47,7 @@ describe("#gqlRequestMatchesMock", () => {
 
     it.each([{foo: "bar"}, {foo: "baz", anExtra: "property"}, null])(
         "should return false if variables don't match",
-        (variables) => {
+        (variables: any) => {
             // Arrange
             const mock = {
                 operation: {
@@ -58,11 +57,11 @@ describe("#gqlRequestMatchesMock", () => {
                 variables: {
                     foo: "baz",
                 },
-            };
+            } as const;
             const operation = {
                 id: "foo",
                 type: "query",
-            };
+            } as const;
 
             // Act
             const result = gqlRequestMatchesMock(
@@ -79,7 +78,7 @@ describe("#gqlRequestMatchesMock", () => {
 
     it.each([{a: "context"}, null])(
         "should return false if contexts don't match",
-        (context) => {
+        (context: any) => {
             // Arrange
             const mock = {
                 operation: {
@@ -92,14 +91,14 @@ describe("#gqlRequestMatchesMock", () => {
                 context: {
                     mock: "context",
                 },
-            };
+            } as const;
             const operation = {
                 id: "foo",
                 type: "query",
-            };
+            } as const;
             const variables = {
                 foo: "bar",
-            };
+            } as const;
 
             // Act
             const result = gqlRequestMatchesMock(
@@ -121,7 +120,7 @@ describe("#gqlRequestMatchesMock", () => {
                 id: "foo",
                 type: "query",
             },
-        };
+        } as const;
 
         // Act
         const result = gqlRequestMatchesMock(
@@ -148,7 +147,7 @@ describe("#gqlRequestMatchesMock", () => {
             variables: {
                 foo: "bar",
             },
-        };
+        } as const;
 
         // Act
         const result = gqlRequestMatchesMock(
@@ -177,7 +176,7 @@ describe("#gqlRequestMatchesMock", () => {
             context: {
                 foo: "bar",
             },
-        };
+        } as const;
 
         // Act
         const result = gqlRequestMatchesMock(
@@ -209,17 +208,17 @@ describe("#gqlRequestMatchesMock", () => {
             context: {
                 foo: "bar",
             },
-        };
+        } as const;
         const operation = {
             id: "foo",
             type: "query",
-        };
+        } as const;
         const variables = {
             foo: "bar",
-        };
+        } as const;
         const context = {
             foo: "bar",
-        };
+        } as const;
 
         // Act
         const result = gqlRequestMatchesMock(

package/src/gql/__tests__/{mock-gql-fetch.test.js → mock-gql-fetch.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 
@@ -12,13 +11,13 @@ describe("#mockGqlFetch", () => {
             // Arrange
             const mockFetch = mockGqlFetch();
             const RenderError = () => {
-                const [result, setResult] = React.useState(null);
+                const [result, setResult] = React.useState<any>(null);
                 const gqlFetch = useGql();
                 React.useEffect(() => {
                     gqlFetch({
                         type: "query",
                         id: "getMyStuff",
-                    }).catch((e) => {
+                    }).catch((e: any) => {
                         setResult(e.message);
                     });
                 }, [gqlFetch]);
@@ -48,14 +47,14 @@ describe("#mockGqlFetch", () => {
             const query = {
                 type: "query",
                 id: "getMyStuff",
-            };
-            const data = {myStuff: "stuff"};
+            } as const;
+            const data = {myStuff: "stuff"} as const;
             const RenderData = () => {
-                const [result, setResult] = React.useState(null);
+                const [result, setResult] = React.useState<any>(null);
                 const gqlFetch = useGql();
                 React.useEffect(() => {
                     // eslint-disable-next-line promise/catch-or-return
-                    gqlFetch(query).then((r) => {
+                    gqlFetch(query).then((r: any) => {
                         setResult(JSON.stringify(r ?? "(null)"));
                         return;
                     });
@@ -88,13 +87,13 @@ describe("#mockGqlFetch", () => {
             const query = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const RenderError = () => {
-                const [result, setResult] = React.useState(null);
+                const [result, setResult] = React.useState<any>(null);
                 const gqlFetch = useGql();
                 React.useEffect(() => {
                     // eslint-disable-next-line promise/catch-or-return
-                    gqlFetch(query).catch((e) => {
+                    gqlFetch(query).catch((e: any) => {
                         setResult(e.message);
                         return;
                     });
@@ -125,13 +124,13 @@ describe("#mockGqlFetch", () => {
             const query = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const RenderError = () => {
-                const [result, setResult] = React.useState(null);
+                const [result, setResult] = React.useState<any>(null);
                 const gqlFetch = useGql();
                 React.useEffect(() => {
                     // eslint-disable-next-line promise/catch-or-return
-                    gqlFetch(query).catch((e) => {
+                    gqlFetch(query).catch((e: any) => {
                         setResult(e.message);
                     });
                 }, [gqlFetch]);
@@ -176,10 +175,10 @@ describe("#mockGqlFetch", () => {
         await expect(result).rejects.toThrowErrorMatchingInlineSnapshot(`
             "No matching mock response found for request:
                 Operation: query getMyStuff
-                Variables: {
+            Variables: {
               "a": "variable"
             }
-                Context: {
+            Context: {
               "my": "context"
             }"
         `);
@@ -192,10 +191,10 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation({operation}, RespondWith.graphQLData(data));
@@ -215,10 +214,10 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation({operation}, RespondWith.graphQLData(data));
@@ -238,13 +237,13 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const variables = {
                 a: "variable",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation(
@@ -263,13 +262,13 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const variables = {
                 a: "variable",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation(
@@ -292,13 +291,13 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const context = {
                 my: "context",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation(
@@ -317,13 +316,13 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const context = {
                 my: "context",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation(
@@ -346,16 +345,16 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const variables = {
                 a: "variable",
-            };
+            } as const;
             const context = {
                 my: "context",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation(
@@ -374,16 +373,16 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const variables = {
                 a: "variable",
-            };
+            } as const;
             const context = {
                 my: "context",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation(
@@ -403,10 +402,10 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperation({operation}, RespondWith.graphQLData(data));
@@ -430,10 +429,10 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperationOnce(
@@ -456,10 +455,10 @@ describe("#mockGqlFetch", () => {
             const operation = {
                 type: "query",
                 id: "getMyStuff",
-            };
+            } as const;
             const data = {
                 myStuff: "stuff",
-            };
+            } as const;
 
             // Act
             mockFetch.mockOperationOnce(

package/src/gql/__tests__/{wb-data-integration.test.js → wb-data-integration.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 
@@ -11,13 +10,13 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         // Arrange
         const mockFetch = mockGqlFetch();
         const RenderError = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 gqlFetch({
                     type: "query",
                     id: "getMyStuff",
-                }).catch((e) => {
+                }).catch((e: any) => {
                     setResult(e.message);
                 });
             }, [gqlFetch]);
@@ -47,14 +46,14 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         const query = {
             type: "query",
             id: "getMyStuff",
-        };
-        const data = {myStuff: "stuff"};
+        } as const;
+        const data = {myStuff: "stuff"} as const;
         const RenderData = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).then((r) => {
+                gqlFetch(query).then((r: any) => {
                     setResult(JSON.stringify(r ?? "(null)"));
                     return;
                 });
@@ -87,13 +86,13 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         const query = {
             type: "query",
             id: "getMyStuff",
-        };
+        } as const;
         const RenderError = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e) => {
+                gqlFetch(query).catch((e: any) => {
                     setResult(e.message);
                     return;
                 });
@@ -124,13 +123,13 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         const query = {
             type: "query",
             id: "getMyStuff",
-        };
+        } as const;
         const RenderError = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e) => {
+                gqlFetch(query).catch((e: any) => {
                     setResult(e.message);
                 });
             }, [gqlFetch]);
@@ -162,13 +161,13 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         const query = {
             type: "query",
             id: "getMyStuff",
-        };
+        } as const;
         const RenderError = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e) => {
+                gqlFetch(query).catch((e: any) => {
                     setResult(e.message);
                 });
             }, [gqlFetch]);
@@ -200,13 +199,13 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         const query = {
             type: "query",
             id: "getMyStuff",
-        };
+        } as const;
         const RenderError = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e) => {
+                gqlFetch(query).catch((e: any) => {
                     setResult(e.message);
                 });
             }, [gqlFetch]);
@@ -238,13 +237,13 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         const query = {
             type: "query",
             id: "getMyStuff",
-        };
+        } as const;
         const RenderError = () => {
-            const [result, setResult] = React.useState(null);
+            const [result, setResult] = React.useState<any>(null);
             const gqlFetch = useGql();
             React.useEffect(() => {
                 // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e) => {
+                gqlFetch(query).catch((e: any) => {
                     setResult(e.message);
                 });
             }, [gqlFetch]);