Help us understand the problem. What is going on with this article?

GitLab-CIでAngularのテストを動かしてみる

More than 1 year has passed since last update.

GitLab-CI使うとテストとか自動化できるらしい、というのは知っていたんですがいままでRunnerの準備とか自分でしなきゃなくてハードル高いなーと思っていました。
でも、よくよく調べてみるとShared Runnerというものが用意されており、それを使えば設定ファイルを作るだけでGitLab-CIが使えるとのことです。
今回はangular-cliで作成したプロジェクトをGitLab-CIでテストをするまでの手順を書いていきます。
デプロイも自動でできるらしいですが、そこまではやらないです。
テストブラウザとしてはChromeのheadlessを使います。

プロジェクトの作成

とりあえず、angular-cliでプロジェクトを作ります。
バージョンは以下の通り

  • angular-cli 6.0.8
  • angular:6.0.3

今回はgitlab-ci-testという名前でプロジェクトを作成。

ng new gitlab-ci-test

テスト設定の変更

デフォルトだとテストブラウザはchromeを使うようになっているので、Chromeのheadlessモードを使うように変更します。
また、Docker上で実行するときに--no-sandboxオプションもつける必要があるので、そちらも設定します。

単体テスト

gitlab-ci-test/src/karma.conf.js
    browsers: ['ChromeHeadlessNoSandbox'], // browsersを変更
    customLaunchers: { // browserの下に追加
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    }

e2eテスト

gitlab-ci-test/e2e/protractor.conf.js
  capabilities: { // capabilitiesを変更
    'browserName': 'chrome',
    'chromeOptions': {
      'args': ['--headless', '--no-sandbox']
    }
  },

.gitlab-ci.ymlの作成

GitLab-CIに実行させたいコマンドを.gitlab-ci.ymlで記述します。

image: thompsnm/nodejs-chrome:latest

stages:
  - lint
  - test
  - e2e

before_script:
  - npm install

lint:
  stage: lint
  script:
    - ./node_modules/@angular/cli/bin/ng lint

test:
  stage: test
  script:
    - ./node_modules/@angular/cli/bin/ng test --watch=false --progress=false

e2e:
  stage: e2e
  script:
    - ./node_modules/@angular/cli/bin/ng e2e

imageでdockerのイメージを指定します。
イメージはDocker Hubで探せば見つかると思います。
今回はnodejsとchromeが入っていればよいので、thompsnm/nodejs-chromeというイメージを使いました。

stagesで実行するジョブのステージ名を指定します。
今回はlint、test、e2eの3つを実行します。
それぞれのジョブの定義は後述。

before_scriptでは、各ジョブの前に実行するコマンドを記述します。
今回はnpm installを実行させています。

lintteste2eはジョブの定義でstageにステージ名、scriptにコマンドを記述します。
testのコマンドでは--watch=falseはテスト後に実行が終了するようにつけています。
--progress=falseはコマンドラインに進捗状況が流れて結果画面が長くなるのでfalseにしています。

GitLab-CIの実行

ここまでできたら、GitLabにプッシュしてあげるとGitLab-CIが動きはじめます。
プッシュしたプロジェクトのCI/CDのところを開くと一番上の行のstagesという部分が以下のようになっていると思います(青い欠けた〇が出ていれば実行中なので終わるまでお待ちください)。

image.png

この〇は左からstagesで定義されたジョブの結果になっています。
1つめはlintなのでこれは成功しています。
2つめはtestですが、失敗しています。
3つめはe2eですが、2つめのジョブが失敗しているのでそれ以降のジョブがスキップされています。
ジョブが失敗すると、自動で登録アドレスにメールが送られます。

この〇をクリックして表示されるジョブ名をクリックするとそのジョブの詳細画面が開きます。
image.png

実行時のコマンドラインが表示されるので、それを解析します。
今回の場合、以下の部分がエラーの原因でした。

HeadlessChrome 67.0.3396 (Linux 0.0.0) AppComponent should have as title 'gitlab-ci-test' FAILED
    Expected 'app' to equal 'gitlab-ci-test'.

これは、別記事でも書きましたがangular-cliでプロジェクトを作るとテストが通らない状態のものが生成されるためです。
以下の2箇所を修正します。

src/app/app.component.ts/9行目
title = 'gitlab-ci-test'; // appから変更
src/app/app.component.spec.ts/19行目
expect(app.title).toEqual('gitlab-ci-test'); // appから変更

修正後、再度プッシュすると今度はすべてのジョブが成功するかと思います。
image.png

残った課題

e2eのコマンド実行時にコマンドラインにいろいろ出力されてしまって長くなってしまうので、testコマンドの--progress=falseみたいなのがあるといいんですが見つからず。

frost_star
まだまだ半人前プログラマー。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした