@khanacademy/wonder-blocks-testing 4.0.0 → 4.0.3

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-testing
 
+## 4.0.3
+
+### Patch Changes
+
+-   Updated dependencies [e5fa4d9e]
+    -   @khanacademy/wonder-blocks-data@8.0.1
+
+## 4.0.2
+
+### Patch Changes
+
+-   Updated dependencies [1385f468]
+-   Updated dependencies [0720470e]
+-   Updated dependencies [0720470e]
+-   Updated dependencies [cf9ed87f]
+-   Updated dependencies [b882b082]
+-   Updated dependencies [0720470e]
+-   Updated dependencies [75c10036]
+-   Updated dependencies [a85f2f3a]
+-   Updated dependencies [0720470e]
+    -   @khanacademy/wonder-blocks-data@8.0.0
+
+## 4.0.1
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-data@7.0.1
+
 ## 4.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -3,17 +3,7 @@ import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { clone } from '@khanacademy/wonder-stuff-core';
 
-/**
- * Simple adapter group implementation.
- */
 class AdapterGroup {
-  /**
-   * Create an adapter group.
-   *
-   * @param {CloseGroupFn<TProps, Options, Exports>} closeGroupFn A function
-   * to invoke when the group is closed.
-   * @param {AdapterGroupOptions} options The options for the group.
-   */
   constructor(closeGroupFn, _options) {
     this.closeGroup = (adapterOptions = null) => {
       if (this._closeGroupFn == null) {
@@ -51,29 +41,10 @@ class AdapterGroup {
     this._options = _options;
     this._fixtures = [];
   }
-  /**
-   * Close the group.
-   *
-   * This declares that no more fixtures are to be added to the group,
-   * and will call the parent adapter with the declared fixtures so that they
-   * can be adapted for the target fixture framework, such as Storybook.
-   */
-
 
 }
 
-/**
- * Class for implementing a custom adapter.
- */
 class Adapter {
-  /**
-   * @param {string} name The name of the adapter.
-   * @param {CloseGroupFn<any, Options, Exports>} closeGroupFn The function
-   * an adapter group should call when the group is closed. This is invoked
-   * by an adapter group when it is closed. This function is where an
-   * adapter implements the logic to generate the actual fixtures for the
-   * adapter's target framework.
-   */
   constructor(name, closeGroupFn) {
     if (typeof name !== "string") {
       throw new TypeError("name must be a string");
@@ -90,22 +61,10 @@ class Adapter {
     this._name = name;
     this._closeGroupFn = closeGroupFn;
   }
-  /**
-   * The name of the adapter.
-   */
-
 
   get name() {
     return this._name;
   }
-  /**
-   * Declare a new fixture group.
-   *
-   * @param {AdapterGroupOptions} options The options describing the fixture
-   * group.
-   * @returns {AdapterGroupInterface} The new fixture group.
-   */
-
 
   declareGroup(options) {
     return new AdapterGroup(this._closeGroupFn, options);
@@ -113,14 +72,9 @@ class Adapter {
 
 }
 
-/**
- * Get a fixture framework adapter for Storybook support.
- */
 const getAdapter = (MountingComponent = null) => new Adapter("storybook", ({
   title,
   description: groupDescription,
-  // We don't use the default title in Storybook as storybook
-  // will generate titles for us if we pass a nullish title.
   getDefaultTitle: _
 }, adapterOptions, declaredFixtures) => {
   const templateMap = new WeakMap();
@@ -133,43 +87,22 @@ const getAdapter = (MountingComponent = null) => new Adapter("storybook", ({
     component: Component
   }, i) => {
     const storyName = `${i + 1} ${description}`;
-    const exportName = storyName // Make word boundaries start with an upper case letter.
-    .replace(/\b\w/g, c => c.toUpperCase()) // Remove all non-alphanumeric characters.
-    .replace(/[^\w]+/g, "") // Remove all underscores.
-    .replace(/[_]+/g, ""); // We create a “template” of how args map to rendering
-    // for each type of component as the component here could
-    // be the component under test, or wrapped in a wrapper
-    // component. We don't use decorators for the wrapper
-    // because we may not be in a storybook context and it
-    // keeps the framework API simpler this way.
-
+    const exportName = storyName.replace(/\b\w/g, c => c.toUpperCase()).replace(/[^\w]+/g, "").replace(/[_]+/g, "");
     let Template = templateMap.get(Component);
 
     if (Template == null) {
-      // The MountingComponent is a bit different than just a
-      // Storybook decorator. It's a React component that
-      // takes over rendering the component in the fixture
-      // with the given args, allowing for greater
-      // customization in a platform-agnostic manner (i.e.
-      // not just story format).
-      Template = MountingComponent ? args => /*#__PURE__*/React.createElement(MountingComponent, {
+      Template = MountingComponent ? args => React.createElement(MountingComponent, {
         component: Component,
         props: args,
         log: log
-      }) : args => /*#__PURE__*/React.createElement(Component, args);
+      }) : args => React.createElement(Component, args);
       templateMap.set(Component, Template);
-    } // Each story that shares that component then reuses that
-    // template.
-
+    }
 
     acc[exportName] = Template.bind({});
     acc[exportName].args = getProps({
       log
-    }); // Adding a story name here means that we don't have to
-    // care about naming the exports correctly, if we don't
-    // want (useful if we need to autogenerate or manually
-    // expose ESM exports).
-
+    });
     acc[exportName].storyName = storyName;
     return acc;
   }, {
@@ -186,20 +119,9 @@ var adapters = /*#__PURE__*/Object.freeze({
 });
 
 let _configuration = null;
-/**
- * Setup the fixture framework.
- */
-
 const setup = configuration => {
   _configuration = configuration;
 };
-/**
- * Get the framework configuration.
- *
- * @returns {Configuration} The configuration as provided via setup().
- * @throws {Error} If the configuration has not been set.
- */
-
 const getConfiguration = () => {
   if (_configuration == null) {
     throw new Error("Not configured");
@@ -208,26 +130,8 @@ const getConfiguration = () => {
   return _configuration;
 };
 
-/**
- * Combine two values.
- *
- * This method clones val2 before using any of its properties to try to ensure
- * the combined object is not linked back to the original.
- *
- * If the values are objects, it will merge them at the top level. Properties
- * themselves are not merged; val2 properties will overwrite val1 where there
- * are conflicts
- *
- * If the values are arrays, it will concatenate and dedupe them.
- * NOTE: duplicates in either val1 or val2 will also be deduped.
- *
- * If the values are any other type, or val2 has a different type to val1, val2
- * will be returned.
- */
-
 const combineTopLevel = (val1, val2) => {
-  const obj2Clone = clone(val2); // Only merge if they're both arrays or both objects.
-  // If not, we will just return val2.
+  const obj2Clone = clone(val2);
 
   if (val1 !== null && val2 !== null && typeof val1 === "object" && typeof val2 === "object") {
     const val1IsArray = Array.isArray(val1);
@@ -243,79 +147,26 @@ const combineTopLevel = (val1, val2) => {
   return obj2Clone;
 };
 
-/**
- * Combine one or more objects into a single object.
- *
- * Objects later in the argument list take precedence over those that are
- * earlier. Object and array values at the root level are merged.
- */
-
 const combineOptions = (...toBeCombined) => {
   const combined = toBeCombined.filter(Boolean).reduce((acc, cur) => {
     for (const key of Object.keys(cur)) {
-      // We always call combine, even if acc[key] is undefined
-      // because we need to make sure we clone values.
       acc[key] = combineTopLevel(acc[key], cur[key]);
     }
 
     return acc;
-  }, {}); // We know that we are creating a compatible return type.
-  // $FlowIgnore[incompatible-return]
-
+  }, {});
   return combined;
 };
 
 const normalizeOptions = componentOrOptions => {
-  // To differentiate between a React component and a FixturesOptions object,
-  // we have to do some type checking.
-  //
-  // Alternatives I considered were:
-  // - Use an additional parameter for the options and then do an arg number
-  //   check, but that always makes typing a function harder and often breaks
-  //   types. I didn't want that battle today.
-  // - Use a tuple when providing component and options with the first element
-  //   being the component and the second being the options. However that
-  //   feels like an obscure API even though it's really easy to do the
-  //   typing.
-  if ( // Most React components, whether functional or class-based, are
-  // inherently functions in JavaScript, so a check for functions is
-  // usually sufficient.
-  typeof componentOrOptions === "function" || // However, the return of React.forwardRef is not a function,
-  // so we also have to cope with that.
-  // A forwardRef has $$typeof = Symbol(react.forward_ref) and a
-  // render function.
-  // $FlowIgnore[prop-missing]
-  typeof componentOrOptions.render === "function") {
+  if (typeof componentOrOptions === "function" || typeof componentOrOptions.render === "function") {
     return {
-      // $FlowIgnore[incompatible-return]
       component: componentOrOptions
     };
-  } // We can't test for React.ComponentType at runtime.
-  // Let's assume our simple heuristic above is sufficient.
-  // $FlowIgnore[incompatible-return]
-
+  }
 
   return componentOrOptions;
 };
-/**
- * Describe a group of fixtures for a given component.
- *
- * Only one `fixtures` call should be used per fixture file as it returns
- * the exports for that file.
- *
- * @param {FixtureOptions<TProps>} options Options describing the
- * fixture group.
- * @param {FixtureFn<TProps> => void} fn A function that provides a `fixture`
- * function for defining fixtures.
- * @returns {Exports} The object to be exported as `module.exports`.
- *
- * TODO(somewhatabstract): Determine a way around this requirement so we
- * can support named exports and default exports via the adapters in a
- * deterministic way. Currently this is imposed on us because of how
- * storybook, the popular framework, uses both default and named exports for
- * its interface.
- */
-
 
 const fixtures = (componentOrOptions, fn) => {
   var _additionalAdapterOpt;
@@ -330,13 +181,12 @@ const fixtures = (componentOrOptions, fn) => {
     description: groupDescription,
     defaultWrapper,
     additionalAdapterOptions
-  } = normalizeOptions(componentOrOptions); // 1. Create a new adapter group.
-
+  } = normalizeOptions(componentOrOptions);
   const group = adapter.declareGroup({
     title,
     description: groupDescription,
     getDefaultTitle: () => component.displayName || component.name || "Component"
-  }); // 2. Invoke fn with a function that can add a new fixture.
+  });
 
   const addFixture = (description, props, wrapper = null) => {
     var _ref;
@@ -348,86 +198,38 @@ const fixtures = (componentOrOptions, fn) => {
     });
   };
 
-  fn(addFixture); // 3. Combine the adapter options from the fixture group with the
-  //    defaults from our setup.
-
+  fn(addFixture);
   const groupAdapterOverrides = (_additionalAdapterOpt = additionalAdapterOptions == null ? void 0 : additionalAdapterOptions[adapter.name]) != null ? _additionalAdapterOpt : {};
-  const combinedAdapterOptions = combineOptions(defaultAdapterOptions, groupAdapterOverrides); // 4. Call close on the group and return the result.
-
+  const combinedAdapterOptions = combineOptions(defaultAdapterOptions, groupAdapterOverrides);
   return group.closeGroup(combinedAdapterOptions);
 };
 
-// We need a version of Response. When we're in Jest JSDOM environment or a
-// version of Node that supports the fetch API (17 and up, possibly with
-// --experimental-fetch flag), then we're good, but otherwise we need an
-// implementation, so this uses node-fetch as a peer dependency and uses that
-// to provide the implementation if we don't already have one.
 const ResponseImpl = typeof Response === "undefined" ? require("node-fetch").Response : Response;
 
-/**
- * Helper for creating a text-based mock response.
- */
 const textResponse = (text, statusCode = 200) => ({
   type: "text",
   text,
   statusCode
 });
-/**
- * Helper for creating a rejected mock response.
- */
-
 
 const rejectResponse = error => ({
   type: "reject",
   error
 });
-/**
- * Helpers to define mock responses for mocked requests.
- */
-
 
 const RespondWith = Object.freeze({
-  /**
-   * Response with text body and status code.
-   * Status code defaults to 200.
-   */
   text: (text, statusCode = 200) => textResponse(text, statusCode),
-
-  /**
-   * Response with JSON body and status code 200.
-   */
   json: json => textResponse(() => JSON.stringify(json)),
-
-  /**
-   * Response with GraphQL data JSON body and status code 200.
-   */
   graphQLData: data => textResponse(() => JSON.stringify({
     data
   })),
-
-  /**
-   * Response with body that will not parse as JSON and status code 200.
-   */
   unparseableBody: () => textResponse("INVALID JSON"),
-
-  /**
-   * Rejects with an AbortError to simulate an aborted request.
-   */
   abortedRequest: () => rejectResponse(() => {
     const abortError = new Error("Mock request aborted");
     abortError.name = "AbortError";
     return abortError;
   }),
-
-  /**
-   * Rejects with the given error.
-   */
   reject: error => rejectResponse(error),
-
-  /**
-   * A non-200 status code with empty text body.
-   * Equivalent to calling `ResponseWith.text("", statusCode)`.
-   */
   errorStatusCode: statusCode => {
     if (statusCode < 300) {
       throw new Error(`${statusCode} is not a valid error status code`);
@@ -435,28 +237,16 @@ const RespondWith = Object.freeze({
 
     return textResponse("{}", statusCode);
   },
-
-  /**
-   * Response body that is valid JSON but not a valid GraphQL response.
-   */
   nonGraphQLBody: () => textResponse(() => JSON.stringify({
     valid: "json",
     that: "is not a valid graphql response"
   })),
-
-  /**
-   * Response that is a GraphQL errors response with status code 200.
-   */
   graphQLErrors: errorMessages => textResponse(() => JSON.stringify({
     errors: errorMessages.map(e => ({
       message: e
     }))
   }))
 });
-/**
- * Turns a MockResponse value to an actual Response that represents the mock.
- */
-
 const makeMockResponse = response => {
   switch (response.type) {
     case "text":
@@ -474,13 +264,6 @@ const makeMockResponse = response => {
   }
 };
 
-/**
- * Get the URL from the given RequestInfo.
- *
- * Since we could be running in Node or in JSDOM, we don't check instance
- * types, but just use a heuristic so that this works without knowing what
- * was polyfilling things.
- */
 const getHref = input => {
   if (typeof input === "string") {
     return input;
@@ -492,15 +275,9 @@ const getHref = input => {
     throw new Error(`Unsupported input type`);
   }
 };
-/**
- * Determines if a given fetch invocation matches the given mock.
- */
-
 
 const fetchRequestMatchesMock = (mock, input, init) => {
-  // Currently, we only match on the input portion.
-  // This can be a Request, a URL, or a string.
-  const href = getHref(input); // Our mock operation is either a string for an exact match, or a regex.
+  const href = getHref(input);
 
   if (typeof mock === "string") {
     return href === mock;
@@ -511,21 +288,12 @@ const fetchRequestMatchesMock = (mock, input, init) => {
   }
 };
 
-/**
- * A generic mock request function for using when mocking fetch or gqlFetch.
- */
 const mockRequester = (operationMatcher, operationToString) => {
-  // We want this to work in jest and in fixtures to make life easy for folks.
-  // This is the array of mocked operations that we will traverse and
-  // manipulate.
-  const mocks = []; // What we return has to be a drop in for the fetch function that is
-  // provided to `GqlRouter` which is how folks will then use this mock.
+  const mocks = [];
 
   const mockFn = (...args) => {
-    // Iterate our mocked operations and find the first one that matches.
     for (const mock of mocks) {
       if (mock.onceOnly && mock.used) {
-        // This is a once-only mock and it has been used, so skip it.
         continue;
       }
 
@@ -533,9 +301,7 @@ const mockRequester = (operationMatcher, operationToString) => {
         mock.used = true;
         return mock.response();
       }
-    } // Default is to reject with some helpful info on what request
-    // we rejected.
-
+    }
 
     return Promise.reject(new Error(`No matching mock response found for request:
     ${operationToString.apply(void 0, args)}`));
@@ -560,19 +326,10 @@ const mockRequester = (operationMatcher, operationToString) => {
   return mockFn;
 };
 
-/**
- * A mock for the fetch function passed to GqlRouter.
- */
 const mockFetch = () => mockRequester(fetchRequestMatchesMock, (input, init) => `Input: ${typeof input === "string" ? input : JSON.stringify(input, null, 2)}
     Options: ${init == null ? "None" : JSON.stringify(init, null, 2)}`);
 
-const safeHasOwnProperty = (obj, prop) => // Flow really shouldn't be raising this error here.
-// $FlowFixMe[method-unbinding]
-Object.prototype.hasOwnProperty.call(obj, prop); // TODO(somewhatabstract, FEI-4268): use a third-party library to do this and
-// possibly make it also support the jest `jest.objectContaining` type matching
-// to simplify mock declaration (note that it would need to work in regular
-// tests and stories/fixtures).
-
+const safeHasOwnProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 
 const areObjectsEqual = (a, b) => {
   if (a === b) {
@@ -606,38 +363,25 @@ const areObjectsEqual = (a, b) => {
 };
 
 const gqlRequestMatchesMock = (mock, operation, variables, context) => {
-  // If they don't represent the same operation, then they can't match.
-  // NOTE: Operations can include more fields than id and type, but we only
-  // care about id and type. The rest is ignored.
   if (mock.operation.id !== operation.id || mock.operation.type !== operation.type) {
     return false;
-  } // We do a loose match, so if the lhs doesn't define variables,
-  // we just assume it matches everything.
-
+  }
 
   if (mock.variables != null) {
-    // Variables have to match.
     if (!areObjectsEqual(mock.variables, variables)) {
       return false;
     }
-  } // We do a loose match, so if the lhs doesn't define context,
-  // we just assume it matches everything.
-
+  }
 
   if (mock.context != null) {
-    // Context has to match.
     if (!areObjectsEqual(mock.context, context)) {
       return false;
     }
-  } // If we get here, we have a match.
-
+  }
 
   return true;
 };
 
-/**
- * A mock for the fetch function passed to GqlRouter.
- */
 const mockGqlFetch = () => mockRequester(gqlRequestMatchesMock, (operation, variables, context) => `Operation: ${operation.type} ${operation.id}
     Variables: ${variables == null ? "None" : JSON.stringify(variables, null, 2)}
     Context: ${JSON.stringify(context, null, 2)}`);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "4.0.0",
+    "version": "4.0.3",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.16.3",
-        "@khanacademy/wonder-blocks-data": "^7.0.0"
+        "@khanacademy/wonder-blocks-data": "^8.0.1"
     },
     "peerDependencies": {
         "@khanacademy/wonder-stuff-core": "^0.1.2",
@@ -24,7 +24,7 @@
         "react": "16.14.0"
     },
     "devDependencies": {
-        "wb-dev-build-settings": "^0.3.0"
+        "wb-dev-build-settings": "^0.4.0"
     },
     "author": "",
     "license": "MIT"