unit-testing - unit - testing karma jasmine

unidad de prueba mecanografía directiva plantilla karma-jazmín, html no está definido

Question

Recientemente comencé pruebas unitarias en mi código de mecanografía usando karma-jazmín. Después de crear y ejecutar el caso de prueba para un servicio y una directiva simple, creé un caso de prueba para una directiva personalizada que tiene un controlador (que está inyectando un servicio) y está usando 4 variables de alcance para comunicarse con el mundo exterior.

Es un caso simple de prueba unitaria para verificar si la directiva está procesando su plantilla o no.

Mientras se ejecuta este caso de prueba unitaria, el karma arroja algún error

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

Al depurarlo, me doy cuenta de que está considerando la "norma-directiva" como texto normal, no como una etiqueta html.

normal-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 -->'');
});
});

normal-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
}

Me refiero a este repositorio para escribir el caso de prueba y el código de la directiva personalizada mecanografiada.

Si necesita más información, dígame. Si conoce algún blog / sitio concreto para obtener más información sobre la prueba de unidad de karma-jazmín para mecanografiar, por favor dígame.

Gracias por darnos tu precioso tiempo al leerlo.

Saludos

Ajay

Answer 1

Necesitaba hacer un simulacro para facadeService.

Demo mocks.ts

import {IfcFacadeService} from ''filePath''
export const facadeServiceMock: IfcFacadeService {
methodName: (): any => {};
}

Para usar este simulacro, impórtelo

Demo .html.spec.ts

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