chore(ts): api.jsx to api.tsx

package.json

@@ -22,6 +22,7 @@
     "@sentry/integrations": "5.6.0-beta.4",
     "@types/echarts": "^4.1.10",
     "@types/classnames": "^2.2.0",
+    "@types/jest": "^24.0.17",
     "@types/jquery": "^2.0.53",
     "@types/lodash": "^4.14.134",
     "@types/moment-timezone": "^0.5.12",

src/sentry/static/sentry/app/__mocks__/api.jsx → src/sentry/static/sentry/app/__mocks__/api.tsx

@@ -1,8 +1,10 @@
-const RealClient = require.requireActual('app/api');
+import * as ImportedClient from 'app/api';
+
+const RealClient: typeof ImportedClient = jest.requireActual('app/api');
 
 export class Request {}
 
-const respond = (isAsync, fn, ...args) => {
+const respond = (isAsync: boolean, fn, ...args): void => {
   if (fn) {
     if (isAsync) {
       setTimeout(() => fn(...args), 1);
@@ -16,8 +18,25 @@ const DEFAULT_MOCK_RESPONSE_OPTIONS = {
   predicate: () => true,
 };
 
+const mergeMock = jest.fn();
+
+type ResponseType = JQueryXHR & {
+  url: string;
+  statusCode: number;
+  method: string;
+  callCount: 0;
+  body: any;
+  headers: {[key: string]: string};
+};
+
 class Client {
-  static mockResponses = [];
+  static mockResponses: Array<
+    [
+      ResponseType,
+      jest.Mock,
+      (url: string, options: Readonly<ImportedClient.RequestOptions>) => boolean
+    ]
+  > = [];
 
   static clearMockResponses() {
     Client.mockResponses = [];
@@ -42,8 +61,8 @@ class Client {
     return mock;
   }
 
-  static findMockResponse(url, options) {
-    return Client.mockResponses.find(([response, mock, predicate]) => {
+  static findMockResponse(url: string, options: Readonly<ImportedClient.RequestOptions>) {
+    return Client.mockResponses.find(([response, _mock, predicate]) => {
       const matchesURL = url === response.url;
       const matchesMethod = (options.method || 'GET') === response.method;
       const matchesPredicate = predicate(url, options);
@@ -61,33 +80,43 @@ class Client {
 
   static mockAsync = false;
 
-  wrapCallback(id, error) {
+  wrapCallback(_id, error) {
     return (...args) => {
+      // @ts-ignore
       if (this.hasProjectBeenRenamed(...args)) {
         return;
       }
       respond(Client.mockAsync, error, ...args);
     };
   }
 
-  requestPromise(path, {includeAllArgs, ...options} = {}) {
+  requestPromise(
+    path,
+    {
+      includeAllArgs,
+      ...options
+    }: {includeAllArgs?: boolean} & Readonly<ImportedClient.RequestOptions> = {}
+  ) {
     return new Promise((resolve, reject) => {
       this.request(path, {
         ...options,
         success: (data, ...args) => {
           includeAllArgs ? resolve([data, ...args]) : resolve(data);
         },
-        error: (error, ...args) => {
+        error: (error, ..._args) => {
           reject(error);
         },
       });
     });
   }
 
-  request(url, options) {
-    const [response, mock] = Client.findMockResponse(url, options) || [];
+  request(url, options: Readonly<ImportedClient.RequestOptions> = {}) {
+    const [response, mock] = Client.findMockResponse(url, options) || [
+      undefined,
+      undefined,
+    ];
 
-    if (!response) {
+    if (!response || !mock) {
       // Endpoints need to be mocked
       throw new Error(
         `No mocked response found for request:\n\t${options.method || 'GET'} ${url}`
@@ -103,17 +132,33 @@ class Client {
 
       if (response.statusCode !== 200) {
         response.callCount++;
-        const resp = {
-          status: response.statusCode,
-          responseText: JSON.stringify(body),
-          responseJSON: body,
-        };
+
+        const deferred = $.Deferred();
+
+        const errorResponse: JQueryXHR = Object.assign(
+          {
+            status: response.statusCode,
+            responseText: JSON.stringify(body),
+            responseJSON: body,
+          },
+          {
+            overrideMimeType: () => {},
+            abort: () => {},
+            then: () => {},
+            error: () => {},
+          },
+          deferred,
+          new XMLHttpRequest()
+        );
         this.handleRequestError(
           {
+            id: '1234',
             path: url,
             requestOptions: options,
           },
-          resp
+          errorResponse,
+          'error',
+          'error'
         );
       } else {
         response.callCount++;
@@ -131,15 +176,18 @@ class Client {
 
     respond(Client.mockAsync, options.complete);
   }
-}
 
-Client.prototype.handleRequestError = RealClient.Client.prototype.handleRequestError;
-Client.prototype.uniqueId = RealClient.Client.prototype.uniqueId;
-Client.prototype.bulkUpdate = RealClient.Client.prototype.bulkUpdate;
-Client.prototype._chain = RealClient.Client.prototype._chain;
-Client.prototype._wrapRequest = RealClient.Client.prototype._wrapRequest;
-Client.prototype.hasProjectBeenRenamed =
-  RealClient.Client.prototype.hasProjectBeenRenamed;
-Client.prototype.merge = RealClient.Client.prototype.merge;
+  hasProjectBeenRenamed = RealClient.Client.prototype.hasProjectBeenRenamed;
+  handleRequestError = RealClient.Client.prototype.handleRequestError;
+  bulkUpdate = RealClient.Client.prototype.bulkUpdate;
+  _chain = RealClient.Client.prototype._chain;
+  _wrapRequest = RealClient.Client.prototype._wrapRequest;
+
+  merge(params, options) {
+    mergeMock(params, options);
+
+    return RealClient.Client.prototype.merge.call(this, params, options);
+  }
+}
 
-export {Client};
+export {Client, mergeMock};

src/sentry/static/sentry/app/actionCreators/events.tsx

@@ -1,3 +1,4 @@
+import {Client} from 'app/api';
 import {canIncludePreviousPeriod} from 'app/views/events/utils/canIncludePreviousPeriod';
 import {getPeriod} from 'app/utils/getPeriod';
 import {EventsStats, Organization} from 'app/types';
@@ -33,8 +34,7 @@ type Options = {
  * @param {String} options.query Search query
  */
 export const doEventsRequest = (
-  // TODO(ts): Update when we type `app/api`
-  api: any,
+  api: Client,
   {
     organization,
     project,