@khanacademy/wonder-blocks-testing 0.0.2 → 1.0.0

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

@@ -0,0 +1,267 @@
+// @flow
+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 {mockGqlFetch} from "../mock-gql-fetch.js";
+
+describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {
+    it("should reject with error indicating there are no mocks", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                gqlFetch({
+                    type: "query",
+                    id: "getMyStuff",
+                }).catch((e) => {
+                    setResult(e.message);
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() =>
+            expect(result).toHaveTextContent(
+                "No matching GraphQL mock response found for request",
+            ),
+        );
+    });
+
+    it("should resolve with data for RespondWith.data", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const query = {
+            type: "query",
+            id: "getMyStuff",
+        };
+        const data = {myStuff: "stuff"};
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                // eslint-disable-next-line promise/catch-or-return
+                gqlFetch(query).then((r) => {
+                    setResult(JSON.stringify(r ?? "(null)"));
+                    return;
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        mockFetch.mockOperation({operation: query}, RespondWith.data(data));
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() =>
+            expect(result).toHaveTextContent(JSON.stringify(data)),
+        );
+    });
+
+    it("should respond with null data for RespondWith.abortedRequest", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const query = {
+            type: "query",
+            id: "getMyStuff",
+        };
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                // eslint-disable-next-line promise/catch-or-return
+                gqlFetch(query).then((r) => {
+                    setResult(JSON.stringify(r ?? "(null)"));
+                    return;
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        mockFetch.mockOperation(
+            {operation: query},
+            RespondWith.abortedRequest(),
+        );
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() => expect(result).toHaveTextContent('"(null)"'));
+    });
+
+    it("should reject with unsuccessful response error for RespondWith.errorStatusCode", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const query = {
+            type: "query",
+            id: "getMyStuff",
+        };
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                // eslint-disable-next-line promise/catch-or-return
+                gqlFetch(query).catch((e) => {
+                    setResult(e.message);
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        mockFetch.mockOperation(
+            {operation: query},
+            RespondWith.errorStatusCode(404),
+        );
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() =>
+            expect(result).toHaveTextContent("Response unsuccessful"),
+        );
+    });
+
+    it("should reject with parse error for RespondWith.unparseableBody", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const query = {
+            type: "query",
+            id: "getMyStuff",
+        };
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                // eslint-disable-next-line promise/catch-or-return
+                gqlFetch(query).catch((e) => {
+                    setResult(e.message);
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        mockFetch.mockOperation(
+            {operation: query},
+            RespondWith.unparseableBody(),
+        );
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() =>
+            expect(result).toHaveTextContent("Failed to parse response"),
+        );
+    });
+
+    it("should reject with missing response error for RespondWith.nonGraphQLBody", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const query = {
+            type: "query",
+            id: "getMyStuff",
+        };
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                // eslint-disable-next-line promise/catch-or-return
+                gqlFetch(query).catch((e) => {
+                    setResult(e.message);
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        mockFetch.mockOperation(
+            {operation: query},
+            RespondWith.nonGraphQLBody(),
+        );
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() =>
+            expect(result).toHaveTextContent("Server response missing"),
+        );
+    });
+
+    it("should reject with GraphQL error for RespondWith.graphQLErrors", async () => {
+        // Arrange
+        const mockFetch = mockGqlFetch();
+        const query = {
+            type: "query",
+            id: "getMyStuff",
+        };
+        const RenderError = () => {
+            const [result, setResult] = React.useState(null);
+            const gqlFetch = useGql();
+            React.useEffect(() => {
+                // eslint-disable-next-line promise/catch-or-return
+                gqlFetch(query).catch((e) => {
+                    setResult(e.message);
+                });
+            }, [gqlFetch]);
+
+            return <div data-test-id="result">{result}</div>;
+        };
+
+        // Act
+        mockFetch.mockOperation(
+            {operation: query},
+            RespondWith.graphQLErrors(["error 1", "error 2"]),
+        );
+        render(
+            <GqlRouter defaultContext={{}} fetch={mockFetch}>
+                <RenderError />
+            </GqlRouter>,
+        );
+        const result = screen.getByTestId("result");
+
+        // Assert
+        await waitFor(() => expect(result).toHaveTextContent("GraphQL errors"));
+    });
+});

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

@@ -0,0 +1,74 @@
+// @flow
+import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
+import type {GqlMockOperation} from "./types.js";
+
+const safeHasOwnProperty = (obj: any, prop: string): boolean =>
+    // Flow really shouldn't be raising this error here.
+    // $FlowFixMe[method-unbinding]
+    Object.prototype.hasOwnProperty.call(obj, prop);
+
+// TODO(somewhatabstract, FEI-4268): use a third-party library to do this and
+// possibly make it also support the jest `jest.objectContaining` type matching
+// to simplify mock declaration (note that it would need to work in regular
+// tests and stories/fixtures).
+const areObjectsEqual = (a: any, b: any): boolean => {
+    if (a === b) {
+        return true;
+    }
+    if (a == null || b == null) {
+        return false;
+    }
+    if (typeof a !== "object" || typeof b !== "object") {
+        return false;
+    }
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+        return false;
+    }
+    for (let i = 0; i < aKeys.length; i++) {
+        const key = aKeys[i];
+        if (!safeHasOwnProperty(b, key) || !areObjectsEqual(a[key], b[key])) {
+            return false;
+        }
+    }
+    return true;
+};
+
+export const gqlRequestMatchesMock = (
+    mock: GqlMockOperation<any, any, any, any>,
+    operation: GqlOperation<any, any, any>,
+    variables: ?{...},
+    context: GqlContext,
+): boolean => {
+    // If they don't represent the same operation, then they can't match.
+    // NOTE: Operations can include more fields than id and type, but we only
+    // care about id and type. The rest is ignored.
+    if (
+        mock.operation.id !== operation.id ||
+        mock.operation.type !== operation.type
+    ) {
+        return false;
+    }
+
+    // We do a loose match, so if the lhs doesn't define variables,
+    // we just assume it matches everything.
+    if (mock.variables != null) {
+        // Variables have to match.
+        if (!areObjectsEqual(mock.variables, variables)) {
+            return false;
+        }
+    }
+
+    // We do a loose match, so if the lhs doesn't define context,
+    // we just assume it matches everything.
+    if (mock.context != null) {
+        // Context has to match.
+        if (!areObjectsEqual(mock.context, context)) {
+            return false;
+        }
+    }
+
+    // If we get here, we have a match.
+    return true;
+};

package/src/gql/make-gql-mock-response.js

@@ -0,0 +1,124 @@
+// @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}`);
+    }
+};

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

@@ -0,0 +1,96 @@
+// @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";
+
+/**
+ * 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}
+    Variables: ${
+        variables == null ? "None" : JSON.stringify(variables, null, 2)
+    }
+    Context: ${JSON.stringify(context, null, 2)}`),
+        );
+    };
+
+    const addMockedOperation = <
+        TType,
+        TData,
+        TVariables: {...},
+        TContext: GqlContext,
+    >(
+        operation: GqlMockOperation<TType, 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 = <
+        TType,
+        TData,
+        TVariables: {...},
+        TContext: GqlContext,
+    >(
+        operation: GqlMockOperation<TType, TData, TVariables, TContext>,
+        response: GqlMockResponse<TData>,
+    ): GqlFetchMockFn => addMockedOperation(operation, response, false);
+
+    gqlFetchMock.mockOperationOnce = <
+        TType,
+        TData,
+        TVariables: {...},
+        TContext: GqlContext,
+    >(
+        operation: GqlMockOperation<TType, TData, TVariables, TContext>,
+        response: GqlMockResponse<TData>,
+    ): GqlFetchMockFn => addMockedOperation(operation, response, true);
+
+    return gqlFetchMock;
+};

package/src/gql/types.js

@@ -0,0 +1,41 @@
+//@flow
+import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
+import type {GqlMockResponse} from "./make-gql-mock-response.js";
+
+export type GqlMockOperation<
+    TType,
+    TData,
+    TVariables: {...},
+    TContext: GqlContext,
+> = {|
+    operation: GqlOperation<TType, TData, TVariables>,
+    variables?: TVariables,
+    context?: TContext,
+|};
+
+type GqlMockOperationFn = <
+    TType,
+    TData,
+    TVariables: {...},
+    TContext: GqlContext,
+>(
+    operation: GqlMockOperation<TType, TData, TVariables, TContext>,
+    response: GqlMockResponse<TData>,
+) => GqlFetchMockFn;
+
+export type GqlFetchMockFn = {|
+    (
+        operation: GqlOperation<any, any, any>,
+        variables: ?{...},
+        context: GqlContext,
+    ): Promise<Response>,
+    mockOperation: GqlMockOperationFn,
+    mockOperationOnce: GqlMockOperationFn,
+|};
+
+export type GqlMock = {|
+    operation: GqlMockOperation<any, any, any, any>,
+    onceOnly: boolean,
+    used: boolean,
+    response: () => Promise<Response>,
+|};