@khanacademy/wonder-blocks-testing 7.1.10 → 7.1.12

package/dist/respond-with.d.ts

@@ -0,0 +1,57 @@
+import { SettleSignal } from "./settle-signal";
+import type { GraphQLJson } from "./types";
+/**
+ * Describes a mock response to a fetch request.
+ */
+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.
+     */
+    readonly toPromise: () => Promise<Response>;
+};
+/**
+ * Helpers to define mock responses for mocked requests.
+ */
+export declare const RespondWith: Readonly<{
+    /**
+     * Response with text body and status code.
+     * Status code defaults to 200.
+     */
+    text: <TData = string>(text: string, statusCode?: number, signal?: SettleSignal | null) => MockResponse<TData>;
+    /**
+     * Response with JSON body and status code 200.
+     */
+    json: <TJson extends Record<any, any>>(json: TJson, signal?: SettleSignal | null) => MockResponse<TJson>;
+    /**
+     * Response with GraphQL data JSON body and status code 200.
+     */
+    graphQLData: <TData_1 extends Record<any, any>>(data: TData_1, signal?: SettleSignal | null) => MockResponse<GraphQLJson<TData_1>>;
+    /**
+     * Response with body that will not parse as JSON and status code 200.
+     */
+    unparseableBody: (signal?: SettleSignal | null) => MockResponse<any>;
+    /**
+     * Rejects with an AbortError to simulate an aborted request.
+     */
+    abortedRequest: (signal?: SettleSignal | null) => MockResponse<any>;
+    /**
+     * Rejects with the given error.
+     */
+    reject: (error: Error, signal?: SettleSignal | null) => MockResponse<any>;
+    /**
+     * A non-200 status code with empty text body.
+     * Equivalent to calling `ResponseWith.text("", statusCode)`.
+     */
+    errorStatusCode: (statusCode: number, signal?: SettleSignal | null) => MockResponse<any>;
+    /**
+     * Response body that is valid JSON but not a valid GraphQL response.
+     */
+    nonGraphQLBody: (signal?: SettleSignal | null) => MockResponse<any>;
+    /**
+     * Response that is a GraphQL errors response with status code 200.
+     */
+    graphQLErrors: (errorMessages: ReadonlyArray<string>, signal?: SettleSignal | null) => MockResponse<GraphQLJson<any>>;
+}>;

package/dist/respond-with.js.flow

@@ -0,0 +1,91 @@
+/**
+ * Flowtype definitions for respond-with
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import { SettleSignal } from "./settle-signal";
+import type { GraphQLJson } from "./types";
+
+/**
+ * Describes a mock response to a fetch request.
+ */
+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>,
+  ...
+};
+/**
+ * Helpers to define mock responses for mocked requests.
+ */
+declare export var RespondWith: $ReadOnly<{
+  /**
+   * Response with text body and status code.
+   * Status code defaults to 200.
+   */
+  text: <TData>(
+    text: string,
+    statusCode?: number,
+    signal?: SettleSignal | null
+  ) => MockResponse<TData>,
+
+  /**
+   * Response with JSON body and status code 200.
+   */
+  json: <TJson: { [key: any]: any, ... }>(
+    json: TJson,
+    signal?: SettleSignal | null
+  ) => MockResponse<TJson>,
+
+  /**
+   * Response with GraphQL data JSON body and status code 200.
+   */
+  graphQLData: <TData_1: { [key: any]: any, ... }>(
+    data: TData_1,
+    signal?: SettleSignal | null
+  ) => MockResponse<GraphQLJson<TData_1>>,
+
+  /**
+   * Response with body that will not parse as JSON and status code 200.
+   */
+  unparseableBody: (signal?: SettleSignal | null) => MockResponse<any>,
+
+  /**
+   * Rejects with an AbortError to simulate an aborted request.
+   */
+  abortedRequest: (signal?: SettleSignal | null) => MockResponse<any>,
+
+  /**
+   * Rejects with the given error.
+   */
+  reject: (error: Error, signal?: SettleSignal | null) => MockResponse<any>,
+
+  /**
+   * A non-200 status code with empty text body.
+   * Equivalent to calling `ResponseWith.text("", statusCode)`.
+   */
+  errorStatusCode: (
+    statusCode: number,
+    signal?: SettleSignal | null
+  ) => MockResponse<any>,
+
+  /**
+   * Response body that is valid JSON but not a valid GraphQL response.
+   */
+  nonGraphQLBody: (signal?: SettleSignal | null) => MockResponse<any>,
+
+  /**
+   * Response that is a GraphQL errors response with status code 200.
+   */
+  graphQLErrors: (
+    errorMessages: $ReadOnlyArray<string>,
+    signal?: SettleSignal | null
+  ) => MockResponse<GraphQLJson<any>>,
+  ...
+}>;

package/dist/response-impl.d.ts

@@ -0,0 +1 @@
+export declare const ResponseImpl: typeof Response;

package/dist/response-impl.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for response-impl
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+declare export var ResponseImpl: typeof Response;

package/dist/settle-controller.d.ts

@@ -0,0 +1,19 @@
+import { SettleSignal } from "./settle-signal";
+/**
+ * A controller for the `RespondWith` API to control response settlement.
+ */
+export declare class SettleController {
+    private _settleFn;
+    private _signal;
+    constructor();
+    /**
+     * The signal to pass to the `RespondWith` API.
+     */
+    get signal(): SettleSignal;
+    /**
+     * Settle the signal and therefore any associated responses.
+     *
+     * @throws {Error} if the signal has already been settled.
+     */
+    settle(): void;
+}

package/dist/settle-controller.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for settle-controller
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import { SettleSignal } from "./settle-signal";
+
+/**
+ * A controller for the `RespondWith` API to control response settlement.
+ */
+declare export class SettleController {
+  constructor(): this;
+
+  /**
+   * The signal to pass to the `RespondWith` API.
+   */
+  signal: SettleSignal;
+
+  /**
+   * Settle the signal and therefore any associated responses.
+   * @throws {Error} if the signal has already been settled.
+   */
+  settle(): void;
+}

package/dist/settle-signal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A signal for controlling the `RespondWith` API responses.
+ *
+ * This provide finely-grained control over the promise lifecycle to support
+ * complex test scenarios.
+ */
+export declare class SettleSignal extends EventTarget {
+    private _settled;
+    constructor(setSettleFn?: ((settleFn: () => void) => unknown) | null);
+    /**
+     * An already settled signal.
+     */
+    static settle(): SettleSignal;
+    /**
+     * Has this signal been settled yet?
+     */
+    get settled(): boolean;
+}

package/dist/settle-signal.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for settle-signal
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * A signal for controlling the `RespondWith` API responses.
+ *
+ * This provide finely-grained control over the promise lifecycle to support
+ * complex test scenarios.
+ */
+declare export class SettleSignal implements EventTarget {
+  constructor(setSettleFn?: ((settleFn: () => void) => mixed) | null): this;
+
+  /**
+   * An already settled signal.
+   */
+  static settle(): SettleSignal;
+
+  /**
+   * Has this signal been settled yet?
+   */
+  settled: boolean;
+}

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+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/dist/types.js.flow

@@ -0,0 +1,46 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+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: { [key: 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: TOperationType>(
+  operation: TOperation,
+  response: MockResponse<any>
+) => MockFn<TOperationType>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "7.1.10",
+    "version": "7.1.12",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -8,17 +8,17 @@
     "description": "",
     "main": "dist/index.js",
     "module": "dist/es/index.js",
-    "source": "src/index.js",
+    "types": "dist/index.d.ts",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "dependencies": {
         "@babel/runtime": "^7.18.6",
-        "@khanacademy/wonder-blocks-data": "^10.1.0"
+        "@khanacademy/wonder-blocks-data": "^10.1.2"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-stuff-core": "^1.2.1",
-        "@khanacademy/wonder-stuff-testing": "^2.3.2",
+        "@khanacademy/wonder-stuff-core": "^1.2.2",
+        "@khanacademy/wonder-stuff-testing": "^2.3.3",
         "@storybook/addon-actions": "^6.4.8",
         "node-fetch": "^2.6.7",
         "aphrodite": "^1.2.5",
@@ -26,7 +26,7 @@
         "react-router-dom": "5.3.0"
     },
     "devDependencies": {
-        "wb-dev-build-settings": "^0.7.1"
+        "wb-dev-build-settings": "^0.7.3"
     },
     "author": "",
     "license": "MIT"

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

@@ -1,4 +1,3 @@
-// @flow
 import {RespondWith} from "../respond-with";
 import {mockRequester} from "../mock-requester";
 
@@ -40,7 +39,7 @@ describe("#mockRequester", () => {
         // Arrange
         const mockFn = mockRequester(
             jest.fn(),
-            (...args) => `TEST FORMATTING: ${JSON.stringify(args)}`,
+            (...args: any) => `TEST FORMATTING: ${JSON.stringify(args)}`,
         );
 
         // Act

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

@@ -1,4 +1,3 @@
-// @flow
 import {SettleController} from "../settle-controller";
 import {RespondWith} from "../respond-with";
 

package/src/__tests__/response-impl.test.js

@@ -1,4 +1,4 @@
-// flow
+/* eslint-disable @typescript-eslint/no-var-requires */
 import * as wst from "@khanacademy/wonder-stuff-testing";
 
 describe("ResponseImpl", () => {

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

@@ -1,4 +1,3 @@
-// @flow
 import {SettleController} from "../settle-controller";
 import {SettleSignal} from "../settle-signal";
 

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

@@ -1,4 +1,3 @@
-// @flow
 import {SettleSignal} from "../settle-signal";
 
 describe("SettleSignal", () => {

package/src/fetch/__tests__/__snapshots__/{mock-fetch.test.js.snap → mock-fetch.test.ts.snap}

@@ -3,13 +3,13 @@
 exports[`#mockFetch should reject with a useful error when there are no matching mocks for %s 1`] = `
 "No matching mock response found for request:
     Input: http://example.com/foo
-    Options: None"
+Options: None"
 `;
 
 exports[`#mockFetch should reject with a useful error when there are no matching mocks for %s 2`] = `
 "No matching mock response found for request:
     Input: "http://example.com/foo"
-    Options: {
+Options: {
   "method": "GET"
 }"
 `;
@@ -23,7 +23,7 @@ exports[`#mockFetch should reject with a useful error when there are no matching
   "compress": true,
   "counter": 0
 }
-    Options: {
+Options: {
   "method": "POST"
 }"
 `;

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

@@ -1,4 +1,3 @@
-// @flow
 import {Request} from "node-fetch";
 import {fetchRequestMatchesMock} from "../fetch-request-matches-mock";
 
@@ -12,11 +11,11 @@ describe("#fetchRequestMatchesMock", () => {
                 id: "foo",
                 type: "query",
             },
-        };
+        } as const;
 
         // Act
         const underTest = () =>
-            fetchRequestMatchesMock((mock: any), TEST_URL, null);
+            fetchRequestMatchesMock(mock as any, TEST_URL, null);
 
         // Assert
         expect(underTest).toThrowErrorMatchingInlineSnapshot(
@@ -32,7 +31,7 @@ describe("#fetchRequestMatchesMock", () => {
         const underTest = () =>
             fetchRequestMatchesMock(
                 mock,
-                ({not: "a valid request"}: any),
+                {not: "a valid request"} as any,
                 null,
             );
 
@@ -44,7 +43,7 @@ describe("#fetchRequestMatchesMock", () => {
 
     describe.each([TEST_URL, new URL(TEST_URL), new Request(TEST_URL)])(
         "for valid inputs",
-        (input) => {
+        (input: any) => {
             it("should return false if mock is a string and it does not match the fetched URL", () => {
                 // Arrange
                 const mock = "http://example.com/bar";
@@ -84,7 +83,7 @@ describe("#fetchRequestMatchesMock", () => {
                 /^.*#fragment$/,
             ])(
                 "should return true if the mock is a %s and matches the fetched URL",
-                (regex) => {
+                (regex: any) => {
                     // Arrange
 
                     // Act

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

@@ -1,4 +1,3 @@
-// @flow
 import {Request} from "node-fetch";
 import {RespondWith} from "../../respond-with";
 import {mockFetch} from "../mock-fetch";
@@ -11,7 +10,7 @@ describe("#mockFetch", () => {
         ${new Request("http://example.com/foo")} | ${{method: "POST"}}
     `(
         "should reject with a useful error when there are no matching mocks for %s",
-        async ({input, init}) => {
+        async ({input, init}: any) => {
             // Arrange
             const mockFn = mockFetch();
 

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

@@ -1,4 +1,3 @@
-// @flow
 import type {FetchMockOperation} from "./types";
 
 /**
@@ -13,7 +12,9 @@ const getHref = (input: RequestInfo): string => {
         return input;
     } else if (typeof input.url === "string") {
         return input.url;
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'href' does not exist on type 'Request'.
     } else if (typeof input.href === "string") {
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'href' does not exist on type 'Request'.
         return input.href;
     } else {
         throw new Error(`Unsupported input type`);
@@ -26,7 +27,7 @@ const getHref = (input: RequestInfo): string => {
 export const fetchRequestMatchesMock = (
     mock: FetchMockOperation,
     input: RequestInfo,
-    init: ?RequestOptions,
+    init?: RequestInit | null,
 ): boolean => {
     // Currently, we only match on the input portion.
     // This can be a Request, a URL, or a string.

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

@@ -1,4 +1,3 @@
-// @flow
 import {fetchRequestMatchesMock} from "./fetch-request-matches-mock";
 import {mockRequester} from "../mock-requester";
 import type {FetchMockFn, FetchMockOperation} from "./types";
@@ -7,7 +6,7 @@ import type {FetchMockFn, FetchMockOperation} from "./types";
  * A mock for the fetch function passed to GqlRouter.
  */
 export const mockFetch = (): FetchMockFn =>
-    mockRequester<FetchMockOperation, _>(
+    mockRequester<FetchMockOperation, any>(
         fetchRequestMatchesMock,
         (input, init) =>
             `Input: ${
@@ -15,5 +14,5 @@ export const mockFetch = (): FetchMockFn =>
                     ? input
                     : JSON.stringify(input, null, 2)
             }
-    Options: ${init == null ? "None" : JSON.stringify(init, null, 2)}`,
+Options: ${init == null ? "None" : JSON.stringify(init, null, 2)}`,
     );

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

@@ -1,4 +1,3 @@
-//@flow
 import type {MockResponse} from "../respond-with";
 
 export type FetchMockOperation = RegExp | string;
@@ -8,8 +7,8 @@ type FetchMockOperationFn = (
     response: MockResponse<any>,
 ) => FetchMockFn;
 
-export type FetchMockFn = {|
-    (input: RequestInfo, init?: RequestOptions): Promise<Response>,
-    mockOperation: FetchMockOperationFn,
-    mockOperationOnce: FetchMockOperationFn,
-|};
+export type FetchMockFn = {
+    (input: RequestInfo, init?: RequestInit): Promise<Response>;
+    mockOperation: FetchMockOperationFn;
+    mockOperationOnce: FetchMockOperationFn;
+};

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

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import * as AddonActionsModule from "@storybook/addon-actions";
@@ -93,7 +92,7 @@ describe("fixtures", () => {
             const props = {
                 this: "isAProp",
                 andSo: "isThis",
-            };
+            } as const;
 
             // Act
             const result = fixture("A simple story", props);
@@ -116,7 +115,8 @@ describe("fixtures", () => {
         it("should render the component", () => {
             // Arrange
             const fixture = fixtures(
-                (props) => `I rendered ${JSON.stringify(props)}`,
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(props: any) => string' is not assignable to parameter of type 'ComponentType<any>'.
+                (props: any) => `I rendered ${JSON.stringify(props)}`,
             );
             const Fixture: any = fixture("A simple story", {});
 
@@ -132,11 +132,13 @@ describe("fixtures", () => {
         it("should render the wrapper", () => {
             // Arrange
             const fixture = fixtures(
-                (props) => `I rendered ${JSON.stringify(props)}`,
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(props: any) => string' is not assignable to parameter of type 'ComponentType<any>'.
+                (props: any) => `I rendered ${JSON.stringify(props)}`,
             );
             const Fixture: any = fixture(
                 "A simple story",
                 {},
+                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '() => string' is not assignable to parameter of type 'ComponentType<any> | undefined'.
                 () => "I am a wrapper",
             );
 

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

@@ -1,17 +1,17 @@
-// @flow
 import * as React from "react";
 
 import {fixtures} from "../index";
 
-type Props = {|
-    propA: string,
-    propB?: string,
-|};
+type Props = {
+    propA: string;
+    propB?: string;
+};
 
-const MyComponent = (props: Props): React.Node =>
+const MyComponent: React.FC<Props> = (props): React.ReactElement =>
+    // @ts-expect-error: `string` is not a valid `ReactElement`.
     `I am a component. Here are my props: ${JSON.stringify(props, null, 2)}`;
 
-const Wrapper = (props) => (
+const Wrapper = (props: any) => (
     <>
         Wrapper &gt;&gt;&gt;
         <MyComponent {...props} />
@@ -21,12 +21,15 @@ const Wrapper = (props) => (
 
 const fixture = fixtures(MyComponent);
 
-export const F1: mixed = fixture("This is a fixture with some regular props", {
-    propA: "this is a prop",
-    propB: "this is another",
-});
+export const F1: unknown = fixture(
+    "This is a fixture with some regular props",
+    {
+        propA: "this is a prop",
+        propB: "this is another",
+    },
+);
 
-export const F2: mixed = fixture(
+export const F2: unknown = fixture(
     "This is a fixture with props from functions, and a bit of logging",
     ({log}) => {
         log("This is a log from a fixture during props generation", {
@@ -38,7 +41,7 @@ export const F2: mixed = fixture(
     },
 );
 
-export const F3: mixed = fixture(
+export const F3: unknown = fixture(
     "This fixture uses a custom wrapper",
     {
         propA: "some props again",