mcpField
U
umbraco-testing

umbraco-testing

github.com/umbracoテスト・品質27360 回インストール6 週間前に更新
リポジトリ

umbraco-testing について

Umbraco backoffice 拡張機能をテストする開発者向けの振り分けスキルです。単体、API モック、backoffice モック、E2E の各方式を選ぶ手掛かりと、テストデータやヘルパーの関連スキルを示します。

主な機能

  1. 01テストレベルに応じた方式の案内
  2. 02単体テストと MSW テストの指針
  3. 03backoffice モックテストの指針
  4. 04E2E テストの指針
  5. 05テストデータとヘルパースキルへの案内

活用シーン

  1. 01拡張機能のロジックに合う方式の選択
  2. 02API エラーや読み込み状態のテスト
  3. 03.NET なしでの拡張 UI の確認
  4. 04Umbraco 上での一連のワークフロー検証

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-testing

インストール後、Claude Code で/umbraco-testingを入力して読み込まれたか確認します。

詳細

Umbraco Testing - Router

Umbraco バックオフィス拡張機能をテストするためのエントリポイントです。このスキルを使用して、どのテストアプローチを使うべきかを判断し、適切な専門スキルを呼び出してください。

クイックリファレンス

レベルスキル使用する場面
1umbraco-unit-testingコンテキスト、要素、コントローラーを分離してテストする
2umbraco-msw-testingAPI のエラーハンドリング、読み込み状態をテストする
3umbraco-mocked-backoffice完全なバックオフィスで拡張機能 UI をテストする（.NET 不要）
4umbraco-e2e-testing実際の Umbraco に対して完全なワークフローをテストする

サポートスキル

スキル目的
umbraco-test-buildersテストデータ用の JsonModels.Builders
umbraco-playwright-testhelperstesthelpers の完全な API リファレンス
umbraco-example-generatorテスト可能なサンプル拡張機能を生成する

判断ガイド

ユニットテストを選ぶ（umbraco-unit-testing）

高速で分離されたテストに最適です：

  • コンテキストのロジックと状態管理
  • Lit 要素のレンダリングとシャドウ DOM
  • Observable のサブスクリプションと状態変化
  • コントローラーとユーティリティ関数

速度: ミリ秒 | バックエンド: なし | ブラウザ: Playwright ランチャー

MSW テストを選ぶ（umbraco-msw-testing）

バックエンドなしで API の動作をテストするのに最適です：

  • API のエラーハンドリング（404、500、バリデーション）
  • ローディングスピナーとスケルトン状態
  • ネットワークのリトライ動作
  • レスポンスのエッジケースとタイムアウト

速度: 高速 | バックエンド: なし（モック） | ブラウザ: Playwright

モックバックオフィスを選ぶ（umbraco-mocked-backoffice）

現実的な UI で拡張機能をテストするのに最適です：

  • 拡張機能がバックオフィスに正しく表示される
  • ワークスペースビュー、アクション、フッターアプリが動作する
  • 拡張機能の登録とマニフェストの読み込み
  • .NET のセットアップなしでの視覚的な統合

速度: 高速 | バックエンド: なし（MSW） | ブラウザ: Chromium

E2E テストを選ぶ（umbraco-e2e-testing）

完全な受け入れテストに最適です：

  • 完全なユーザーワークフローのエンドツーエンド
  • データの永続化と取得
  • 認証と権限
  • 実際の API レスポンスと動作

速度: 低速 | バックエンド: 実行中の Umbraco | ブラウザ: Chromium

ワークフロー

  1. テスト対象を特定する - コンテキストのロジック、要素のレンダリング、API の処理、または完全なワークフロー
  2. テストレベルを選ぶ - 上記の判断ガイドを使用してください
  3. スキルを呼び出す - 各テストスキルはセットアップ、パターン、サンプルを含めて自己完結しています
  4. テストデータを生成する - 必要に応じて umbraco-test-builders を使用してください

完全なテストピラミッド

十分にテストされた拡張機能は、複数のテストレベルを使用します。以下が完全なピラミッドです：

                    ┌─────────────┐
                    │   E2E Tests │  ← Real backend, complete workflows
                    │   (7 tests) │
                    └─────────────┘
              ┌─────────────────────────┐
              │   Mocked Backoffice     │  ← No backend, realistic UI
              │   MSW: 6 | Mock Repo: 6 │
              └─────────────────────────┘
        ┌─────────────────────────────────────┐
        │           Unit Tests                │  ← Fast, isolated
        │           (13 tests)                │
        └─────────────────────────────────────┘
レベル別のテスト数
レベルテスト数速度必要なバックエンド
ユニット13約 1 秒なし
MSW モック6約 30 秒なし（MSW）
モックリポジトリ6約 37 秒なし
E2E7約 15 秒実際の Umbraco
合計32
動作するサンプル: tree-example

tree-example は、1 つのプロジェクトですべてのテストアプローチを示しています：

cd /path/to/tree-example/Client

# Unit tests (fast, no server)
npm test                        # 13 tests, ~1s

# MSW mocked tests (requires mocked backoffice)
npm run test:mocked:msw         # 6 tests, ~30s

# Mock repository tests (requires mocked backoffice)
npm run test:mocked:repo        # 6 tests, ~37s

# E2E tests (requires real Umbraco)
URL=https://localhost:44325 \
[email protected] \
UMBRACO_USER_PASSWORD=yourpassword \
npm run test:e2e                # 7 tests, ~15s

場所: umbraco-backoffice/examples/tree-example/Client/

リファレンスサンプル

Umbraco-CMS リポジトリには、豊富なテストサンプルが含まれています：

種類場所
ユニットテストsrc/Umbraco.Web.UI.Client/examples/*/
MSW ハンドラーsrc/Umbraco.Web.UI.Client/src/mocks/handlers/
E2E テストtests/Umbraco.Tests.AcceptanceTest/tests/
拡張機能src/Umbraco.Web.UI.Client/examples/（27 件のサンプル）
完全なピラミッドumbraco-backoffice/examples/tree-example/Client/

コメント

Markdown 対応