unit testing typescript directive template karma-jasmine, html is not defined

Question

Recently i started unit testing on my typescript code using karma-jasmine. After creating and running test case for a service and a simple directive, i created one test case for custom directive which has one controller(which is injecting one service) and is using 4 scope variable for communicating with outside world.

It's a simple unit test case to check whether directive is rendering its template or not.

While running this unit test case, karma throws some 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

While debugging it, i get to know that it is considering "normal-directive" as normal text not as a html tag.

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
}

I am refering this repo to write test case and typescript custom directive code.

If you require more info, do tell me. If you know any concrete blog/site to learn more about karma-jasmine unit testing for typescript, please do tell me.

Thanks for giving your precious time in reading it.

Regards

Ajay

Answer 1

I needed to make a mock for facadeService.

Demo mocks.ts

import {IfcFacadeService} from 'filePath'

export const facadeServiceMock: IfcFacadeService {

    methodName: (): any => {}; 

}

To use this mock, import it

Demo .html.spec.ts

import {facadeServiceMock} from 'mockPathName'

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