@khanacademy/wonder-blocks-testing 9.0.0 → 9.2.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,391 +384,16 @@ 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) {
-    throw new wonderStuffCore.KindError("Unexpected configuraiton", wonderStuffCore.Errors.InvalidInput, {
+    throw new wonderStuffCore.KindError("Unexpected configuration: set config to null to turn this adapter off", wonderStuffCore.Errors.InvalidInput, {
       metadata: {
         config
       }
     });
   }
-  return React__namespace.createElement(RenderStateRoot, null, children);
+  return React__namespace.createElement(wonderBlocksCore.RenderStateRoot, null, children);
 };
 
 const DefaultAdapters = {
@@ -807,22 +432,29 @@ 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);
-    }
-  }
-  return React__namespace.createElement(React__namespace.Fragment, null, currentChildren);
-};
+const Adapt = ({
+  children,
+  adapters,
+  configs
+}) => Object.entries(adapters).reduce((newChildren, [name, adapter]) => {
+  const config = configs[name];
+  if (config == null) {
+    return newChildren;
+  }
+  const Adapter = ({
+    children
+  }) => adapter(children, config);
+  Adapter.displayName = `Adapter(${name})`;
+  return React__namespace.createElement(Adapter, null, 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) => renderAdapters(adapters, fullConfig, React__namespace.createElement(Component, _extends({}, props, {
+    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"})`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "9.0.0",
+    "version": "9.2.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

@@ -0,0 +1,200 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Adapt} from "../adapt";
+
+import type {TestHarnessAdapter, TestHarnessConfigs} from "../types";
+
+describe("Adapt", () => {
+    it("should render children if no adapters", () => {
+        // Arrange
+        const children = <div>Adapt me!</div>;
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={{}} configs={{}}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              <div>
+                Adapt me!
+              </div>
+            </div>
+        `);
+    });
+
+    it("should invoke the adapter with its corresponding config", () => {
+        // Arrange
+        const children = <div>Adapt me!</div>;
+        const adapters = {
+            adapterA: jest
+                .fn()
+                .mockReturnValue("ADAPTER A") as TestHarnessAdapter<string>,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "APPLY A CONFIG",
+        };
+
+        // Act
+        render(
+            <Adapt adapters={adapters} configs={configs}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(adapters.adapterA).toHaveBeenCalledWith(
+            expect.anything(),
+            "APPLY A CONFIG",
+        );
+    });
+
+    it("should render each adapter and the children", () => {
+        // Arrange
+        const children = "Adapt me!";
+        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: "B",
+            adapterC: "C",
+        };
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              C
+              B
+              A
+              Adapt me!
+            </div>
+        `);
+    });
+
+    it("should skip adapters where the corresponding config is null", () => {
+        // Arrange
+        const children = "Adapt me!";
+        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",
+        };
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                {children}
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              C
+              A
+              Adapt me!
+            </div>
+        `);
+    });
+
+    it("should render such that contexts are properly setup in order", () => {
+        // Arrange
+        const MyContext = React.createContext("root");
+        const ContextRoot = ({children}: any): React.ReactElement => {
+            const value = React.useContext(MyContext);
+            if (value !== "root") {
+                throw new Error("Don't nest this");
+            }
+            return (
+                <MyContext.Provider value={"other"}>
+                    {children}
+                </MyContext.Provider>
+            );
+        };
+        const adapterNoContext: TestHarnessAdapter<string> = (
+            c: any,
+            conf: any,
+        ) => (
+            <>
+                {conf}
+                {c}
+            </>
+        );
+        const adapterWithContext: TestHarnessAdapter<string> = (
+            c: any,
+            conf: string,
+        ) => (
+            <ContextRoot>
+                {conf}
+                {c}
+            </ContextRoot>
+        );
+        const adapters = {
+            adapterA: adapterNoContext,
+            adapterB: adapterWithContext,
+            adapterC: adapterNoContext,
+        } as const;
+        const configs: TestHarnessConfigs<typeof adapters> = {
+            adapterA: "A",
+            adapterB: "B",
+            adapterC: "C",
+        };
+        const ChildComponent = (props: any): React.ReactElement => {
+            const value = React.useContext(MyContext);
+            if (value === "default") {
+                throw new Error("Context not setup properly");
+            }
+            return <div>{value}</div>;
+        };
+
+        // Act
+        const {container: result} = render(
+            <Adapt adapters={adapters} configs={configs}>
+                <ChildComponent />
+            </Adapt>,
+        );
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(`
+            <div>
+              C
+              B
+              A
+              <div>
+                other
+              </div>
+            </div>
+        `);
+    });
+});