JavaScript プロジェクトで CircleCI から Code Climate Quality を使い、コードの品質をはかる #JavaScript

Code Climate はコードの品質やチームの生産性をはかるクラウドサービスです。
いくつかの機能がありますが、OSS ならば「Quality」の機能は無料で利用することができます。

Quality の機能には大きく「Maintainability」「Test Coverage」の2つがあります。これらの設定方法を順番に説明していきます。

環境

Windows 10 Pro 1809 / Windows Subsystem for Linux
Node.js 11.8.0
TypeScript 3.3.1
Jest 23.3.13
CircleCI

Maintainability の設定

非常に簡単です。Code Climate に GitHub アカウントを連携して、対象のリポジトリを追加するだけです。

しばらく待つと、リポジトリのページが発行され品質のスコアリングが表示されます。

issues から、実際のコード内の問題点を確認できます。
今回試したリポジトリでは、メソッド内の行数の長さと、Cognitive Complexity (認知的複雑度) の高さが指摘されていました。これらをリファクタリングしていくことでコードの品質が向上すると思います。

(Cognitive Complexityについてはこちらを参照: Cognitive Complexity で、コードの読みやすさを定量的に計測しよう - Qiita )

Test Coverageの設定

こちらはCode Climate にテストカバレッジ情報を送信する機能です。そのため、別の方法で予めテストが実行されていてカバレッジが計測されている事が前提です。

今回は Jest で記載されたテストに対して --coverage オプションを使ってカバレッジファイルを出力します。

package.json(抜粋)

"scripts": {
  "test": "jest --coverage"
},

こちらのテストを CircleCI で自動実行しておきます。

ここから、 Code Climate Test Coverage の設定に移ります。Code Climate 公式ドキュメント内にも CircleCI のPHPテストカバレッジレポート設定サンプルがあるので、そちらを参考に今回のJavaScriptプロジェクト用の設定ファイルを記述していきます。

カバレッジレポートの送信には Code Climate の提供する cc-test-reporter というツールを使います。こちらを curl で取得し、 ./cc-test-reporter after-build というように使うことでカバレッジレポートを送信できます。今回のJest が出力するカバレッジレポートは lcov 形式のため、--coverage-input-type lcov を指定します

CircleCI の設定ファイルはこんな感じになります。

circleci/config.yml

version: 2
jobs:
  build:
    steps:

      # 中略

      - run:
          name: Setup Code Climate test-reporter
          command: |
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
            chmod +x ./cc-test-reporter

      - run:
          name: Run tests
          command: |
            ./cc-test-reporter before-build
            npm test
            ./cc-test-reporter after-build --coverage-input-type lcov --exit-code $?

Code Climate 公式ドキュメント内の CircleCI 設定では config.yml 内に CC_TEST_REPORTER_ID も記述するよう指示されますが、コード内には記載せずCircleCI 側にある環境変数の設定機能を使いましょう。

CircleCI の PROJECT SETTINGS から Environment Variables で設定できます。

Code Climate 公式ドキュメント内で「Test Reporter ID を秘匿する必要はあるか？」という問いに対し「このIDが何らかのデータへのアクセスに使われることはない」と回答されているので、たとえ雑に扱っても大きな問題は無さそうです。しかし再発行機能が備えられているIDなので、念のため丁寧に扱います。

参考

今回設定した結果が下記になります。
https://codeclimate.com/github/s2terminal/i-read-u