Basic Karma Angular 1.5 구성 요소 테스트

Question

내가하는 일이 완전히 잘못 되었다면 잘 모르겠지만, "지시어"에서 "구성 요소"로 전환하여 내 HTML 요소 몇 개를 정의하면 갑자기 내 모든 카르마가 파손되었습니다. 테스트. 여기에 내가 가진 무엇 :

는

... 
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을 karam.conf.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

확인을 읽은 후에 각도의 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.

그리고 그것은, ('컨트롤러'기능을 설명의 나 떠올랐다 () {...}); 정말 변경해야, 난 그냥 공식적으로 알려진 '구성 요소'부분을 제거해야한다는 것이었다 '지침'

여기 지금 내 '컨트롤러'이다 : 나는 여전히 지금

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 요소를 만들 필요가 없습니다.