@khanacademy/wonder-blocks-testing 9.1.0 → 9.3.0

package/dist/index.js

@@ -7,7 +7,7 @@ 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 aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -384,381 +384,6 @@ const adapter$1 = (children, config) => {
   return React__namespace.createElement(reactRouterDom.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 = aphrodite.StyleSheet.create({
-      inlineStyles: inlineStylesObject
-    });
-    stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
-  }
-  return {
-    style: shouldInlineStyles ? inlineStylesObject : {},
-    className: aphrodite.css(...stylesheetStyles)
-  };
-}
-const _excluded$2 = ["children", "style", "tag", "testId"];
-const isHeaderRegex = /^h[1-6]$/;
-const styles$1 = aphrodite.StyleSheet.create({
-  text: {
-    WebkitFontSmoothing: "antialiased",
-    MozOsxFontSmoothing: "grayscale"
-  },
-  header: {
-    marginTop: 0,
-    marginBottom: 0
-  }
-});
-React__namespace.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__namespace.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__namespace.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__namespace.createElement(Component, _extends$1({}, otherProps, {
-      ref: ref,
-      className: [aphroditeClassName, className].filter(Boolean).join(" "),
-      style: inlineStyles
-    }));
-  });
-}
-const overrides = aphrodite.StyleSheet.create({
-  button: {
-    margin: 0,
-    "::-moz-focus-inner": {
-      border: 0
-    }
-  }
-});
-const _excluded = ["testId", "tag"];
-const styles = aphrodite.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__namespace.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__namespace.createElement(StyledArticle, _extends$1({}, commonProps, {
-        ref: ref
-      }));
-    case "aside":
-      return React__namespace.createElement(StyledAside, _extends$1({}, commonProps, {
-        ref: ref
-      }));
-    case "nav":
-      return React__namespace.createElement(StyledNav, _extends$1({}, commonProps, {
-        ref: ref
-      }));
-    case "section":
-      return React__namespace.createElement(StyledSection, _extends$1({}, commonProps, {
-        ref: ref
-      }));
-    case "div":
-      return React__namespace.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__namespace.createContext(RenderState.Root);
-RenderStateContext.displayName = "RenderStateContext";
-class WithSSRPlaceholder extends React__namespace.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__namespace.createElement(RenderStateContext.Provider, {
-        value: RenderState.Standard
-      }, children());
-    }
-    if (placeholder) {
-      return React__namespace.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__namespace.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__namespace.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__namespace.createElement(WithSSRPlaceholder, {
-      placeholder: () => this._performRender(true)
-    }, () => this._performRender(false));
-  }
-}
-class IDProvider extends React__namespace.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__namespace.createElement(UniqueIDProvider, {
-        scope: scope,
-        mockOnFirstRender: true
-      }, ids => this.renderChildren(ids));
-    }
-  }
-}
-IDProvider.defaultId = "wb-id";
-const useRenderState = () => React.useContext(RenderStateContext);
-const {
-  useEffect,
-  useState
-} = React__namespace;
-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__namespace.createElement(React__namespace.Fragment, null, children);
-  }
-  const value = firstRender ? RenderState.Initial : RenderState.Standard;
-  return React__namespace.createElement(RenderStateContext.Provider, {
-    value: value
-  }, children);
-};
-
 const defaultConfig = null;
 const adapter = (children, config) => {
   if (config !== true) {
@@ -768,7 +393,7 @@ const adapter = (children, config) => {
       }
     });
   }
-  return React__namespace.createElement(RenderStateRoot, null, children);
+  return React__namespace.createElement(wonderBlocksCore.RenderStateRoot, null, children);
 };
 
 const DefaultAdapters = {
@@ -807,15 +432,20 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const Adapter = ({
-  children,
-  adapter,
-  config
-}) => {
-  if (config == null) {
-    return React__namespace.createElement(React__namespace.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 = ({
@@ -823,21 +453,18 @@ const Adapt = ({
   adapters,
   configs
 }) => {
-  const thisAdapterName = Object.keys(adapters).at(-1);
-  if (thisAdapterName == null) {
-    return React__namespace.createElement(React__namespace.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__namespace.createElement(Adapter, {
-    adapter: thisAdapter,
-    config: thisConfig
-  }, React__namespace.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__namespace.createElement(Adapter, {
+      key: name,
+      adapter: adapter,
+      config: theConfig
+    }, newChildren);
+  }, React__namespace.createElement(React__namespace.Fragment, null, children));
 };
 
 const makeTestHarness = (adapters, defaultConfigs) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "9.1.0",
+    "version": "9.3.0",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -14,7 +14,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.18.6",
-        "@khanacademy/wonder-blocks-data": "^13.0.0"
+        "@khanacademy/wonder-blocks-core": "^6.0.2",
+        "@khanacademy/wonder-blocks-data": "^13.0.1"
     },
     "peerDependencies": {
         "@khanacademy/wonder-stuff-core": "^1.2.2",

package/src/harness/__tests__/adapt.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {render} from "@testing-library/react";
+import {render, screen} from "@testing-library/react";
 
 import {Adapt} from "../adapt";
 
@@ -197,4 +197,52 @@ describe("Adapt", () => {
             </div>
         `);
     });
+
+    it("should not remount the component under test when rerendered", () => {
+        // Arrange
+        const MyComponent = ({value}: any) => {
+            const ref = React.useRef(value);
+
+            // If the ref matches the value, then things were just mounted
+            // as the ref was initialized with the value.
+            // If they don't match then we got re-rendered with a new value
+            // and the existing ref.
+            if (ref.current !== value) {
+                return <>RE-RENDERED</>;
+            }
+
+            return <>JUST MOUNTED</>;
+        };
+        const adapter: TestHarnessAdapter<string> = (c: any, conf: any) => (
+            <>
+                {conf}
+                {c}
+            </>
+        );
+        const adapters = {
+            adapterA: adapter,
+            adapterB: adapter,
+            adapterC: adapter,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: null,
+            adapterC: "C",
+        };
+        const {rerender} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                <MyComponent value={1} />
+            </Adapt>,
+        );
+
+        // Act
+        rerender(
+            <Adapt adapters={adapters} configs={configs}>
+                <MyComponent value={2} />
+            </Adapt>,
+        );
+
+        // Assert
+        expect(screen.getByText(/RE-RENDERED/)).toBeInTheDocument();
+    });
 });

package/src/harness/adapt.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {Adapter} from "./adapter";
+import {getNamedAdapterComponent} from "./get-named-adapter-component";
 
 import type {TestHarnessConfigs, TestHarnessAdapters} from "./types";
 
@@ -23,33 +23,19 @@ export const Adapt = <TAdapters extends TestHarnessAdapters>({
     adapters,
     configs,
 }: Props<TAdapters>): React.ReactElement => {
-    // We start at the end of the adapter list and work backwards to be
-    // compatible with previous releases.
-    const thisAdapterName = Object.keys(adapters).at(-1);
-    if (thisAdapterName == null) {
-        // There are no adapters. Just render the children.
-        return <>{children}</>;
-    }
-
-    const thisAdapter = adapters[thisAdapterName];
-    const thisConfig = configs[thisAdapterName];
-
-    // NOTE: We could simplify this by using an array of tuples as the input
-    // prop, but that complicates other things like testing and I think
-    // for simplicities sake elsewhere, this is good enough.
-    const restAdapters = Object.fromEntries(
-        Object.entries(adapters).slice(0, -1),
-    );
-    const restConfigs = Object.fromEntries(
-        // The config object may not be ordered the same as the adapters so
-        // we must filter by adapter name here.
-        Object.entries(configs).filter(([name]) => name !== thisAdapterName),
-    );
-    return (
-        <Adapter adapter={thisAdapter} config={thisConfig}>
-            <Adapt adapters={restAdapters} configs={restConfigs}>
-                {children}
-            </Adapt>
-        </Adapter>
-    );
+    // Here we reduce the adapters in order, such that each one becomes the
+    // child of the next, that way the first adapter in the list is the
+    // innermost and the last is the outermost.
+    return Object.entries(adapters).reduce((newChildren, [name, adapter]) => {
+        const theConfig = configs[name];
+        if (theConfig == null) {
+            return newChildren;
+        }
+        const Adapter = getNamedAdapterComponent(name);
+        return (
+            <Adapter key={name} adapter={adapter} config={theConfig}>
+                {newChildren}
+            </Adapter>
+        );
+    }, <>{children}</>);
 };

package/src/harness/get-named-adapter-component.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import type {TestHarnessAdapter} from "./types";
+
+type Props<TConfig = any> = {
+    children: React.ReactNode;
+    config: TConfig;
+    adapter: TestHarnessAdapter<TConfig>;
+};
+
+const componentCache = new Map<string, React.FunctionComponent<Props>>();
+
+/**
+ * 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 const getNamedAdapterComponent = (name: string) => {
+    // If we already have this component, just return it.
+    const existing = componentCache.get(name);
+    if (existing != null) {
+        return existing;
+    }
+
+    // Otherwise, create a new component, name it, cache it, and return it.
+    const newComponent: React.FunctionComponent<Props> = ({
+        children,
+        config,
+        adapter,
+    }: any) => adapter(children, config);
+    newComponent.displayName = `Adapter(${name})`;
+    componentCache.set(name, newComponent);
+    return newComponent;
+};

package/tsconfig-build.json

@@ -6,6 +6,7 @@
         "rootDir": "src",
     },
     "references": [
+        {"path": "../wonder-blocks-core/tsconfig-build.json"},
         {"path": "../wonder-blocks-data/tsconfig-build.json"},
     ]
 }