16

Maven CI 環境で JS 単体テストを行うための最良の方法を調査してきました。私が現在一緒に石畳になっているのは、私のmavenプロジェクトで次のとおりです。

  • qunit リソース (JS/CSS ファイル)
  • 必要に応じて html フィクスチャを含む qunit テスト html ファイル (テスト対象のファイルごとに 1 つ)
  • ハイパーリンクの順序付きリストとしてテスト html ファイルを参照するインデックス html ファイル
  • PhantomJS ランナー ファイル:
    • index html ファイルを開き、テスト ファイルのリストを解析します。
    • 各テストファイルを開く
    • 各ファイルの qunit テスト結果のスクリーンショットを取得します
    • 障害が発生した場合は、ステータス「1」で終了します
    • 異常が無ければステータス「0」で終了
  • phantomjs がインストールされていない場合は「0」で終了し、インストールされている場合は phantomjs テストを呼び出すシェル ファイル

  • ビルドのテスト段階で phantomjs テストを実行するように pom.xml を変更します。

    <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

2

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 にリンクすることができました。最終的に、私のポンは次のようになりました。 

`    <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 に答える