基本业力角1.5分量试验

Question

我不知道我所做的是否完全错误，但当我从“指令”转换为“组件”来定义一些HTML元素时，我突然中断了所有的Karma测试。我现在拥有的是：

karam.conf.js

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

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

module-a.component.js

(function(){
    "use strict";

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

module-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

好的，在更深入地阅读了文档之后，我看到了这样的说法：

对组件控制器进行单元测试的最简单方法是使用包含在$componentController中的ngMock。此方法的优点是无需创建任何DOM元素。下面的示例演示如何从上面对heroDetail组件执行此操作。

我突然意识到，我的描述(“控制器”，函数(){.})；是我真正需要改变的，我应该去掉“组件”部分，正式称为“指令”。

下面是我的“主计长”：

    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元素。