@khanacademy/wonder-blocks-testing 10.1.1 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-testing
 
+## 11.0.0
+
+### Major Changes
+
+-   2a6c85df: New package containing core Testing functionality without dependencies on other WB packages
+-   2a6c85df: - Minimum version for Storybook actions addon increased to 7
+    -   Added new `renderHookStatic` utility to replace deprecated `renderHookServer` from `@testing-library/react-hooks`; ready for React 18 updates
+    -   Added new `boundary` error boundary adapter for the test harness to capture errors during tests; ready for React 18 updates
+
+### Patch Changes
+
+-   Updated dependencies [2a6c85df]
+-   Updated dependencies [eab37b8b]
+    -   @khanacademy/wonder-blocks-testing-core@1.0.0
+    -   @khanacademy/wonder-blocks-core@6.4.2
+    -   @khanacademy/wonder-blocks-data@13.0.9
+
 ## 10.1.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,90 +1,10 @@
+import { mockRequester, harnessAdapters } from '@khanacademy/wonder-blocks-testing-core';
+export { RespondWith, SettleController, fixtures, hookHarness, makeHookHarness, makeTestHarness, mockFetch, renderHookStatic, testHarness } from '@khanacademy/wonder-blocks-testing-core';
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
 import { InterceptRequests } from '@khanacademy/wonder-blocks-data';
-import { StaticRouter, MemoryRouter, Switch, Route } from 'react-router-dom';
 import { KindError, Errors } from '@khanacademy/wonder-stuff-core';
 import { RenderStateRoot } from '@khanacademy/wonder-blocks-core';
 
-const fixtures = Component => {
-  const templateMap = new WeakMap();
-  let storyNumber = 1;
-  const getPropsOptions = {
-    log: (message, ...args) => action(message)(...args),
-    logHandler: action
-  };
-  const makeStory = (description, props, wrapper = null) => {
-    const storyName = `${storyNumber++} ${description}`;
-    const getProps = options => typeof props === "function" ? props(options) : props;
-    const RealComponent = wrapper || Component;
-    let Template = templateMap.get(RealComponent);
-    if (Template == null) {
-      Template = args => React.createElement(RealComponent, args);
-      templateMap.set(RealComponent, Template);
-    }
-    const story = Template.bind({});
-    story.args = getProps(getPropsOptions);
-    story.storyName = storyName;
-    return story;
-  };
-  return makeStory;
-};
-
-const getHref = input => {
-  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`);
-  }
-};
-const fetchRequestMatchesMock = (mock, input, init) => {
-  const href = getHref(input);
-  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)}`);
-  }
-};
-
-const mockRequester = (operationMatcher, operationToString) => {
-  const mocks = [];
-  const mockFn = (...args) => {
-    for (const mock of mocks) {
-      if (mock.onceOnly && mock.used) {
-        continue;
-      }
-      if (operationMatcher(mock.operation, ...args)) {
-        mock.used = true;
-        return mock.response();
-      }
-    }
-    const operation = operationToString(...args);
-    return Promise.reject(new Error(`No matching mock response found for request:
-    ${operation}`));
-  };
-  const addMockedOperation = (operation, response, onceOnly) => {
-    const mockResponse = () => response.toPromise();
-    mocks.push({
-      operation,
-      response: mockResponse,
-      onceOnly,
-      used: false
-    });
-    return mockFn;
-  };
-  mockFn.mockOperation = (operation, response) => addMockedOperation(operation, response, false);
-  mockFn.mockOperationOnce = (operation, response) => addMockedOperation(operation, response, true);
-  return mockFn;
-};
-
-const mockFetch = () => mockRequester(fetchRequestMatchesMock, (input, init) => `Input: ${typeof input === "string" ? input : JSON.stringify(input, null, 2)}
-    Options: ${init == null ? "None" : JSON.stringify(init, null, 2)}`);
-
 const safeHasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 const areObjectsEqual = (a, b) => {
   if (a === b) {
@@ -130,169 +50,23 @@ const mockGqlFetch = () => mockRequester(gqlRequestMatchesMock, (operation, vari
     Variables: ${variables == null ? "None" : JSON.stringify(variables, null, 2)}
     Context: ${JSON.stringify(context, null, 2)}`);
 
-const ResponseImpl = typeof Response === "undefined" ? require("node-fetch").Response : Response;
-
-const textResponse = (text, statusCode, signal) => ({
-  toPromise: () => makeMockResponse({
-    type: "text",
-    text,
-    statusCode,
-    signal
-  })
-});
-const rejectResponse = (error, signal) => ({
-  toPromise: () => makeMockResponse({
-    type: "reject",
-    error,
-    signal
-  })
-});
-const RespondWith = Object.freeze({
-  text: (text, statusCode = 200, signal = null) => textResponse(text, statusCode, signal),
-  json: (json, signal = null) => textResponse(() => JSON.stringify(json), 200, signal),
-  graphQLData: (data, signal = null) => textResponse(() => JSON.stringify({
-    data
-  }), 200, signal),
-  unparseableBody: (signal = null) => textResponse("INVALID JSON", 200, signal),
-  abortedRequest: (signal = null) => rejectResponse(() => {
-    const abortError = new Error("Mock request aborted");
-    abortError.name = "AbortError";
-    return abortError;
-  }, signal),
-  reject: (error, signal = null) => rejectResponse(error, signal),
-  errorStatusCode: (statusCode, signal = null) => {
-    if (statusCode < 300) {
-      throw new Error(`${statusCode} is not a valid error status code`);
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return textResponse("{}", statusCode, signal);
-  },
-  nonGraphQLBody: (signal = null) => textResponse(() => JSON.stringify({
-    valid: "json",
-    that: "is not a valid graphql response"
-  }), 200, signal),
-  graphQLErrors: (errorMessages, signal = null) => textResponse(() => JSON.stringify({
-    errors: errorMessages.map(e => ({
-      message: e
-    }))
-  }), 200, signal)
-});
-const callOnSettled = (signal, fn) => {
-  if (signal == null || signal.settled) {
-    fn();
-    return;
-  }
-  const onSettled = () => {
-    signal.removeEventListener("settled", onSettled);
-    fn();
+    return target;
   };
-  signal.addEventListener("settled", onSettled);
-};
-const makeMockResponse = response => {
-  const {
-    signal
-  } = response;
-  switch (response.type) {
-    case "text":
-      return new Promise((resolve, reject) => {
-        callOnSettled(signal, () => {
-          const text = typeof response.text === "function" ? response.text() : response.text;
-          resolve(new ResponseImpl(text, {
-            status: response.statusCode
-          }));
-        });
-      });
-    case "reject":
-      return new Promise((resolve, reject) => {
-        callOnSettled(signal, () => reject(response.error instanceof Error ? response.error : response.error()));
-      });
-    default:
-      if (process.env.NODE_ENV !== "production") {
-        throw new Error(`Unknown response type: ${response.type}`);
-      }
-      return makeMockResponse({
-        type: "reject",
-        error: new Error("Unknown response type"),
-        signal
-      });
-  }
-};
-
-class SettleSignal extends EventTarget {
-  constructor(setSettleFn = null) {
-    super();
-    this._settled = false;
-    setSettleFn == null ? void 0 : setSettleFn(() => {
-      if (this._settled) {
-        throw new Error("SettleSignal already settled");
-      }
-      this._settled = true;
-      this.dispatchEvent(new Event("settled"));
-    });
-  }
-  static settle() {
-    const signal = new SettleSignal();
-    signal._settled = true;
-    return signal;
-  }
-  get settled() {
-    return this._settled;
-  }
-}
-
-class SettleController {
-  constructor() {
-    this._settleFn = void 0;
-    this._signal = void 0;
-    this._signal = new SettleSignal(settleFn => this._settleFn = settleFn);
-  }
-  get signal() {
-    return this._signal;
-  }
-  settle() {
-    var _this$_settleFn;
-    (_this$_settleFn = this._settleFn) == null ? void 0 : _this$_settleFn.call(this);
-  }
+  return _extends.apply(this, arguments);
 }
 
-const defaultConfig$4 = null;
-const normalizeConfig = config => {
-  if (typeof config === "string") {
-    return {
-      classes: [config],
-      style: {}
-    };
-  }
-  if (Array.isArray(config)) {
-    return {
-      classes: config,
-      style: {}
-    };
-  }
-  if (typeof config === "object") {
-    if ("classes" in config && config.classes != null && "style" in config && config.style != null) {
-      return config;
-    }
-    return {
-      classes: [],
-      style: config
-    };
-  }
-  throw new Error(`Invalid config: ${config}`);
-};
-const adapter$4 = (children, config) => {
-  const {
-    classes,
-    style
-  } = normalizeConfig(config);
-  return React.createElement("div", {
-    "data-testid": "css-adapter-container",
-    className: classes.join(" "),
-    style: style
-  }, children);
-};
-
-const defaultConfig$3 = [];
-const adapter$3 = (children, config) => {
+const defaultConfig$1 = [];
+const adapter$1 = (children, config) => {
   let currentChildren = children;
   const interceptors = Array.isArray(config) ? config : [config];
   for (const interceptor of interceptors) {
@@ -303,63 +77,6 @@ const adapter$3 = (children, config) => {
   return React.createElement(React.Fragment, null, currentChildren);
 };
 
-const defaultConfig$2 = null;
-const adapter$2 = (children, config) => React.createElement(React.Fragment, null, React.createElement("div", {
-  id: config,
-  "data-testid": config
-}), children);
-
-const defaultConfig$1 = {
-  location: "/"
-};
-const maybeWithRoute = (children, path) => {
-  if (path == null) {
-    return React.createElement(React.Fragment, null, children);
-  }
-  return React.createElement(Switch, null, React.createElement(Route, {
-    exact: true,
-    path: path
-  }, children), React.createElement(Route, {
-    path: "*",
-    render: () => {
-      throw new Error("The configured path must match the configured location or your harnessed component will not render.");
-    }
-  }));
-};
-const adapter$1 = (children, config) => {
-  if (typeof config === "string") {
-    config = {
-      location: config
-    };
-  }
-  const wrappedWithRoute = maybeWithRoute(children, config.path);
-  if ("forceStatic" in config && config.forceStatic) {
-    return React.createElement(StaticRouter, {
-      location: config.location,
-      context: {}
-    }, wrappedWithRoute);
-  }
-  if ("location" in config && config.location !== undefined) {
-    return React.createElement(MemoryRouter, {
-      initialEntries: [config.location]
-    }, wrappedWithRoute);
-  }
-  if (!("initialEntries" in config) || config.initialEntries === undefined) {
-    throw new Error("A location or initial history entries must be provided.");
-  }
-  const entries = config.initialEntries.length === 0 ? [defaultConfig$1.location] : config.initialEntries;
-  const routerProps = {
-    initialEntries: entries
-  };
-  if (config.initialIndex != null) {
-    routerProps.initialIndex = config.initialIndex;
-  }
-  if (config.getUserConfirmation != null) {
-    routerProps.getUserConfirmation = config.getUserConfirmation;
-  }
-  return React.createElement(MemoryRouter, routerProps, wrappedWithRoute);
-};
-
 const defaultConfig = null;
 const adapter = (children, config) => {
   if (config !== true) {
@@ -375,100 +92,22 @@ const adapter = (children, config) => {
 };
 
 const DefaultAdapters = {
-  css: adapter$4,
-  data: adapter$3,
-  portal: adapter$2,
-  router: adapter$1,
+  boundary: harnessAdapters.DefaultAdapters.boundary,
+  css: harnessAdapters.DefaultAdapters.css,
+  data: adapter$1,
+  portal: harnessAdapters.DefaultAdapters.portal,
+  router: harnessAdapters.DefaultAdapters.router,
   ssr: adapter
 };
-const DefaultConfigs = {
-  css: defaultConfig$4,
-  data: defaultConfig$3,
-  portal: defaultConfig$2,
-  router: defaultConfig$1,
+const DefaultConfigs = _extends({}, harnessAdapters.DefaultConfigs, {
+  data: defaultConfig$1,
   ssr: defaultConfig
-};
+});
 
-var adapters = /*#__PURE__*/Object.freeze({
+var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     DefaultAdapters: DefaultAdapters,
     DefaultConfigs: DefaultConfigs
 });
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const componentCache = new Map();
-const getNamedAdapterComponent = name => {
-  const existing = componentCache.get(name);
-  if (existing != null) {
-    return existing;
-  }
-  const newComponent = ({
-    children,
-    config,
-    adapter
-  }) => adapter(children, config);
-  newComponent.displayName = `Adapter(${name})`;
-  componentCache.set(name, newComponent);
-  return newComponent;
-};
-
-const Adapt = ({
-  children,
-  adapters,
-  configs
-}) => {
-  return Object.entries(adapters).reduce((newChildren, [name, adapter]) => {
-    const theConfig = configs[name];
-    if (theConfig == null) {
-      return newChildren;
-    }
-    const Adapter = getNamedAdapterComponent(name);
-    return React.createElement(Adapter, {
-      key: name,
-      adapter: adapter,
-      config: theConfig
-    }, newChildren);
-  }, React.createElement(React.Fragment, null, children));
-};
-
-const makeTestHarness = (adapters, defaultConfigs) => {
-  return (Component, configs) => {
-    const fullConfig = _extends({}, defaultConfigs, configs);
-    const harnessedComponent = React.forwardRef((props, ref) => React.createElement(Adapt, {
-      adapters: adapters,
-      configs: fullConfig
-    }, React.createElement(Component, _extends({}, props, {
-      ref: ref
-    }))));
-    harnessedComponent.displayName = `testHarness(${Component.displayName || Component.name || "Component"})`;
-    return harnessedComponent;
-  };
-};
-
-const HookHarness = ({
-  children
-}) => React.createElement(React.Fragment, null, children);
-const makeHookHarness = (adapters, defaultConfigs) => {
-  const testHarness = makeTestHarness(adapters, defaultConfigs);
-  return configs => testHarness(HookHarness, configs);
-};
-
-const hookHarness = makeHookHarness(DefaultAdapters, DefaultConfigs);
-
-const testHarness = makeTestHarness(DefaultAdapters, DefaultConfigs);
-
-export { RespondWith, SettleController, fixtures, adapters as harnessAdapters, hookHarness, makeHookHarness, makeTestHarness, mockFetch, mockGqlFetch, testHarness };
+export { index as harnessAdapters, mockGqlFetch };

package/dist/gql/types.d.ts

@@ -1,6 +1,5 @@
 import type { GqlOperation, GqlContext } from "@khanacademy/wonder-blocks-data";
-import type { GraphQLJson } from "../types";
-import type { MockResponse } from "../respond-with";
+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;

package/dist/harness/adapters/data.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { InterceptRequests } from "@khanacademy/wonder-blocks-data";
-import type { TestHarnessAdapter } from "../types";
+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>;
 /**

package/dist/harness/adapters/index.d.ts

@@ -0,0 +1,41 @@
+/// <reference path="../../../../wonder-blocks-testing-core/types/aphrodite.d.ts" />
+/// <reference path="../../../types/aphrodite.d.ts" />
+/// <reference types="react" />
+import type { TestHarnessConfigs } from "@khanacademy/wonder-blocks-testing-core";
+/**
+ * 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 declare const DefaultAdapters: {
+    readonly boundary: import("@khanacademy/wonder-blocks-testing-core").TestHarnessAdapter<(error: Error | null | undefined, errorInfo: {
+        componentStack: string;
+    }) => import("react").ReactNode>;
+    readonly css: import("@khanacademy/wonder-blocks-testing-core").TestHarnessAdapter<string | string[] | import("aphrodite").CSSProperties | {
+        classes: string[];
+        style: import("aphrodite").CSSProperties;
+    }>;
+    readonly data: import("@khanacademy/wonder-blocks-testing-core").TestHarnessAdapter<((requestId: string) => Promise<import("@khanacademy/wonder-blocks-data").ValidCacheData> | null | undefined) | ((requestId: string) => Promise<import("@khanacademy/wonder-blocks-data").ValidCacheData> | null | undefined)[]>;
+    readonly portal: import("@khanacademy/wonder-blocks-testing-core").TestHarnessAdapter<string>;
+    readonly router: import("@khanacademy/wonder-blocks-testing-core").TestHarnessAdapter<string | Readonly<{
+        initialEntries: import("history").LocationDescriptor<unknown>[] | undefined;
+        initialIndex?: number | undefined;
+        getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void) | undefined;
+        path?: string | undefined;
+    } | {
+        location: import("history").LocationDescriptor<unknown>;
+        forceStatic: true;
+        path?: string | undefined;
+    } | {
+        location: import("history").LocationDescriptor<unknown>;
+        path?: string | undefined;
+    }>>;
+    readonly ssr: import("@khanacademy/wonder-blocks-testing-core").TestHarnessAdapter<true>;
+};
+/**
+ * The default configurations to use with the `DefaultAdapters`.
+ */
+export declare const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters>;

package/dist/harness/adapters/ssr.d.ts

@@ -1,4 +1,4 @@
-import type { TestHarnessAdapter } from "../types";
+import type { TestHarnessAdapter } from "@khanacademy/wonder-blocks-testing-core";
 type Config = true;
 export declare const defaultConfig: Config | null;
 /**

package/dist/index.d.ts

@@ -1,15 +1,10 @@
-export { fixtures } from "./fixtures/fixtures";
-export type { FixtureFn, FixtureProps, GetPropsOptions } from "./fixtures/types";
-export { mockFetch } from "./fetch/mock-fetch";
+export { fixtures } from "@khanacademy/wonder-blocks-testing-core";
+export type { FixtureFn, FixtureProps, GetPropsOptions, } from "@khanacademy/wonder-blocks-testing-core";
+export { mockFetch, RespondWith, SettleController, } from "@khanacademy/wonder-blocks-testing-core";
 export { mockGqlFetch } from "./gql/mock-gql-fetch";
-export { RespondWith } from "./respond-with";
-export { SettleController } from "./settle-controller";
-export type { MockResponse } from "./respond-with";
-export type { FetchMockFn, FetchMockOperation } from "./fetch/types";
+export type { MockResponse, FetchMockFn, FetchMockOperation, } from "@khanacademy/wonder-blocks-testing-core";
 export type { GqlFetchMockFn, GqlMockOperation } from "./gql/types";
-export * from "./harness/types";
-export * as harnessAdapters from "./harness/adapters/adapters";
-export { makeHookHarness } from "./harness/make-hook-harness";
-export { makeTestHarness } from "./harness/make-test-harness";
-export { hookHarness } from "./harness/hook-harness";
-export { testHarness } from "./harness/test-harness";
+export type { TestHarnessAdapter, TestHarnessAdapters, TestHarnessConfig, TestHarnessConfigs, } from "@khanacademy/wonder-blocks-testing-core";
+export * as harnessAdapters from "./harness/adapters";
+export { makeHookHarness, makeTestHarness, hookHarness, testHarness, } from "@khanacademy/wonder-blocks-testing-core";
+export { renderHookStatic } from "@khanacademy/wonder-blocks-testing-core";