@khanacademy/wonder-blocks-testing 2.0.8 → 4.0.0

package/src/gql/__tests__/mock-gql-fetch.test.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 
 import {GqlRouter, useGql} from "@khanacademy/wonder-blocks-data";
-import {RespondWith} from "../make-gql-mock-response.js";
+import {RespondWith} from "../../make-mock-response.js";
 import {mockGqlFetch} from "../mock-gql-fetch.js";
 
 describe("#mockGqlFetch", () => {
@@ -37,7 +37,7 @@ describe("#mockGqlFetch", () => {
             // Assert
             await waitFor(() =>
                 expect(result).toHaveTextContent(
-                    "No matching GraphQL mock response found for request",
+                    "No matching mock response found for request",
                 ),
             );
         });
@@ -65,7 +65,10 @@ describe("#mockGqlFetch", () => {
             };
 
             // Act
-            mockFetch.mockOperation({operation: query}, RespondWith.data(data));
+            mockFetch.mockOperation(
+                {operation: query},
+                RespondWith.graphQLData(data),
+            );
             render(
                 <GqlRouter defaultContext={{}} fetch={mockFetch}>
                     <RenderData />
@@ -171,7 +174,7 @@ describe("#mockGqlFetch", () => {
 
         // Assert
         await expect(result).rejects.toThrowErrorMatchingInlineSnapshot(`
-                    "No matching GraphQL mock response found for request:
+                    "No matching mock response found for request:
                         Operation: query getMyStuff
                         Variables: {
                       \\"a\\": \\"variable\\"
@@ -195,7 +198,7 @@ describe("#mockGqlFetch", () => {
             };
 
             // Act
-            mockFetch.mockOperation({operation}, RespondWith.data(data));
+            mockFetch.mockOperation({operation}, RespondWith.graphQLData(data));
             const result = mockFetch(
                 operation,
                 {a: "variable"},
@@ -218,7 +221,7 @@ describe("#mockGqlFetch", () => {
             };
 
             // Act
-            mockFetch.mockOperation({operation}, RespondWith.data(data));
+            mockFetch.mockOperation({operation}, RespondWith.graphQLData(data));
             const result = mockFetch(
                 {type: "mutation", id: "putMyStuff"},
                 {a: "variable"},
@@ -246,7 +249,7 @@ describe("#mockGqlFetch", () => {
             // Act
             mockFetch.mockOperation(
                 {operation, variables},
-                RespondWith.data(data),
+                RespondWith.graphQLData(data),
             );
             const result = mockFetch(operation, variables, {my: "context"});
 
@@ -271,7 +274,7 @@ describe("#mockGqlFetch", () => {
             // Act
             mockFetch.mockOperation(
                 {operation, variables},
-                RespondWith.data(data),
+                RespondWith.graphQLData(data),
             );
             const result = mockFetch(
                 operation,
@@ -300,7 +303,7 @@ describe("#mockGqlFetch", () => {
             // Act
             mockFetch.mockOperation(
                 {operation, context},
-                RespondWith.data(data),
+                RespondWith.graphQLData(data),
             );
             const result = mockFetch(operation, {a: "variable"}, context);
 
@@ -325,7 +328,7 @@ describe("#mockGqlFetch", () => {
             // Act
             mockFetch.mockOperation(
                 {operation, context},
-                RespondWith.data(data),
+                RespondWith.graphQLData(data),
             );
             const result = mockFetch(
                 operation,
@@ -357,7 +360,7 @@ describe("#mockGqlFetch", () => {
             // Act
             mockFetch.mockOperation(
                 {operation, variables, context},
-                RespondWith.data(data),
+                RespondWith.graphQLData(data),
             );
             const result = mockFetch(operation, variables, context);
 
@@ -385,7 +388,7 @@ describe("#mockGqlFetch", () => {
             // Act
             mockFetch.mockOperation(
                 {operation, variables, context},
-                RespondWith.data(data),
+                RespondWith.graphQLData(data),
             );
             const response = await mockFetch(operation, variables, context);
             const result = await response.text();
@@ -406,7 +409,7 @@ describe("#mockGqlFetch", () => {
             };
 
             // Act
-            mockFetch.mockOperation({operation}, RespondWith.data(data));
+            mockFetch.mockOperation({operation}, RespondWith.graphQLData(data));
             const result = Promise.all([
                 mockFetch(operation, {a: "variable"}, {my: "context"}),
                 mockFetch(operation, {b: "variable"}, {another: "context"}),
@@ -433,7 +436,10 @@ describe("#mockGqlFetch", () => {
             };
 
             // Act
-            mockFetch.mockOperationOnce({operation}, RespondWith.data(data));
+            mockFetch.mockOperationOnce(
+                {operation},
+                RespondWith.graphQLData(data),
+            );
             const result = mockFetch(
                 operation,
                 {a: "variable"},
@@ -456,7 +462,10 @@ describe("#mockGqlFetch", () => {
             };
 
             // Act
-            mockFetch.mockOperationOnce({operation}, RespondWith.data(data));
+            mockFetch.mockOperationOnce(
+                {operation},
+                RespondWith.graphQLData(data),
+            );
             const result = Promise.all([
                 mockFetch(operation, {a: "variable"}, {my: "context"}),
                 mockFetch(operation, {b: "variable"}, {another: "context"}),

package/src/gql/__tests__/wb-data-integration.test.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 
 import {GqlRouter, useGql} from "@khanacademy/wonder-blocks-data";
-import {RespondWith} from "../make-gql-mock-response.js";
+import {RespondWith} from "../../make-mock-response.js";
 import {mockGqlFetch} from "../mock-gql-fetch.js";
 
 describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
@@ -36,12 +36,12 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         // Assert
         await waitFor(() =>
             expect(result).toHaveTextContent(
-                "No matching GraphQL mock response found for request",
+                "No matching mock response found for request",
             ),
         );
     });
 
-    it("should resolve with data for RespondWith.data", async () => {
+    it("should resolve with data for RespondWith.graphQLData", async () => {
         // Arrange
         const mockFetch = mockGqlFetch();
         const query = {
@@ -64,7 +64,10 @@ describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
         };
 
         // Act
-        mockFetch.mockOperation({operation: query}, RespondWith.data(data));
+        mockFetch.mockOperation(
+            {operation: query},
+            RespondWith.graphQLData(data),
+        );
         render(
             <GqlRouter defaultContext={{}} fetch={mockFetch}>
                 <RenderData />

package/src/gql/mock-gql-fetch.js

@@ -1,89 +1,18 @@
 // @flow
-import type {GqlContext} from "@khanacademy/wonder-blocks-data";
 import {gqlRequestMatchesMock} from "./gql-request-matches-mock.js";
-import {makeGqlMockResponse} from "./make-gql-mock-response.js";
-import type {GqlMockResponse} from "./make-gql-mock-response.js";
-import type {GqlMock, GqlMockOperation, GqlFetchMockFn} from "./types.js";
+import {mockRequester} from "../mock-requester.js";
+import type {GqlFetchMockFn, GqlMockOperation} from "./types.js";
 
 /**
  * A mock for the fetch function passed to GqlRouter.
  */
-export const mockGqlFetch = (): GqlFetchMockFn => {
-    // 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<GqlMock> = [];
-
-    // 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 gqlFetchMock: GqlFetchMockFn = (
-        operation,
-        variables,
-        context,
-    ): 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 (
-                gqlRequestMatchesMock(
-                    mock.operation,
-                    operation,
-                    variables,
-                    context,
-                )
-            ) {
-                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 GraphQL mock response found for request:
-    Operation: ${operation.type} ${operation.id}
+export const mockGqlFetch = (): GqlFetchMockFn =>
+    mockRequester<GqlMockOperation<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)}`),
-        );
-    };
-
-    const addMockedOperation = <TData, TVariables: {...}, TContext: GqlContext>(
-        operation: GqlMockOperation<TData, TVariables, TContext>,
-        response: GqlMockResponse<TData>,
-        onceOnly: boolean,
-    ): GqlFetchMockFn => {
-        const mockResponse = () => makeGqlMockResponse(response);
-        mocks.push({
-            operation,
-            response: mockResponse,
-            onceOnly,
-            used: false,
-        });
-        return gqlFetchMock;
-    };
-
-    gqlFetchMock.mockOperation = <
-        TData,
-        TVariables: {...},
-        TContext: GqlContext,
-    >(
-        operation: GqlMockOperation<TData, TVariables, TContext>,
-        response: GqlMockResponse<TData>,
-    ): GqlFetchMockFn => addMockedOperation(operation, response, false);
-
-    gqlFetchMock.mockOperationOnce = <
-        TData,
-        TVariables: {...},
-        TContext: GqlContext,
-    >(
-        operation: GqlMockOperation<TData, TVariables, TContext>,
-        response: GqlMockResponse<TData>,
-    ): GqlFetchMockFn => addMockedOperation(operation, response, true);
-
-    return gqlFetchMock;
-};
+    Context: ${JSON.stringify(context, null, 2)}`,
+    );

package/src/gql/types.js

@@ -1,9 +1,10 @@
 //@flow
 import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
-import type {GqlMockResponse} from "./make-gql-mock-response.js";
+import type {OperationMock, GraphQLJson} from "../types.js";
+import type {MockResponse} from "../make-mock-response.js";
 
 export type GqlMockOperation<
-    TData,
+    TData: {...},
     TVariables: {...},
     TContext: GqlContext,
 > = {|
@@ -12,9 +13,14 @@ export type GqlMockOperation<
     context?: TContext,
 |};
 
-type GqlMockOperationFn = <TData, TVariables: {...}, TContext: GqlContext>(
+type GqlMockOperationFn = <
+    TData: {...},
+    TVariables: {...},
+    TContext: GqlContext,
+    TResponseData: GraphQLJson<TData>,
+>(
     operation: GqlMockOperation<TData, TVariables, TContext>,
-    response: GqlMockResponse<TData>,
+    response: MockResponse<TResponseData>,
 ) => GqlFetchMockFn;
 
 export type GqlFetchMockFn = {|
@@ -27,9 +33,4 @@ export type GqlFetchMockFn = {|
     mockOperationOnce: GqlMockOperationFn,
 |};
 
-export type GqlMock = {|
-    operation: GqlMockOperation<any, any, any>,
-    onceOnly: boolean,
-    used: boolean,
-    response: () => Promise<Response>,
-|};
+export type GqlMock = OperationMock<GqlMockOperation<any, any, any>>;

package/src/index.js

@@ -17,8 +17,14 @@ export type {
     FixturesOptions,
 } from "./fixtures/types.js";
 
-// GraphQL framework
+// Fetch mocking framework
+export type {MockResponse} from "./make-mock-response.js";
+export {RespondWith} from "./make-mock-response.js";
+export {mockFetch} from "./fetch/mock-fetch.js";
+export type {
+    FetchMockFn,
+    FetchMock,
+    FetchMockOperation,
+} from "./fetch/types.js";
 export {mockGqlFetch} from "./gql/mock-gql-fetch.js";
-export type {GqlMockResponse} from "./gql/make-gql-mock-response.js";
-export {RespondWith} from "./gql/make-gql-mock-response.js";
 export type {GqlFetchMockFn, GqlMock, GqlMockOperation} from "./gql/types.js";

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>;