Skip to Content
ドキュメントはじめに最初のカバレッジデータ

最初のカバレッジデータ

Note

Canyonは一般的なフレームワークのインストールガイドを提供し、素早く始められるようサポートします。

以下の手順に従って、最初のカバレッジデータを報告しましょう：

新規プロジェクトとして開始

インストール

フロントエンド開発とモジュール化において、Babelは不可欠です。Babelプロジェクトでは、2つのBabelプラグインをインストールするだけで、すぐに始められます。

npm install babel-plugin-istanbul babel-plugin-canyon -D

Babel設定ファイル にistanbulとcanyonプラグインを追加します：

babel.config.js
module.exports = {
  plugins: [
    'istanbul',
    'canyon'
    // 注意：canyonプラグインはistanbulプラグインの後に配置する必要があります
    ],
};

確認

設定完了後、プロジェクトを起動し、コンソールでwindow.__coverage__を出力します。下図のような出力が表示されれば、コードの計測が成功しています。

coverage-canyon-console

CI環境変数の設定

CI環境では、カバレッジデータを報告するために、いくつかの環境変数を設定する必要があります。

💡
Tip

canyonはコンパイル時にパイプライン変数を検出し、複数のパイプラインプロバイダーに対応しています。
お使いのパイプラインプロバイダーがない場合は、明示的な設定を試してください。

  1. DSNとREPORTER
  • DSN：カバレッジデータ報告のサービスアドレス、{{url}}/coverage/client、ここで{{url}}はCanyonサービスのアドレスです。
  • REPORTER：ユーザートークン、Canyonユーザー設定ページで確認できます。
  1. CIプラットフォーム変数の設定

gitlab

ℹ️

プロジェクトID、ブランチ、SHAは手動で設定する必要はありません。Canyonプラグインが自動的にパイプライン環境変数を検出します。

babelプラグインの有効条件の更新

CI段階では、本番ブランチでの計測を防ぐため、プラグインの有効条件を制御する必要があります。

module.exports = {
  plugins: (process.env.CI &&
            process.env.CI_COMMIT_REF_NAME !== 'release')
            ? [
              'canyon',
              'istanbul'
            ]:[],
};

カバレッジデータの報告

CIが完了し、ページがテスト環境にデプロイされた後。

この時点で、カバレッジデータはブラウザに保存されています。ユーザーの操作やUI自動化テストの実行に伴い、window.__coverage___データは蓄積されていきます。

これらのデータを正確にCanyonサーバーに報告することで、カバレッジデータのリアルタイム表示が実現できます。

以下はカバレッジデータを報告する方法です：

UI自動化テスト手動テスト
はじめにはじめに