@khanacademy/wonder-blocks-testing 2.0.8 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-testing
 
+## 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
+
+-   9a43cc06: Allow for autogenerating titles in Storybook
+
+### Patch Changes
+
+-   222cb8db: Add simplified signature for common usage of `fixtures` function
+
 ## 2.0.8
 
 ### Patch Changes

package/dist/es/index.js

@@ -118,7 +118,10 @@ class Adapter {
  */
 const getAdapter = (MountingComponent = null) => new Adapter("storybook", ({
   title,
-  description: groupDescription
+  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();
 
@@ -262,6 +265,38 @@ const combineOptions = (...toBeCombined) => {
   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") {
+    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.
  *
@@ -280,7 +315,9 @@ const combineOptions = (...toBeCombined) => {
  * storybook, the popular framework, uses both default and named exports for
  * its interface.
  */
-const fixtures = (options, fn) => {
+
+
+const fixtures = (componentOrOptions, fn) => {
   var _additionalAdapterOpt;
 
   const {
@@ -293,11 +330,12 @@ const fixtures = (options, fn) => {
     description: groupDescription,
     defaultWrapper,
     additionalAdapterOptions
-  } = options; // 1. Create a new adapter group.
+  } = normalizeOptions(componentOrOptions); // 1. Create a new adapter group.
 
   const group = adapter.declareGroup({
-    title: title || component.displayName || component.name || "Component",
-    description: groupDescription
+    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) => {
@@ -319,6 +357,215 @@ const fixtures = (options, fn) => {
   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`);
+    }
+
+    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":
+      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}`);
+  }
+};
+
+/**
+ * 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;
+  } 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`);
+  }
+};
+/**
+ * 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.
+
+  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)}`);
+  }
+};
+
+/**
+ * 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 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;
+      }
+
+      if (operationMatcher.apply(void 0, [mock.operation].concat(args))) {
+        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)}`));
+  };
+
+  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;
+};
+
+/**
+ * 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
@@ -388,143 +635,11 @@ const gqlRequestMatchesMock = (mock, operation, variables, context) => {
   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 };