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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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

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

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

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

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

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

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

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

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

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

cd my_pro
mkdir php_sample
cd php_sample
mkdir test
mkdir lib

次にComposer関連を格納場所「php_sample」に移動します。
vim composer.json
{
"require-dev": {
"phpunit/phpunit": "*",
"phpunit/php-code-coverage": "*"
},
"autoload": {
"psr-0": {
"":"lib/"
}
}
}
vim phpunit.xml

./test




lib





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

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

そして、簡単なテストを用意します。
vim lib/Sample.php
name = 'default';
}

public function getName() {
return $this->name;
}

public function setName($name) {
$this->name = $name;
}
}

vim test/SampleTest.php
class SampeleTest extends PHPUnit_Framework_TestCase
{
public function testNew()
{
$obj = new Sample();
$this->assertInstanceOf('Sample', $obj);
}

public function testSetName()
{
$obj = new Sample();
$obj->setName('hoge');
$this->assertEquals('hoge', $obj->getName());
}
}

最後に実際にPHPUnitを動かして確認しましょう。
vendor/bin/phpunit
PHPUnit 5.5.4 by Sebastian Bergmann and contributors.

.. 2 / 2 (100%)

Time: 159 ms, Memory: 6.25MB

OK (2 tests, 2 assertions)

Generating code coverage report in Clover XML format ... done

Generating code coverage report in HTML format ... done

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

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

sudo gitlab-ci-multi-runner register

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

Running in system-mode.

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/ci):
http://192.168.33.111/ci ←ここはGitLabのドメインに「ci」を付与したもの
Please enter the gitlab-ci token for this runner:
sxRbdmCaNfPEz98gyMW5 ←ここはGitLabのRunner箇所に記載されているもの
Please enter the gitlab-ci description for this runner:
[debian-bitwave]: php-sample
Please enter the gitlab-ci tags for this runner (comma separated):
php-sample-tag
Registering runner... succeeded runner=sxRbdmCa
Please enter the executor: shell, ssh, virtualbox, docker+machine, docker-ssh+machine, docker, docker-ssh, parallels:
docker
Please enter the default Docker image (eg. ruby:2.1):
php:5.6
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

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

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

vim /etc/gitlab-runner/config.toml
extra_hosts = ["debian-bitwave:192.168.33.111"]

 →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を作成します。

#!/bin/bash

# We need to install dependencies only for Docker
# [[ ! -e /.dockerenv ]] && [[ ! -e /.dockerinit ]] && exit 0

set -xe

# Install git (the php image doesn't have it) which is required by composer
apt-get update -yqq
apt-get install git zip unzip -yqq

# Here you can install any other extension that you need
pecl install xdebug && docker-php-ext-enable xdebug

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

image: php:5.6

stages:
- test

job1:
stage: test
before_script:
- bash ci/before_script_for_php.sh > /dev/null
script:
- cd php_sample
- curl -sS https://getcomposer.org/installer | php
- php composer.phar global require hirak/prestissimo
- php composer.phar install
- vendor/bin/phpunit --coverage-text --colors=never --configuration phpunit.xml
tags:
- php-sample-tag

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

vendor/
build/
composer.phar

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

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

git add .
git commit -m ‘php test’
git push origin master

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ディレクトリに格納しておきます。

wget https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js
mv angular.min.js lib/

次にpackage.jsonを準備します。
{
"devDependencies": {
"angular-mocks": "^1.5.8",
"jasmine": "^2.4.1",
"jasmine-core": "^2.5.0",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.1",
"phantomjs": "^2.1.7"
},
"scripts": {
"test": "node_modules/karma/bin/karma start karma.conf.js"
}
}

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

node_modules/karma/bin/karma init karma.conf.js

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

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

// list of files / patterns to load in the browser
files: [
'lib/angular.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'test/*.test.js'
],

// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,

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

vim app/sample-controller.js

angular.module('app', []).controller('SumController', function SumController() {
var self = this;
self.sum = function(a, b) {
return a + b
};
});

vim test/sample-contoller.test.js

describe('Sum', function () {

beforeEach(module('app'));

var $controller;

beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));

describe('sum', function () {
it('1 + 1 should equal 2', function () {
var controller = $controller('SumController', {});
var result = controller.sum(1, 2);
expect(result).toBe(3);
});
});
});

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

image11

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

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

sudo gitlab-ci-multi-runner register

Running in system-mode.

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/ci):
http://192.168.33.111/ci ←ここはGitLabのドメインに「ci」を付与したもの
Please enter the gitlab-ci token for this runner:
sxRbdmCaNfPEz98gyMW5 ←ここはGitLabのRunner箇所に記載されているもの
Please enter the gitlab-ci description for this runner:
[debian-bitwave]: js-sample
Please enter the gitlab-ci tags for this runner (comma separated):
js-sample-tag
Registering runner... succeeded runner=sxRbdmCa
Please enter the executor: virtualbox, docker+machine, docker-ssh+machine, docker, docker-ssh, parallels, shell, ssh:
docker
Please enter the default Docker image (eg. ruby:2.1):
node:6.5.0
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

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ユニットテストの設定も含めた状態になっています

stages:
- test

job1:
image: php:5.6
stage: test
before_script:
- bash ci/before_script_for_php.sh > /dev/null
script:
- cd php_sample
- curl -sS https://getcomposer.org/installer | php
- php composer.phar global require hirak/prestissimo
- php composer.phar install
- vendor/bin/phpunit --coverage-text --colors=never --configuration phpunit.xml
tags:
- php-sample-tag

job2:
image: node:6.5.0
stage: test
script:
- cd js_sample
- npm install
- npm test
tags:
- js-sample-tag

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

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

image15

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

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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ