@khanacademy/wonder-blocks-testing 3.0.1 → 4.0.2

package/src/fetch/__tests__/fetch-request-matches-mock.test.js

@@ -0,0 +1,99 @@
+// @flow
+import {Request} from "node-fetch";
+import {fetchRequestMatchesMock} from "../fetch-request-matches-mock.js";
+
+const TEST_URL = "http://example.com/foo?querya=1&queryb=elephants#fragment";
+
+describe("#fetchRequestMatchesMock", () => {
+    it("should throw if mock is not valid", () => {
+        // Arrange
+        const mock = {
+            operation: {
+                id: "foo",
+                type: "query",
+            },
+        };
+
+        // Act
+        const underTest = () =>
+            fetchRequestMatchesMock((mock: any), TEST_URL, null);
+
+        // Assert
+        expect(underTest).toThrowErrorMatchingInlineSnapshot(
+            `"Unsupported mock operation: {\\"operation\\":{\\"id\\":\\"foo\\",\\"type\\":\\"query\\"}}"`,
+        );
+    });
+
+    it("should throw if input is not valid", () => {
+        // Arrange
+        const mock = "http://example.com/foo";
+
+        // Act
+        const underTest = () =>
+            fetchRequestMatchesMock(
+                mock,
+                ({not: "a valid request"}: any),
+                null,
+            );
+
+        // Assert
+        expect(underTest).toThrowErrorMatchingInlineSnapshot(
+            `"Unsupported input type"`,
+        );
+    });
+
+    describe.each([TEST_URL, new URL(TEST_URL), new Request(TEST_URL)])(
+        "for valid inputs",
+        (input) => {
+            it("should return false if mock is a string and it does not match the fetched URL", () => {
+                // Arrange
+                const mock = "http://example.com/bar";
+
+                // Act
+                const result = fetchRequestMatchesMock(mock, input, null);
+
+                // Assert
+                expect(result).toBe(false);
+            });
+
+            it("should return false if the mock is a regular expression and it doesn't match the fetched URL", () => {
+                // Arrange
+                const mock = /\/bar/;
+
+                // Act
+                const result = fetchRequestMatchesMock(mock, input, null);
+
+                // Assert
+                expect(result).toBe(false);
+            });
+
+            it("should return true if the mock is a string and matches the fetched URL", () => {
+                // Arrange
+                const mock = TEST_URL;
+
+                // Act
+                const result = fetchRequestMatchesMock(mock, input, null);
+
+                // Assert
+                expect(result).toBe(true);
+            });
+
+            it.each([
+                /http:\/\/example.com\/foo/,
+                /queryb=elephants/,
+                /^.*#fragment$/,
+            ])(
+                "should return true if the mock is a %s and matches the fetched URL",
+                (regex) => {
+                    // Arrange
+
+                    // Act
+                    const result = fetchRequestMatchesMock(regex, input, null);
+
+                    // Assert
+                    expect(result).toBe(true);
+                },
+            );
+        },
+    );
+});

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

@@ -0,0 +1,84 @@
+// @flow
+import {Request} from "node-fetch";
+import {RespondWith} from "../../make-mock-response.js";
+import {mockFetch} from "../mock-fetch.js";
+
+describe("#mockFetch", () => {
+    it.each`
+        input                                    | init
+        ${"http://example.com/foo"}              | ${undefined}
+        ${new URL("http://example.com/foo")}     | ${{method: "GET"}}
+        ${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}) => {
+            // Arrange
+            const mockFn = mockFetch();
+
+            // Act
+            const result = mockFn(input, init);
+
+            // Assert
+            await expect(result).rejects.toThrowErrorMatchingSnapshot();
+        },
+    );
+
+    describe("mockOperation", () => {
+        it("should match a similar operation", async () => {
+            // Arrange
+            const mockFn = mockFetch();
+            const operation = "http://example.com/foo";
+
+            // Act
+            mockFn.mockOperation(operation, RespondWith.text("TADA!"));
+            const result = mockFn(operation, {method: "GET"});
+
+            // Assert
+            await expect(result).resolves.toBeDefined();
+        });
+
+        it("should not match a different operation", async () => {
+            // Arrange
+            const mockFn = mockFetch();
+            const operation = "http://example.com/foo";
+
+            // Act
+            mockFn.mockOperation(operation, RespondWith.text("TADA!"));
+            const result = mockFn("http://example.com/bar", {method: "GET"});
+
+            // Assert
+            await expect(result).rejects.toThrowError();
+        });
+    });
+
+    describe("mockOperationOnce", () => {
+        it("should match once", async () => {
+            // Arrange
+            const mockFn = mockFetch();
+            const operation = "http://example.com/foo";
+
+            // Act
+            mockFn.mockOperationOnce(operation, RespondWith.text("TADA!"));
+            const result = mockFn(operation, {method: "GET"});
+
+            // Assert
+            await expect(result).resolves.toBeDefined();
+        });
+
+        it("should only match once", async () => {
+            // Arrange
+            const mockFn = mockFetch();
+            const operation = "http://example.com/foo";
+
+            // Act
+            mockFn.mockOperationOnce(operation, RespondWith.text("TADA!"));
+            const result = Promise.all([
+                mockFn(operation, {method: "GET"}),
+                mockFn(operation, {method: "POST"}),
+            ]);
+
+            // Assert
+            await expect(result).rejects.toThrowError();
+        });
+    });
+});

package/src/fetch/fetch-request-matches-mock.js

@@ -0,0 +1,43 @@
+// @flow
+import type {FetchMockOperation} from "./types.js";
+
+/**
+ * Get the URL from the given RequestInfo.
+ *
+ * Since we could be running in Node or in JSDOM, we don't check instance
+ * types, but just use a heuristic so that this works without knowing what
+ * was polyfilling things.
+ */
+const getHref = (input: RequestInfo): string => {
+    if (typeof input === "string") {
+        return input;
+    } else if (typeof input.url === "string") {
+        return input.url;
+    } else if (typeof input.href === "string") {
+        return input.href;
+    } else {
+        throw new Error(`Unsupported input type`);
+    }
+};
+
+/**
+ * Determines if a given fetch invocation matches the given mock.
+ */
+export const fetchRequestMatchesMock = (
+    mock: FetchMockOperation,
+    input: RequestInfo,
+    init: ?RequestOptions,
+): boolean => {
+    // Currently, we only match on the input portion.
+    // This can be a Request, a URL, or a string.
+    const href = getHref(input);
+
+    // Our mock operation is either a string for an exact match, or a regex.
+    if (typeof mock === "string") {
+        return href === mock;
+    } else if (mock instanceof RegExp) {
+        return mock.test(href);
+    } else {
+        throw new Error(`Unsupported mock operation: ${JSON.stringify(mock)}`);
+    }
+};

package/src/fetch/mock-fetch.js

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

package/src/fetch/types.js

@@ -0,0 +1,18 @@
+//@flow
+import type {OperationMock} from "../types.js";
+import type {MockResponse} from "../make-mock-response.js";
+
+export type FetchMockOperation = RegExp | string;
+
+type FetchMockOperationFn = (
+    operation: FetchMockOperation,
+    response: MockResponse<any>,
+) => FetchMockFn;
+
+export type FetchMockFn = {|
+    (input: RequestInfo, init?: RequestOptions): Promise<Response>,
+    mockOperation: FetchMockOperationFn,
+    mockOperationOnce: FetchMockOperationFn,
+|};
+
+export type FetchMock = OperationMock<FetchMockOperation>;

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