16

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

  • qunit 资源（JS/CSS 文件）
  • qunit 使用 html 夹具测试 html 文件（每个被测文件一个）（如果需要）
  • index html 文件，它将测试 html 文件作为超链接的有序列表引用
  • PhantomJS 运行器文件，其中：
    • 打开 index html 文件并解析出测试文件列表
    • 打开每个测试文件
    • 截取每个文件的 qunit 测试结果
    • 如果有任何失败，退出状态为“1”
    • 如果没有失败，以“0”状态退出
  • 如果 phantomjs 未安装，shell 文件将以“0”退出，如果已安装，将调用 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。谁能给我推动这个方向？我该如何开始？

4

5 回答 5

5

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

于 2014-05-30T04:26:44.797 回答
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.

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

于 2014-06-27T14:39:00.533 回答
2

使用凯尔的答案和另一个插件，我能够获得一个完整的解决方案，除了预先安装 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":{ }
}`
于 2015-02-11T21:52:11.917 回答
1

我们只需将 phantomJS.exe 检入源代码控制。然后我们确定所有机器上都在使用相同版本的 phantomJS。

于 2012-10-24T07:36:08.697 回答
0

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

该项目称为qunit-testng。我还有一个示例项目，显示正在使用的库。

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

在此处输入图像描述

于 2014-04-04T22:15:16.600 回答