GitLab-CIを試してみた ~その2:ユニットテスト編

GitLab-CIを試してみた ~その2:ユニットテスト編

今回は短期集中連載の第2回目『ユニットテスト編(PHPで実施/JavaScriptで実施)』をお送りします。なお、

第1回:環境構築編
第2回:ユニットテスト編(PHPで実施/JavaScriptで実施) →ご覧頂いている本記事です
第3回:デプロイ編

前回の記事にも記載しておりますが、手探りで実践したところもありますので、誤りやより良い方法があるかもしれませんが、あらかじめご了承ください。

なお、今回の『ユニットテスト編』は前回ご紹介した環境構築が完了していることを前提としておりますので、本記事が初見の方は事前に『環境構築編』をご覧いただき、事前準備を済ませていただければ幸いです。

PHPユニットテストを実施する

PHPUnitを用いた確認になります。テスト自体は非常に簡単のものを用意し、GitLab-CIをメインとします。

大まかなフローは以下の3つになります。

  1. テストを作成する
  2. .gitlab-ci.ymlを作成する
  3. テストを実施する

手順1:テストを作成する

PHPUnitで簡単なテストを用意し、実際に試してみます。
以下を実行し、格納場所を用意しておきましょう。

次にComposer関連を格納場所「php_sample」に移動します。

続いて、以下を実行してPHPUnitをインストールしましょう。

  1. curl -sS https://getcomposer.org/installer | php
  2. php composer install

そして、簡単なテストを用意します。
vim lib/Sample.php

最後に実際にPHPUnitを動かして確認しましょう。

これで感じで完了です。このあとRunnerを登録し、CIの準備に入ります。

GitLabがインストールされているゲストOS上で行います。
php5.6で稼働させるために以下を実行し、Runnerを登録してみます。

この後は以下のような対話形式になりますので、設定を進めていくことになります。

これで設定が完了です。
ただし、Dockerで上がった環境が名前解決ができないので、作成された設定ファイルを変更することになります。

/etc/gitlab-runner/config.tomlこのファイルの[runners.docker]に以下を追加

 →192.168.33.111はゲストOSのIP

この後、gitlab-ctl restartを実行して反映させます。

手順2:.gitlab-ci.ymlを作成する

Runnerを用いてテストする設定である.gitlab-ci.ymlを作成していきます。
以下ような流れになります。
事前準備のスクリプトを用意
.gitlab-ci.ymlを作成

作成するDockerでPHPエクステンションを有効にするため、事前準備のスクリプトを用意します。
まずはci/before_script_for_php.shを作成します。

続いて.gitlab-ci.ymlをリポジトリのトップに作成します。

ついでに.gitignoreも作成しておきましょう。これもリポジトリトップに作成することになります。

手順3:テストを実施する

後は以下の手順でコミットするだけです。

image09

完了するとrunningがpassedに変わります。
詳細を見ると今回の場合は網羅率100%になっていますが、一応抜き出しておきます。

GitLabのプロジェクト設定で「CI/CD Pipelines」というのがあるので設定します。

image01

これで再実行すると

image07

こういった感じでカバレッジが追加されます。
あくまでもGitLab-CIを使ったPHPUnitの確認なので、ここまでといったところでしょうか。

JavaScriptユニットテストを実施する

続いて、Jasmin、Karma、Phantomjs、Angularjsを用いた確認を行います。

  1. PHPテスト同様、大まかなフローは以下の3つで考えています。
  2. テストを作成する
  3. .gitlab-ci.ymlを作成する
  4. テストを実施する

手順1:テストを作成する

あらかじめ、以下の準備をしておきましょう。

  1. cd my_pro
  2. mkdir js_sample
  3. cd js_sample
  4. mkdir test
  5. mkdir lib
  6. mkdir app

なお、node、npmのインストールは割愛します。
angularjsを取得したら、libディレクトリに格納しておきます。

次にpackage.jsonを準備します。

npm installでインストールをし、次にKarmaの設定ファイルを作成しましょう。

「Do you want to capture any browsers automatically ?」と選択を迫られますので、ここでPhantomJSを指定します。

続いてkarma.conf.jsを一部変更していきます。

実際にテストを作成します。

この状態でnpm testを行うと……

image11

このような感じで成功するはずです。

この後、Runnerの登録です。php5.6の時と同様に、Runnerの作成を行います。
なお、node:6.5.0で用意しました。

PHPユニットテストの時と同様に、この状態だと名前解決ができないので、作成された設定ファイルを変更します。

/etc/gitlab-runner/config.tomlこのファイルの[runners.docker]に以下を追加

extra_hosts = [“debian-bitwave:192.168.33.111”]  →192.168.33.111はゲストOSのIP

この後、gitlab-ctl restartを実行します。

手順2:.gitlab-ci.yml作成

.gitlab-ci.ymlをリポジトリのトップに作成します。
※なお、以下は本記事前文のPHPユニットテストの設定も含めた状態になっています

手順3:テストを実施する

あとはコミットするだけです。
PHPのjobも含んでいる状態であるため、以下のような表示になります。

image15

JavaScriptの標準出力において、カバレッジの出し方が分かりませんでした。
そのため、今回はテストが通過したことだけの確認に留まります。

なお、個人的にJavascriptのテストはあまり作ったことが無かったので、今回の検証で問題なくGitLab-CIで動くことが確認できたのは、大きな収穫だったのではないでしょうか

次はいよいよ最終回、「デプロイ編」をお楽しみに!

コメント