@khanacademy/wonder-blocks-testing 8.0.21 → 9.0.0

package/dist/index.js

@@ -6,6 +6,8 @@ var React = require('react');
 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');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -271,11 +273,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 {
@@ -300,7 +303,7 @@ const normalizeConfig = config => {
   }
   throw new Error(`Invalid config: ${config}`);
 };
-const adapter$3 = (children, config) => {
+const adapter$4 = (children, config) => {
   const {
     classes,
     style
@@ -312,8 +315,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) {
@@ -324,18 +327,18 @@ const adapter$2 = (children, config) => {
   return React__namespace.createElement(React__namespace.Fragment, null, currentChildren);
 };
 
-const defaultConfig$1 = null;
-const adapter$1 = (children, config) => React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
+const defaultConfig$2 = null;
+const adapter$2 = (children, config) => React__namespace.createElement(React__namespace.Fragment, null, React__namespace.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__namespace.createElement(React__namespace.Fragment, null, children);
   }
   return React__namespace.createElement(reactRouterDom.Switch, null, React__namespace.createElement(reactRouterDom.Route, {
     exact: true,
@@ -347,28 +350,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__namespace.createElement(reactRouterDom.StaticRouter, {
       location: config.location,
       context: {}
     }, wrappedWithRoute);
   }
-  if (typeof config.location !== "undefined") {
+  if ("location" in config && config.location !== undefined) {
     return React__namespace.createElement(reactRouterDom.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
   };
@@ -381,17 +384,406 @@ const adapter = (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, {
+      metadata: {
+        config
+      }
+    });
+  }
+  return React__namespace.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({
@@ -424,7 +816,7 @@ const renderAdapters = (adapters, configs, children) => {
       currentChildren = adapter(currentChildren, config);
     }
   }
-  return currentChildren;
+  return React__namespace.createElement(React__namespace.Fragment, null, currentChildren);
 };
 
 const makeTestHarness = (adapters, defaultConfigs) => {
@@ -440,7 +832,7 @@ const makeTestHarness = (adapters, defaultConfigs) => {
 
 const HookHarness = ({
   children
-}) => children;
+}) => React__namespace.createElement(React__namespace.Fragment, null, children);
 const makeHookHarness = (adapters, defaultConfigs) => {
   const testHarness = makeTestHarness(adapters, defaultConfigs);
   return configs => testHarness(HookHarness, configs);

package/dist/mock-requester.d.ts

@@ -1,5 +1,5 @@
-import type { OperationMock, OperationMatcher, MockFn } from "./types";
+import type { OperationMatcher, MockFn } from "./types";
 /**
  * A generic mock request function for using when mocking fetch or gqlFetch.
  */
-export declare const mockRequester: <TOperationType, TOperationMock extends OperationMock<TOperationType> = OperationMock<TOperationType>>(operationMatcher: OperationMatcher<any>, operationToString: (operationMock: TOperationMock, ...args: Array<any>) => string) => MockFn<TOperationType>;
+export declare const mockRequester: <TOperationType>(operationMatcher: OperationMatcher<any>, operationToString: (...args: Array<any>) => string) => MockFn<TOperationType>;

package/package.json

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

package/src/fetch/fetch-request-matches-mock.ts

@@ -12,10 +12,8 @@ const getHref = (input: RequestInfo): string => {
         return input;
     } else if (typeof input.url === "string") {
         return input.url;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'href' does not exist on type 'Request'.
-    } else if (typeof input.href === "string") {
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'href' does not exist on type 'Request'.
-        return input.href;
+    } else if (typeof (input as any).href === "string") {
+        return (input as any).href;
     } else {
         throw new Error(`Unsupported input type`);
     }

package/src/fetch/mock-fetch.ts

@@ -6,7 +6,7 @@ import type {FetchMockFn, FetchMockOperation} from "./types";
  * A mock for the fetch function passed to GqlRouter.
  */
 export const mockFetch = (): FetchMockFn =>
-    mockRequester<FetchMockOperation, any>(
+    mockRequester<FetchMockOperation>(
         fetchRequestMatchesMock,
         // NOTE(somewhatabstract): The indentation is expected on the lines
         // here.

package/src/fixtures/__tests__/fixtures.test.tsx

@@ -114,10 +114,9 @@ describe("fixtures", () => {
 
         it("should render the component", () => {
             // Arrange
-            const fixture = fixtures(
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(props: any) => string' is not assignable to parameter of type 'ComponentType<any>'.
-                (props: any) => `I rendered ${JSON.stringify(props)}`,
-            );
+            const fixture = fixtures((props: any) => (
+                <>{`I rendered ${JSON.stringify(props)}`}</>
+            ));
             const Fixture: any = fixture("A simple story", {});
 
             // Act
@@ -131,16 +130,12 @@ describe("fixtures", () => {
 
         it("should render the wrapper", () => {
             // Arrange
-            const fixture = fixtures(
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(props: any) => string' is not assignable to parameter of type 'ComponentType<any>'.
-                (props: any) => `I rendered ${JSON.stringify(props)}`,
-            );
-            const Fixture: any = fixture(
-                "A simple story",
-                {},
-                // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '() => string' is not assignable to parameter of type 'ComponentType<any> | undefined'.
-                () => "I am a wrapper",
-            );
+            const fixture = fixtures((props: any) => (
+                <>{`I rendered ${JSON.stringify(props)}`}</>
+            ));
+            const Fixture: any = fixture("A simple story", {}, () => (
+                <>I am a wrapper</>
+            ));
 
             // Act
             render(<Fixture aProp="aValue" />);

package/src/fixtures/fixtures.basic.stories.tsx

@@ -7,9 +7,15 @@ type Props = {
     propB?: string;
 };
 
-const MyComponent = (props: Props): React.ReactElement =>
-    // @ts-expect-error: `string` is not a valid `ReactElement`.
-    `I am a component. Here are my props: ${JSON.stringify(props, null, 2)}`;
+const MyComponent = (props: Props): React.ReactElement => (
+    <>
+        {`I am a component. Here are my props: ${JSON.stringify(
+            props,
+            null,
+            2,
+        )}`}
+    </>
+);
 
 const Wrapper = (props: any) => (
     <>

package/src/fixtures/fixtures.tsx

@@ -27,8 +27,7 @@ export const fixtures = <
     let storyNumber = 1;
 
     const getPropsOptions = {
-        // @ts-expect-error [FEI-5019] - TS7006 - Parameter 'message' implicitly has an 'any' type. | TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
-        log: (message, ...args) => action(message)(...args),
+        log: (message: string, ...args: Array<any>) => action(message)(...args),
         logHandler: action,
     } as const;
 

package/src/gql/mock-gql-fetch.ts

@@ -6,7 +6,7 @@ import type {GqlFetchMockFn, GqlMockOperation} from "./types";
  * A mock for the fetch function passed to GqlRouter.
  */
 export const mockGqlFetch = (): GqlFetchMockFn =>
-    mockRequester<GqlMockOperation<any, any, any>, any>(
+    mockRequester<GqlMockOperation<any, any, any>>(
         gqlRequestMatchesMock,
         // Note that the identation at the start of each line is important.
         // TODO(somewhatabstract): Make a stringify that indents each line of

package/src/harness/__tests__/hook-harness.test.ts

@@ -34,7 +34,8 @@ describe("#hookHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'harnessFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-hook-harness")'.
+        // @ts-expect-error We know harnessFake isn't real, we add it in the
+        // mocks at the top of this file.
         const [{harnessFake}, {hookHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-hook-harness"),
@@ -54,7 +55,8 @@ describe("#hookHarness", () => {
         const config = {
             router: "/boo",
         } as const;
-        // @ts-expect-error [FEI-5019] - TS2339 - Property 'returnValueFake' does not exist on type 'typeof import("/Users/kevinbarabash/khan/wonder-blocks/packages/wonder-blocks-testing/src/harness/make-hook-harness")'.
+        // @ts-expect-error We know harnessFake isn't real, we add it in the
+        // mocks at the top of this file.
         const [{returnValueFake}, {hookHarness}] = await ws.isolateModules(() =>
             Promise.all([
                 import("../make-hook-harness"),