带有 templateUrl 的指令 - 使用 ng-html2js 进行测试 [英] Directive with templateUrl - testing with ng-html2js

问题描述

我用内联模板创建了一个指令，对其进行了测试，一切正常.现在我已将模板放入单独的 .html 文件中，并通过指令中的 templateUrl 引用它.指令在我的页面上有效，但测试失败了:

I created a directive with inline template, tested it, everything worked fine. Now I have put the template into separated .html file and reference it via templateUrl from directive. Directive works on my page, but the tests are broken saying:

        Error: [$injector:modulerr] Failed to instantiate module source/html/par
tials/template-directive-my-directive.html due to:
        Error: [$injector:nomod] Module 'source/html/partials/template-directive
-my-directive.html' is not available! You either misspelled the module name
or forgot to load it. If registering a module ensure that you specify the depend
encies as the second argument.

我使用 ng-html2js 预处理器但没有运气(错误以上)，在我的 karma 配置和单元测试模块加载中尝试不同的路径和前缀.任何人都可以看出哪里出了问题(哪条路，或者可能有什么不同?)?

I used ng-html2js preprocessor with no luck (the error above), trying different paths and prefixes in my karma config and unit test module loading. Can anybody see what is wrong (which path, or maybe something different?) ?

我的结构是:

ui/Gruntfile.js // contains the karma config
ui/source/html/index.html
ui/source/html/partials/template-directive-my-directive.html
ui/source/js/my-directive.js
ui/source/tests/unit/unit-my-directive.js

Gruntfile.js 内部:

Inside of Gruntfile.js:

karma : {
    unit : {
        options : {
            files : [
                'source/lib/angular/angular.js', // angular first
                'source/lib/angular/*.js', // then any other angular files...
                'source/lib/x2js/xml2json.min.js',
                'source/lib/jquery/jquery.js',
                'source/lib/ui-bootstrap/ui-bootstrap.js',
                'source/js/*.js',
                'source/tests/unit/*.js',
                'source/html/partials/*.html', // because of directive templates
            ],
            autoWatch : true,
            frameworks : ['jasmine', 'detectBrowsers'],
            plugins : [
                'karma-junit-reporter',
                'karma-jasmine',
                'karma-chrome-launcher',
                'karma-firefox-launcher',
                'karma-ie-launcher',
                'karma-safari-launcher',
                'karma-opera-launcher',
                'karma-phantomjs-launcher',
                'karma-detect-browsers'
            ],
            // generate js files from html templates to expose them during testing
            preprocessors : {
                'source/html/partials/*.html' : 'ng-html2js'
            }
            // ,
            // ngHtml2JsPreprocessor : {
                // stripPrefix : 'source/html/', // tried this, no luck
                // moduleName: 'foo' // tried this, no luck
            // }
        }
    }
}

我的测试内部(unit-my-directive.js):

Inside of my test (unit-my-directive.js):

// load the template
beforeEach(module('source/html/partials/template-directive-my-directive.html'));

在我的指令 (my-directive.js) 中:

Inside of my directive (my-directive.js):

templateUrl : 'partials/template-directive-my-directive.html', // this is ok, because actual app works

从 Gruntfile.js 所在的 ui 文件夹中运行测试

Running the test from within ui folder, where the Gruntfile.js resides

推荐答案

解决方案:我花了几个小时后，这个 ST answer 帮助了我.我只需要在 karma 插件中注册 ng-html2js

Solution: after I spent hours, this ST answer helped me. All I needed is to register ng-html2js in karma plugins

plugins : [
                        'karma-junit-reporter',
                        'karma-jasmine',
                        'karma-chrome-launcher',
                        'karma-firefox-launcher',
                        'karma-ie-launcher',
                        'karma-safari-launcher',
                        'karma-opera-launcher',
                        'karma-phantomjs-launcher',
                        'karma-detect-browsers',
                        'karma-ng-html2js-preprocessor' //added this
                    ],

这篇关于带有 templateUrl 的指令 - 使用 ng-html2js 进行测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！