【GitHub Actions】DenoのカバレッジをCodecovで出す

自分はちょっとした書き捨てのスクリプトのために、よく使う関数をGitHubにまとめて置いています。とりあえずGitHubに置いておけば、rawファイル用のURLを用いてどこからでもimportできるので便利なんですよね。

GitHubに置いたついでに、GitHub ActionsとCodecovを使ってDenoのカバレッジツールを試してみました。

## カバレッジとは

Denoには組み込みのテストランナーがあります（`deno test`コマンド）。コード全体のうち、テストが実行された割合（カバレッジ）を出力してくれる機能もあります（`deno coverage`コマンド）。
今回は、GitHubと連携してカバレッジを表示してくれる[Codecov](https://about.codecov.io/)というサービスを使って、GitHubへのpush時にカバレッジを自動で表示させたいと思います。

## GitHub Actionsの設定

`/.github/workflows/test.yml`ファイル内に設定を書いていきます。

### Git Checkout

リポジトリをチェックアウトします。

```yml
- name: Git Checkout Module
  uses: actions/checkout@v2
```

### Denoのインストール

GitHub Actions上にDenoをインストールするためのアクションが存在します。
少し前まで[denolib/setup-deno](https://github.com/denolib/setup-deno)というコミュニティ作成のアクションが主流だったのですが、今は新しく公開された公式の[denoland/setup-deno](https://github.com/denoland/setup-deno)を使うことが推奨されています。

```yml
- name: Use Deno
  uses: denoland/setup-deno@v1
  with:
    deno-version: v1.x
```

### テスト＆カバレッジ収集

`deno test`コマンドでカバレッジを出すことができます。

```yml
- name: Test
  run: deno test -A --coverage=coverage
```

上記のコマンドを実行すると、`/coverage/`ディレクトリにカバレッジのデータが出力されます。

### lcovファイルの出力

`deno coverage`コマンドでlcovファイルが出力できます。

```yml
- name: Create coverage report
  run: deno coverage ./coverage --lcov > coverage.lcov
```

上記のコマンドを実行すると、`/coverage/`ディレクトリのデータからlcovファイルを作成し、`coverage.lcov`に吐き出してくれます。


### Codecov

ファイルをCodecovにアップロードします。
[Codecov公式のアクション](https://github.com/codecov/codecov-action)を利用します。

```yml
- name: Codecov
  uses: codecov/codecov-action@v1.5.2
  with:
    file: ./coverage.lcov
    fail_ci_if_error: true
```

### その他

ついでに、リンター、フォーマッター、型チェックのコマンドも実行したいと思います。

```yml
- name: Format # フォーマッター
  run: deno fmt --check
- name: Lint # リンター
  run: deno lint
- name: Type Check # 型チェック
  run: deno test --no-run $(find . -regex '.*\.\(js\|ts\|jsx\|tsx\|mjs\|mjsx\)' -printf '%p ')
```

GitHub Actionsではファイル名のglob展開が使えないようだったので（調べれば使える方法があるのかもしれませんが）、型チェックのファイル指定にはfindコマンドを使用しています。
全てのファイルを型チェックしていますが、（Worker用のファイルがあるなど）この挙動が望ましくない場合は適宜変更してください。

最終的に完成したのが次のファイルです。

```yml:/.github/workflows/test.yml
name: Format & Lint & Type Check & Test & Coverage

# push時とpr時に実行
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Git Checkout Module
        uses: actions/checkout@v2
      - name: Use Deno
        uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x # 最新バージョンを使用
      # フォーマッタ
      - name: Format
        run: deno fmt --check
      # リンター
      - name: Lint
        run: deno lint
      # 型チェック
      - name: Type Check
        run: deno test --no-run $(find . -regex '.*\.\(js\|ts\|jsx\|tsx\|mjs\|mjsx\)' -printf '%p ')
      # カバレッジ計測
      - name: Test
        run: deno test -A --coverage=coverage
      # lcovファイル出力
      - name: Create coverage report
        run: deno coverage ./coverage --lcov > coverage.lcov
      # Codecovにアップロード
      - name: Codecov
        uses: codecov/codecov-action@v1.5.2
        with:
          file: ./coverage.lcov
          fail_ci_if_error: true
```

## Codecovとの連携

### Codecovに登録

[公式ページ](https://about.codecov.io/)からサインアップします。GitHubアカウントと連携させることができます。

### プルリクにカバレッジを表示

[公式Github Apps](https://github.com/apps/codecov)をインストールすると、プルリクのコメントでカバレッジを表示してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/04c1b41e-5fad-46fb-d6f9-852df634d8ba.png)

### バッジを表示

Readme.mdにバッジを表示させることができます。
リポジトリ > Settings > Badgeからマークダウン用のコードをコピペすると、画像のようなバッジが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678625/5323591c-988d-d27a-839a-d3eebe0dd2d0.png)


以上の手順で、GitHub ActionsとCodecovを連携させ、Deno用コードのカバレッジを出すことができました！

## 感想

GitHub Actionsでリンター、フォーマッタ、型チェック、テスト、カバレッジをチェックするようにしました。
ところで、ここまでDeno以外の追加のツールを一切使っていないのにお気づきでしょうか。
Node.jsの場合は、ESLint、Prettier、tsc、Jestをインストールした上で、それぞれに対して設定ファイルを書く必要がありました。しかし、Denoの場合は**組み込みのツールが利用できるため、追加のツールが一切必要ありません**。とても便利ですね。

（ところで、コアチームはESLintとPrettierとJestとCloudflare WorkersとESDocとnpmを同時に保守管理しているようなもので、かなり忙しそうに見えますね…）