はじめに

概要

Canyon（「峡谷」の意、発音 /ˈkænjən/）は、JavaScriptコードカバレッジ収集プラットフォームです。開発者とQAエンジニアがエンドツーエンドテスト中にテストケースのコードカバレッジを収集する際の課題を解決します。主に3つの部分で構成されています：

• 様々なCIプロバイダーに対応し、環境変数を検出するプラグイン 群。

• カバレッジデータの収集・処理、バックエンドAPIを提供するnodejsサービス 。

• カバレッジデータを表示するreactフロントエンドアプリケーション 。

なぜCanyonなのか？

Canyonは、コンパイル段階でhitとmapデータを分離することで、UI自動化テストで生成される大量のカバレッジデータを効率的に処理できます。

さらに、Canyonは一般的なCIプロバイダーに対応しており、ビルド段階でプローブコードを挿入し、UI自動化テスト段階でカバレッジデータを収集・報告することができます。

これにより、開発チームはUI自動化テストの__各ケース__のカバレッジ状況を__正確__に、__リアルタイム__で把握し、コード品質の評価と向上に役立てることができます。

特徴

• 正確で効率的：hitとmapの分離、コンパイル時の初期カバレッジデータ生成により、正確で効率的なカバレッジデータの収集を実現
• SourceMap：正確なソースコードカバレッジの復元
• ビルドツール：next.js、vite、webpackなど一般的なビルドツールのカバレッジソリューションを提供
• 自動化フレームワーク：一般的なUI自動化フレームワークの統合ソリューションを提供
• CIプロバイダー：一般的なCIプロバイダー（Github Actions、GitLab Runner）に対応し、CI環境変数を検出

セルフホスティング

カバレッジデータとテストデータを完全に管理したい場合は、自身のインフラストラクチャ上でセルフホスティングすることができます。

エコシステム

プロジェクト	ステータス	説明
babel-plugin-canyon		パイプライン環境変数を検出するBabelプラグイン
canyon-uploader		ローカルの.canyon_outputデータをスキャンしサーバーにアップロード
canyon-extension		カバレッジデータを手動で報告するためのChromeプラグイン

アーキテクチャ

以下の図は、Canyonとそのエコシステムのコンポーネントアーキテクチャを示しています：

1. BabelプラグインがCI/CDパイプラインでコード計測を完了。
2. プロジェクトがテスト環境にデプロイされ、ユーザーはUI自動化または手動テストで計測コードプローブをトリガー可能。
3. 生成されたカバレッジデータがCanyonサーバーに報告。
4. Canyonサーバーがデータを処理し、GitLabが提供するソースコード情報と組み合わせてカバレッジレポートを生成。