大河内教授の憂鬱: Jenkinsを利用したJSUnitの実行

普段、Java周りではJenkinsを利用していますが、
静岡ITPro勉強会インフラ部でBTS周りをやる事になったので、
CIの発表としてJenkinsの利用方法をやる事になりました。

通常Javaでテスト作ってMavenで構成して、SVNでつなげるというパターンが多いのですが
勉強会で発表する事もあり(Java屋さんがいない)少しいつもと違う環境で動作させる事にしました。
という事でJavaScriptのプロジェクトを準備して、GitHubに連携って方法を行なってみる事にしました。

継続的インテグレーションの意義

Jenkinsはソース管理システムからソースコードを引っ張ってきて、テストを実行してレポートをする。
というのが王道の使い方です。
これを常時繰り返す事で、常にソースコードはテストを常に実行され、健全な状態に保って行く事が可能です。
Cronみたいなイメージでも使用できますが、レポート等も取れ、可視化できるので
インフラ周りでも使う事は可能だと思います。

開発の現場(出先など)で苦労する点としては
・ビルドサーバを準備できない
・そもそもテストが自動化できてない＞＜。
等と苦労する点があります。

管理者自身を助ける(単体テストの可視化と報告)優秀なやつなのですが
案外管理者等に伝わらない事が問題だと思っています。
※まぁこれは私のちから不足なのですが。

インストール

通常私の開発環境周りではTomcatが多いのですが、
軽いほうがいいかな？っと思い、軽量なコンテナのJettyを採用してみました。

ここからダウンロードしてきます。
ポート変更はetc/jetty.xmlでport(デフォは8080)の部分を変更すれば可能です。

「java -jar start.jar」
※ポートを開ける権限が無ければsudo等で実行してください

でサーバは起動します。
Jenkinsをダウンロードしてきます。

war形式で配布されています。※一瞬インストーラーになってたので焦った＞＜。
「jankins.war」をJettyの「webapps」ディレクトリに展開すると

「http://localhost:8080/jenkins/」で起動画面をみる事ができます。

ジョブ

ジョブを作ります。
通常はMavenを使って構成しているのですが、その辺りに詳しくないとわかりづらいと思ったので
やはりここはフリースタイルで行なってみる事にした。

JSUnitでテストを出きるようにする

Javaのテストは良く書いていますが、JSUnitでテストをするのは初でした。
なのでまずJSUnitを準備してテストできる状況にします。

http://sourceforge.net/projects/jsunit/files/jsunit/2.2/

解凍を行ったら
app,css,images,java,build.xml,testRunner.html
をプロジェクトに置きます。
Javaは通常実行時には要らないのですが、JenkinsでJSUnitプラグインを利用する際に指定するので必要です、
build.xmlはserver.xml等と名前を変えておきます。
※後述するビルドを「build.xml」とする為で、どちらも任意の名前で良い。
配置するディレクトリは「jsunit」とか「test」とかで良いと思います。

<script language="JavaScript" type="text/javascript">

/**
* テストの一覧
*/
function suite() {
 var suite = new top.jsUnitTestSuite();
 suite.addTestPage('testDesigner.html');
 return suite;
}

</script>

というSuiteを用意して増えた時でも大丈夫な状態にしておきます。

<script language="JavaScript" type="text/javascript">
// テスト用のコード
function testMethod() {
assertEquals($('.item').length,3);
assertNotNull($('.content-box'));
}
</script>

というテストメソッドを作っておきます。他のxUnitと同じ感じですね。

でファイルシステムでも良いので「testRunner.html」にアクセスします。

testRunner.htmlからファイルを指定してRunするとこのようにテスト結果が出力されます。

これでテストする準備は整った。

プラグインを入れよう！

普段使っている時でもJenkinsのプラグインには様々なものがあります。
ソース管理はほとんどサポートしていますし、CheckStyle等のコードチェッカー等も充実しています。

今回はGitHub（＋Git）とJSUnit（＋xUnit）のプラグインを入れます。

ソースを取ってこよう！

ジョブの設定画面で「ソースコード管理システム」で「Git」を選択します。
そこにGitHubにあるリポジトリを指定しておきます。

この時点でビルドすると「ワークスペース」にソースを持ってこれるはずなので
それを確認しておくのが良いでしょう。こんな感じです。

ビルドを設定してテストしよう！

テストを実行する為、ビルドはAntを呼び出します。
Ant呼び出しを設定して、testをターゲットにしておきます。
Antの実行パス等はJenkins自体の設定で指定できます。

ビルドファイルなのですがリポジトリ等に置いてあるAntの設定ファイルを叩きます。
「./{projectName}/test/build.xml」
とかになると思います。

build.xmlは以下※展開してください。


<?xml version="1.0" encoding="utf-8"?>

<project name="JSUnitForJenkins" default="test" basedir=".">
  <description>
    Jenkins 上で JSUnit によるユニットテストを行う。
  </description>
  <property environment="jenkins"/>

  <!-- プロジェクトのホームディレクトリ -->
  <property name="home"
            location="${jenkins.WORKSPACE}/drag-designer"/>
  <!-- テスト対象のページ -->
  <property name="testPage"
            location="${home}/test/testSuite.html"/>
  <!-- JSUnit の動作するポート番号 -->
  <property name="jsunitPort"
            value="8090"/>
  <!-- Firefox のパス -->
  <property name="firefox"
            location="/Applications/FireFox.app/Contents/MacOS/firefox"/>
  <!-- JSUnit のホームディレクトリ -->
  <property name="jsunitHome"
            location="${home}/test"/>
  <!-- ログを出力するディレクトリ -->
  <property name="logsDirectory"
            location="${home}/test/logs"/>
  <!-- JSUnit 形式のログファイルを JUnit 形式のログファイルに変換する XSLT -->

  <!-- TestRunner -->
  <property name="testRunner"
            location="${jsunitHome}/testRunner.html"/>
  <!-- JSUnit Server を起動する build.xml -->
  <property name="buildScript"
            location="${jsunitHome}/server.xml"/>

  <target name="test">
    <mkdir dir="${logsDirectory}"/>
    <delete includeemptydirs="true">
      <fileset dir="${logsDirectory}" includes="**/*"/>
    </delete>
    <makeurl file="${testRunner}" property="testRunnerURL"/>
    <ant antfile="${buildScript}" dir="${jsunitHome}" target="standalone_test">
      <property name="browserFileNames" value="${firefox}"/>
      <property name="port" value="${jsunitPort}"/>
      <property name="logsdirectory" location="${logsDirectory}"/>
      <property name="url" value="${testRunnerURL}?testPage=${testPage}"/>
    </ant>
   
  </target>
</project>

プロジェクトのホームを設定して対応のSuiteのページを設定。
ブラウザを指定、ログ出力(テスト結果)の箇所、TestRunnerの指定、
JSUnitをコピーした際に名前を変更しておいてserver.xmlを指定します。

この設定でJenkinsはワークスペース上に取ってきたソースを元にJSUnitの実行を行います。
途中Firefoxで実行していますが
これらを増やして、クロスブラウジング等のテストを行うのも可能です。

処理結果をリポートする

Build後の処理として
「Publish testing tools result report」を選択して
JSUnit-2.2を選択して追加します。

**{projectName}/test/logs/*.xml

と、ビルドした際のテスト結果を出力した位置を指定します。これでOKです。

ジョブ実行

これで準備完了ですのでジョブを実行します。
実行時にFirefoxが起動してびっくりしますけど＞＜。

で結果がこれ。

テスト自体はしょぼいですけど、できましたー

問題

・クロスブラウジングのテスト何かもできるなぁ〜と思っていたのですが
　通常動作しているJenkinsサーバはXがないけど動作するのかな？

・今回Firefox使いましたけど、バージョンアップとかの画面出てしまうと
　テスト自体ストップする状況になってしまうような気がする

おまけ

・本当はMylynとGitHubをつなげたIssue管理をやろうとしたのですが
　それは後日ブログに書きます。
・私個人としてはCIでパトランプを回すのが目標なのですが
　後日の勉強会でやった事ある方にパトランプを回す所を見せてもらいました！

パトランプの動画

やってみて、興味を示してくれた方が何人かいらっしゃって
既に実行された方もいるみたいなので、やって良かった！と思いました。
※パトランプの成果が一番大きいかも＞＜。

大河内教授の憂鬱

2011年10月12日水曜日

Jenkinsを利用したJSUnitの実行

0 件のコメント:

ブログアーカイブ