はじめに

Angularは下記Verisonでお届けします。

AngularCli:7.0.3

先日の、bitbank LT NightでみたJestがとても良い感じで使ってみたくなったので

現在使用しているCI環境のAzure DevOps(以降ADOと呼びます)で使用できるか確認してみました。

jestjs.io

Azure DevOps

お仕事で使用していますが、Publicなプロジェクトでも使用できます。

Publicなプロジェクトの場合(厳密にはOSSプロジェクトとのことですが)、ビルド時間を無制限に回せるようです。

Azure DevOps のご紹介 – Cloud and Server Product Japan Blog

WebからWindowsアプリ、Andorid/iOSもビルド可能となかなか最強味が強い環境です。

~~OneDriveみたいに、無制限→制限！のような未来を辿らなければいいと願っています。~~

Angularの下準備

まずはAngularでJestのテストができるようにします。

下記を参考にしました。

izifortune.com

ひとまず、ng new したプレーンな環境から作成しました。

上記の記事に記載されている通りの変更を行います。

パッケージのインストール
jestテストするためのスクリプトをpackage.jsonに追加
jestの設定ファイルのjest.tsをsrc ディレクトリに配置
tsconfig.spec.jsonの変更

あっさりとJestでテストが可能なところまで持っていくことができました。

f:id:TakasDev:20181111192325p:plain

結果レポートの出力

前の記事の内容の通り、ADOはjUnitのXMLを食わせばレポート出力してくれるので

jestからjUnitのレポートを出力できるようにします。

パッケージのインストール

jUnit出力に使用するパッケージをインストールします。

npm install --save-dev jest-junit

レポート出力の設定

Jestコマンドでレポート出力されるよう、package.jsonの設定を変更していきます。

  "jest": {
...
    "reporters": [
      "default",
      "jest-junit"
    ]
  }

defaultが先程行ったコマンドラインで表示されるテスト

jest-junitがjUnitのXML形式で出力されるテストの設定です。

今回は、jest-junitのオプションに特に指定をしないので

rootディレクトリに「junit.xml」という名前で結果ファイルが出力されます。

テストコマンドも少し変更します。

今回の変更でテストレポートが複数パターンになったので

テスト内容によってどっちのレポートを使用するか指定しておきます。

package.jsonのスクリプトを下記のように変更しました。

  "scripts": {
...
    "test": "jest --reporters=default",
    "test:ci": "jest --reporters=jest-junit",
...
  }

スクリプトコマンドの通り、npm run test:ci でXMLが出力されます。

CIの構築

今回はGitHub リポジトリから、ソースを引っ張ってきてADOでCIします。

せっかくなので、Public環境のADOを使用しようと思います。

ADOの設定

GitHubのリポジトリからソースを引っ張ってくるパイプラインを作ります。

f:id:TakasDev:20181111194540p:plain

f:id:TakasDev:20181111194659p:plain

NewPipelineでGitHubを選択するだけ。簡単ですね。

テンプレートはどうせあとからいじるので、Blankなものを選択します

パイプラインを作成したら、ソースのリポジトリのルートディレクトリに

パイプラインの設定ファイルazure-pipelines.ymlが追加されています。

パイプラインをYamlで作成

パイプラインができたら、Buildの設定を作っていきます。

ADOのCIは、デフォルトではルートディレクトリにある、azure-pipelines.yml の設定を参照し、CIのパイプラインが実行されます。

今回は、下記の感じで構成しました。

ルートディレクトリ配下にAngularのプロジェクトファイルがあるのでちと変則的ですが…

resources:
- repo: self
queue:
  name: Hosted VS2017
  demands: npm

npmインストール
steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    workingDir: AngularWithJest

    verbose: false

npmテスト実行。CI用のテストを実行する。
- task: Npm@1
  displayName: 'npm run test'
  inputs:
    command: custom

    workingDir: AngularWithJest

    verbose: false

    customCommand: 'run test:ci'

出力されたXMLファイルをテスト結果として取得する
- task: PublishTestResults@2
  displayName: 'Publish Test Results **/junit.xml'
  inputs:
    testResultsFiles: '**/junit.xml'

  condition: always()

buildする。
- task: Npm@1
  displayName: 'npm build'
  inputs:
    command: custom

    workingDir: AngularWithJest

    verbose: false

    customCommand: 'run prod-build'