尝试使用templateURL测试AngularJS指令

首先,您需要包含karma-ng-html2js-preprocessor.

npm install karma-ng-html2js-preprocessor --save-dev

接下来你的karma.conf.js – 你用咖啡,但我不会反对你;-)

请记住包含模块名称,以便将其注入指令单元测试.

// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html

module.exports = function (config) {
    config.set({
        // base path,that will be used to resolve files and exclude
        basePath: '',// testing framework to use (jasmine/mocha/qunit/...)
        frameworks: ['jasmine'],preprocessors: {
            'app/views/templates/*.tpl.html': ['ng-html2js']  //<----- Also needed
        },// list of files / patterns to load in the browser
        files: [
            'app/bower_components/angular/angular.js','app/bower_components/angular-mocks/angular-mocks.js','app/bower_components/angular-resource/angular-resource.js','app/bower_components/angular-cookies/angular-cookies.js','app/bower_components/angular-sanitize/angular-sanitize.js','app/bower_components/angular-bootstrap/ui-bootstrap.js','app/bower_components/angular-ui-router/release/angular-ui-router.js','app/bower_components/angular-local-storage/angular-local-storage.js','app/bower_components/jquery/dist/jquery.js','app/bower_components/bootstrap/dist/js/bootstrap.js','app/scripts/*.js','app/scripts/**/*.js','test/spec/**/*.js',//Templates
            'app/views/templates/*.tpl.html' //<----- Also needed
        ],ngHtml2JsPreprocessor: {
            stripPrefix: 'app/',moduleName: 'Kinetix.Templates'   //<-----Module Name for injection
        },// list of files / patterns to exclude
        exclude: [],// Reporters
        reporters: ['progress','junit'],//Config for junit
        junitReporter: {
            outputFile: './test/test-results.xml',suite: ''
        },// web server port
        port: 9001,// level of logging
        // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
        logLevel: config.LOG_INFO,// enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,// Start these browsers,currently available:
        // - Chrome
        // - ChromeCanary
        // - Firefox
        // - Opera
        // - Safari (only Mac)
        // - PhantomJS
        // - IE (only Windows)
        browsers: ['PhantomJS'],// Continuous Integration mode
        // if true,it capture browsers,run tests and exit
        singleRun: false
    });
};

所以,在你得到你的karma.conf.js设置后,让我们看一下单元测试.这是一个指令单元测试我将包括整个事情 – 也许它可以激发你的其他单元测试的想法.我已经有近8个月了,并且学到了很多东西……

指令单元测试：

'use strict';

describe('Directives: Search',function () {

    var//iable declarations
        elm,scope,$rootScope,$compile,$animate,ACCESS_LEVEL = [
            'OPEN','PRIVATE','RESTRICTED'
        ]
        ;

    beforeEach(function () {
        module('Kinetix.Constants');
        module('Kinetix.Templates');   //<------ See here we inject the templates!
        module('Kinetix.Directives.Search');
        module('Kinetix.Controllers.Search',function ($controllerProvider) {
            $controllerProvider.register('SearchController',function () { });
        });
    });

    beforeEach(inject(function (_$rootScope_,_$compile_,_$animate_) {
        $rootScope = _$rootScope_;
        scope = $rootScope;
        $animate = _$animate_;
        $compile = _$compile_;
    }));

    function setupDirective(accessLevel) {
        spyOn($animate,'addClass').and.callThrough();
        spyOn($animate,'removeClass').and.callThrough();

        $rootScope.accessLevel = { type: accessLevel };
        $rootScope.isAuthenticated = { value: false };

        elm = angular.element('<kx-search></kx-search>');
        $compile(elm)(scope);
        scope.$apply();
    }

    it('Should create the search template',function () {
        setupDirective(ACCESS_LEVEL[0]);
        var nav = $(elm).find('.nav');
        expect(nav.children('form')).toBeTruthy();
    });

    describe('Animations',function () {
        it('should have the fade slide class on setup with OPEN accesslevel',function () {
            setupDirective(ACCESS_LEVEL[0]);
            //With Authentication
            $rootScope.isAuthenticated.value = true;
            scope.$apply();
            expect(elm.children('div').hasClass('slide-left')).toBeTruthy();
            expect($animate.addClass).toHaveBeenCalled();

            $rootScope.isAuthenticated.value = false;
            scope.$apply();
            expect($animate.removeClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('slide-left')).toBeFalsy();
        });

        it('should toggle the fade-slide animation with PRIVATE acesslevels',function () {
            setupDirective(ACCESS_LEVEL[1]);
            expect($animate.addClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('fade-slide')).toBeTruthy();

            $rootScope.isAuthenticated.value = true;
            scope.$apply();
            expect($animate.removeClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('fade-slide')).toBeFalsy();

            $rootScope.isAuthenticated.value = false;
            scope.$apply();
            expect($animate.addClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('fade-slide')).toBeTruthy();
        });

        it('should toggle the fade-slide animation with RESTRICTED acesslevels',function () {
            setupDirective(ACCESS_LEVEL[2]);
            expect($animate.addClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('fade-slide')).toBeTruthy();

            $rootScope.isAuthenticated.value = true;
            scope.$apply();
            expect($animate.removeClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('fade-slide')).toBeFalsy();

            $rootScope.isAuthenticated.value = false;
            scope.$apply();
            expect($animate.addClass).toHaveBeenCalled();
            expect(elm.children('div').hasClass('fade-slide')).toBeTruthy();
        });
    });
});

为了完成,我还将包含指令本身,以便您可以看到完整的图片.

angular.module('Kinetix.Directives.Search',[])

    .directive('kxSearch',function ($rootScope,PATH) {
        var linker = function (scope,el) {

            var//iable declarations
                accessLevel = $rootScope.accessLevel.type || 'Guest',element = el.children('.nav')
                ;

            //Check if the shop type is a PRIVATE or RESTRICTED type so we can chose which animation to apply
            if (accessLevel === 'RESTRICTED' || accessLevel === 'PRIVATE') {

                // Hide the element as we need authentication to show it
                $animate.addClass(element,'fade-slide');

                $rootScope.$watch('isAuthenticated.value',function (newVal) {
                    if (!!newVal) {
                        $animate.removeClass(element,'fade-slide');
                    }
                    if (!newVal) {
                        $animate.addClass(element,'fade-slide');
                    }
                });
            }

            if (accessLevel === 'OPEN') {
                $rootScope.$watch('isAuthenticated.value',function (newVal,oldVal) {
                    if (newVal !== oldVal) {
                        if(!!newVal) {
                            $animate.addClass(element,'slide-left');
                        }
                        if(!newVal) {
                            $animate.removeClass(element,'slide-left');
                        }
                    }
                });
            }
        };

        return {
            restrict: 'E',link: linker,controller: 'SearchController',templateUrl: PATH.templates + 'search.tpl.html'
        };

    });

希望能帮助到你！这是房间里的800磅大猩猩已经有一段时间了,一旦你驯服了他,他就非常可爱！祝好运！