TypeScript Angular Jasmine + Karma Testing Scope

Question

Я потратил часы, пытаясь понять это. Я написал простое приложение Angular, и теперь я пытаюсь проверить его все в Type Script.

Контроллер:

export class ProductsController {  
    static $inject = ["ProductService", "$scope"]; 
    constructor(public productsServices: AngularTest.Interfaces.IProductsService, $scope: any) { 


      productsServices.getAllProducts().then((response: ng.IHttpPromiseCallbackArg<AngularTest.Interfaces.IProducts[]>): any => { 
      $scope.currentPage = 1; 
      $scope.allProducts = <AngularTest.Interfaces.IProducts[]> response.data 

        $scope.cartItems = []; 
        $scope.modalAlerts = []; 

        $scope.maxItems = 3; 
        $scope.totalItems = $scope.allProducts.length; 

        $scope.itemsOnPage = $scope.allProducts.slice(0, $scope.maxItems); 
     }); 

     $scope.pageChanged = function() { 
      $scope.itemsOnPage = $scope.allProducts.slice(($scope.currentPage - 1) * $scope.maxItems, $scope.currentPage * $scope.maxItems); 
     }; 
    } 
} 

и испытания:

describe("TestService",() => { 

    var mock: ng.IMockStatic; 
    var $httpBackend: ng.IHttpBackendService; 
    var service: AngularTest.Services.ProductServices; 
    var rootScopeFake; 
    var controller; 
    var $controller: ng.IControllerService; 
    var mockServiceProvider; 
    var prop: ng.IPromise<AngularTest.Interfaces.IProducts[]>; 
    var q :ng.IQService; 

    mock = angular.mock; 

    beforeEach(mock.module('app.AngularTS')); 

    beforeEach(() => mock.inject(function (_$httpBackend_, $injector, $rootScope, _$controller_, $q) { 
     $httpBackend = _$httpBackend_; 
     rootScopeFake = $rootScope.$new();  
     service = $injector.get('ProductService'); 
     $controller = _$controller_; 
     q = $q; 
    })); 

    afterEach(function() { 
     $httpBackend.verifyNoOutstandingExpectation(); 
     $httpBackend.verifyNoOutstandingRequest(); 
    }); 


    it("Should Call API", function() { 

     spyOn(service, "getAllProducts").and.callFake(() => { 
      var deffered; 
      deffered = q.defer(); 
      deffered.resolve(['xxxx', 'xxxx']); 
      return deffered.promise; 
     }); 

     controller = new AngularTest.Controllers.ProductsController(service, rootScopeFake); 
     expect(service.getAllProducts).toHaveBeenCalled(); 
     expect(rootScopeFake.allProducts).toBeDefined(); 

    }); 
}); 

Когда я пытаюсь проверить мой ProductsController я Получать TypeError: 'не определено' не является объектом (оценка «$ scope.allProducts.length ') почему это ?

Answer 1

Вы возвращаете результат getAllProducts как массив:

deffered.resolve(['xxxx', 'xxxx']); 

Где в вашем контроллере вы ожидали, что это будет присваивается свойству данных ответа:

$scope.allProducts = <AngularTest.Interfaces.IProducts[]> response.data 

Итак, Чтобы решить эту проблему, вам необходимо изменить свой тест, чтобы решить эту проблему:

deffered.resolve({data: ['xxxx', 'xxxx']}); 

UPDATE

Разрешающих обещания в угловом выполняются в цикле переваривать, что-то вам нужно будет запускать вручную:

controller = new AngularTest.Controllers.ProductsController(service, rootScopeFake); 
rootScopeFake.$digest(); // <-- this is the important part 
expect(service.getAllProducts).toHaveBeenCalled();