Question

我一直在调查在maven CI环境中进行JS单元测试的最佳方法。我目前拼凑的是我的maven项目中的以下内容：

qunit resources（JS / CSS文件）
qunit测试html文件（每个测试文件一个），如果需要，使用html fixture
索引html文件，它将测试html文件作为有序的超链接列表引用
PhantomJS转轮文件，其中：
- 打开索引html文件并解析出测试文件列表
- 打开每个测试文件
- 获取每个文件的qunit测试结果的屏幕截图
- 如果有任何失败，请退出状态为“1”
- 如果没有失败，请退出状态为“0”
如果未安装phantomjs，将以“0”退出的shell文件将调用phantomjs测试（如果已安装）

更改为pom.xml以在构建的测试阶段运行phantomjs测试：

<plugins>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.1</version>
        <executions>
            <execution>
                <id>PhantomJS Unit Testing</id>
                <phase>test</phase>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
        <configuration>
            <executable>${project.basedir}/src/main/webapp/unittest/phantomcheck</executable>
            <arguments>
                <argument>${project.basedir}/src/main/webapp/unittest/qunit-runner.js</argument>
                <argument>${project.basedir}/src/main/webapp/unittest/tests/index.html</argument>
                <argument>${project.build.directory}/surefire-reports</argument>
            </arguments>
        </configuration>
    </plugin>
</plugins>

所以，这很好用。它在我们的开发和构建机器上构建时运行qunit测试（只要安装了PhantomJS）。测试在无头浏览器环境中运行，对qunit测试没有限制。我见过的其他maven / qunit集成由于在Rhino中运行测试或其他对我们可以编写的测试类型进行限制的JS环境而无法实现。加上phantomjs使我们能够获得测试运行的屏幕截图，这有助于排除任何故障。

我的方法的缺点是在构建/开发机器上需要安装PhantomJS。我不知道如何将phantomJS捆绑到依赖项中，以便开发人员不必担心安装PhantomJS。任何人都可以向我推动这个方向吗？我该如何开始？

Answer 1

phantomjs-maven-plugin为安装幻像提供install目标，因此您无需预先安装幻像。安装phantomjs之后，它会设置一个属性，其中包含可执行文件的路径，然后其他插件可以使用。它还有一个exec目标来执行phantomjs脚本。完全披露：我写了插件。

Answer 2

在Kyle的回答基础上，我找到了解决这个问题的可靠方法。谢谢Kyle！

解决方案是使用 phantomjs-maven-plugin Maven插件。我将插件添加到我的pom.xml中（您需要将Maven升级到v3.1或更高版本才能使用该插件）：

<plugin>
    <groupId>com.github.klieber</groupId>
    <artifactId>phantomjs-maven-plugin</artifactId>
    <version>0.4</version>
    <executions>
        <execution>
            <goals>
                <goal>install</goal>
                <goal>exec</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <version>1.9.7</version>
        <checkSystemPath>false</checkSystemPath>
        <script>src/test/qunit/run-qunit-testsuite.js</script>
        <arguments>
            <argument>src/test/qunit/testsuite.qunit.html</argument>
        </arguments>
    </configuration>
</plugin>

在上面的pom.xml代码中，

重要警告：，确保使用对文件的相对（非绝对）引用，就像我所做的那样。我在使用绝对引用（从${basedir}开始）几小时后就浪费了一些时间才发现它对PhantomJS的工作目录有些奇怪。在pom.xml中使用相对引用将在HTML文件中启用相对引用（这将最大化代码可移植性）。

在上面的插件代码中，我引用了两个文件：run-qunit-testsuite.js和testsuite.qunit.html。 HTML文件只是执行所有测试的QUnit文件。 JS文件是PhantomJS的驱动程序;它接受一个参数：要加载的HTML QUnit测试文件。

要完成此解决方案，您可以从GMarik's GitHub Gist page下载示例驱动程序和测试文件。您可以并且应该根据需要调整这些文件（虽然请注意，GMarik的页面不包含开源许可证，但您需要获得任何侵犯版权的使用许可。）

将此插件添加到Maven代码时，执行Maven构建后，您将看到如下输出（改编自GMarik的页面）：

[INFO] --- phantomjs-maven-plugin:0.4:exec (default) @ project.name ---
[INFO] Executing phantomjs command
'waitFor()' finished in 200ms.
Tests completed in 21 milliseconds.
5 tests of 5 passed, 0 failed.

如果测试通过，那么您的构建将通过。如果测试失败，那么您的构建将失败！

Answer 3

使用Kyle的答案和另一个插件，我能够获得一个完整的解决方案，除了预装maven之外不需要任何东西，并设置phantomjs和qunit以允许运行测试。我开始使用maven-grunt插件（github.com/eirslett/frontend-maven-plugin）并按照本指南中的步骤（http://blog.trifork.com/2014/10/07/setting-up-maven-to-use-gruntnodejs/）进行设置。然后我尝试在maven中使用qunit，我遇到了phantomjs的麻烦并遇到了这篇文章并发现了Kyle的插件（github.com/klieber/phantomjs-maven-plugin）。我必须使用本指南中解释的自定义qunit源（http://techblog.dorogin.com/2013/08/issues-with-grunt-contrib-qunit.html）。这允许我使用kyles插件安装phantomjs然后通过grunt选项将二进制文件链接到自定义qunit。最后我的pom看起来像：

`    <plugin>
        <groupId>com.github.klieber</groupId>
        <artifactId>phantomjs-maven-plugin</artifactId>
        <version>0.4</version>
        <executions>
          <execution>
            <phase>generate-resources</phase>
            <goals>
              <goal>install</goal>
            </goals>
          </execution>
        </executions>
        <configuration>
          <version>1.9.8</version>
        </configuration>
      </plugin>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>0.0.20</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v0.10.33</nodeVersion>
              <npmVersion>1.3.6</npmVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>grunt build</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>grunt</goal>
            </goals>
            <configuration>
              <arguments>--phantomPath=${phantomjs.binary}</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
`

我的Gruntfile.js看起来像：

`    module.exports = function(grunt) {
      grunt.loadNpmTasks('grunt-croc-qunit');
      grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      qunit: {
        options: {
          'phantomPath': grunt.option('phantomPath')
        },
        all:['src/test/*.html']
      }
  });
  grunt.registerTask('default',['qunit']);
};`

我的package.json看起来像：

`    {
  "name":"reporting",
  "version":"0.0.1",
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-cli": "~0.1.13",
    "grunt-croc-qunit":"~0.3.0"
  },
  "devDependencies":{ }
}`

Answer 4

我们只是将phantomJS.exe检查到源代码管理中。然后我们确定所有机器都使用相同版本的phantomJS。

Answer 5

这是一个老问题，但我想我会链接到我的一个项目，该项目使用PhantomJS和QUnit与TestNG一起运行：

该项目名为qunit-testng。我还有一个显示正在使用的库的sample project。

这是测试输出的屏幕截图：

enter image description here

集成maven / qunit / phantomjs的更好方法是什么？

5 个答案: