@khanacademy/wonder-blocks-testing 3.0.1 → 4.0.2

package/src/make-mock-response.js

@@ -0,0 +1,150 @@
+// @flow
+import {ResponseImpl} from "./response-impl.js";
+import type {GraphQLJson} from "./types.js";
+
+/**
+ * Describes a mock response to a fetch request.
+ */
+export opaque type MockResponse<TJson> =
+    | {|
+          type: "text",
+          text: string | (() => string),
+          statusCode: number,
+      |}
+    | {|
+          type: "reject",
+          error: Error | (() => Error),
+      |};
+
+/**
+ * Helper for creating a text-based mock response.
+ */
+const textResponse = <TData>(
+    text: string | (() => string),
+    statusCode: number = 200,
+): MockResponse<TData> => ({
+    type: "text",
+    text,
+    statusCode,
+});
+
+/**
+ * Helper for creating a rejected mock response.
+ */
+const rejectResponse = (error: Error | (() => Error)): MockResponse<empty> => ({
+    type: "reject",
+    error,
+});
+
+/**
+ * Helpers to define mock responses for mocked requests.
+ */
+export const RespondWith = Object.freeze({
+    /**
+     * Response with text body and status code.
+     * Status code defaults to 200.
+     */
+    text: <TData = string>(
+        text: string,
+        statusCode: number = 200,
+    ): MockResponse<TData> => textResponse<TData>(text, statusCode),
+
+    /**
+     * Response with JSON body and status code 200.
+     */
+    json: <TJson: {...}>(json: TJson): MockResponse<TJson> =>
+        textResponse<TJson>(() => JSON.stringify(json)),
+
+    /**
+     * Response with GraphQL data JSON body and status code 200.
+     */
+    graphQLData: <TData: {...}>(
+        data: TData,
+    ): MockResponse<GraphQLJson<TData>> =>
+        textResponse<GraphQLJson<TData>>(() => JSON.stringify({data})),
+
+    /**
+     * Response with body that will not parse as JSON and status code 200.
+     */
+    unparseableBody: (): MockResponse<any> => textResponse("INVALID JSON"),
+
+    /**
+     * Rejects with an AbortError to simulate an aborted request.
+     */
+    abortedRequest: (): MockResponse<any> =>
+        rejectResponse(() => {
+            const abortError = new Error("Mock request aborted");
+            abortError.name = "AbortError";
+            return abortError;
+        }),
+
+    /**
+     * Rejects with the given error.
+     */
+    reject: (error: Error): MockResponse<any> => rejectResponse(error),
+
+    /**
+     * A non-200 status code with empty text body.
+     * Equivalent to calling `ResponseWith.text("", statusCode)`.
+     */
+    errorStatusCode: (statusCode: number): MockResponse<any> => {
+        if (statusCode < 300) {
+            throw new Error(`${statusCode} is not a valid error status code`);
+        }
+        return textResponse("{}", statusCode);
+    },
+
+    /**
+     * Response body that is valid JSON but not a valid GraphQL response.
+     */
+    nonGraphQLBody: (): MockResponse<any> =>
+        textResponse(() =>
+            JSON.stringify({
+                valid: "json",
+                that: "is not a valid graphql response",
+            }),
+        ),
+
+    /**
+     * Response that is a GraphQL errors response with status code 200.
+     */
+    graphQLErrors: (
+        errorMessages: $ReadOnlyArray<string>,
+    ): MockResponse<GraphQLJson<any>> =>
+        textResponse<GraphQLJson<any>>(() =>
+            JSON.stringify({
+                errors: errorMessages.map((e) => ({
+                    message: e,
+                })),
+            }),
+        ),
+});
+
+/**
+ * Turns a MockResponse value to an actual Response that represents the mock.
+ */
+export const makeMockResponse = (
+    response: MockResponse<any>,
+): Promise<Response> => {
+    switch (response.type) {
+        case "text":
+            const text =
+                typeof response.text === "function"
+                    ? response.text()
+                    : response.text;
+
+            return Promise.resolve(
+                new ResponseImpl(text, {status: response.statusCode}),
+            );
+
+        case "reject":
+            const error =
+                response.error instanceof Error
+                    ? response.error
+                    : response.error();
+            return Promise.reject(error);
+
+        default:
+            throw new Error(`Unknown response type: ${response.type}`);
+    }
+};

package/src/mock-requester.js

@@ -0,0 +1,75 @@
+// @flow
+import {makeMockResponse} from "./make-mock-response.js";
+import type {MockResponse} from "./make-mock-response.js";
+import type {OperationMock, OperationMatcher, MockFn} from "./types.js";
+
+/**
+ * A generic mock request function for using when mocking fetch or gqlFetch.
+ */
+export const mockRequester = <
+    TOperationType,
+    TOperationMock: OperationMock<TOperationType>,
+>(
+    operationMatcher: OperationMatcher<any>,
+    operationToString: (
+        operationMock: TOperationMock,
+        ...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.
+    const mockFn: MockFn<TOperationType> = (
+        ...args: Array<any>
+    ): Promise<Response> => {
+        // Iterate our mocked operations and find the first one that matches.
+        for (const mock of mocks) {
+            if (mock.onceOnly && mock.used) {
+                // This is a once-only mock and it has been used, so skip it.
+                continue;
+            }
+            if (operationMatcher(mock.operation, ...args)) {
+                mock.used = true;
+                return mock.response();
+            }
+        }
+
+        // Default is to reject with some helpful info on what request
+        // we rejected.
+        return Promise.reject(
+            new Error(`No matching mock response found for request:
+    ${operationToString(...args)}`),
+        );
+    };
+
+    const addMockedOperation = <TOperation>(
+        operation: TOperation,
+        response: MockResponse<any>,
+        onceOnly: boolean,
+    ): MockFn<TOperationType> => {
+        const mockResponse = () => makeMockResponse(response);
+        mocks.push({
+            operation,
+            response: mockResponse,
+            onceOnly,
+            used: false,
+        });
+        return mockFn;
+    };
+
+    mockFn.mockOperation = <TOperation>(
+        operation: TOperation,
+        response: MockResponse<any>,
+    ): MockFn<TOperationType> => addMockedOperation(operation, response, false);
+
+    mockFn.mockOperationOnce = <TOperation>(
+        operation: TOperation,
+        response: MockResponse<any>,
+    ): MockFn<TOperationType> => addMockedOperation(operation, response, true);
+
+    return mockFn;
+};

package/src/response-impl.js

@@ -0,0 +1,9 @@
+// @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 =
+    typeof Response === "undefined" ? require("node-fetch").Response : Response;

package/src/types.js

@@ -0,0 +1,39 @@
+// @flow
+import type {MockResponse} from "./make-mock-response.js";
+
+/**
+ * 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: {...}> =
+    | {|
+          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/src/gql/make-gql-mock-response.js

@@ -1,124 +0,0 @@
-// @flow
-export opaque type GqlMockResponse<TData> =
-    | {|
-          type: "data",
-          data: TData,
-      |}
-    | {|
-          type: "parse",
-      |}
-    | {|
-          type: "abort",
-      |}
-    | {|
-          type: "status",
-          statusCode: number,
-      |}
-    | {|
-          type: "invalid",
-      |}
-    | {|type: "graphql", errors: $ReadOnlyArray<string>|};
-
-/**
- * Helpers to define rejection states for mocking GQL requests.
- */
-export const RespondWith = Object.freeze({
-    data: <TData>(data: TData): GqlMockResponse<TData> => ({
-        type: "data",
-        data,
-    }),
-    unparseableBody: (): GqlMockResponse<any> => ({type: "parse"}),
-    abortedRequest: (): GqlMockResponse<any> => ({type: "abort"}),
-    errorStatusCode: (statusCode: number): GqlMockResponse<any> => {
-        if (statusCode < 300) {
-            throw new Error(`${statusCode} is not a valid error status code`);
-        }
-        return {
-            type: "status",
-            statusCode,
-        };
-    },
-    nonGraphQLBody: (): GqlMockResponse<any> => ({type: "invalid"}),
-    graphQLErrors: (
-        errorMessages: $ReadOnlyArray<string>,
-    ): GqlMockResponse<any> => ({
-        type: "graphql",
-        errors: errorMessages,
-    }),
-});
-
-/**
- * Turns an ErrorResponse value in an actual Response that will invoke
- * that error.
- */
-export const makeGqlMockResponse = <TData>(
-    response: GqlMockResponse<TData>,
-): Promise<Response> => {
-    switch (response.type) {
-        case "data":
-            return Promise.resolve(
-                ({
-                    status: 200,
-                    text: () =>
-                        Promise.resolve(
-                            JSON.stringify({
-                                data: response.data,
-                            }),
-                        ),
-                }: any),
-            );
-
-        case "parse":
-            return Promise.resolve(
-                ({
-                    status: 200,
-                    text: () => Promise.resolve("INVALID JSON"),
-                }: any),
-            );
-
-        case "abort":
-            const abortError = new Error("Mock request aborted");
-            abortError.name = "AbortError";
-            return Promise.reject(abortError);
-
-        case "status":
-            return Promise.resolve(
-                ({
-                    status: response.statusCode,
-                    text: () => Promise.resolve(JSON.stringify({})),
-                }: any),
-            );
-
-        case "invalid":
-            return Promise.resolve(
-                ({
-                    status: 200,
-                    text: () =>
-                        Promise.resolve(
-                            JSON.stringify({
-                                valid: "json",
-                                that: "is not a valid graphql response",
-                            }),
-                        ),
-                }: any),
-            );
-
-        case "graphql":
-            return Promise.resolve(
-                ({
-                    status: 200,
-                    text: () =>
-                        Promise.resolve(
-                            JSON.stringify({
-                                errors: response.errors.map((e) => ({
-                                    message: e,
-                                })),
-                            }),
-                        ),
-                }: any),
-            );
-
-        default:
-            throw new Error(`Unknown response type: ${response.type}`);
-    }
-};