@khanacademy/wonder-blocks-testing 10.1.0 → 11.0.0

package/dist/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var wonderBlocksTestingCore = require('@khanacademy/wonder-blocks-testing-core');
 var React = require('react');
-var addonActions = require('@storybook/addon-actions');
 var wonderBlocksData = require('@khanacademy/wonder-blocks-data');
-var reactRouterDom = require('react-router-dom');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 
@@ -29,86 +28,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const fixtures = Component => {
-  const templateMap = new WeakMap();
-  let storyNumber = 1;
-  const getPropsOptions = {
-    log: (message, ...args) => addonActions.action(message)(...args),
-    logHandler: addonActions.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__namespace.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) {
@@ -150,173 +69,27 @@ const gqlRequestMatchesMock = (mock, operation, variables, context) => {
   return true;
 };
 
-const mockGqlFetch = () => mockRequester(gqlRequestMatchesMock, (operation, variables, context) => `Operation: ${operation.type} ${operation.id}
+const mockGqlFetch = () => wonderBlocksTestingCore.mockRequester(gqlRequestMatchesMock, (operation, variables, context) => `Operation: ${operation.type} ${operation.id}
     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__namespace.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) {
@@ -327,63 +100,6 @@ const adapter$3 = (children, config) => {
   return React__namespace.createElement(React__namespace.Fragment, null, currentChildren);
 };
 
-const defaultConfig$2 = null;
-const adapter$2 = (children, config) => React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
-  id: config,
-  "data-testid": config
-}), children);
-
-const defaultConfig$1 = {
-  location: "/"
-};
-const maybeWithRoute = (children, path) => {
-  if (path == null) {
-    return React__namespace.createElement(React__namespace.Fragment, null, children);
-  }
-  return React__namespace.createElement(reactRouterDom.Switch, null, React__namespace.createElement(reactRouterDom.Route, {
-    exact: true,
-    path: path
-  }, children), React__namespace.createElement(reactRouterDom.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__namespace.createElement(reactRouterDom.StaticRouter, {
-      location: config.location,
-      context: {}
-    }, wrappedWithRoute);
-  }
-  if ("location" in config && config.location !== undefined) {
-    return React__namespace.createElement(reactRouterDom.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__namespace.createElement(reactRouterDom.MemoryRouter, routerProps, wrappedWithRoute);
-};
-
 const defaultConfig = null;
 const adapter = (children, config) => {
   if (config !== true) {
@@ -399,109 +115,59 @@ const adapter = (children, config) => {
 };
 
 const DefaultAdapters = {
-  css: adapter$4,
-  data: adapter$3,
-  portal: adapter$2,
-  router: adapter$1,
+  boundary: wonderBlocksTestingCore.harnessAdapters.DefaultAdapters.boundary,
+  css: wonderBlocksTestingCore.harnessAdapters.DefaultAdapters.css,
+  data: adapter$1,
+  portal: wonderBlocksTestingCore.harnessAdapters.DefaultAdapters.portal,
+  router: wonderBlocksTestingCore.harnessAdapters.DefaultAdapters.router,
   ssr: adapter
 };
-const DefaultConfigs = {
-  css: defaultConfig$4,
-  data: defaultConfig$3,
-  portal: defaultConfig$2,
-  router: defaultConfig$1,
+const DefaultConfigs = _extends({}, wonderBlocksTestingCore.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__namespace.createElement(Adapter, {
-      key: name,
-      adapter: adapter,
-      config: theConfig
-    }, newChildren);
-  }, React__namespace.createElement(React__namespace.Fragment, null, children));
-};
-
-const makeTestHarness = (adapters, defaultConfigs) => {
-  return (Component, configs) => {
-    const fullConfig = _extends({}, defaultConfigs, configs);
-    const harnessedComponent = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Adapt, {
-      adapters: adapters,
-      configs: fullConfig
-    }, React__namespace.createElement(Component, _extends({}, props, {
-      ref: ref
-    }))));
-    harnessedComponent.displayName = `testHarness(${Component.displayName || Component.name || "Component"})`;
-    return harnessedComponent;
-  };
-};
-
-const HookHarness = ({
-  children
-}) => React__namespace.createElement(React__namespace.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);
-
-exports.RespondWith = RespondWith;
-exports.SettleController = SettleController;
-exports.fixtures = fixtures;
-exports.harnessAdapters = adapters;
-exports.hookHarness = hookHarness;
-exports.makeHookHarness = makeHookHarness;
-exports.makeTestHarness = makeTestHarness;
-exports.mockFetch = mockFetch;
+Object.defineProperty(exports, 'RespondWith', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.RespondWith; }
+});
+Object.defineProperty(exports, 'SettleController', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.SettleController; }
+});
+Object.defineProperty(exports, 'fixtures', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.fixtures; }
+});
+Object.defineProperty(exports, 'hookHarness', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.hookHarness; }
+});
+Object.defineProperty(exports, 'makeHookHarness', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.makeHookHarness; }
+});
+Object.defineProperty(exports, 'makeTestHarness', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.makeTestHarness; }
+});
+Object.defineProperty(exports, 'mockFetch', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.mockFetch; }
+});
+Object.defineProperty(exports, 'renderHookStatic', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.renderHookStatic; }
+});
+Object.defineProperty(exports, 'testHarness', {
+    enumerable: true,
+    get: function () { return wonderBlocksTestingCore.testHarness; }
+});
+exports.harnessAdapters = index;
 exports.mockGqlFetch = mockGqlFetch;
-exports.testHarness = testHarness;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "10.1.0",
+    "version": "11.0.0",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -14,15 +14,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.18.6",
-        "@khanacademy/wonder-blocks-core": "^6.4.0",
-        "@khanacademy/wonder-blocks-data": "^13.0.7"
+        "@khanacademy/wonder-blocks-core": "^6.4.2",
+        "@khanacademy/wonder-blocks-data": "^13.0.9",
+        "@khanacademy/wonder-blocks-testing-core": "^1.0.0"
     },
     "peerDependencies": {
         "@khanacademy/wonder-stuff-core": "^1.2.2",
-        "@storybook/addon-actions": "^6.4.8",
-        "node-fetch": "^2.6.7",
+        "@storybook/addon-actions": "^7.0.0",
         "aphrodite": "^1.2.5",
+        "node-fetch": "^2.6.7",
         "react": "16.14.0",
+        "react-dom": "16.14.0",
         "react-router-dom": "5.3.0"
     },
     "devDependencies": {
@@ -31,4 +33,4 @@
     },
     "author": "",
     "license": "MIT"
-}
+}

package/src/gql/__tests__/mock-gql-fetch.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 
 import {GqlRouter, useGql} from "@khanacademy/wonder-blocks-data";
-import {RespondWith} from "../../respond-with";
+import {RespondWith} from "@khanacademy/wonder-blocks-testing-core";
 import {mockGqlFetch} from "../mock-gql-fetch";
 
 describe("#mockGqlFetch", () => {

package/src/gql/__tests__/types.typestest.ts

@@ -1,6 +1,6 @@
 import {GqlOperation} from "@khanacademy/wonder-blocks-data";
+import {RespondWith} from "@khanacademy/wonder-blocks-testing-core";
 import type {GqlFetchMockFn} from "../types";
-import {RespondWith} from "../../respond-with";
 
 type SomeGqlData = {
     a: string;

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 
 import {GqlRouter, useGql} from "@khanacademy/wonder-blocks-data";
-import {RespondWith} from "../../respond-with";
+import {RespondWith} from "@khanacademy/wonder-blocks-testing-core";
 import {mockGqlFetch} from "../mock-gql-fetch";
 
 describe("integrating mockGqlFetch, RespondWith, GqlRouter and useGql", () => {

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

@@ -1,5 +1,5 @@
+import {mockRequester} from "@khanacademy/wonder-blocks-testing-core";
 import {gqlRequestMatchesMock} from "./gql-request-matches-mock";
-import {mockRequester} from "../mock-requester";
 import type {GqlFetchMockFn, GqlMockOperation} from "./types";
 
 /**

package/src/gql/types.ts

@@ -1,6 +1,8 @@
 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>,

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import * as WBCore from "@khanacademy/wonder-blocks-core";
-import {makeTestHarness} from "../../make-test-harness";
+import {makeTestHarness} from "@khanacademy/wonder-blocks-testing-core";
 
 import * as SSR from "../ssr";
 

package/src/harness/adapters/data.tsx

@@ -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,

package/src/harness/adapters/{adapters.ts → index.ts}

@@ -1,11 +1,8 @@
-import * as css from "./css";
+import {harnessAdapters} from "@khanacademy/wonder-blocks-testing-core";
+import type {TestHarnessConfigs} from "@khanacademy/wonder-blocks-testing-core";
 import * as data from "./data";
-import * as portal from "./portal";
-import * as router from "./router";
 import * as ssr from "./ssr";
 
-import type {TestHarnessConfigs} from "../types";
-
 /**
  * NOTE: We do not type `DefaultAdapters` with `Adapters` here because we want
  * the individual config types of each adapter to remain intact rather than
@@ -16,10 +13,14 @@ import type {TestHarnessConfigs} from "../types";
  * The default adapters provided by Wonder Blocks.
  */
 export const DefaultAdapters = {
-    css: css.adapter,
+    // 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: portal.adapter,
-    router: router.adapter,
+    portal: harnessAdapters.DefaultAdapters.portal,
+    router: harnessAdapters.DefaultAdapters.router,
     ssr: ssr.adapter,
 } as const;
 
@@ -27,9 +28,7 @@ export const DefaultAdapters = {
  * The default configurations to use with the `DefaultAdapters`.
  */
 export const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters> = {
-    css: css.defaultConfig,
+    ...harnessAdapters.DefaultConfigs,
     data: data.defaultConfig,
-    portal: portal.defaultConfig,
-    router: router.defaultConfig,
     ssr: ssr.defaultConfig,
 } as const;

package/src/harness/adapters/ssr.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {KindError, Errors} from "@khanacademy/wonder-stuff-core";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 
-import type {TestHarnessAdapter} from "../types";
+import type {TestHarnessAdapter} from "@khanacademy/wonder-blocks-testing-core";
 
 //
 type Config = true;