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

Question

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

关于如何在 Karma 上使用外部 templateUrl 进行自定义指令测试的信息和答案很多，但我发现几乎没有适用于 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，但它包含在实际工作中。

在茉莉花测试中，我注入了预处理指令：

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' 是新添加的，但其他设置是由我的同事完成的，我不一定知道我应该知道的运行s 在后台（比如phantomjs)

问题

如果我尝试 maven 构建，这就是我在 myCustomDirectiveTest

中的每个测试得到的结果

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

我很熟悉这一点，因为当我遭受不良业力（双关语意）时，注入器找不到模块 'directiveHtmlTemplate'。它现在已针对 Karma 修复，但我该如何为 jasmine-maven-plugin 执行此操作？

我知道 specRunners 的存在，以及使用自定义运行ners 的选项（customRunnerTemplate、customRunnerConfiguration），但是 jasmine-maven-plugin 主页上的简短解释并没有让我明白聪明多了。

其他详情： - 运行在将预处理器添加到 package.json 之前执行以下命令：

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

这是我不知所措的地方：从这里我该往哪里走？我如何让 jasmine-maven-plugin 预处理并添加 html-file 作为命名组件 'directiveHtmlTemplates'，就像我在 Karma 中所做的那样？

Answer 1

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

jasmine-maven-plugin 已经废弃，取而代之的是 frontend-maven-plugin，它可以安装必要的插件和运行 karma。

<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,
    ...........

可能可以在 frontend-maven-plugin 的配置中指定单个运行，这在大多数情况下更可取。我知道在 G运行t 中是可能的，frontend-maven-plugin 也支持 G运行t。

但就目前而言，这是必须要做的。

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

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

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

Jasmine Maven plugin: Custom directive test not working (injector: nomod)

javascript

maven

angularjs

jasmine-maven-plugin

karma-jasmine