Back to Details

umbraco-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Testing - Router

Umbraco 测试 - Router

Entry point for testing Umbraco backoffice extensions. Use this skill to determine which testing approach to use, then invoke the appropriate specialized skill.
这是测试Umbraco后台扩展的入口。使用该Skill来确定应采用哪种测试方案，然后调用对应的专业Skill。

Quick Reference

快速参考

LevelSkillUse When
1
umbraco-unit-testing
Testing contexts, elements, controllers in isolation
2
umbraco-msw-testing
Testing API error handling, loading states
3
umbraco-mocked-backoffice
Testing extension UI in full backoffice (no .NET)
4
umbraco-e2e-testing
Testing complete workflows against real Umbraco
层级Skill适用场景
1
umbraco-unit-testing
隔离测试上下文、元素和控制器
2
umbraco-msw-testing
测试API错误处理、加载状态
3
umbraco-mocked-backoffice
在完整后台环境中测试扩展UI（无需.NET）
4
umbraco-e2e-testing
针对真实Umbraco测试完整工作流

Supporting Skills

支持Skill

SkillPurpose
umbraco-test-builders
JsonModels.Builders for test data
umbraco-playwright-testhelpers
Full API reference for testhelpers
umbraco-example-generator
Generate testable example extensions
Skill用途
umbraco-test-builders
用于生成测试数据的JsonModels.Builders
umbraco-playwright-testhelpers
测试助手的完整API参考
umbraco-example-generator
生成可测试的示例扩展

Decision Guide

决策指南

Choose Unit Testing (
umbraco-unit-testing
)

选择单元测试（
umbraco-unit-testing
）

Best for fast, isolated testing:
  • Context logic and state management
  • Lit element rendering and shadow DOM
  • Observable subscriptions and state changes
  • Controllers and utility functions
Speed: Milliseconds | Backend: None | Browser: Playwright launcher
最适合快速、隔离的测试场景：
  • 上下文逻辑和状态管理
  • Lit element渲染和shadow DOM
  • Observable订阅和状态变更
  • 控制器和工具函数
速度：毫秒级 | 后端：无 | 浏览器：Playwright launcher

Choose MSW Testing (
umbraco-msw-testing
)

选择MSW测试（
umbraco-msw-testing
）

Best for testing API behavior without backend:
  • API error handling (404, 500, validation)
  • Loading spinners and skeleton states
  • Network retry behavior
  • Response edge cases and timeouts
Speed: Fast | Backend: None (mocked) | Browser: Playwright
最适合无需后端的API行为测试：
  • API错误处理（404、500、验证错误）
  • 加载动画和骨架屏状态
  • 网络重试机制
  • 响应边界情况和超时
速度：快 | 后端：无（已模拟） | 浏览器：Playwright

Choose Mocked Backoffice (
umbraco-mocked-backoffice
)

选择模拟后台测试（
umbraco-mocked-backoffice
）

Best for testing extensions in realistic UI:
  • Extension appears correctly in backoffice
  • Workspace views, actions, footer apps work
  • Extension registration and manifest loading
  • Visual integration without .NET setup
Speed: Fast | Backend: None (MSW) | Browser: Chromium
最适合在真实UI环境中测试扩展：
  • 扩展在后台中正确显示
  • 工作区视图、操作和页脚应用正常工作
  • 扩展注册和清单加载
  • 无需.NET环境的视觉集成测试
速度：快 | 后端：无（使用MSW） | 浏览器：Chromium

Choose E2E Testing (
umbraco-e2e-testing
)

选择端到端测试（
umbraco-e2e-testing
）

Best for full acceptance testing:
  • Complete user workflows end-to-end
  • Data persistence and retrieval
  • Authentication and permissions
  • Real API responses and behaviors
Speed: Slower | Backend: Running Umbraco | Browser: Chromium
最适合完整的验收测试：
  • 端到端的完整用户工作流
  • 数据持久化与检索
  • 身份验证和权限
  • 真实API响应和行为
速度：较慢 | 后端：运行中的Umbraco | 浏览器：Chromium

Workflow

工作流程

  1. Identify what to test - context logic, element rendering, API handling, or full workflow
  2. Choose testing level - use the decision guide above
  3. Invoke the skill - each testing skill is self-contained with setup, patterns, and examples
  4. Generate test data - use 
    umbraco-test-builders
    if needed
  1. 确定测试内容 - 上下文逻辑、元素渲染、API处理或完整工作流
  2. 选择测试层级 - 使用上述决策指南
  3. 调用对应Skill - 每个测试Skill都包含独立的设置、模式和示例
  4. 生成测试数据 - 如有需要，使用
    umbraco-test-builders

Complete Testing Pyramid

完整测试金字塔

A well-tested extension uses multiple testing levels. Here's the complete pyramid:
                    ┌─────────────┐
                    │   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)                │
        └─────────────────────────────────────┘
一个测试完善的扩展会使用多种测试层级。以下是完整的测试金字塔：
                    ┌─────────────┐
                    │   E2E Tests │  ← 真实后端，完整工作流
                    │   (7 tests) │
                    └─────────────┘
              ┌─────────────────────────┐
              │   Mocked Backoffice     │  ← 无后端，真实UI环境
              │   MSW: 6 | Mock Repo: 6 │
              └─────────────────────────┘
        ┌─────────────────────────────────────┐
        │           Unit Tests                │  ← 快速、隔离
        │           (13 tests)                │
        └─────────────────────────────────────┘

Test Count by Level

各层级测试数量

LevelTestsSpeedBackend Required
Unit13~1sNone
MSW Mocked6~30sNone (MSW)
Mock Repository6~37sNone
E2E7~15sReal Umbraco
Total32
层级测试数量速度是否需要后端
单元测试13~1秒无
MSW模拟测试6~30秒无（使用MSW）
模拟仓库测试6~37秒无
E2E测试7~15秒真实Umbraco
总计32

Working Example: tree-example

实战示例：tree-example

The 
tree-example
demonstrates all testing approaches in one project:
bash
cd /path/to/tree-example/Client
tree-example
在一个项目中展示了所有测试方案：
bash
cd /path/to/tree-example/Client

Unit tests (fast, no server)

单元测试（快速，无需服务器）

npm test # 13 tests, ~1s
npm test # 13个测试，~1秒

MSW mocked tests (requires mocked backoffice)

MSW模拟测试（需要模拟后台）

npm run test:mocked:msw # 6 tests, ~30s
npm run test:mocked:msw # 6个测试，~30秒

Mock repository tests (requires mocked backoffice)

模拟仓库测试（需要模拟后台）

npm run test:mocked:repo # 6 tests, ~37s
npm run test:mocked:repo # 6个测试，~37秒

E2E tests (requires real Umbraco)

E2E测试（需要真实Umbraco）

URL=https://localhost:44325
UMBRACO_USER_LOGIN=admin@example.com
UMBRACO_USER_PASSWORD=yourpassword
npm run test:e2e # 7 tests, ~15s

**Location**: `umbraco-backoffice/examples/tree-example/Client/`

---
URL=https://localhost:44325
UMBRACO_USER_LOGIN=admin@example.com
UMBRACO_USER_PASSWORD=yourpassword
npm run test:e2e # 7个测试，~15秒

**位置**：`umbraco-backoffice/examples/tree-example/Client/`

---

Reference Examples

参考示例

The Umbraco-CMS repository contains extensive test examples:
TypeLocation
Unit tests
src/Umbraco.Web.UI.Client/examples/*/
MSW handlers
src/Umbraco.Web.UI.Client/src/mocks/handlers/
E2E tests
tests/Umbraco.Tests.AcceptanceTest/tests/
Extensions
src/Umbraco.Web.UI.Client/examples/
(27 examples)
Complete pyramid
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/