@khanacademy/wonder-blocks-testing 4.0.2 → 5.0.0

package/src/fixtures/adapters/adapter-group.js

@@ -1,25 +1,25 @@
 // @flow
 import type {
-    AdapterGroup as AdapterGroupInterface,
-    AdapterGroupOptions,
-    AdapterFixtureOptions,
+    FixturesAdapterGroup,
+    FixturesAdapterGroupOptions,
+    FixturesAdapterFixtureOptions,
 } from "../types.js";
 
 export type CloseGroupFn<TProps: {...}, Options: {...}, Exports: {...}> = (
-    options: $ReadOnly<AdapterGroupOptions>,
+    options: $ReadOnly<FixturesAdapterGroupOptions>,
     adapterOptions: ?$ReadOnly<Options>,
-    declaredFixtures: $ReadOnlyArray<AdapterFixtureOptions<TProps>>,
+    declaredFixtures: $ReadOnlyArray<FixturesAdapterFixtureOptions<TProps>>,
 ) => ?$ReadOnly<Exports>;
 
 /**
  * Simple adapter group implementation.
  */
 export class AdapterGroup<TProps: {...}, Options: {...}, Exports: {...}>
-    implements AdapterGroupInterface<TProps, Options, Exports>
+    implements FixturesAdapterGroup<TProps, Options, Exports>
 {
     _closeGroupFn: ?CloseGroupFn<TProps, Options, Exports>;
-    +_fixtures: Array<AdapterFixtureOptions<TProps>>;
-    +_options: $ReadOnly<AdapterGroupOptions>;
+    +_fixtures: Array<FixturesAdapterFixtureOptions<TProps>>;
+    +_options: $ReadOnly<FixturesAdapterGroupOptions>;
 
     /**
      * Create an adapter group.
@@ -30,7 +30,7 @@ export class AdapterGroup<TProps: {...}, Options: {...}, Exports: {...}>
      */
     constructor(
         closeGroupFn: CloseGroupFn<TProps, Options, Exports>,
-        options: $ReadOnly<AdapterGroupOptions>,
+        options: $ReadOnly<FixturesAdapterGroupOptions>,
     ) {
         if (typeof closeGroupFn !== "function") {
             throw new TypeError("closeGroupFn must be a function");
@@ -71,11 +71,11 @@ export class AdapterGroup<TProps: {...}, Options: {...}, Exports: {...}>
     /**
      * Declare a fixture within the group.
      *
-     * @param {AdapterFixtureOptions<Config>} fixtureOptions The options
+     * @param {FixturesAdapterFixtureOptions<TProps>} fixtureOptions The options
      * describing the fixture.
      */
     +declareFixture: (
-        options: $ReadOnly<AdapterFixtureOptions<TProps>>,
+        options: $ReadOnly<FixturesAdapterFixtureOptions<TProps>>,
     ) => void = (options) => {
         if (typeof options !== "object" || options === null) {
             throw new TypeError("options must be an object");

package/src/fixtures/adapters/adapter.js

@@ -1,16 +1,16 @@
 // @flow
 import {AdapterGroup, type CloseGroupFn} from "./adapter-group.js";
 import type {
-    Adapter as AdapterInterface,
-    AdapterGroup as AdapterGroupInterface,
-    AdapterGroupOptions,
+    FixturesAdapter,
+    FixturesAdapterGroup,
+    FixturesAdapterGroupOptions,
 } from "../types.js";
 
 /**
  * Class for implementing a custom adapter.
  */
 export class Adapter<Options: {...}, Exports: {...}>
-    implements AdapterInterface<Options, Exports>
+    implements FixturesAdapter<Options, Exports>
 {
     +_name: string;
     +_closeGroupFn: CloseGroupFn<any, Options, Exports>;
@@ -51,13 +51,13 @@ export class Adapter<Options: {...}, Exports: {...}>
     /**
      * Declare a new fixture group.
      *
-     * @param {AdapterGroupOptions} options The options describing the fixture
+     * @param {FixturesAdapterGroupOptions} options The options describing the fixture
      * group.
-     * @returns {AdapterGroupInterface} The new fixture group.
+     * @returns {FixturesAdapterGroup} The new fixture group.
      */
     declareGroup<Config: {...}>(
-        options: $ReadOnly<AdapterGroupOptions>,
-    ): AdapterGroupInterface<Config, Options, Exports> {
+        options: $ReadOnly<FixturesAdapterGroupOptions>,
+    ): FixturesAdapterGroup<Config, Options, Exports> {
         return new AdapterGroup(this._closeGroupFn, options);
     }
 }

package/src/fixtures/adapters/storybook.js

@@ -4,9 +4,9 @@ import {action} from "@storybook/addon-actions";
 import {Adapter} from "./adapter.js";
 
 import type {
-    AdapterGroupOptions,
-    AdapterFixtureOptions,
-    AdapterFactory,
+    FixturesAdapterGroupOptions,
+    FixturesAdapterFixtureOptions,
+    FixturesAdapterFactory,
 } from "../types.js";
 
 type StoryContext = {|
@@ -38,9 +38,10 @@ type Exports<TProps: {...}> = {|
 /**
  * Get a fixture framework adapter for Storybook support.
  */
-export const getAdapter: AdapterFactory<StorybookOptions, Exports<any>> = (
-    MountingComponent = null,
-) =>
+export const getAdapter: FixturesAdapterFactory<
+    StorybookOptions,
+    Exports<any>,
+> = (MountingComponent = null) =>
     new Adapter<StorybookOptions, Exports<any>>(
         "storybook",
         <TProps: {...}>(
@@ -50,9 +51,11 @@ export const getAdapter: AdapterFactory<StorybookOptions, Exports<any>> = (
                 // We don't use the default title in Storybook as storybook
                 // will generate titles for us if we pass a nullish title.
                 getDefaultTitle: _,
-            }: $ReadOnly<AdapterGroupOptions>,
+            }: $ReadOnly<FixturesAdapterGroupOptions>,
             adapterOptions: ?$ReadOnly<StorybookOptions>,
-            declaredFixtures: $ReadOnlyArray<AdapterFixtureOptions<TProps>>,
+            declaredFixtures: $ReadOnlyArray<
+                FixturesAdapterFixtureOptions<TProps>,
+            >,
         ): ?$ReadOnly<Exports<TProps>> => {
             const templateMap = new WeakMap();
 

package/src/fixtures/fixtures.basic.stories.js

@@ -1,7 +1,11 @@
 // @flow
 import * as React from "react";
 
-import {setupFixtures, fixtures, adapters} from "../index.js";
+import {
+    setupFixtures,
+    fixtures,
+    fixtureAdapters as adapters,
+} from "../index.js";
 
 // Normally would call setup from the storybook.preview.js for a project.
 setupFixtures({
@@ -23,7 +27,7 @@ const stories: Array<mixed> = Object.values(
     fixtures(
         {
             component: MyComponent,
-            title: "Testing/Fixtures/Basic",
+            title: "Testing / Fixtures / Basic",
         },
         (fixture) => {
             fixture("This is a fixture with some regular props", {

package/src/fixtures/fixtures.defaultwrapper.stories.js

@@ -1,7 +1,11 @@
 // @flow
 import * as React from "react";
 
-import {setupFixtures, fixtures, adapters} from "../index.js";
+import {
+    setupFixtures,
+    fixtures,
+    fixtureAdapters as adapters,
+} from "../index.js";
 
 // Normally would call setup from the storybook.preview.js for a project.
 setupFixtures({
@@ -30,7 +34,7 @@ const stories: Array<mixed> = Object.values(
     fixtures(
         {
             component: MyComponent,
-            title: "Testing/Fixtures/DefaultWrapper",
+            title: "Testing / Fixtures / DefaultWrapper",
             defaultWrapper: DefaultWrapper,
         },
         (fixture) => {

package/src/fixtures/setup.js

@@ -1,13 +1,15 @@
 // @flow
-import type {Configuration} from "./types.js";
+import type {FixturesConfiguration} from "./types.js";
 
-let _configuration: ?$ReadOnly<Configuration<any, any>> = null;
+let _configuration: ?$ReadOnly<FixturesConfiguration<any, any>> = null;
 
 /**
  * Setup the fixture framework.
  */
 export const setup = <TAdapterOptions: {...}, TAdapterExports: {...}>(
-    configuration: $ReadOnly<Configuration<TAdapterOptions, TAdapterExports>>,
+    configuration: $ReadOnly<
+        FixturesConfiguration<TAdapterOptions, TAdapterExports>,
+    >,
 ) => {
     _configuration = configuration;
 };
@@ -18,7 +20,9 @@ export const setup = <TAdapterOptions: {...}, TAdapterExports: {...}>(
  * @returns {Configuration} The configuration as provided via setup().
  * @throws {Error} If the configuration has not been set.
  */
-export const getConfiguration = (): $ReadOnly<Configuration<any, any>> => {
+export const getConfiguration = (): $ReadOnly<
+    FixturesConfiguration<any, any>,
+> => {
     if (_configuration == null) {
         throw new Error("Not configured");
     }

package/src/fixtures/types.js

@@ -15,7 +15,7 @@ export type GetPropsOptions = {|
 /**
  * Adapter options keyed by the adapter name.
  */
-export type AdapterOptions = {|
+export type FixturesAdapterOptions = {|
     storybook?: StorybookOptions,
     [adapterName: string]: {...},
 |};
@@ -49,13 +49,13 @@ export type FixturesOptions<TProps: {...}> = {|
     /**
      * Additional options to apply to specific adapters.
      */
-    additionalAdapterOptions?: AdapterOptions,
+    additionalAdapterOptions?: FixturesAdapterOptions,
 |};
 
 /**
  * Describes a single fixture.
  */
-export type AdapterFixtureOptions<TProps: {...}> = {|
+export type FixturesAdapterFixtureOptions<TProps: {...}> = {|
     /**
      * Description of the fixture.
      */
@@ -78,7 +78,7 @@ export type AdapterFixtureOptions<TProps: {...}> = {|
 /**
  * Describes a group of fixtures.
  */
-export type AdapterGroupOptions = {|
+export type FixturesAdapterGroupOptions = {|
     /**
      * The title of the group.
      *
@@ -100,9 +100,9 @@ export type AdapterGroupOptions = {|
 |};
 
 /**
- * Describes the props that an adapter will inject for custom wrappers.
+ * Describes props that an adapter will inject for custom mounting components.
  */
-export type CustomWrapperProps<TProps: {...}> = {|
+export type CustomMountProps<TProps: {...}> = {|
     /**
      * The fixture props for the component to be rendered.
      */
@@ -122,7 +122,7 @@ export type CustomWrapperProps<TProps: {...}> = {|
 /**
  * Declares the API for describing a fixture group provided by an adapter.
  */
-export interface AdapterGroup<
+export interface FixturesAdapterGroup<
     TProps: {...},
     TAdapterOptions: {...},
     TAdapterExports: {...},
@@ -130,7 +130,9 @@ export interface AdapterGroup<
     /**
      * Declare a fixture.
      */
-    declareFixture(options: $ReadOnly<AdapterFixtureOptions<TProps>>): void;
+    declareFixture(
+        options: $ReadOnly<FixturesAdapterFixtureOptions<TProps>>,
+    ): void;
 
     /**
      * Close the group and obtain the exports, if the adapter requires any.
@@ -150,7 +152,10 @@ export interface AdapterGroup<
 /**
  * Declares the API for an adapter.
  */
-export interface Adapter<TAdapterOptions: {...}, TAdapterExports: {...}> {
+export interface FixturesAdapter<
+    TAdapterOptions: {...},
+    TAdapterExports: {...},
+> {
     /**
      * The name of the adapter.
      */
@@ -163,18 +168,21 @@ export interface Adapter<TAdapterOptions: {...}, TAdapterExports: {...}> {
      * declared group.
      */
     declareGroup<TProps: {...}>(
-        options: $ReadOnly<AdapterGroupOptions>,
-    ): AdapterGroup<TProps, TAdapterOptions, TAdapterExports>;
+        options: $ReadOnly<FixturesAdapterGroupOptions>,
+    ): FixturesAdapterGroup<TProps, TAdapterOptions, TAdapterExports>;
 }
 
 /**
  * Describes the configuration for the fixture framework.
  */
-export type Configuration<TAdapterOptions: {...}, TAdapterExports: {...}> = {|
+export type FixturesConfiguration<
+    TAdapterOptions: {...},
+    TAdapterExports: {...},
+> = {|
     /**
      * The adapter to use for declaring fixtures.
      */
-    +adapter: Adapter<TAdapterOptions, TAdapterExports>,
+    +adapter: FixturesAdapter<TAdapterOptions, TAdapterExports>,
 
     /**
      * Default options to apply to every fixture group.
@@ -186,6 +194,9 @@ export type Configuration<TAdapterOptions: {...}, TAdapterExports: {...}> = {|
     +defaultAdapterOptions?: $ReadOnly<Partial<TAdapterOptions>>,
 |};
 
-export type AdapterFactory<TAdapterOptions: {...}, TAdapterExports: {...}> = (
-    MountingComponent: ?React.ComponentType<CustomWrapperProps<any>>,
-) => Adapter<TAdapterOptions, TAdapterExports>;
+export type FixturesAdapterFactory<
+    TAdapterOptions: {...},
+    TAdapterExports: {...},
+> = (
+    MountingComponent: ?React.ComponentType<CustomMountProps<any>>,
+) => FixturesAdapter<TAdapterOptions, TAdapterExports>;

package/src/gql/types.js

@@ -1,6 +1,6 @@
 //@flow
 import type {GqlOperation, GqlContext} from "@khanacademy/wonder-blocks-data";
-import type {OperationMock, GraphQLJson} from "../types.js";
+import type {GraphQLJson} from "../types.js";
 import type {MockResponse} from "../make-mock-response.js";
 
 export type GqlMockOperation<
@@ -32,5 +32,3 @@ export type GqlFetchMockFn = {|
     mockOperation: GqlMockOperationFn,
     mockOperationOnce: GqlMockOperationFn,
 |};
-
-export type GqlMock = OperationMock<GqlMockOperation<any, any, any>>;

package/src/harness/__tests__/hook-harness.test.js

@@ -0,0 +1,72 @@
+// @flow
+import {jest as ws} from "@khanacademy/wonder-stuff-testing";
+import * as MHH from "../make-hook-harness.js";
+import {DefaultAdapters, DefaultConfigs} from "../adapters/adapters.js";
+
+jest.mock("../make-hook-harness.js", () => {
+    const returnValueFake = {
+        thisisa: "PRETEND REACT COMPONENT",
+    };
+    const harnessFake = jest.fn().mockReturnValue(returnValueFake);
+    return {
+        harnessFake,
+        returnValueFake,
+        makeHookHarness: jest.fn().mockReturnValue(harnessFake),
+    };
+});
+
+describe("#hookHarness", () => {
+    it("should be created by calling makeHookHarness with the DefaultAdapters and DefaultConfigs", async () => {
+        // Arrange
+        const makeHookHarnessSpy = jest.spyOn(MHH, "makeHookHarness");
+
+        // Act
+        await ws.isolateModules(() => import("../hook-harness.js"));
+
+        // Assert
+        expect(makeHookHarnessSpy).toHaveBeenCalledWith(
+            DefaultAdapters,
+            DefaultConfigs,
+        );
+    });
+
+    it("should invoke the function made by makeHookHarness", async () => {
+        // Arrange
+        const config = {
+            router: "/boo",
+        };
+        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        const [{harnessFake}, {hookHarness}] = await ws.isolateModules(() =>
+            Promise.all([
+                import("../make-hook-harness.js"),
+                import("../hook-harness.js"),
+            ]),
+        );
+
+        // Act
+        hookHarness(config);
+
+        // Assert
+        expect(harnessFake).toHaveBeenCalledWith(config);
+    });
+
+    it("should return the returned value of the function made by makeHookHarness", async () => {
+        // Arrange
+        const config = {
+            router: "/boo",
+        };
+        // $FlowIgnore[prop-missing]  - we add this into our mock at the top.
+        const [{returnValueFake}, {hookHarness}] = await ws.isolateModules(() =>
+            Promise.all([
+                import("../make-hook-harness.js"),
+                import("../hook-harness.js"),
+            ]),
+        );
+
+        // Act
+        const result = hookHarness(config);
+
+        // Assert
+        expect(result).toBe(returnValueFake);
+    });
+});

package/src/harness/__tests__/make-hook-harness.test.js

@@ -0,0 +1,94 @@
+// @flow
+import * as React from "react";
+import {render} from "@testing-library/react";
+import {makeHookHarness} from "../make-hook-harness.js";
+import * as MTH from "../make-test-harness.js";
+
+describe("#makeHookHarness", () => {
+    it("should call makeTestHarness", () => {
+        // Arrange
+        const makeTestHarnessSpy = jest.spyOn(MTH, "makeTestHarness");
+        const adapters = {
+            adapter: jest.fn(),
+        };
+        const defaultConfigs = {
+            adapter: {},
+        };
+
+        // Act
+        makeHookHarness(adapters, defaultConfigs);
+
+        // Assert
+        expect(makeTestHarnessSpy).toHaveBeenCalledWith(
+            adapters,
+            defaultConfigs,
+        );
+    });
+
+    it("should return a function", () => {
+        const adapters = {
+            adapter: jest.fn(),
+        };
+        const defaultConfigs = {
+            adapter: {},
+        };
+
+        // Act
+        const result = makeHookHarness(adapters, defaultConfigs);
+
+        // Assert
+        expect(result).toBeFunction();
+    });
+
+    describe("returned function", () => {
+        it("should invoke the function returned by makeTestHarness with component and the configs", () => {
+            // Arrange
+            const harnessSpy = jest.fn();
+            jest.spyOn(MTH, "makeTestHarness").mockReturnValue(harnessSpy);
+            const adapters = {
+                adapter: jest.fn(),
+            };
+            const defaultConfigs = {
+                adapter: {},
+            };
+            const configs = {
+                adapter: {},
+            };
+            const hookHarness = makeHookHarness(adapters, defaultConfigs);
+
+            // Act
+            hookHarness(configs);
+
+            // Assert
+            expect(harnessSpy).toHaveBeenCalledWith(
+                expect.any(Function),
+                configs,
+            );
+        });
+
+        it("should pass a component that just renders the children it is given", () => {
+            // Arrange
+            const harnessSpy = jest.fn();
+            jest.spyOn(MTH, "makeTestHarness").mockReturnValue(harnessSpy);
+            const adapters = {
+                adapter: jest.fn(),
+            };
+            const defaultConfigs = {
+                adapter: {},
+            };
+            const configs = {
+                adapter: {},
+            };
+            const children = "THE CHILDREN";
+
+            // Act
+            const hookHarness = makeHookHarness(adapters, defaultConfigs);
+            hookHarness(configs);
+            const Component = harnessSpy.mock.calls[0][0];
+            const {container} = render(<Component>{children}</Component>);
+
+            // Assert
+            expect(container).toHaveTextContent(children);
+        });
+    });
+});