@khanacademy/wonder-blocks-testing 12.0.0 → 13.0.0

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

@@ -1,269 +0,0 @@
-import * as React from "react";
-import {render, screen, waitFor} from "@testing-library/react";
-
-import {GqlRouter, useGql} from "@khanacademy/wonder-blocks-data";
-import {RespondWith} from "@khanacademy/wonder-blocks-testing-core";
-import {mockGqlFetch} from "../mock-gql-fetch";
-
-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<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                gqlFetch({
-                    type: "query",
-                    id: "getMyStuff",
-                }).catch((e: any) => {
-                    setResult(e.message);
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="result">{result}</div>;
-        };
-
-        // Act
-        render(
-            <GqlRouter defaultContext={{}} fetch={mockFetch}>
-                <RenderError />
-            </GqlRouter>,
-        );
-        const result = screen.getByTestId("result");
-
-        // Assert
-        await waitFor(() =>
-            expect(result).toHaveTextContent(
-                "No matching mock response found for request",
-            ),
-        );
-    });
-
-    it("should resolve with data for RespondWith.graphQLData", async () => {
-        // Arrange
-        const mockFetch = mockGqlFetch();
-        const query = {
-            type: "query",
-            id: "getMyStuff",
-        } as const;
-        const data = {myStuff: "stuff"} as const;
-        const RenderData = () => {
-            const [result, setResult] = React.useState<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).then((r: any) => {
-                    setResult(JSON.stringify(r ?? "(null)"));
-                    return;
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="result">{result}</div>;
-        };
-
-        // Act
-        mockFetch.mockOperation(
-            {operation: query},
-            RespondWith.graphQLData(data),
-        );
-        render(
-            <GqlRouter defaultContext={{}} fetch={mockFetch}>
-                <RenderData />
-            </GqlRouter>,
-        );
-        const result = screen.getByTestId("result");
-
-        // Assert
-        await waitFor(() =>
-            expect(result).toHaveTextContent(JSON.stringify(data)),
-        );
-    });
-
-    it("should reject with AbortError for RespondWith.abortedRequest", async () => {
-        // Arrange
-        const mockFetch = mockGqlFetch();
-        const query = {
-            type: "query",
-            id: "getMyStuff",
-        } as const;
-        const RenderError = () => {
-            const [result, setResult] = React.useState<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e: any) => {
-                    setResult(e.message);
-                    return;
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="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("aborted"));
-    });
-
-    it("should reject with unsuccessful response error for RespondWith.errorStatusCode", async () => {
-        // Arrange
-        const mockFetch = mockGqlFetch();
-        const query = {
-            type: "query",
-            id: "getMyStuff",
-        } as const;
-        const RenderError = () => {
-            const [result, setResult] = React.useState<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e: any) => {
-                    setResult(e.message);
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="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",
-        } as const;
-        const RenderError = () => {
-            const [result, setResult] = React.useState<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e: any) => {
-                    setResult(e.message);
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="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",
-        } as const;
-        const RenderError = () => {
-            const [result, setResult] = React.useState<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e: any) => {
-                    setResult(e.message);
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="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",
-        } as const;
-        const RenderError = () => {
-            const [result, setResult] = React.useState<any>(null);
-            const gqlFetch = useGql();
-            React.useEffect(() => {
-                // eslint-disable-next-line promise/catch-or-return
-                gqlFetch(query).catch((e: any) => {
-                    setResult(e.message);
-                });
-            }, [gqlFetch]);
-
-            return <div data-testid="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.ts

@@ -1,71 +0,0 @@
-import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
-import type {GqlMockOperation} from "./types";
-
-const safeHasOwnProperty = (obj: any, prop: string): boolean =>
-    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>,
-    operation: GqlOperation<any, any>,
-    variables: Record<any, any> | null | undefined,
-    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/mock-gql-fetch.ts

@@ -1,20 +0,0 @@
-import {mockRequester} from "@khanacademy/wonder-blocks-testing-core";
-import {gqlRequestMatchesMock} from "./gql-request-matches-mock";
-import type {GqlFetchMockFn, GqlMockOperation} from "./types";
-
-/**
- * A mock for the fetch function passed to GqlRouter.
- */
-export const mockGqlFetch = (): GqlFetchMockFn =>
-    mockRequester<GqlMockOperation<any, any, any>>(
-        gqlRequestMatchesMock,
-        // Note that the identation at the start of each line is important.
-        // TODO(somewhatabstract): Make a stringify that indents each line of
-        // the output properly too.
-        (operation, variables, context) =>
-            `Operation: ${operation.type} ${operation.id}
-    Variables: ${
-        variables == null ? "None" : JSON.stringify(variables, null, 2)
-    }
-    Context: ${JSON.stringify(context, null, 2)}`,
-    );

package/src/gql/types.ts

@@ -1,35 +0,0 @@
-import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
-import type {
-    GraphQLJson,
-    MockResponse,
-} from "@khanacademy/wonder-blocks-testing-core";
-
-export type GqlMockOperation<
-    TData extends Record<any, any>,
-    TVariables extends Record<any, any>,
-    TContext extends GqlContext,
-> = {
-    operation: GqlOperation<TData, TVariables>;
-    variables?: TVariables;
-    context?: TContext;
-};
-
-type GqlMockOperationFn = <
-    TData extends Record<any, any>,
-    TVariables extends Record<any, any>,
-    TContext extends GqlContext,
-    TResponseData extends GraphQLJson<TData>,
->(
-    operation: GqlMockOperation<TData, TVariables, TContext>,
-    response: MockResponse<TResponseData>,
-) => GqlFetchMockFn;
-
-export type GqlFetchMockFn = {
-    (
-        operation: GqlOperation<any, any>,
-        variables: Record<any, any> | null | undefined,
-        context: GqlContext,
-    ): Promise<Response>;
-    mockOperation: GqlMockOperationFn;
-    mockOperationOnce: GqlMockOperationFn;
-};

package/src/harness/adapters/__tests__/__snapshots__/render-state.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SSR.adapter should throw on bad configuration ({"thisConfig": "isNotValid"}) 1`] = `"Unexpected configuration: set config to null to turn this adapter off"`;
-
-exports[`SSR.adapter should throw on bad configuration (false) 1`] = `"Unexpected configuration: set config to null to turn this adapter off"`;
-
-exports[`SSR.adapter should throw on bad configuration (string) 1`] = `"Unexpected configuration: set config to null to turn this adapter off"`;

package/src/harness/adapters/__tests__/data.test.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-import {render, screen, waitFor} from "@testing-library/react";
-import {useCachedEffect} from "@khanacademy/wonder-blocks-data";
-import * as Data from "../data";
-
-describe("WonderBlocksData.adapter", () => {
-    it("should render children when configuration arrays are empty", () => {
-        // Arrange
-        const children = <div>CONTENT</div>;
-
-        // Act
-        render(Data.adapter(children, []));
-
-        // Assert
-        expect(screen.getByText("CONTENT")).toBeInTheDocument();
-    });
-
-    it("should support request interception via configured dataIntercepts", async () => {
-        // Arrange
-
-        const TestFixture = () => {
-            const [result] = useCachedEffect("ID", jest.fn());
-
-            return (
-                <div>
-                    CONTENT:{" "}
-                    {result.status === "success" ? result.data : undefined}
-                </div>
-            );
-        };
-
-        // Act
-        const {container} = render(
-            Data.adapter(<TestFixture />, () =>
-                Promise.resolve("INTERCEPTED!" as any),
-            ),
-        );
-
-        // Assert
-        await waitFor(() => expect(container).toContainHTML("INTERCEPTED!"));
-    });
-
-    it("should render like we expect", () => {
-        // Snapshot test is handy to visualize what's going on and help debug
-        // test failures of the other cases. The other cases assert specifics.
-        // Arrange
-        const TestFixture = () => {
-            const [result] = useCachedEffect("ID", jest.fn());
-
-            return (
-                <div>
-                    CONTENT:
-                    {result.status === "success" ? result.data : undefined}
-                </div>
-            );
-        };
-
-        // Act
-        const {container} = render(
-            Data.adapter(<TestFixture />, () =>
-                Promise.resolve("INTERCEPTED!" as any),
-            ),
-        );
-
-        // Assert
-        expect(container).toMatchInlineSnapshot(`
-            <div>
-              <div>
-                CONTENT:
-                INTERCEPTED!
-              </div>
-            </div>
-        `);
-    });
-});

package/src/harness/adapters/__tests__/render-state.test.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import * as WBCore from "@khanacademy/wonder-blocks-core";
-import {makeTestHarness} from "@khanacademy/wonder-blocks-testing-core";
-
-import * as RenderState from "../render-state";
-
-jest.mock("@khanacademy/wonder-stuff-core", () => {
-    const actualCore = jest.requireActual("@khanacademy/wonder-stuff-core");
-    return {
-        ...actualCore,
-        RenderStateRoot: (props: any) => (
-            <actualCore.RenderStateRoot {...props} />
-        ),
-    };
-});
-
-describe("SSR.adapter", () => {
-    it("should render the RenderStateRoot with throwIfNested set to false", () => {
-        // Arrange
-        const children = <div>CHILDREN!</div>;
-        const renderStateRootSpy = jest.spyOn(WBCore, "RenderStateRoot");
-
-        // Act
-        render(RenderState.adapter(children, true));
-
-        // Assert
-        expect(renderStateRootSpy).toHaveBeenCalledWith(
-            {
-                children,
-                throwIfNested: false,
-            },
-            {},
-        );
-    });
-
-    it("should render the children correctly", () => {
-        // Arrange
-        const children = <div>CHILDREN!</div>;
-
-        // Act
-        render(RenderState.adapter(children, true));
-
-        // Assert
-        expect(screen.getByText("CHILDREN!")).toBeInTheDocument();
-    });
-
-    it("should enable harnessing of components that require RenderStateRoot", () => {
-        // Arrange
-        const ComponentNeedsSsr = (props: any) => {
-            const idf = WBCore.useUniqueIdWithoutMock();
-            return <div>{idf?.get("my-id")}</div>;
-        };
-        const testHarness = makeTestHarness(
-            {
-                renderState: RenderState.adapter,
-            },
-            {
-                renderState: true,
-            },
-        );
-        const Harnessed = testHarness(ComponentNeedsSsr);
-
-        // Act
-        const underTest = () => render(<Harnessed />);
-
-        // Assert
-        expect(underTest).not.toThrowError();
-    });
-
-    it.each`
-        config
-        ${false}
-        ${"string"}
-        ${{thisConfig: "isNotValid"}}
-    `("should throw on bad configuration ($config)", ({config}) => {
-        // Arrange
-        const children = <div>CHILDREN!</div>;
-
-        // Act
-        const underTest = () => render(RenderState.adapter(children, config));
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingSnapshot();
-    });
-});

package/src/harness/adapters/data.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import {InterceptRequests} from "@khanacademy/wonder-blocks-data";
-import type {TestHarnessAdapter} from "@khanacademy/wonder-blocks-testing-core";
-
-type Interceptor = JSX.LibraryManagedAttributes<
-    typeof InterceptRequests,
-    React.ComponentProps<typeof InterceptRequests>
->["interceptor"];
-
-type Config = Interceptor | Array<Interceptor>;
-
-/**
- * Default configuration for the Wonder Blocks Data adapter.
- */
-export const defaultConfig = [] as Array<Interceptor>;
-
-/**
- * Test harness adapter to mock Wonder Blocks Data usage.
- *
- * NOTE: Consumers are responsible for properly defining their intercepts.
- * This component does not validate the configuration to ensure interceptors
- * are not overriding one another.
- */
-export const adapter: TestHarnessAdapter<Config> = (
-    children: React.ReactNode,
-    config: Config,
-): React.ReactElement<any> => {
-    // First we render the cache intercepts.
-    let currentChildren = children;
-
-    const interceptors = Array.isArray(config) ? config : [config];
-
-    // Then we render the data intercepts.
-    for (const interceptor of interceptors) {
-        currentChildren = (
-            <InterceptRequests interceptor={interceptor}>
-                {currentChildren}
-            </InterceptRequests>
-        );
-    }
-
-    /**
-     * `currentChildren` is a `React.Node` but we need it to be a
-     * `React.Element<>`. Return it rendered in a fragment allows us to do
-     * that.
-     */
-    return <>{currentChildren}</>;
-};

package/src/harness/adapters/index.ts

@@ -1,34 +0,0 @@
-import {harnessAdapters} from "@khanacademy/wonder-blocks-testing-core";
-import type {TestHarnessConfigs} from "@khanacademy/wonder-blocks-testing-core";
-import * as data from "./data";
-import * as renderState from "./render-state";
-
-/**
- * NOTE: We do not type `DefaultAdapters` with `Adapters` here because we want
- * the individual config types of each adapter to remain intact rather than
- * getting changed to `any`.
- */
-
-/**
- * The default adapters provided by Wonder Blocks.
- */
-export const DefaultAdapters = {
-    // The error boundary is as close to the component under test as possible,
-    // so that other adapters don't soil it with their own errors, if that
-    // should happen.
-    boundary: harnessAdapters.DefaultAdapters.boundary,
-    css: harnessAdapters.DefaultAdapters.css,
-    data: data.adapter,
-    portal: harnessAdapters.DefaultAdapters.portal,
-    router: harnessAdapters.DefaultAdapters.router,
-    renderState: renderState.adapter,
-} as const;
-
-/**
- * The default configurations to use with the `DefaultAdapters`.
- */
-export const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters> = {
-    ...harnessAdapters.DefaultConfigs,
-    data: data.defaultConfig,
-    renderState: renderState.defaultConfig,
-} as const;

package/src/harness/adapters/render-state.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-import {KindError, Errors} from "@khanacademy/wonder-stuff-core";
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-
-import type {TestHarnessAdapter} from "@khanacademy/wonder-blocks-testing-core";
-
-//
-type Config = true;
-
-// The default configuration is off since this will likely cause state changes
-// and add Testing Library act/waitFor calls in tests using the harness when
-// its enabled.
-export const defaultConfig: Config | null = null;
-
-/**
- * Test harness adapter for supporting render state-based hooks and components.
- *
- * Some components and hooks utilize the render state context to manage what
- * they render and when. In order for this to work, a `RenderStateRoot`
- * component must be present to track the current render state.
- *
- * This adapter wraps the children in a `RenderStateRoot` component to enable
- * the render state context. This adapter should be used when testing components
- * that rely on the render state.
- */
-export const adapter: TestHarnessAdapter<Config> = (
-    children: React.ReactNode,
-    config: Config,
-): React.ReactElement<any> => {
-    if (config !== true) {
-        throw new KindError(
-            "Unexpected configuration: set config to null to turn this adapter off",
-            Errors.InvalidInput,
-            {
-                metadata: {config},
-            },
-        );
-    }
-    // We never want to throw if the test harness is nested.
-    return <RenderStateRoot throwIfNested={false}>{children}</RenderStateRoot>;
-};