单元测试typescript指令模板karma-jasmine，html没有定义

最近我开始使用karma-jasmine在我的脚本代码上进行单元测试。在创建并运行服务和简单指令的测试用例之后，我为自定义指令创建了一个测试用例，该用例有一个控制器（注入一个服务），并使用4范围变量与外界通信。单元测试typescript指令模板karma-jasmine，html没有定义

这是一个简单的单元测试用例，用于检查指令是否正在渲染其模板。

在运行这个单元测试的情况下，业力抛出一些错误

09 03 2016 19:59:27.056:INFO [framework.browserify]: bundle built 
09 03 2016 19:59:27.063:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 
09 03 2016 19:59:29.964:INFO [Chrome 49.0.2623 (Linux 0.0.0)]: Connected on socket /#4OCi116hP6TDqCsmAAAA with id manual-1348 
LOG: Object{0: <normal-directive></normal-directive>, length: 1} 
Chrome 49.0.2623 (Linux 0.0.0) normal should render the template FAILED 
Error: [$injector:unpr] Unknown provider: FacadeServiceProvider <- FacadeService 
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=FacadeServiceProvider%20%3C-%20FacadeService 

//some reference to file 
TypeError: Cannot read property 'html' of undefined 
    at Object.<anonymous> (/tmp/5c59a59c62f48798a123b52b0468515b.browserify:476:23

在调试它，我了解，它正在考虑“正常指令”作为普通文本不是一个html标记。

正常directive.spec.ts

import {appName} from '../../../../main'; 
import NormalController from '../../../../components/normalManager/normalList/NormalController'; 

describe('normalManager.normalList',() => { 
    let $compile:angular.ICompileService, 
     $rootScope:any, 
     template:angular.IAugmentedJQuery, 
     element:angular.IAugmentedJQuery, 
     controller:NormalController, 
     controllerSpy:jasmine.Spy; 

    beforeEach(() => { 
     angular.mock.module(appName); 

     inject((_$compile_:ng.ICompileService, _$rootScope_:ng.IRootScopeService) => { 
      $compile = _$compile_; 
      $rootScope = _$rootScope_; 
     }); 

     template = angular.element('<div normal-directive></div>'); 
     element = $compile(template)($rootScope);//getting error on this line. 
     controller = element.controller('normalList'); 

     $rootScope.$digest(); 
    }); 

    it('should render the component',() => { 
     expect(element.html()).toContain('<!-- normalManager.normalList -->'); 
    }); 
});

正常directive.ts

import * as angular from 'angular'; 
import {normalController} from './normalController'; 
import {html} from './normal.html' 

module normal { 
    "use strict"; 
    export class normal { 
     public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void; 
     public template = html; 
     public scope = { 
      ngNormalVariables: '=', 
      ngNormalData: '=', 
      ngDifferentType: '=', 
      ngType: '=' 
     }; 
     public restrict: string = 'EA'; 
     public controller = normalController; 
     public controllerAs: string = 'vm'; 
     public bindToController:boolean = true; 

     constructor() { 
      normal.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => { 

      }; 
     } 

     public static Factory() { 
      var directive =() => { 
       return new normal(); 
      }; 

      directive['$inject'] = []; 
      return directive; 
     } 
    } 
} 

export default normal;

normalController.ts

import {IfcNormalFacadeService} from '../../../normal_core/services/NormalFacadeService/IfcNormalFacadeService' 
export class normalController { 
    //Variable injection 
    private normalFacadeService: IfcNormalFacadeService; 

    public xVariableVal = null; 
    public yVariableVal = null; 

    //Scope variables 
    private ngNormalData = {x:null, y:null, t:null, z:null}; 
    private ngNormalVariables = {x: [], y:[], t:[], z:[]}; 
    private ngType = null; 
    private ngDifferentType = null; 

    constructor(normalFacadeService: IfcNormalFacadeService) { 
     console.log("Inside Normal controller"); 
     this.normalFacadeService = normalFacadeService; 
    } 

    ....//Remaining code 
}

我在引用this repo来编写测试用例和打字稿自定义指令代码。

如果您需要更多信息，请告诉我。如果你知道任何具体的博客/网站，以了解更多关于打字稿的卡玛 - 茉莉花单元测试，请告诉我。

感谢您为宝贵的时间阅读。

问候

阿贾伊

来源

2016-03-09 Ajay

我需要作出facadeService一个模拟。

演示mocks.ts

import {IfcFacadeService} from 'filePath' 

export const facadeServiceMock: IfcFacadeService { 

    methodName:(): any => {}; 

}

要使用此模拟，将其导入

演示.html.spec.ts

import {facadeServiceMock} from 'mockPathName' 

beforeEach(()=>{ 
angular.mock.module(appName), {FacadeService: facadeServiceMock}); 
})

来源

2016-05-05 14:36:20 Ajay

单元测试typescript指令模板karma-jasmine，html没有定义

回答

相关问题