angularjs - 尝试使用 templateURL 测试 AngularJS 指令

Question

在我的 karma.conf.coffee 中，我有:

files: [
  'public/bower_components/angular-mocks/angular-mocks.js'
  'public/scripts/**/*.coffee' # not tested since configuration is difficult to be tested and perhaps should not be tested
  'test/webapp/unit/**/*.coffee'
  'views/templates/*.html'
]

preprocessors:
  'public/scripts/**/*.coffee': ['coverage']
  'test/webapp/unit/**/*.coffee': ['coffee']
  'views/templates/*.html': ['ng-html2js']

frameworks: ['jasmine']

ngHtml2JsPreprocessor:
  stripPrefix: 'views/'

在我的测试中，我有:

describe('Directive: timespanSelector', function() {
  var scope;
  scope = null;
  beforeEach(module('myApp'));
  beforeEach(module('templates/partialDateRange.html'));
  beforeEach(function() {
    var html;
    html = "<timespan-selector></timespan-selector>";
    return inject(function($compile, $rootScope) {
      var compiled, elem;
      scope = $rootScope.$new();
      elem = angular.element(html);
      compiled = $compile(elem);
      compiled(scope);
      return scope.$digest();
    });
  });
  return it('should test', function() {});
});

当我运行它时，它说:

Error: [$injector:modulerr] Failed to instantiate module templates/partialDateRange.html due to:
    Error: [$injector:nomod] Module 'templates/partialDateRange.html' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.2.16/$injector/nomod?p0=templates%2FpartialDateRange.html

我做错了什么？

Answer 1

这一直是我们面临的一个问题，我花了几天时间才找到解决方案 - 这就是我们想出的办法。我将简单地向您展示我们的文件结构是如何配置的。

首先，您需要包含 karma-ng-html2js-preprocessor。

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

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

请记住包含模块名称，以便可以将其注入(inject)指令单元测试中。

// 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, $animate, 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 磅的 gorilla 在房间里待了很长一段时间，一旦你真正驯服了他，他就会变得非常可爱!祝你好运!