https://www.wheatandcat.me/entry/2022/08/21/224640

コードのカバレッジを継続的に計測したくて作成。
元々、codecovがデファクトだったが、以前あったセキュリティ問題から使用するのは微妙だなと思っていたので、Retoolを使用してダッシュボードを作成して可視化してみた。

インスパイヤ元の記事

以下の記事を参考に作成

zenn.dev

PR

github.com

Retoolとは？

retool.com

ローコード開発ツールで、あらゆるデータベースを元にグラフ、チャート、検索フォーム、データ入力などのUIを作成できるサービス
あらゆるサービスをサポートしている（例: RDB系のサービス、Firestore、スプレットシート、GitHub、Datadog、Slack、Asana、etc...）
- Integrations
個人の場合では無料で使用できる
- Pricing
一部jsもサポートしていて、柔軟性も高い
- JavaScript in Retool

構成

コード
- TypeScript
- zx
データベース
- Firestore
定期実行
- GitHub Actions
ダッシュボード化
- Retool

実装

インスパイヤ元の記事を参考にzxとTypeScriptでデータ取得のスクリプトを作成。
まずは、テストのカバレッジ取得のコードが以下になる。

■ scripts/send-metrics/coverage.ts

import { $, cd } from 'zx';

export const aggregateCoverages = async () => {
  cd('../../');

  try {
    await $`yarn test --collectCoverage=true --coverageReporters=json-summary`;
  } catch (err) {
    console.error(err);
  }
  try {
    const result =
      await $`cat coverage/coverage-summary.json | jq -r '.total | keys[] as $k | {("coverage_" + $k):(.[$k].pct)}' | jq -s add`;

    return JSON.parse(result.stdout);
  } catch (err) {
    console.error(err);
  }
};

カバレッジレポートにtotalのカバレッジの値がjson形式で出力されるので、その情報を元にjqを使って必要な情報のみ抽出。

次は、テストの総数とテストの時間を取得のコードが以下になる。

■ scripts/send-metrics/jestResult.ts

import dayjs from 'dayjs';
import { $ } from 'zx';

export const getJestResult = async () => {
  let r = {
    time: 0,
    numTotalTests: 0,
  };

  try {
    await $`yarn test --json --outputFile=testResults.json`;
  } catch (err) {
    console.error(err);
  }
  try {
    const numTotalTests =
      await $`cat testResults.json | jq -r '.numTotalTests'`;

    r.numTotalTests = Number(numTotalTests);

    const testResults = await $`cat testResults.json | jq -r '.testResults'`;
    const items = JSON.parse(testResults.stdout);
    const startTime = items[0].startTime;
    const endTime = items[items.length - 1].endTime;
    const time = dayjs(endTime).diff(dayjs(startTime), 'milliseconds');

    r.time = time;
  } catch (err) {
    console.error(err);
  }

  console.log(r);

  return r;
};

Jestでjsonオプションを指定すると、テストのレポートをjson形式で出力できるので、その情報を元に必要な情報を抽出。

上記の情報をFirestoreに保存。保存の形式は以下みたいな感じ

Firestoreの情報を元にRetoolで以下のダッシュボードを作成。

■ ダッシュボードのURL
https://jurassic.retool.com/embedded/public/ca1843e7-ce2b-41ad-92c1-1ca7ff8cd944

Retoolならチャート情報の作成以外にも、日付指定の入力フォームやアラート表示も出来て良い感じだった。

以下みたいに書けば、最新データのパーセンテージを表示することも可能。

Retoolでのダッシュボード作成は、かなり良かったので、今後も使っていくと思います。