@khanacademy/wonder-blocks-testing-core 0.0.0-PR2266-20240710215230

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @khanacademy/wonder-blocks-testing-core
+
+## 0.0.0-PR2266-20240710215230
+
+### Major Changes
+
+-   68d3ba5c: New package containing core Testing functionality without dependencies on other WB packages

package/dist/es/index.js

@@ -0,0 +1,455 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import { StaticRouter, MemoryRouter, Switch, Route } from 'react-router-dom';
+
+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 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`);
+    }
+    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();
+  };
+  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);
+  }
+}
+
+const defaultConfig$3 = 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$3 = (children, config) => {
+  const {
+    classes,
+    style
+  } = normalizeConfig(config);
+  return React.createElement("div", {
+    "data-testid": "css-adapter-container",
+    className: classes.join(" "),
+    style: style
+  }, children);
+};
+
+const defaultConfig$2 = null;
+class ErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      renderError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      renderError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    const lastErrorUx = this.props.onError(error, errorInfo);
+    this.setState({
+      lastErrorUx
+    });
+  }
+  render() {
+    var _this$state$lastError;
+    return this.state.renderError ? (_this$state$lastError = this.state.lastErrorUx) != null ? _this$state$lastError : "An error occurred" : this.props.children;
+  }
+}
+const adapter$2 = (children, config) => React.createElement(ErrorBoundary, {
+  onError: config
+}, children);
+
+const defaultConfig$1 = null;
+const adapter$1 = (children, config) => React.createElement(React.Fragment, null, React.createElement("div", {
+  id: config,
+  "data-testid": config
+}), children);
+
+const defaultConfig = {
+  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 = (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.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 DefaultAdapters = {
+  boundary: adapter$2,
+  css: adapter$3,
+  portal: adapter$1,
+  router: adapter
+};
+const DefaultConfigs = {
+  boundary: defaultConfig$2,
+  css: defaultConfig$3,
+  portal: defaultConfig$1,
+  router: defaultConfig
+};
+
+var adapters = /*#__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);
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom-server.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom-server.browser.development.js');
+}
+
+const renderHookStatic = (render, {
+  wrapper,
+  initialProps
+} = {}) => {
+  let result;
+  function TestComponent({
+    renderCallbackProps
+  }) {
+    result = render(renderCallbackProps);
+    return null;
+  }
+  const component = React.createElement(TestComponent, {
+    renderCallbackProps: initialProps
+  });
+  const componentWithWrapper = wrapper == null ? component : React.createElement(wrapper, null, component);
+  undefined(componentWithWrapper);
+  return {
+    result: {
+      current: result
+    }
+  };
+};
+
+export { RespondWith, SettleController, fixtures, adapters as harnessAdapters, hookHarness, makeHookHarness, makeTestHarness, mockFetch, mockRequester, renderHookStatic, testHarness };

package/dist/fetch/fetch-request-matches-mock.d.ts

@@ -0,0 +1,5 @@
+import type { FetchMockOperation } from "./types";
+/**
+ * Determines if a given fetch invocation matches the given mock.
+ */
+export declare const fetchRequestMatchesMock: (mock: FetchMockOperation, input: RequestInfo, init?: RequestInit | null) => boolean;

package/dist/fetch/mock-fetch.d.ts

@@ -0,0 +1,5 @@
+import type { FetchMockFn } from "./types";
+/**
+ * A mock for the fetch function passed to GqlRouter.
+ */
+export declare const mockFetch: () => FetchMockFn;

package/dist/fetch/types.d.ts

@@ -0,0 +1,9 @@
+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;
+};
+export {};

package/dist/fixtures/fixtures.basic.stories.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+type Props = {
+    propA: string;
+    propB?: string;
+};
+export declare const F1: unknown;
+export declare const F2: unknown;
+export declare const F3: unknown;
+declare const _default: {
+    title: string;
+    component: (props: Props) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default _default;

package/dist/fixtures/fixtures.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { FixtureFn } 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 declare const fixtures: <TComponent extends React.ComponentType<any>, TProps extends JSX.LibraryManagedAttributes<TComponent, React.ComponentProps<TComponent>>>(Component: TComponent) => FixtureFn<TProps>;

package/dist/fixtures/fixtures.defaultwrapper.stories.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+type Props = Record<any, any>;
+export declare const F1: unknown;
+export declare const F2: unknown;
+declare const _default: {
+    title: string;
+    component: (props: Props) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default _default;

package/dist/fixtures/types.d.ts

@@ -0,0 +1,36 @@
+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;

package/dist/harness/adapt.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { TestHarnessConfigs, TestHarnessAdapters } from "./types";
+type Props<TAdapters extends TestHarnessAdapters> = {
+    children: React.ReactNode;
+    adapters: TAdapters;
+    configs: TestHarnessConfigs<TAdapters>;
+};
+/**
+ * Render a set of adapters around the given children.
+ *
+ * Adapters are rendered with the last adapter being the outermost and the first
+ * adapter being the innermost, with children being the innermost of all. This
+ * ensures that we are backwards compatible with previous releases of the
+ * test harness.
+ */
+export declare const Adapt: <TAdapters extends TestHarnessAdapters>({ children, adapters, configs, }: Props<TAdapters>) => React.ReactElement;
+export {};

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

@@ -0,0 +1,41 @@
+/// <reference path="../../../types/aphrodite.d.ts" />
+/// <reference types="react" />
+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
+ * getting changed to `any`.
+ */
+/**
+ * The default adapters provided by Wonder Blocks.
+ */
+export declare const DefaultAdapters: {
+    readonly boundary: import("../types").TestHarnessAdapter<(error: Error | null | undefined, errorInfo: {
+        componentStack: string;
+    }) => import("react").ReactNode>;
+    readonly css: import("../types").TestHarnessAdapter<string | string[] | import("aphrodite").CSSProperties | {
+        /**
+         * The default adapters provided by Wonder Blocks.
+         */
+        classes: string[];
+        style: import("aphrodite").CSSProperties;
+    }>;
+    readonly portal: import("../types").TestHarnessAdapter<string>;
+    readonly router: import("../types").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;
+    }>>;
+};
+/**
+ * The default configurations to use with the `DefaultAdapters`.
+ */
+export declare const DefaultConfigs: TestHarnessConfigs<typeof DefaultAdapters>;

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

@@ -0,0 +1,12 @@
+import type { CSSProperties } from "aphrodite";
+import type { TestHarnessAdapter } from "../types";
+type Config = string | Array<string> | CSSProperties | {
+    classes: Array<string>;
+    style: CSSProperties;
+};
+export declare const defaultConfig: Config | null | undefined;
+/**
+ * Test harness adapter for adding CSS to the harnessed component wrapper.
+ */
+export declare const adapter: TestHarnessAdapter<Config>;
+export {};

package/dist/harness/adapters/error-boundary.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { TestHarnessAdapter } from "../types";
+type ErrorInfo = {
+    componentStack: string;
+};
+type Config = (error: Error | null | undefined, errorInfo: ErrorInfo) => React.ReactNode;
+/**
+ * Default configuration is to not use this adapter.
+ */
+export declare const defaultConfig: Config | null;
+/**
+ * Test harness adapter to add error boundary to capture errors during render.
+ */
+export declare const adapter: TestHarnessAdapter<Config>;
+export {};

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

@@ -0,0 +1,12 @@
+import type { TestHarnessAdapter } from "../types";
+type Config = string;
+export declare const defaultConfig: Config | null | undefined;
+/**
+ * Test harness adapter for supporting portals.
+ *
+ * Some components rely on rendering with a React Portal. This adapter ensures
+ * that the DOM contains a mounting point for the portal with the expected
+ * identifier.
+ */
+export declare const adapter: TestHarnessAdapter<Config>;
+export {};