angularjs - Unit-Test für Angular 1 (mit TypeScript) Controller
Ich habe ein kleines Projekt in Angular 1 mit TypeScript und ich möchte einige Unit-Tests mit Jasmine machen. Bisher cool! Zuerst möchte ich meinen Controller testen, um sicherzustellen, dass wenn ich dort eine Methode aufrufe, ich die richtige Antwort bekomme. Ganz einfach, oder?!
Ich habe bereits die Controller-Instanz erhalten und kann auf einige Scope-Variablen zugreifen. Wenn ich jedoch versuche, eine Methode aufzurufen, funktioniert es nicht (ich erhielt undefined für die Methode). Siehe den Code unten:
Controller lokalisieren:
/// <reference path="../../app.d.ts" />
module UnitTest {
export class LocateController {
private myLocation: any;
private myLocationBkp: any;
private now: Date;
private searchForm: any;
private urlRegex: any;
constructor(private $scope: ng.IScope,
private $http: ng.IHttpService,
private $q: ng.IQService,
private $translate: ng.translate.ITranslateService,
private locationService: LocationService) {
this.myLocation = {};
}
/* Method responsible to return all information about the user. */
public getMyLocation() {
this.now = new Date();
this.locationService.getMyLocation().then((data) => {
this.myLocation = data;
});
}
}
}
app.controller('LocateController', ['$scope', '$http', '$q', '$translate', 'LocationService', UnitTest.LocateController]);
Dienst finden
/// <reference path="../../app.d.ts" />
module UnitTest {
export class LocationService {
/* ---- global variables ---- */
private API_HOST: string = "http://freegeoip.net";
constructor(private $http: ng.IHttpService,
private $q: ng.IQService) {
}
/* Method responsible to retrieve user's location information */
public getMyLocation(): ng.IPromise<any> {
var defer = this.$q.defer();
$.ajax({
type : 'GET'
,url : this.API_HOST + '/json/'
,success: (response) => {defer.resolve(response);}
,error: (error) => {defer.reject('Something went wrong: ' + error.responseText);}
});
return defer.promise;
}
}
}
app.service("LocationService", ['$http', '$q', UnitTest.LocationService]);
Controller-Spezifikation
/// <reference path="../app.d.ts" />
describe('Locate Controller', () => {
var $rootScope;
var scope;
var $httpBackend;
var ctrl = null;
var locService;
beforeEach(angular.mock.module('unittest'));
beforeEach(inject((_$httpBackend_, $rootScope, _$controller_, LocationService) => {
$httpBackend = _$httpBackend_;
scope = $rootScope.$new();
locService = LocationService;
}));
it('should call getMyLocation method and change myLocation value', inject(($controller) => {
ctrl = $controller('LocateController', {$scope: scope});
ctrl.getMyLocation();
expect(ctrl.myLocation).toEqual(''); // empty is the initial value. After calling the method it should be different of ''
}));
});
Debugging meines Spec-Test-Codes in Chrome, wenn ich den Aufruf der Methode inspiziere, wird Folgendes angezeigt: siehe Screenshot
Warum erscheint die Methode hier nicht?
Ich bin mir nicht sicher, ob die Methode korrekt aufgerufen wurde, ich aber nicht auf die Promise-Antwort gewartet habe, oder ob sie nicht richtig aufgerufen wird. Daher helfen Sie mir bitte, damit es funktioniert!
Wenn zusätzliche Informationen benötigt werden, lassen Sie es mich einfach wissen!