Question

我在互联网上搜索了一段时间的答案。它涉及使用存储在html文件中的外部templateUrl在Maven构建中测试AngularJS自定义指令。（在Karma上成功运作之后）

关于如何使用外部templateUrl在Karma上进行自定义指令测试，有很多信息和答案，但我发现在Jasmine Maven插件上几乎没有任何内容。我找到的只是http://searls.github.io/jasmine-maven-plugin上的API和概述说明。没有太多深入的教程或指南，也没有其他问题，这与在Maven构建上测试自定义指令直接相关。

首先，我必须解决问题，让它在Karma上运行，因为我们都是第一次这样做。我用预处理解决了它，我将首先解释设置（使用伪文件和路径）：

karma.conf.js （隐藏此问题无关文件的简化版）

module.exports = function(config) {
    config.set({
        basePath: 'src/',

        preprocessors: {
            'main/pathToHtmlFiles/myModule/directive/**/*.html': 'ng-html2js'
        },

        files: [
            'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js',
            'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.min.js',
            'main/pathToJsFiles/myModule/mainApp.js',
            'main/pathToJsFiles/myModule/directive/myDirective.js',

            'test/pathToJsFiles/**/*.js',

            'main/pathToHtmlFiles/myModule/directive/myDirectiveTemplate.html'

        ],

        ngHtml2JsPreprocessor: {
            stripPrefix : 'main/pathToHtmlFiles/',
            moduleName: 'directiveHtmlTemplates'
        },

        frameworks: ['jasmine'],

        autowatch: true,

        browsers: ['PhantomJS'],

        plugins: [
            'karma-jasmine',
            'karma-chrome-launcher',
            'karma-opera-launcher',
            'karma-ng-html2js-preprocessor'
        ]
    })
};

专门为在Karma中工作的自定义指令测试而添加的配置是

预处理器
ngHtml2JsPreprocessor
'插件下的'karma-ng-html2js-preprocessor'
myDirective.js和myDirectiveTemplate.html在文件下。

自定义指令中的

templateUrl属性是'myModule / directive / myDirectiveTemplate.html'，

我不认为html文件的内容与问题相关。我没有在上面的代码中包含angular-mocks.js，但它包含在实际工作中。

在茉莉花测试中，我注入了preprocessed指令：

beforeEach(module('mainApp'));

beforeEach(module('directiveHtmlTemplates'));

然后我在每次测试之前编译指令：

var element = angular.element('<my-custom-directive><my-custom-directive>');
var compiledElement = compile(element)(scope);
scope.$digest();

到目前为止，这么好，测试正在进行中。

现在出现了真正的问题：使用Maven构建这项工作。

我们使用jasmine-maven-plugin进行的设置如下：

的pom.xml

<plugin>
    <groupId>com.github.searls</groupId>
    <artifactId>jasmine-maven-plugin</artifactId>
    <version>2.0</version>
    <executions>
        <execution>
            <goals>
                <goal>test</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <jsSrcDir>src/main/pathToJsFiles/myModule/js</jsSrcDir>
        <jsTestSrcDir>src/test/pathToJsFiles/myModule/js</jsTestSrcDir>
        <preloadSources>
            <source>https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js</source>
            <source>https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.min.js</source>
            <source>${basedir}/src/main/pathToJsFiles/myModule/mainApp.js</source>
            <source>${basedir}/src/main/pathToJsFiles/myModule/directive/myDirective.js</source>
        </preloadSources>
    </configuration>
</plugin>

myDirective.js是这里的新文件。

（我刚刚发现'jsSrcDir'在写这篇文章时已经过时了，但鉴于我们以前没有遇到任何问题，我认为'jsSrcDir'和'jsTestSrcDir'都有路径与'preloadSources下的文件重叠不过，这是我们迄今为止所拥有的，所以我会添加它们，以防你碰巧看到相关的东西。

我还尝试在package.json中添加一些额外内容，以试图让构建工作。

的package.json

{
    "name": "my-module",
    "version": "1.3.0-SNAPSHOT",
    "dependencies": {
        "grunt-cli": "1.2.0",
        "jasmine-core": "^2.4.1",
        "karma-cli": "0.1.2"
    },
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0",
        "grunt-karma": "^0.12.1",
        "karma": "^0.13.22",
        "karma-jasmine": "^0.3.8",
        "karma-phantomjs-launcher": "^1.0.0",
        "karma-ng-html2js-preprocessor": "0.2.1"
    }
}

底部的'karma-ng-html2js-preprocessor'是新添加的，但设置不是由我的同事完成的，我不一定知道我应该在后台运行什么（例如phantomjs））

问题

如果我尝试maven build，这就是myCustomDirectiveTest中每次测试的结果

[$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=directiveHtmlTemplates&p1=[$injector:nomod]

我很熟悉这种情况，当我遭遇不良噶（双关语）时，注射器无法找到模块'directiveHtmlTemplate'。现在为Karma修复了，但是我如何为jasmine-maven-plugin做这个呢？

我知道specRunners的存在，以及使用自定义运行器（customRunnerTemplate，customRunnerConfiguration）的选项，但是关于jasmine-maven-plugin主页的简要说明并没有让我更加明智。

其他细节： - 在将预处理器添加到package.json之前，请执行以下命令：

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

这是我不知所措的地方：我从哪里开始？如何让jasmine-maven-plugin预处理并将html文件添加为命名组件'directiveHtmlTemplates'，就像我在Karma中一样？

Answer 1

我们通过在Maven中使用不同的插件找到了不同的解决方案。

jasmine-maven-plugin已被废弃，并被frontend-maven-plugin取代，后者可以安装必要的插件并运行业力。

<plugin>

    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.0</version>
    <executions>

        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v6.0.0</nodeVersion>
                <npmVersion>3.8.8</npmVersion>
            </configuration>
        </execution>

        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>

            <configuration>
                <arguments>
                    install karma-ng-html2js-preprocessor --save-dev
                </arguments>
            </configuration>
        </execution>

        <execution>
            <id>javascript tests</id>
            <goals>
                <goal>karma</goal>
            </goals>
        </execution>
    </executions>

</plugin>

还在karma.conf.js中添加了以下内容，以避免卡在Maven构建中：

config.set({
    singleRun : true,
    ...........

可能在前端-maven-plugin的配置中指定单次运行，在大多数情况下更为可取。我知道这在Grunt中是可能的，而frontend-maven-plugin也支持Grunt。

但是现在，这将是必须的。

回顾一下，npm install karma-ng-html2js-preprocessor --save-dev可能是jasmine-maven-plugin的缺失因素。如果我为npm使用了插件并让它运行该命令，我怀疑它可以解决问题。

但从好的方面来看，Maven构建和手动Karma测试现在都依赖于相同的karma.config.js文件，这是一个很好的优势。以前，我在Karma.conf.js和jasmine-maven-plugin下单独列出它们。

Jasmine Maven插件：自定义指令测试不起作用（注入器：nomod）

1 个答案: