unit testing - इकाई परीक्षण टाइपस्क्रिप्ट डायरेक्टिव टेम्पलेट कर्मा-जैस्मीन, html परिभाषित नहीं है



unit-testing typescript (1)

मुझे मुखौटा सेवा के लिए एक नकली बनाने की जरूरत थी

डेमो 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});
})

हाल ही में मैंने कर्म-जामाइन का उपयोग कर अपने टाइपस्क्रिप्ट कोड पर इकाई परीक्षण शुरू किया। सेवा और एक सरल निर्देश के लिए परीक्षण मामले बनाने और चलाने के बाद, मैंने कस्टम निर्देश के लिए एक टेस्ट केस बनाया, जिसमें एक नियंत्रक है (जो एक सेवा इंजेक्शन कर रहा है) और बाहर की दुनिया के साथ संचार करने के लिए 4 दायरे चर का उपयोग कर रहा है।

यह जांचने के लिए एक साधारण इकाई परीक्षण का मामला है कि क्या डायरेक्टिव इसके टेम्पलेट का अनुवाद कर रहा है या नहीं।

इस इकाई परीक्षण के मामले को चलाने के दौरान, कर्म कुछ त्रुटि फेंकता है

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
}

मैं टेस्ट केस और टाइपस्क्रिप्ट कस्टम डायरेक्टिव कोड लिखने के लिए इस रेपो को रेफरी कर रहा हूं।

यदि आपको अधिक जानकारी की आवश्यकता है, तो मुझे बताओ टाइप-टुकर्ट के लिए कर्मा-जैस्मीन यूनिट परीक्षण के बारे में अधिक जानने के लिए यदि आपको कोई ठोस ब्लॉग / साइट पता है, तो कृपया मुझे बताएं

इसे पढ़ने में अपनी अनमोल समय देने के लिए धन्यवाद।

सादर

अजय





angular-directive