@khanacademy/wonder-blocks-testing 3.0.1 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/es/index.js

@@ -357,6 +357,215 @@ const fixtures = (componentOrOptions, 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
@@ -426,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 };