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

Question

我一直在研究在我们的 Maven CI 环境中进行 JS 单元测试的最佳方法。我目前在我的 Maven 项目中拼凑的内容如下：

• qunit 资源（JS/CSS 文件）
• qunit 测试 html 文件（每个被测文件一个）以及 html 固定装置（如果需要）
• 索引 html 文件，该文件引用测试 html 文件作为超链接 PhantomJS 运行程序文件的有序列表
• ，其中：
  • 打开索引 html 文件并解析出测试文件列表
  • 打开每个测试文件
  • 截取每个文件的 qunit 测试结果的屏幕截图
  • 如果出现任何失败，则以状态“1”退出
  • 如果没有失败，则以状态“0”退出
• shell 文件，如果未安装 phantomjs，该文件将以“0”退出；如果已安装，将调用 phantomjs 测试

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

  <插件>;
      <插件>
          org.codehaus.mojo;
          exec-maven-plugin;
          <版本>1.1
          <处决>
              <执行>
                  PhantomJS 单元测试
                  <阶段>测试
                  <目标>
                      <目标>执行
                  
              
          
          <配置>
              <可执行文件>${project.basedir}/src/main/webapp/unittest/phantomcheck
              <论点>
                  <参数>${project.basedir}/src/main/webapp/unittest/qunit-runner.js
                  <参数>${project.basedir}/src/main/webapp/unittest/tests/index.html
                  <参数>${project.build.directory}/surefire-reports
              
          
      
  
  

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

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

Answer 1

phantomjs-maven-plugin 提供了安装 phantomjs 的 install 目标，这样你就不需要不需要预先安装。安装 phantomjs 后，它会设置一个属性，其中包含其他插件可以使用的可执行文件的路径。它还具有执行 phantomjs 脚本的 exec 目标。完全披露：我写了这个插件。

Answer 2

基于 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 的 GitHub Gist 页面 下载示例驱动程序和测试文件。您可以而且应该根据您的需要调整这些文件（尽管请注意，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。我还有一个 示例项目 显示正在使用的库。

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