0

我已经在互联网上搜索了一段时间的答案。它涉及在 Maven 构建中使用存储在 html 文件中的外部 templateUrl 测试 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 中工作的自定义指令测试添加的配置是

  • 预处理器
  • ngHtml2Js预处理器
  • 插件下的“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 中添加一些额外的内容，以尝试使构建工作。

包.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 中一样？

4

1 回答 1

0

我们通过在 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 的配置中指定单次运行，这在大多数情况下更可取。我知道这在 Grunt 中是可能的，并且 frontend-maven-plugin 也支持 Grunt。

但就目前而言，这将不得不做。

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

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

于 2016-04-29T12:42:59.503 回答