@khanacademy/wonder-blocks-testing 8.0.21 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-testing
 
+## 9.1.0
+
+### Minor Changes
+
+-   6ed7e928: Test harness adapters are now rendered as React components which should ensure that contexts are properly available when children are rendered inside the adapters that require those contexts
+
+## 9.0.0
+
+### Major Changes
+
+-   1920feb8: Added new SSR adapter for test harnesses to support `RenderStateRoot` in tests and stories
+
+### Patch Changes
+
+-   Updated dependencies [65c02cff]
+    -   @khanacademy/wonder-blocks-data@13.0.0
+
 ## 8.0.21
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { useContext } 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 { StyleSheet, css } from 'aphrodite';
 
 const fixtures = Component => {
   const templateMap = new WeakMap();
@@ -247,11 +250,12 @@ class SettleController {
     return this._signal;
   }
   settle() {
-    this._settleFn();
+    var _this$_settleFn;
+    (_this$_settleFn = this._settleFn) == null ? void 0 : _this$_settleFn.call(this);
   }
 }
 
-const defaultConfig$3 = null;
+const defaultConfig$4 = null;
 const normalizeConfig = config => {
   if (typeof config === "string") {
     return {
@@ -276,7 +280,7 @@ const normalizeConfig = config => {
   }
   throw new Error(`Invalid config: ${config}`);
 };
-const adapter$3 = (children, config) => {
+const adapter$4 = (children, config) => {
   const {
     classes,
     style
@@ -288,8 +292,8 @@ const adapter$3 = (children, config) => {
   }, children);
 };
 
-const defaultConfig$2 = [];
-const adapter$2 = (children, config) => {
+const defaultConfig$3 = [];
+const adapter$3 = (children, config) => {
   let currentChildren = children;
   const interceptors = Array.isArray(config) ? config : [config];
   for (const interceptor of interceptors) {
@@ -300,18 +304,18 @@ const adapter$2 = (children, config) => {
   return React.createElement(React.Fragment, null, currentChildren);
 };
 
-const defaultConfig$1 = null;
-const adapter$1 = (children, config) => React.createElement(React.Fragment, null, React.createElement("div", {
+const defaultConfig$2 = null;
+const adapter$2 = (children, config) => React.createElement(React.Fragment, null, React.createElement("div", {
   id: config,
   "data-test-id": config
 }), children);
 
-const defaultConfig = {
+const defaultConfig$1 = {
   location: "/"
 };
 const maybeWithRoute = (children, path) => {
   if (path == null) {
-    return children;
+    return React.createElement(React.Fragment, null, children);
   }
   return React.createElement(Switch, null, React.createElement(Route, {
     exact: true,
@@ -323,28 +327,28 @@ const maybeWithRoute = (children, path) => {
     }
   }));
 };
-const adapter = (children, config) => {
+const adapter$1 = (children, config) => {
   if (typeof config === "string") {
     config = {
       location: config
     };
   }
   const wrappedWithRoute = maybeWithRoute(children, config.path);
-  if (config.forceStatic) {
+  if ("forceStatic" in config && config.forceStatic) {
     return React.createElement(StaticRouter, {
       location: config.location,
       context: {}
     }, wrappedWithRoute);
   }
-  if (typeof config.location !== "undefined") {
+  if ("location" in config && config.location !== undefined) {
     return React.createElement(MemoryRouter, {
       initialEntries: [config.location]
     }, wrappedWithRoute);
   }
-  if (typeof config.initialEntries === "undefined") {
+  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 entries = config.initialEntries.length === 0 ? [defaultConfig$1.location] : config.initialEntries;
   const routerProps = {
     initialEntries: entries
   };
@@ -357,17 +361,406 @@ const adapter = (children, config) => {
   return React.createElement(MemoryRouter, routerProps, wrappedWithRoute);
 };
 
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function flatten(list) {
+  const result = [];
+  if (!list) {
+    return result;
+  } else if (Array.isArray(list)) {
+    for (const item of list) {
+      result.push(...flatten(item));
+    }
+  } else {
+    result.push(list);
+  }
+  return result;
+}
+function processStyleList(style) {
+  const stylesheetStyles = [];
+  const inlineStyles = [];
+  if (!style) {
+    return {
+      style: {},
+      className: ""
+    };
+  }
+  const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
+  flatten(style).forEach(child => {
+    const _definition = child._definition;
+    if (_definition != null) {
+      if (shouldInlineStyles) {
+        const def = {};
+        for (const [key, value] of Object.entries(_definition)) {
+          def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
+        }
+        inlineStyles.push(def);
+      } else {
+        stylesheetStyles.push(child);
+      }
+    } else {
+      inlineStyles.push(child);
+    }
+  });
+  const inlineStylesObject = Object.assign({}, ...inlineStyles);
+  if (inlineStyles.length > 0 && !shouldInlineStyles) {
+    const inlineStylesStyleSheet = StyleSheet.create({
+      inlineStyles: inlineStylesObject
+    });
+    stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
+  }
+  return {
+    style: shouldInlineStyles ? inlineStylesObject : {},
+    className: css(...stylesheetStyles)
+  };
+}
+const _excluded$2 = ["children", "style", "tag", "testId"];
+const isHeaderRegex = /^h[1-6]$/;
+const styles$1 = StyleSheet.create({
+  text: {
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale"
+  },
+  header: {
+    marginTop: 0,
+    marginBottom: 0
+  }
+});
+React.forwardRef(function Text(_ref, ref) {
+  let {
+      children,
+      style,
+      tag: Tag = "span",
+      testId
+    } = _ref,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const isHeader = isHeaderRegex.test(Tag);
+  const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
+  return React.createElement(Tag, _extends$1({}, otherProps, {
+    style: styleAttributes.style,
+    className: styleAttributes.className,
+    "data-test-id": testId,
+    ref: ref
+  }), children);
+});
+const _excluded$1 = ["className", "style"];
+function addStyle(Component, defaultStyle) {
+  return React.forwardRef((props, ref) => {
+    const {
+        className,
+        style
+      } = props,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    const reset = typeof Component === "string" ? overrides[Component] : null;
+    const {
+      className: aphroditeClassName,
+      style: inlineStyles
+    } = processStyleList([reset, defaultStyle, style]);
+    return React.createElement(Component, _extends$1({}, otherProps, {
+      ref: ref,
+      className: [aphroditeClassName, className].filter(Boolean).join(" "),
+      style: inlineStyles
+    }));
+  });
+}
+const overrides = StyleSheet.create({
+  button: {
+    margin: 0,
+    "::-moz-focus-inner": {
+      border: 0
+    }
+  }
+});
+const _excluded = ["testId", "tag"];
+const styles = StyleSheet.create({
+  default: {
+    alignItems: "stretch",
+    borderWidth: 0,
+    borderStyle: "solid",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+const StyledDiv = addStyle("div", styles.default);
+const StyledArticle = addStyle("article", styles.default);
+const StyledAside = addStyle("aside", styles.default);
+const StyledNav = addStyle("nav", styles.default);
+const StyledSection = addStyle("section", styles.default);
+React.forwardRef(function View(props, ref) {
+  const {
+      testId,
+      tag = "div"
+    } = props,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const commonProps = _extends$1({}, restProps, {
+    "data-test-id": testId
+  });
+  switch (tag) {
+    case "article":
+      return React.createElement(StyledArticle, _extends$1({}, commonProps, {
+        ref: ref
+      }));
+    case "aside":
+      return React.createElement(StyledAside, _extends$1({}, commonProps, {
+        ref: ref
+      }));
+    case "nav":
+      return React.createElement(StyledNav, _extends$1({}, commonProps, {
+        ref: ref
+      }));
+    case "section":
+      return React.createElement(StyledSection, _extends$1({}, commonProps, {
+        ref: ref
+      }));
+    case "div":
+      return React.createElement(StyledDiv, _extends$1({}, commonProps, {
+        ref: ref
+      }));
+    default:
+      throw Error(`${tag} is not an allowed value for the 'tag' prop`);
+  }
+});
+let RenderState = function (RenderState) {
+  RenderState["Root"] = "root";
+  RenderState["Initial"] = "initial";
+  RenderState["Standard"] = "standard";
+  return RenderState;
+}({});
+const RenderStateContext = React.createContext(RenderState.Root);
+RenderStateContext.displayName = "RenderStateContext";
+class WithSSRPlaceholder extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      mounted: false
+    };
+    this._isTheRootComponent = false;
+  }
+  componentDidMount() {
+    if (this._isTheRootComponent) {
+      this.setState({
+        mounted: true
+      });
+    }
+  }
+  _renderAsRootComponent() {
+    const {
+      mounted
+    } = this.state;
+    const {
+      children,
+      placeholder
+    } = this.props;
+    this._isTheRootComponent = true;
+    if (mounted) {
+      return React.createElement(RenderStateContext.Provider, {
+        value: RenderState.Standard
+      }, children());
+    }
+    if (placeholder) {
+      return React.createElement(RenderStateContext.Provider, {
+        value: RenderState.Initial
+      }, placeholder());
+    }
+    return null;
+  }
+  _maybeRender(renderState) {
+    const {
+      children,
+      placeholder
+    } = this.props;
+    switch (renderState) {
+      case RenderState.Root:
+        return this._renderAsRootComponent();
+      case RenderState.Initial:
+        if (placeholder) {
+          return placeholder();
+        }
+        return null;
+      case RenderState.Standard:
+        return children();
+    }
+    {
+      var _JSON$stringify;
+      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
+      return this._maybeRender(RenderState.Root);
+    }
+  }
+  render() {
+    return React.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
+  }
+}
+class UniqueIDFactory {
+  constructor(scope) {
+    this._uniqueFactoryName = void 0;
+    this.get = key => {
+      const normalizedKey = key.toLowerCase();
+      if (!this._hasValidIdChars(key)) {
+        throw new Error(`Invalid identifier key: ${key}`);
+      }
+      return `${this._uniqueFactoryName}-${normalizedKey}`;
+    };
+    scope = typeof scope === "string" ? scope : "";
+    const normalizedScope = scope.toLowerCase();
+    if (!this._hasValidIdChars(normalizedScope)) {
+      throw new Error(`Invalid factory scope: ${scope}`);
+    }
+    this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
+  }
+  _hasValidIdChars(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+    const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
+    return value === invalidCharsReplaced;
+  }
+}
+UniqueIDFactory._factoryUniquenessCounter = 0;
+class SsrIDFactory {
+  get(id) {
+    return id;
+  }
+}
+SsrIDFactory.Default = new SsrIDFactory();
+var SsrIDFactory$1 = SsrIDFactory.Default;
+class UniqueIDProvider extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this._idFactory = void 0;
+  }
+  _performRender(firstRender) {
+    const {
+      children,
+      mockOnFirstRender,
+      scope
+    } = this.props;
+    if (firstRender) {
+      if (mockOnFirstRender) {
+        return children(SsrIDFactory$1);
+      }
+      return null;
+    }
+    if (!this._idFactory) {
+      this._idFactory = new UniqueIDFactory(scope);
+    }
+    return children(this._idFactory);
+  }
+  render() {
+    return React.createElement(WithSSRPlaceholder, {
+      placeholder: () => this._performRender(true)
+    }, () => this._performRender(false));
+  }
+}
+class IDProvider extends React.Component {
+  renderChildren(ids) {
+    const {
+      id,
+      children
+    } = this.props;
+    const uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
+    if (!uniqueId) {
+      throw new Error("Did not get an identifier factory nor a id prop");
+    }
+    return children(uniqueId);
+  }
+  render() {
+    const {
+      id,
+      scope
+    } = this.props;
+    if (id) {
+      return this.renderChildren();
+    } else {
+      return React.createElement(UniqueIDProvider, {
+        scope: scope,
+        mockOnFirstRender: true
+      }, ids => this.renderChildren(ids));
+    }
+  }
+}
+IDProvider.defaultId = "wb-id";
+const useRenderState = () => useContext(RenderStateContext);
+const {
+  useEffect,
+  useState
+} = React;
+const RenderStateRoot = ({
+  children,
+  throwIfNested: _throwIfNested = true
+}) => {
+  const [firstRender, setFirstRender] = useState(true);
+  const renderState = useRenderState();
+  useEffect(() => {
+    setFirstRender(false);
+  }, []);
+  if (renderState !== RenderState.Root) {
+    if (_throwIfNested) {
+      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
+    }
+    return React.createElement(React.Fragment, null, children);
+  }
+  const value = firstRender ? RenderState.Initial : RenderState.Standard;
+  return React.createElement(RenderStateContext.Provider, {
+    value: value
+  }, children);
+};
+
+const defaultConfig = null;
+const adapter = (children, config) => {
+  if (config !== true) {
+    throw new KindError("Unexpected configuration: set config to null to turn this adapter off", Errors.InvalidInput, {
+      metadata: {
+        config
+      }
+    });
+  }
+  return React.createElement(RenderStateRoot, null, children);
+};
+
 const DefaultAdapters = {
-  css: adapter$3,
-  data: adapter$2,
-  portal: adapter$1,
-  router: adapter
+  css: adapter$4,
+  data: adapter$3,
+  portal: adapter$2,
+  router: adapter$1,
+  ssr: adapter
 };
 const DefaultConfigs = {
-  css: defaultConfig$3,
-  data: defaultConfig$2,
-  portal: defaultConfig$1,
-  router: defaultConfig
+  css: defaultConfig$4,
+  data: defaultConfig$3,
+  portal: defaultConfig$2,
+  router: defaultConfig$1,
+  ssr: defaultConfig
 };
 
 var adapters = /*#__PURE__*/Object.freeze({
@@ -391,22 +784,46 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const renderAdapters = (adapters, configs, children) => {
-  let currentChildren = children;
-  for (const adapterName of Object.keys(adapters)) {
-    const adapter = adapters[adapterName];
-    const config = configs[adapterName];
-    if (config != null) {
-      currentChildren = adapter(currentChildren, config);
-    }
+const Adapter = ({
+  children,
+  adapter,
+  config
+}) => {
+  if (config == null) {
+    return React.createElement(React.Fragment, null, children);
+  }
+  return adapter(children, config);
+};
+
+const Adapt = ({
+  children,
+  adapters,
+  configs
+}) => {
+  const thisAdapterName = Object.keys(adapters).at(-1);
+  if (thisAdapterName == null) {
+    return React.createElement(React.Fragment, null, children);
   }
-  return currentChildren;
+  const thisAdapter = adapters[thisAdapterName];
+  const thisConfig = configs[thisAdapterName];
+  const restAdapters = Object.fromEntries(Object.entries(adapters).slice(0, -1));
+  const restConfigs = Object.fromEntries(Object.entries(configs).filter(([name]) => name !== thisAdapterName));
+  return React.createElement(Adapter, {
+    adapter: thisAdapter,
+    config: thisConfig
+  }, React.createElement(Adapt, {
+    adapters: restAdapters,
+    configs: restConfigs
+  }, children));
 };
 
 const makeTestHarness = (adapters, defaultConfigs) => {
   return (Component, configs) => {
     const fullConfig = _extends({}, defaultConfigs, configs);
-    const harnessedComponent = React.forwardRef((props, ref) => renderAdapters(adapters, fullConfig, React.createElement(Component, _extends({}, props, {
+    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"})`;
@@ -416,7 +833,7 @@ const makeTestHarness = (adapters, defaultConfigs) => {
 
 const HookHarness = ({
   children
-}) => children;
+}) => React.createElement(React.Fragment, null, children);
 const makeHookHarness = (adapters, defaultConfigs) => {
   const testHarness = makeTestHarness(adapters, defaultConfigs);
   return configs => testHarness(HookHarness, configs);

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/adapter.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { TestHarnessAdapter } from "./types";
+type Props<TConfig, TAdapter extends TestHarnessAdapter<TConfig>> = {
+    children: React.ReactNode;
+    adapter: TAdapter;
+    config: TConfig | null | undefined;
+};
+/**
+ * Component that optionally renders a given adapter with the given config.
+ *
+ * If the config is nullish, then the children are rendered in a fragment,
+ * otherwise the children are rendered within the given adapter with the
+ * given config.
+ */
+export declare const Adapter: <TConfig, TAdapter extends TestHarnessAdapter<TConfig>>({ children, adapter, config, }: Props<TConfig, TAdapter>) => React.ReactElement;
+export {};

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

@@ -28,6 +28,7 @@ export declare const DefaultAdapters: {
         location: import("history").LocationDescriptor<unknown>;
         path?: string | undefined;
     }>>;
+    readonly ssr: import("../types").TestHarnessAdapter<true | null>;
 };
 /**
  * The default configurations to use with the `DefaultAdapters`.

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

@@ -0,0 +1,12 @@
+import type { TestHarnessAdapter } from "../types";
+type Config = true | null;
+export declare const defaultConfig: Config;
+/**
+ * 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 {};

package/dist/harness/test-harness.d.ts

@@ -29,4 +29,5 @@ export declare const testHarness: <TProps extends object>(Component: import("rea
         location: import("history").LocationDescriptor<unknown>;
         path?: string | undefined;
     }>>;
+    readonly ssr: import("./types").TestHarnessAdapter<true | null>;
 }>> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TProps> & import("react").RefAttributes<unknown>>;

package/dist/harness/types.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 /**
  * A adapter to be composed with our test harness infrastructure.
  */
-export type TestHarnessAdapter<TConfig> = (children: React.ReactNode, config: TConfig) => React.ReactElement<any>;
+export type TestHarnessAdapter<TConfig> = (children: React.ReactNode, config: TConfig) => React.ReactElement;
 /**
  * A general map of adapters by their identifiers.
  *