基本业力 Angular 1.5 组件测试

Question

我不确定我所做的是否完全错误，但是当我从 "directive" 切换到 "components" 来定义我的一些 HTML 元素时，我突然崩溃了我所有的业力测试。这是我拥有的：

karam.conf.js

...
preprocessors: {
    'module-a/module-a.view.html': ['ng-html2js'],
    ...,
    'module-z/module-z.view.html': ['ng-html2js']
},

ngHtml2JsPreprocessor: {
    moduleName: 'theTemplates'
},
...

模块-a.component.js

(function(){
    "use strict";

    angular.module('ModuleA').component('moduleAComponent',{
        controller: 'ModuleAController as moduleAVm',
        templateUrl: 'module-a/module-a.view.html'      
    });
})();

模块-a-tests.js

"use strict";

describe('ModuleA',function(){

    beforeEach(module('ModuleA'));

    describe('Controller',function(){
        ...
    });

    describe('Component',function(){
        var element, $rootScope;
        beforeEach(module('theTemplates'));
        beforeEach(inject([
            '$compile','$rootScope',
            function($c,$rs) {
               $rootScope = $rs;
               element = $c('<module-a-component></module-a-component>')($rootScope);
               $rootScope.$digest(); // ???
            }
        ]));

        it('should have moduleAVm',function(){
            expect(element.html()).not.toBe(''); // FAILS HERE
            expect(element.html()).toContain('moduleVm'); // FAILS HERE TOO
        });

    });

});

错误：

Expected '' not to be ''.

Answer 1

好的，在更彻底地阅读了Angular的documentation之后，我遇到了这个语句：

The easiest way to unit-test a component controller is by using the $componentController that is included in ngMock. The advantage of this method is that you do not have to create any DOM elements. The following example shows how to do this for the heroDetail component from above.

我恍然大悟，我的 describe('Controller',function(){...});是我真正需要改变的，我应该去掉 'Component' 部分，正式名称是 'Directive'

这是我现在的 'Controller'：

    beforeEach(inject([
        '$componentController', // replaced $controller with $componentController
        function($ctrl){
            ctrl = $ctrl('queryResults',{ // Use component name, instead of controller name
                SomeFactory:MockSomeFactory,
                SomeService:MockSomeService
            });
        }
    ]));

现在，我仍然可以测试我的控制器，同时测试组件。我不再需要使用 $compile、$rootScope 等创建 DOM 元素

基本业力 Angular 1.5 组件测试

Basic Karma Angular 1.5 Component Test

javascript

angularjs

karma-jasmine