angularjs requirejs karma指令templateUrl测试失败

时间:2015-10-12 03:29:01

标签: angularjs angularjs-directive requirejs karma-runner karma-jasmine

问题

  • 我将authorUrl替换为author-signature.js中的模板,然后测试成功。
  • 但我在author-signature.js中使用templateUrl方式,我测试失败。我看文件加载和chrome调试,author-signature.html确实转换为js,html内容确实存在于$ templateCache中,但我测试失败。 PRINTSCREEN:
    author-signature.html.js
    $templateCache debug content

文件路径

--public
----scripts
--------**/*.js
--test
----**/*.js
--views
----templates
--------**/*.html

测试main.js

require.js主条目文件

var allTestFiles = [];
var TEST_REGEXP = /(\-test)\.js$/i;

Object.keys(window.__karma__.files).forEach(function (file) {
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (TEST_REGEXP.test(file)) {
            allTestFiles.push(file);
        }
    }
});

require.config({
    baseUrl: '/base/public/scripts',
    paths: {
        'jquery': '../libs/jquery/dist/jquery',
        'angular': '../libs/angular/angular',
        'angularMocks': '../libs/angular-mocks/angular-mocks',
        'templates': '../../views/templates'
    },
    shim: {
        'angular': {
            deps: ['jquery'],
            exports: 'angular'
        },
        'angularMocks': {
            deps: ['angular'],
            exports: 'angular.mock'
        },
        'templates/default/author-signature.html': ['angular']
    },
    deps: allTestFiles,
    callback: window.__karma__.start
});

karma.conf.js

karma配置文件,我通过ng-html2js将js翻译成html

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', 'requirejs'],
        files: [
            {pattern: 'public/libs/jquery/dist/jquery.js', included: false},
            {pattern: 'public/libs/angular/angular.js', included: false},
            {pattern: 'public/libs/angular-mocks/angular-mocks.js', included: false},
            {pattern: 'public/scripts/**/*.js', included: false},
            {pattern: 'views/templates/**/*.html', included: false},
            {pattern: 'test/**/*-test.js', included: false},
            'test/test-main.js'
        ],
        exclude: [
            'public/scripts/build-main.js',
            'public/scripts/require-config.js',
            'public/scripts/bootstrap.js'
        ],
        browsers: ['Chrome'],
        reporters: ['progress', 'html', 'coverage'],
        htmlReporter: {
            outputFile: 'report/units.html',
            pageTitle: 'Unit Tests',
            subPageTitle: 'Unit tests with karma jasmine'
        },
        preprocessors: {
            'public/scripts/**/*.js': ['coverage'],
            'views/templates/**/*.html': ['ng-html2js']
        },
        coverageReporter: {
            type: 'html',
            dir: 'report/coverage/'
        },
        ngHtml2JsPreprocessor: {
            stripPrefix: 'views/',
            stripSuffix: '.html',
            moduleName: 'templates'
        }
    });
}

作者签名-test.js

指令测试文件

define(['angularMocks', 'directives/default/author-signature', 'templates/default/author-signature.html'], function () {
    describe('Unit: Hello Directive', function () {
        var $compile, $rootScope;
        beforeEach(function () {
            module('angularApp');
            module('templates');
            inject(function (_$compile_, _$rootScope_) {
                $compile = _$compile_;
                $rootScope = _$rootScope_;
            });
        });

        it('should display the hello text properly', function () {
            var elt = $compile('<author-signature author="Plus"></author-signature>')($rootScope);
            expect(elt.text()).toEqual('Plus');
        });
    });
});

作者 - signature.js

只是指令文件

define('directives/default/author-signature', [
    'angular-app'
], function (angularApp) {
    angularApp.directive('authorSignature', function () {
        return {
            restrict: 'EA',
            scope: {
                author: '@'
            },
            replace: true,
            templateUrl: 'templates/default/author-signature'
        };
    });
});

作者 - signature.html

<h1>{{author}}</h1>

角app.js

define('angular-app', [
    'angular'
], function (angular) {
    var angularApp = angular.module('angularApp', []);
    return angularApp;
});

1 个答案:

答案 0 :(得分:1)

OMG,我忘了在测试指令中添加 $rootScope.$digest(); 这导致该指令范围的属性不会改变。