@khanacademy/wonder-blocks-testing 9.1.0 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-testing
 
+## 9.3.0
+
+### Minor Changes
+
+-   f530fbeb: Fix bug where the test harness was causing the component under test to be remounted when rerendering instead of reusing the existing instance
+
+## 9.2.0
+
+### Minor Changes
+
+-   76883b4e: Make sure Wonder Blocks Testing is dependent on Core
+
+### Patch Changes
+
+-   76883b4e: Output the adapter name with the Adapter component
+-   Updated dependencies [f19da46e]
+    -   @khanacademy/wonder-blocks-core@6.0.2
+    -   @khanacademy/wonder-blocks-data@13.0.1
+
 ## 9.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -1,10 +1,9 @@
 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';
+import { RenderStateRoot } from '@khanacademy/wonder-blocks-core';
 
 const fixtures = Component => {
   const templateMap = new WeakMap();
@@ -361,381 +360,6 @@ const adapter$1 = (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) {
@@ -784,15 +408,20 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const Adapter = ({
-  children,
-  adapter,
-  config
-}) => {
-  if (config == null) {
-    return React.createElement(React.Fragment, null, children);
-  }
-  return adapter(children, config);
+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 = ({
@@ -800,21 +429,18 @@ const Adapt = ({
   adapters,
   configs
 }) => {
-  const thisAdapterName = Object.keys(adapters).at(-1);
-  if (thisAdapterName == null) {
-    return React.createElement(React.Fragment, null, children);
-  }
-  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));
+  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) => {

package/dist/harness/get-named-adapter-component.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { TestHarnessAdapter } from "./types";
+type Props<TConfig = any> = {
+    children: React.ReactNode;
+    config: TConfig;
+    adapter: TestHarnessAdapter<TConfig>;
+};
+/**
+ * Get a component tagged with the given name for rendering an adapter.
+ *
+ * We can share these across invocations because only the name is used.
+ * The rest is configured at render time. This way we don't recreate new
+ * components on the fly and cause remounting to occur.
+ */
+export declare const getNamedAdapterComponent: (name: string) => React.FunctionComponent<Props<any>>;
+export {};