Jasmine TypeScript 测试 Angular答案

【问题标题】：Jasmine TypeScript test AngularJasmine TypeScript 测试 Angular
【发布时间】：2016-04-28 13:39:48
【问题描述】：

我试图用 Type Script 为我的应用程序编写一些 Angular Controller 测试几天，但没有任何成功。在我开始之前，我想提一下这是我第一次写测试我茉莉。我的问题是我无法模拟依赖服务来测试控制器。任何帮助或指向正确方向都会很好。

角度模块：

 angular.module('some.module', ['ui.router', 'ngAnimate', 'ui.bootstrap', 'pascalprecht.translate', 'ngCookies', 'smart-table']);

角度控制器：

module App.Controllers {

export class TestController{
    static $inject = ["$scope","SomeService"];
    WhatController: () => string;
    constructor(private $scope: App.IAppScope, private SomeService) {
        var vm = this;
        vm.WhatController = function (): string {
            return SomeService.someAction();
        };
    }
}

angular.module("some.module").controller("TestController", TestController);

}

角度服务：

module App.Services {

export class SomeService{
    httpService: ng.IHttpService;
    static $inject = ["$http"];
    someAction: () => any;

    constructor($http: ng.IHttpService) {
        var service = this;
        service.someAction= () => {
           return "test";
        }
    }
}

factory.$inject = ['$http'];
function factory($http: ng.IHttpService) {
    return new SomeService($http);
}

angular.module('some.module').factory('SomeService', factory);

}

业力档案：

    module.exports = function (config) {
    config.set({
        basePath: 'Scripts',
        frameworks: ['jasmine', 'jasmine-matchers'],
        files: [

            { pattern: 'angular.js', included: true },
            { pattern: 'angular-mocks.js', included: true },
            { pattern: 'angular-ui-router.js', included: true },
            { pattern: 'angular-ui/ui-bootstrap-tpls.js', included: true },
            { pattern: 'angular-animate.js', included: true },
            { pattern: 'angular-translate.js', included: true },
            { pattern: 'angular-translate-loader-url.js', included: true },
            { pattern: 'angular-cookies.js', included: true },
            { pattern: 'smart-table.js', included: true },

            '../app/app.module.js',
            '../app/pages/**/*.controller.js',

            //Here are controller files
            { pattern: '../app/pages/**/*.spec.js', included: true },

        ],
        exclude: ['**/*min.js'],
        preprocessors: {
            '../app/pages/**/*.controller.js': ['coverage'],
        },

        reporters: ['progress', 'coverage'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: true,

        coverageReporter: {
        type : 'html',
        dir : 'coverage/'
    }
    })
}

测试：

    'use strict';
describe("complaints.controller.test", () => {
    var $http: ng.IHttpService;
    var mockSomeServices: App.Services.SomeServices;
    var mock = angular.mock;


    beforeEach(() => {
        mock.module('ui.router');
        mock.module('ngAnimate');
        mock.module('ui.bootstrap');
        mock.module('pascalprecht.translate');
        mock.module('ngCookies');
        mock.module('smart-table');
      });

    //This don't work mockSomeServices  is undefined
    beforeEach(mock.inject((_$http_, $injector) => {
        $http = _$http_;
        mockSomeServices = $injector.get('SomeServices');
    }));

   //This also don't work mockSomeServices  is undefined
    beforeEach(mock.inject((_$http_, $injector, SomeServices) => {
        $http = _$http_;
        mockSomeServices = SomeServices;
    }));
});

【问题讨论】：

标签： angularjs typescript karma-jasmine

【解决方案1】：

如果你想模拟一个服务，你可以这样做：

angular.mock.module(($provide: ng.auto.IProvideService): void => {
    $provide.constant("SomeService", SomeService = { });
});

在您的控制器中，我认为您不想模拟您的服务。你想知道它被调用了，你可以通过在你的服务上设置一个间谍来做到这一点。

spyOn(SomeService, "someAction");

如果您希望它返回一些数据以在控制器中使用/验证，您可以这样做：

spyOn(SomeService, "someAction").and.returnValue(/* data */);

然后你断言它被调用并且数据是你所期望的：

expect(SomeService.someAction).toHaveBeenCalled();
expect(yourController.someValue).toEqual("someValue");

【讨论】：