Migrating SkillMasteryApiService

core/templates/dev/head/domain/skill/skill-mastery-backend-api.service.spec.ts

@@ -16,117 +16,131 @@
  * @fileoverview Unit tests for SkillMasteryBackendApiService.
  */
 
-require('domain/skill/skill-mastery-backend-api.service.ts');
-// TODO(#7222): Remove the following block of unnnecessary imports once
-// the code corresponding to the spec is upgraded to Angular 8.
-import { UpgradedServices } from 'services/UpgradedServices';
-// ^^^ This block is to be removed.
-
-describe('Skill mastery backend API service', function() {
-  var SkillMasteryBackendApiService = null;
-  var $httpBackend = null;
-  var CsrfService = null;
-  var masteryPerSkillMapping = null;
-  var sampleResponse = null;
-
-  beforeEach(angular.mock.module('oppia'));
-  beforeEach(angular.mock.module('oppia', function($provide) {
-    var ugs = new UpgradedServices();
-    for (let [key, value] of Object.entries(ugs.getUpgradedServices())) {
-      $provide.value(key, value);
-    }
-  }));
-
-  beforeEach(angular.mock.inject(function($injector, $q) {
-    SkillMasteryBackendApiService = $injector.get(
-      'SkillMasteryBackendApiService');
-    $httpBackend = $injector.get('$httpBackend');
-    CsrfService = $injector.get('CsrfTokenService');
-
-    spyOn(CsrfService, 'getTokenAsync').and.callFake(function() {
-      var deferred = $q.defer();
-      deferred.resolve('sample-csrf-token');
-      return deferred.promise;
+import { fakeAsync, flushMicrotasks, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from
+  '@angular/common/http/testing';
+
+import { CsrfTokenService } from 'services/csrf-token.service';
+import { SkillMasteryBackendApiService } from
+  'domain/skill/skill-mastery-backend-api.service';
+
+describe('Skill mastery backend API service', () => {
+  let skillMasteryBackendApiService: SkillMasteryBackendApiService = null;
+  let csrfService: CsrfTokenService = null;
+  let masteryPerSkillMapping: {[key: string]: number} = null;
+  let sampleResponse = null;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [SkillMasteryBackendApiService]
     });
 
-    var masteryPerSkillMapping = {
+    skillMasteryBackendApiService = TestBed.get(SkillMasteryBackendApiService);
+    csrfService = TestBed.get(CsrfTokenService);
+    httpTestingController = TestBed.get(HttpTestingController);
+
+    spyOn(csrfService, 'getTokenAsync').and.callFake(function() {
+      return Promise.resolve('sample-csrf-token');
+    });
+
+    let masteryPerSkillMapping = {
       skillId1: 0.3,
       skillId2: 0.5
     };
 
     sampleResponse = {
       degrees_of_mastery: masteryPerSkillMapping
     };
-  }));
+  });
 
-  afterEach(function() {
-    $httpBackend.verifyNoOutstandingExpectation();
-    $httpBackend.verifyNoOutstandingRequest();
+  afterEach(() => {
+    httpTestingController.verify();
   });
 
-  it('should succesfully fetch the skill mastery degrees from the backend',
-    function() {
-      var successHandler = jasmine.createSpy('success');
-      var failHandler = jasmine.createSpy('fail');
+  it('should successfully fetch the skill mastery degrees from the backend',
+    fakeAsync(() => {
+      let successHandler = jasmine.createSpy('success');
+      let failHandler = jasmine.createSpy('fail');
 
-      var requestUrl = '/skill_mastery_handler/data' +
+      let requestUrl = '/skill_mastery_handler/data' +
         '?comma_separated_skill_ids=skillId1,skillId2';
 
-      $httpBackend.expect('GET', requestUrl).respond(
-        sampleResponse);
-      SkillMasteryBackendApiService.fetchSkillMasteryDegrees(
+      skillMasteryBackendApiService.fetchSkillMasteryDegrees(
         ['skillId1', 'skillId2']).then(successHandler, failHandler);
-      $httpBackend.flush();
+
+      const req = httpTestingController.expectOne(requestUrl);
+      expect(req.request.method).toEqual('GET');
+      req.flush(sampleResponse);
+
+      flushMicrotasks();
 
       expect(successHandler).toHaveBeenCalledWith(
         sampleResponse.degrees_of_mastery);
       expect(failHandler).not.toHaveBeenCalled();
-    });
+    }));
 
   it('should use the rejection handler if backend request failed',
-    function() {
-      var successHandler = jasmine.createSpy('success');
-      var failHandler = jasmine.createSpy('fail');
+    fakeAsync(() => {
+      let successHandler = jasmine.createSpy('success');
+      let failHandler = jasmine.createSpy('fail');
 
-      var requestUrl = '/skill_mastery_handler/data' +
+      let requestUrl = '/skill_mastery_handler/data' +
         '?comma_separated_skill_ids=skillId1,skillId2';
 
-      $httpBackend.expect('GET', requestUrl).respond(
-        500, 'Error fetching skill mastery.');
-      SkillMasteryBackendApiService.fetchSkillMasteryDegrees(
+      skillMasteryBackendApiService.fetchSkillMasteryDegrees(
         ['skillId1', 'skillId2']).then(successHandler, failHandler);
-      $httpBackend.flush();
+
+      const req = httpTestingController.expectOne(requestUrl);
+      expect(req.request.method).toEqual('GET');
+      req.flush(null, {
+        status: 500, statusText: 'Error fetching skill mastery.'
+      });
+
+      flushMicrotasks();
 
       expect(successHandler).not.toHaveBeenCalled();
-      expect(failHandler).toHaveBeenCalledWith('Error fetching skill mastery.');
-    });
+      expect(failHandler).toHaveBeenCalled();
+    }));
 
-  it('should succesfully update the skill mastery degrees in the backend',
-    function() {
-      var successHandler = jasmine.createSpy('success');
-      var failHandler = jasmine.createSpy('fail');
+  it('should successfully update the skill mastery degrees in the backend',
+    fakeAsync(() => {
+      let successHandler = jasmine.createSpy('success');
+      let failHandler = jasmine.createSpy('fail');
 
-      $httpBackend.expect('PUT', '/skill_mastery_handler/data').respond();
-      SkillMasteryBackendApiService.updateSkillMasteryDegrees(
+      skillMasteryBackendApiService.updateSkillMasteryDegrees(
         masteryPerSkillMapping).then(successHandler, failHandler);
-      $httpBackend.flush();
+
+      const req = httpTestingController.expectOne(
+        '/skill_mastery_handler/data');
+      expect(req.request.method).toEqual('PUT');
+      req.flush(null);
+
+      flushMicrotasks();
 
       expect(successHandler).toHaveBeenCalled();
       expect(failHandler).not.toHaveBeenCalled();
-    });
+    }));
 
   it('should use the rejection handler if backend request failed',
-    function() {
-      var successHandler = jasmine.createSpy('success');
-      var failHandler = jasmine.createSpy('fail');
+    fakeAsync(() => {
+      let successHandler = jasmine.createSpy('success');
+      let failHandler = jasmine.createSpy('fail');
 
-      $httpBackend.expect('PUT', '/skill_mastery_handler/data').respond(
-        500, 'Error updating skill mastery.');
-      SkillMasteryBackendApiService.updateSkillMasteryDegrees(
+      skillMasteryBackendApiService.updateSkillMasteryDegrees(
         masteryPerSkillMapping).then(successHandler, failHandler);
-      $httpBackend.flush();
+
+      const req = httpTestingController.expectOne(
+        '/skill_mastery_handler/data');
+      expect(req.request.method).toEqual('PUT');
+      req.flush(null, {
+        status: 500, statusText: 'Error updating skill mastery.'
+      });
+
+      flushMicrotasks();
 
       expect(successHandler).not.toHaveBeenCalled();
-      expect(failHandler).toHaveBeenCalledWith('Error updating skill mastery.');
-    });
+      expect(failHandler).toHaveBeenCalled();
+    }));
 });

core/templates/dev/head/domain/skill/skill-mastery-backend-api.service.ts

@@ -16,56 +16,69 @@
  * @fileoverview Service to send changes to skill mastery to the backend.
  */
 
-angular.module('oppia').factory('SkillMasteryBackendApiService', [
-  '$http', '$q', 'SKILL_MASTERY_DATA_URL_TEMPLATE',
-  function(
-      $http, $q, SKILL_MASTERY_DATA_URL_TEMPLATE) {
-    var _fetchSkillMasteryDegrees = function(
-        skillIds, successCallback, errorCallback) {
-      $http.get(SKILL_MASTERY_DATA_URL_TEMPLATE, {
-        params: {
-          comma_separated_skill_ids: skillIds.join(',')
-        }
-      }).then(
-        function(response) {
-          if (successCallback) {
-            successCallback(response.data.degrees_of_mastery);
-          }
-        }, function(errorResponse) {
-          if (errorCallback) {
-            errorCallback(errorResponse.data);
-          }
-        });
-    };
+import { downgradeInjectable } from '@angular/upgrade/static';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 
-    var _updateSkillMasteryDegrees = function(
-        masteryPerSkillMapping, successCallback, errorCallback) {
-      var putData = {
-        mastery_change_per_skill: masteryPerSkillMapping
-      };
-      $http.put(SKILL_MASTERY_DATA_URL_TEMPLATE, putData).then(
-        function(response) {
-          if (successCallback) {
-            successCallback();
-          }
-        }, function(errorResponse) {
-          if (errorCallback) {
-            errorCallback(errorResponse.data);
-          }
-        });
-    };
+import { SkillDomainConstants } from 'domain/skill/skill-domain.constants';
 
-    return {
-      fetchSkillMasteryDegrees: function(skillIds) {
-        return $q(function(resolve, reject) {
-          _fetchSkillMasteryDegrees(skillIds, resolve, reject);
-        });
-      },
-      updateSkillMasteryDegrees: function(masteryPerSkillMapping) {
-        return $q(function(resolve, reject) {
-          _updateSkillMasteryDegrees(masteryPerSkillMapping, resolve, reject);
-        });
+@Injectable({
+  providedIn: 'root'
+})
+export class SkillMasteryBackendApiService {
+  constructor(private httpClient: HttpClient) {}
+
+  _fetchSkillMasteryDegrees(skillIds: Array<string>,
+      successCallback: (value?: Object | PromiseLike<Object>) => void,
+      errorCallback: (reason?: any) => void): void {
+    this.httpClient.get(SkillDomainConstants.SKILL_MASTERY_DATA_URL_TEMPLATE, {
+      params: {
+        comma_separated_skill_ids: skillIds.join(',')
+      }
+    }).toPromise().then((response: any) => {
+      if (successCallback) {
+        successCallback(response.degrees_of_mastery);
       }
+    }, (errorResponse) =>{
+      if (errorCallback) {
+        errorCallback(errorResponse);
+      }
+    });
+  }
+
+  _updateSkillMasteryDegrees(masteryPerSkillMapping: {[key: string]: number},
+      successCallback: (value?: Object | PromiseLike<Object>) => void,
+      errorCallback: (reason?: any) => void): void {
+    let putData = {
+      mastery_change_per_skill: masteryPerSkillMapping
     };
+
+    this.httpClient.put(SkillDomainConstants.SKILL_MASTERY_DATA_URL_TEMPLATE,
+      putData).toPromise().then((response: any) => {
+      if (successCallback) {
+        successCallback();
+      }
+    }, (errorResponse) => {
+      if (errorCallback) {
+        errorCallback(errorResponse);
+      }
+    });
+  }
+
+  fetchSkillMasteryDegrees(skillIds: Array<string>): Promise<Object> {
+    return new Promise((resolve, reject) => {
+      this._fetchSkillMasteryDegrees(skillIds, resolve, reject);
+    });
   }
-]);
+
+  updateSkillMasteryDegrees(
+      masteryPerSkillMapping: {[key: string]: number}): Promise<Object> {
+    return new Promise((resolve, reject) => {
+      this._updateSkillMasteryDegrees(masteryPerSkillMapping, resolve, reject);
+    });
+  }
+}
+
+angular.module('oppia').factory(
+  'SkillMasteryBackendApiService',
+  downgradeInjectable(SkillMasteryBackendApiService));

core/templates/dev/head/pages/practice-session-page/practice-session-page.module.ts

@@ -19,10 +19,10 @@
 import 'core-js/es7/reflect';
 import 'zone.js';
 
-import { Component, NgModule, StaticProvider } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { Component, NgModule, StaticProvider } from '@angular/core';
 import { downgradeComponent } from '@angular/upgrade/static';
-import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 
 // This component is needed to force-bootstrap Angular at the beginning of the
 // app.
@@ -37,11 +37,12 @@ import { InteractionsExtensionsConstants } from
   'interactions/interactions-extension.constants';
 import { ObjectsDomainConstants } from
   'domain/objects/objects-domain.constants';
+import { PracticeSessionPageConstants } from
+  'pages/practice-session-page/practice-session-page.constants';
 import { QuestionPlayerConstants } from
   'components/question-directives/question-player/question-player.constants';
+import { RequestInterceptor } from 'services/request-interceptor.service';
 import { ServicesConstants } from 'services/services.constants';
-import { PracticeSessionPageConstants } from
-  'pages/practice-session-page/practice-session-page.constants';
 
 @NgModule({
   imports: [
@@ -55,6 +56,11 @@ import { PracticeSessionPageConstants } from
     ServiceBootstrapComponent
   ],
   providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: RequestInterceptor,
+      multi: true
+    },
     AppConstants,
     InteractionsExtensionsConstants,
     ObjectsDomainConstants,