@khanacademy/wonder-blocks-testing 3.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-testing
 
+## 4.0.1
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-data@7.0.1
+
+## 4.0.0
+
+### Major Changes
+
+-   fce91b39: Introduced `mockFetch` and expanded `RespondWith` options. `RespondWith` responses will now be real `Response` instances (needs node-fetch peer dependency if no other implementation exists). Breaking changes: `RespondWith.data` is now `RespondWith.graphQLData`.
+
+## 3.0.1
+
+### Patch Changes
+
+-   6e4fbeed: Make sure simplified fixtures call copes with return values from React.forwardRef
+
 ## 3.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,72 +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. Since all React components, whether
-  // functional or class-based, are inherently functions in JavaScript
-  // this should do the trick without relying on internal React details like
-  // protoype.isReactComponent. This should be sufficient for our purposes.
-  // 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 (typeof componentOrOptions === "function") {
+  if (typeof componentOrOptions === "function" || typeof componentOrOptions.render === "function") {
     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;
@@ -323,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;
@@ -341,22 +198,138 @@ 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);
 };
 
-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 ResponseImpl = typeof Response === "undefined" ? require("node-fetch").Response : Response;
+
+const textResponse = (text, statusCode = 200) => ({
+  type: "text",
+  text,
+  statusCode
+});
+
+const rejectResponse = error => ({
+  type: "reject",
+  error
+});
+
+const RespondWith = Object.freeze({
+  text: (text, statusCode = 200) => textResponse(text, statusCode),
+  json: json => textResponse(() => JSON.stringify(json)),
+  graphQLData: data => textResponse(() => JSON.stringify({
+    data
+  })),
+  unparseableBody: () => textResponse("INVALID JSON"),
+  abortedRequest: () => rejectResponse(() => {
+    const abortError = new Error("Mock request aborted");
+    abortError.name = "AbortError";
+    return abortError;
+  }),
+  reject: error => rejectResponse(error),
+  errorStatusCode: statusCode => {
+    if (statusCode < 300) {
+      throw new Error(`${statusCode} is not a valid error status code`);
+    }
+
+    return textResponse("{}", statusCode);
+  },
+  nonGraphQLBody: () => textResponse(() => JSON.stringify({
+    valid: "json",
+    that: "is not a valid graphql response"
+  })),
+  graphQLErrors: errorMessages => textResponse(() => JSON.stringify({
+    errors: errorMessages.map(e => ({
+      message: e
+    }))
+  }))
+});
+const makeMockResponse = response => {
+  switch (response.type) {
+    case "text":
+      const text = typeof response.text === "function" ? response.text() : response.text;
+      return Promise.resolve(new ResponseImpl(text, {
+        status: response.statusCode
+      }));
+
+    case "reject":
+      const error = response.error instanceof Error ? response.error : response.error();
+      return Promise.reject(error);
+
+    default:
+      throw new Error(`Unknown response type: ${response.type}`);
+  }
+};
+
+const getHref = input => {
+  if (typeof input === "string") {
+    return input;
+  } else if (typeof input.url === "string") {
+    return input.url;
+  } else if (typeof input.href === "string") {
+    return input.href;
+  } else {
+    throw new Error(`Unsupported input type`);
+  }
+};
+
+const fetchRequestMatchesMock = (mock, input, init) => {
+  const href = getHref(input);
 
+  if (typeof mock === "string") {
+    return href === mock;
+  } else if (mock instanceof RegExp) {
+    return mock.test(href);
+  } else {
+    throw new Error(`Unsupported mock operation: ${JSON.stringify(mock)}`);
+  }
+};
+
+const mockRequester = (operationMatcher, operationToString) => {
+  const mocks = [];
+
+  const mockFn = (...args) => {
+    for (const mock of mocks) {
+      if (mock.onceOnly && mock.used) {
+        continue;
+      }
+
+      if (operationMatcher.apply(void 0, [mock.operation].concat(args))) {
+        mock.used = true;
+        return mock.response();
+      }
+    }
+
+    return Promise.reject(new Error(`No matching mock response found for request:
+    ${operationToString.apply(void 0, args)}`));
+  };
+
+  const addMockedOperation = (operation, response, onceOnly) => {
+    const mockResponse = () => makeMockResponse(response);
+
+    mocks.push({
+      operation,
+      response: mockResponse,
+      onceOnly,
+      used: false
+    });
+    return mockFn;
+  };
+
+  mockFn.mockOperation = (operation, response) => addMockedOperation(operation, response, false);
+
+  mockFn.mockOperationOnce = (operation, response) => addMockedOperation(operation, response, true);
+
+  return mockFn;
+};
+
+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) => Object.prototype.hasOwnProperty.call(obj, prop);
 
 const areObjectsEqual = (a, b) => {
   if (a === b) {
@@ -390,172 +363,27 @@ 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;
 };
 
-/**
- * Helpers to define rejection states for mocking GQL requests.
- */
-const RespondWith = Object.freeze({
-  data: data => ({
-    type: "data",
-    data
-  }),
-  unparseableBody: () => ({
-    type: "parse"
-  }),
-  abortedRequest: () => ({
-    type: "abort"
-  }),
-  errorStatusCode: statusCode => {
-    if (statusCode < 300) {
-      throw new Error(`${statusCode} is not a valid error status code`);
-    }
-
-    return {
-      type: "status",
-      statusCode
-    };
-  },
-  nonGraphQLBody: () => ({
-    type: "invalid"
-  }),
-  graphQLErrors: errorMessages => ({
-    type: "graphql",
-    errors: errorMessages
-  })
-});
-/**
- * Turns an ErrorResponse value in an actual Response that will invoke
- * that error.
- */
-
-const makeGqlMockResponse = response => {
-  switch (response.type) {
-    case "data":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve(JSON.stringify({
-          data: response.data
-        }))
-      });
-
-    case "parse":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve("INVALID JSON")
-      });
-
-    case "abort":
-      const abortError = new Error("Mock request aborted");
-      abortError.name = "AbortError";
-      return Promise.reject(abortError);
-
-    case "status":
-      return Promise.resolve({
-        status: response.statusCode,
-        text: () => Promise.resolve(JSON.stringify({}))
-      });
-
-    case "invalid":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve(JSON.stringify({
-          valid: "json",
-          that: "is not a valid graphql response"
-        }))
-      });
-
-    case "graphql":
-      return Promise.resolve({
-        status: 200,
-        text: () => Promise.resolve(JSON.stringify({
-          errors: response.errors.map(e => ({
-            message: e
-          }))
-        }))
-      });
-
-    default:
-      throw new Error(`Unknown response type: ${response.type}`);
-  }
-};
-
-/**
- * A mock for the fetch function passed to GqlRouter.
- */
-const mockGqlFetch = () => {
-  // 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 gqlFetchMock = (operation, variables, context) => {
-    // 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;
-      }
-
-      if (gqlRequestMatchesMock(mock.operation, operation, variables, context)) {
-        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 GraphQL mock response found for request:
-    Operation: ${operation.type} ${operation.id}
+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)}`));
-  };
-
-  const addMockedOperation = (operation, response, onceOnly) => {
-    const mockResponse = () => makeGqlMockResponse(response);
-
-    mocks.push({
-      operation,
-      response: mockResponse,
-      onceOnly,
-      used: false
-    });
-    return gqlFetchMock;
-  };
-
-  gqlFetchMock.mockOperation = (operation, response) => addMockedOperation(operation, response, false);
-
-  gqlFetchMock.mockOperationOnce = (operation, response) => addMockedOperation(operation, response, true);
-
-  return gqlFetchMock;
-};
+    Context: ${JSON.stringify(context, null, 2)}`);
 
-export { RespondWith, adapters, fixtures, mockGqlFetch, setup as setupFixtures };
+export { RespondWith, adapters, fixtures, mockFetch, mockGqlFetch, setup as setupFixtures };