Jasmine，Karma，Angular如何在我的Angular应用程序上编写测试？ [英] Jasmine, Karma, Angular how to write test on my Angular app?

问题描述

我刚刚跳到另一个项目，基本上，我被要求编写单元测试。由于我已经了解了用于e2e测试的Protractor，我现在转而使用Karma和Jasmine进行单元测试。我已经下载了业力，茉莉，业力茉莉和karma-chrome-launcher。我也安装了角度模拟器，所以我应该准备开始了。我已经在互联网上阅读了很多东西，但现在，我真正需要的是一个真正的应用程序的具体例子，以弄清楚如何开始编写测试。我不需要简单的例子，但需要具体的例子和完整的解释。书籍和有用的链接也很受欢迎。在此先感谢您的帮助/时间。

I have just jumped to another project and, basically, I have been asked to write Unit tests. Since I have already know Protractor for e2e testing, I now switched to Karma and Jasmine to carry out unit testing. I have already downloaded karma, jasmine, karma-jasmine, and karma-chrome-launcher. I installed angular-mocks as well so I should be ready to start. I have read many things on the internet but, now, what I really need is a concrete example of a real app to figure out how to start writing tests. I don't need easy examples but concrete examples and full explenations. Books and useful links are appreciated as well. Thanks in advance for your help/time.

推荐答案

describe('ServiceBeingTested Name', (): void => {

var mockFirstDependency;
var mockSecondDependency;
var TestedService;

//Mock all dependencies
beforeEach((): void => {

    angular.mock.module('moduleServiceIsIn'); //Register the module which the service is in

    mockFirstDependency = sinon.stub(new MockFirstDependency());//Sinon if useful for mocking
    mockSecondDependency = sinon.stub(new MockSecondDependency());

    angular.mock.module(($provide): void => {
        $provide.value('FirstDependency', mockFirstDependency);
        $provide.value('SecondDependency', mockSecondDependency);
    });
});

beforeEach(inject(
    ['TestedService', (_TestedService_: TestedService): void => {
        TestedService = _TestedService_;
    }]));

//Describe each method in the service
describe('method to test', (): void => {

    it("should...", () => {
        //testing goes in here
        expect(TestedService.someMethod()).toBe("some value");
    });
});

这是一个如何测试角度服务的简单示例。在这种情况下，该服务称为TestedService。

This is a simple example of how to test an angular service. In this case the service is called TestedService.

您将看到的第一件事是三个变量声明。前两个被声明为模拟这个服务的两个依赖项。（假设这个服务有两个依赖项）。最后一个变量声明将被分配正在测试的实际服务。

The first thing you'll see is that three variable declarations. The first two are declared to mock out the two dependencies of this service.(Assume this service has two dependencies). The last variable declaration is going to be assigned the actual service being tested.

现在在beforeEach中：

Now in the beforeEach:

angular.mock.module

此行注册其中的模块您正在测试的服务是。这一行非常重要。

This line registers the module in which the service you are testing is in. This line is very important.

接下来的两行使用Sinon.js来模拟正在测试的服务的依赖关系。我建议查看Sinon.js

The next two line use Sinon.js to mock the dependencies of the service being tested. I recommend looking into Sinon.js

它的工作方式是我们有一个名为FirstDependency的依赖项，我创建了一个存根并称为MockedFirstDependency，在这里我创建了它的一个实例。

The way it works is we have a dependency called "FirstDependency" which I created a stub of and called "MockedFirstDependency" and here I created an instance of it.

现在为下一部分（包含$ provide的部分）

Now for the next part which (the part that includes $provide)

$provide.value('FirstDependency', mockFirstDependency);

上述行的作用是告诉Angular每次使用FirstDependency服务时，请使用mockFirstDependency 。

What the above line does is it tells Angular that every time the FirstDependency service is used, instead use mockFirstDependency.

现在在下一个之前我所做的就是注入我正在测试的实际服务并将其分配给我的全局变量。

Now in the next beforeEach all I do is inject the actual service which I am testing and assign it to my global variable.

然后让测试开始

编辑：测试控制器

describe('mainCtrl', (): void => {
    var $controllerConstructor;
    var MainCtrlInstance;
    var mockScope;
    var mockState;
    var mockStates;
    var mockGlobalData;

    beforeEach(() => {
        angular.mock.module('mainCtrlModule');

        mockScope = sinon.stub(new MockScope());
        mockState = sinon.stub(new MockState());
        mockStates = sinon.stub(new MockState());
        mockGlobalData = sinon.stub(new MockGlobalData());

        inject(($controller: ng.IControllerService): void => {
            $controllerConstructor = $controller;
        });

        //Constructs the controller, all dependencies must be injected here
        MainCtrlInstance = $controllerConstructor('mainCtrl',
            {
                '$Scope': mockScope,
                '$State': mockState,
                'States': mockStates,
                'srvGlobalData': mockGlobalData
            }
        );
    });

    describe('Method to Tests', (): void => {

        it("should...", (): void => {
            //Testing Begins
            expect(MainCtrlInstance.method()).toBe("some value");
        });
    });
});

编辑：测试指令

首先，您将需要使用以下命令安装Html2JsPreprocessor： npm install karma-ng-html2js-preprocessor --save-dev 如上所述这里。

First off you will need to install Html2JsPreprocessor with this command: npm install karma-ng-html2js-preprocessor --save-dev as stated here.

karma.conf.js

files: [
    //Obviously include all of your Angular files
    //but make sure to include your jQuery before angular.js

    "directory/to/html/directive.html", // include html for directive
    "directive.js" // file directive is contained in
    "directive.spec.js"" // spec file
]

// include the directive html file to be preprocessed
preprocessors: {
    'directory/to/html/directive.html': 'ng-html2js'
},

plugins : [
    'karma-chrome-launcher',
    'karma-jasmine',
    'karma-ng-html2js-preprocessor' //include as a plugin too
],

ngHtml2JsPreprocessor: {
    //this part has a lot of useful features but unfortunately I
    //never got them to work, Google if you need help
},

directive.js

export class myDirectiveController {

    constructor(/*dependencies for controller*/) {
        //initializations
    }
    //other methods for directive class
}

export class myDirective implements ng.IDirective {
    constructor(/*dependencies for directive*/) { }
    static instance(/*dependencies*/): ng.IDirective {
        return new myDirective(/*dependencies for directive*/);
    }

    restrict = 'E';
    templateUrl = 'myDirective.html';
    controller = myDirectiveController;
    controllerAs = 'myDirectiveController';
    scope: {};
}

angular
.module('myDirectiveModule')
.directive('myDirective', myDirective.instance);

myDirective.spec.js

describe("myDirective", () => {

    //do you variable declarations but I'm leaving them out for simplicity

    beforeEach(() => {

        angular.mock.module(
            'myDirectiveModule', //and other modules in use
            'directory/to/html/directive.html'
            //include directive html as a module
        )

        // now do your mock dependencies as you did with services
        mockDependency = sinon.stub(new MockDependency());

        angular.mock.module(($provide): void => {
            $provide.value('dependency', mockDependency);
        }

        //inject $compile and $rootScope
        inject(($compile, $rootScope) => {

            scope = $rootScope.$new();

            // your directive gets compiled here
            element = angular.element("<my-directive></my-directive>");
            $compile(element)(scope);
            $rootScope.$digest();
            directiveController = element.controller('myDirective'); //this is your directive's name defined in .directive("myDirective", ...)
        });
    }

    describe("simple test", () => {

        it("should click a link", () => {

            var a = element.find("a");

            a.triggerHandler('click');

            //very important to call scope.$digest every you change anything in the view or the model
            scope.$digest();

            expect('whatever').toBe('whatever');
        });

    });
}

之前我曾说过在Angular之前包含你的jQuery文件，这样做是因为angular.element（）将生成一个jQuery对象，您可以在其上使用jQuery API，但如果您不首先包含jQuery，那么angular.element（）将返回一个包含较少方法的jQLite对象。

Earlier when I stated to included your jQuery file before you Angular, do this because angular.element() will produce a jQuery object on which you can use the jQuery API, but if you do not include jQuery first then you angular.element() returns a jQLite object which contains less methods.

调用范围。$ digest（）也很重要，因为它会更新指令的绑定。

It is also important to call scope.$digest() because that updates the bindings for your directive.

这篇关于Jasmine，Karma，Angular如何在我的Angular应用程序上编写测试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！