@khanacademy/wonder-blocks-testing 10.1.0 → 11.0.0

package/src/fetch/__tests__/__snapshots__/mock-fetch.test.ts.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`#mockFetch should reject with a useful error when there are no matching mocks for %s 1`] = `
-"No matching mock response found for request:
-    Input: http://example.com/foo
-    Options: None"
-`;
-
-exports[`#mockFetch should reject with a useful error when there are no matching mocks for %s 2`] = `
-"No matching mock response found for request:
-    Input: "http://example.com/foo"
-    Options: {
-  "method": "GET"
-}"
-`;
-
-exports[`#mockFetch should reject with a useful error when there are no matching mocks for %s 3`] = `
-"No matching mock response found for request:
-    Input: {
-  "size": 0,
-  "timeout": 0,
-  "follow": 20,
-  "compress": true,
-  "counter": 0
-}
-    Options: {
-  "method": "POST"
-}"
-`;

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

@@ -1,98 +0,0 @@
-import {Request} from "node-fetch";
-import {fetchRequestMatchesMock} from "../fetch-request-matches-mock";
-
-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",
-            },
-        } as const;
-
-        // Act
-        const underTest = () =>
-            fetchRequestMatchesMock(mock as 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"} as 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: any) => {
-            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: any) => {
-                    // Arrange
-
-                    // Act
-                    const result = fetchRequestMatchesMock(regex, input, null);
-
-                    // Assert
-                    expect(result).toBe(true);
-                },
-            );
-        },
-    );
-});

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

@@ -1,83 +0,0 @@
-import {Request} from "node-fetch";
-import {RespondWith} from "../../respond-with";
-import {mockFetch} from "../mock-fetch";
-
-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}: any) => {
-            // 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.ts

@@ -1,42 +0,0 @@
-import type {FetchMockOperation} from "./types";
-
-/**
- * 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 as any).href === "string") {
-        return (input as any).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?: RequestInit | null,
-): 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.ts

@@ -1,20 +0,0 @@
-import {fetchRequestMatchesMock} from "./fetch-request-matches-mock";
-import {mockRequester} from "../mock-requester";
-import type {FetchMockFn, FetchMockOperation} from "./types";
-
-/**
- * A mock for the fetch function passed to GqlRouter.
- */
-export const mockFetch = (): FetchMockFn =>
-    mockRequester<FetchMockOperation>(
-        fetchRequestMatchesMock,
-        // NOTE(somewhatabstract): The indentation is expected on the lines
-        // here.
-        (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.ts

@@ -1,14 +0,0 @@
-import type {MockResponse} from "../respond-with";
-
-export type FetchMockOperation = RegExp | string;
-
-type FetchMockOperationFn = (
-    operation: FetchMockOperation,
-    response: MockResponse<any>,
-) => FetchMockFn;
-
-export type FetchMockFn = {
-    (input: RequestInfo, init?: RequestInit): Promise<Response>;
-    mockOperation: FetchMockOperationFn;
-    mockOperationOnce: FetchMockOperationFn;
-};

package/src/fixtures/__tests__/fixtures.test.tsx

@@ -1,147 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import * as AddonActionsModule from "@storybook/addon-actions";
-import {fixtures} from "../fixtures";
-
-jest.mock("@storybook/addon-actions");
-
-describe("fixtures", () => {
-    beforeEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it("should create return a function", () => {
-        // Arrange
-
-        // Act
-        const result = fixtures(() => <div />);
-
-        // Assert
-        expect(result).toBeFunction();
-    });
-
-    describe("returned function", () => {
-        it("should return a story component function", () => {
-            // Arrange
-            const fixture = fixtures(() => <div />);
-
-            // Act
-            const result = fixture("My fixture", {});
-
-            // Assert
-            expect(result).toBeFunction();
-        });
-
-        it("should inject API into getProps generator", () => {
-            // Arrange
-            const fixture = fixtures(() => <div />);
-            const getPropsFn = jest.fn();
-
-            // Act
-            fixture("My fixture", getPropsFn);
-
-            // Assert
-            expect(getPropsFn).toHaveBeenCalledWith({
-                log: expect.any(Function),
-                logHandler: expect.any(Function),
-            });
-        });
-
-        it("should inject log function that logs to storybook actions", () => {
-            // Arrange
-            const fixture = fixtures(() => <div />);
-            const getPropsFn = jest.fn();
-            const actionReturnFn = jest.fn();
-            const actionSpy = jest
-                .spyOn(AddonActionsModule, "action")
-                .mockReturnValue(actionReturnFn);
-            fixture("My fixture", getPropsFn);
-            const {log: logFn} = getPropsFn.mock.calls[0][0];
-
-            // Act
-            logFn("MESSAGE", "ARG1", "ARG2");
-
-            // Assert
-            expect(actionSpy).toHaveBeenCalledWith("MESSAGE");
-            expect(actionReturnFn).toHaveBeenCalledWith("ARG1", "ARG2");
-        });
-
-        it("should inject logHandler function that logs to storybook actions", () => {
-            // Arrange
-            const fixture = fixtures(() => <div />);
-            const getPropsFn = jest.fn();
-            const actionReturnFn = jest.fn();
-            const actionSpy = jest
-                .spyOn(AddonActionsModule, "action")
-                .mockReturnValue(actionReturnFn);
-            fixture("My fixture", getPropsFn);
-            const {logHandler: logHandlerFn} = getPropsFn.mock.calls[0][0];
-
-            // Act
-            const logFn = logHandlerFn("MESSAGE");
-            logFn("ARG1", "ARG2");
-
-            // Assert
-            expect(actionSpy).toHaveBeenCalledWith("MESSAGE");
-            expect(actionReturnFn).toHaveBeenCalledWith("ARG1", "ARG2");
-        });
-
-        it("should have args attached", () => {
-            // Arrange
-            const fixture = fixtures(() => <div />);
-            const props = {
-                this: "isAProp",
-                andSo: "isThis",
-            } as const;
-
-            // Act
-            const result = fixture("A simple story", props);
-
-            // Assert
-            expect(result).toHaveProperty("args", props);
-        });
-
-        it("should have story name attached", () => {
-            // Arrange
-            const fixture = fixtures(() => <div />);
-
-            // Act
-            const result = fixture("A simple story", {});
-
-            // Assert
-            expect(result).toHaveProperty("storyName", "1 A simple story");
-        });
-
-        it("should render the component", () => {
-            // Arrange
-            const fixture = fixtures((props: any) => (
-                <>{`I rendered ${JSON.stringify(props)}`}</>
-            ));
-            const Fixture: any = fixture("A simple story", {});
-
-            // Act
-            render(<Fixture aProp="aValue" />);
-
-            // Assert
-            expect(
-                screen.getByText('I rendered {"aProp":"aValue"}'),
-            ).toBeInTheDocument();
-        });
-
-        it("should render the wrapper", () => {
-            // Arrange
-            const fixture = fixtures((props: any) => (
-                <>{`I rendered ${JSON.stringify(props)}`}</>
-            ));
-            const Fixture: any = fixture("A simple story", {}, () => (
-                <>I am a wrapper</>
-            ));
-
-            // Act
-            render(<Fixture aProp="aValue" />);
-
-            // Assert
-            expect(screen.getByText("I am a wrapper")).toBeInTheDocument();
-        });
-    });
-});

package/src/fixtures/fixtures.basic.stories.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-
-import {fixtures} from "../index";
-
-type Props = {
-    propA: string;
-    propB?: string;
-};
-
-const MyComponent = (props: Props): React.ReactElement => (
-    <>
-        {`I am a component. Here are my props: ${JSON.stringify(
-            props,
-            null,
-            2,
-        )}`}
-    </>
-);
-
-const Wrapper = (props: any) => (
-    <>
-        Wrapper &gt;&gt;&gt;
-        <MyComponent {...props} />
-        &lt;&lt;&lt; Wrapper
-    </>
-);
-
-const fixture = fixtures(MyComponent);
-
-export const F1: unknown = fixture(
-    "This is a fixture with some regular props",
-    {
-        propA: "this is a prop",
-        propB: "this is another",
-    },
-);
-
-export const F2: unknown = fixture(
-    "This is a fixture with props from functions, and a bit of logging",
-    ({log}) => {
-        log("This is a log from a fixture during props generation", {
-            and: "some data",
-        });
-        return {
-            propA: "prop was made from a function",
-        };
-    },
-);
-
-export const F3: unknown = fixture(
-    "This fixture uses a custom wrapper",
-    {
-        propA: "some props again",
-        propB: "this one",
-    },
-    Wrapper,
-);
-
-export default {
-    title: "Testing / Fixtures / Basic",
-    component: MyComponent,
-};

package/src/fixtures/fixtures.defaultwrapper.stories.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-
-import {fixtures} from "../index";
-
-type Props = Record<any, any>;
-
-const MyComponent = (props: Props): React.ReactElement => (
-    <>{`My props: ${JSON.stringify(props, null, 2)}`}</>
-);
-
-const Wrapper = (props: any) => (
-    <>
-        Wrapper &gt;&gt;&gt;
-        <MyComponent {...props} />
-        &lt;&lt;&lt; Wrapper
-    </>
-);
-
-const DefaultWrapper = (props: Props): React.ReactElement => (
-    <>
-        DefaultWrapper &gt;&gt;&gt;
-        <MyComponent {...props} />
-        &lt;&lt;&lt; DefaultWrapper
-    </>
-);
-
-const fixture = fixtures(DefaultWrapper);
-
-export const F1: unknown = fixture(
-    "This is a fixture with some regular props and the default wrapper",
-    {
-        see: "this is a prop",
-        and: "this is another",
-    },
-);
-
-export const F2: unknown = fixture(
-    "This fixture uses a custom wrapper",
-    {
-        just: "some props again",
-        like: "this one",
-    },
-    Wrapper,
-);
-
-export default {
-    title: "Testing / Fixtures / DefaultWrapper",
-    component: DefaultWrapper,
-};

package/src/fixtures/fixtures.tsx

@@ -1,72 +0,0 @@
-import * as React from "react";
-import {action} from "@storybook/addon-actions";
-
-import type {FixtureFn, FixtureProps} from "./types";
-
-/**
- * Describe a group of fixtures for a given component.
- *
- * Only one `fixtures` call should be used per fixture file as it returns
- * the exports for that file.
- *
- * @param {React.ComponentType<any>} Component The component we want to create
- * stories for.
- * @returns {FixtureFn<TProps>} A function to create a CSF compatible story.
- */
-export const fixtures = <
-    TComponent extends React.ComponentType<any>,
-    TProps extends JSX.LibraryManagedAttributes<
-        TComponent,
-        React.ComponentProps<TComponent>
-    >,
->(
-    Component: TComponent,
-): FixtureFn<TProps> => {
-    const templateMap = new WeakMap();
-    // We use this to make sure each story gets a unique name.
-    let storyNumber = 1;
-
-    const getPropsOptions = {
-        log: (message: string, ...args: Array<any>) => action(message)(...args),
-        logHandler: action,
-    } as const;
-
-    const makeStory = (
-        description: string,
-        props: FixtureProps<TProps>,
-        wrapper: React.ComponentType<TProps> | null = null,
-    ): unknown => {
-        const storyName = `${storyNumber++} ${description}`;
-        const getProps = (options: {
-            log: (message: string, ...args: Array<any>) => any;
-            logHandler: any;
-        }) => (typeof props === "function" ? props(options) : props);
-
-        const RealComponent = wrapper || Component;
-
-        // We create a “template” of how args map to rendering
-        // for each type of component as the component here could
-        // be the component under test, or wrapped in a wrapper
-        // component. We don't use decorators for the wrapper
-        // because we may not be in a storybook context and it
-        // keeps the framework API simpler this way.
-        let Template = templateMap.get(RealComponent as any);
-        if (Template == null) {
-            Template = (args: any) => <RealComponent {...args} />;
-            templateMap.set(RealComponent as any, Template);
-        }
-
-        // Each story that shares that component then reuses that
-        // template.
-        const story = Template.bind({});
-        story.args = getProps(getPropsOptions);
-        // Adding a story name here means that we don't have to
-        // care about naming the exports correctly, if we don't
-        // want (useful if we need to autogenerate or manually
-        // expose ESM exports).
-        story.storyName = storyName;
-
-        return story;
-    };
-    return makeStory;
-};

package/src/fixtures/types.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-/**
- * Options injected to the function that returns the fixture props.
- */
-export type GetPropsOptions = {
-    /**
-     * A function to call that will log output.
-     */
-    log: (message: string, ...args: Array<any>) => void;
-    /**
-     * A function to make a handler that will log all arguments with the given
-     * name or message. Useful for logging events as it avoids the boilerplate
-     * of the `log` function.
-     */
-    logHandler: (name: string) => (...args: Array<any>) => void;
-};
-
-export type FixtureProps<TProps extends object> =
-    | Readonly<TProps>
-    | ((options: Readonly<GetPropsOptions>) => Readonly<TProps>);
-
-/**
- * A function for defining a fixture.
- */
-export type FixtureFn<TProps extends object> = (
-    /**
-     * The name of the fixture.
-     */
-    description: string,
-    /**
-     * The props for the fixture or a function that returns the props.
-     * The function is injected with an API to facilitate logging.
-     */
-    props: FixtureProps<TProps>,
-    /**
-     * An alternative component to render for the fixture.
-     * Useful if the fixture requires some additional setup for testing the
-     * component.
-     */
-    wrapper?: React.ComponentType<TProps>,
-) => unknown;