mcpField
U
umbraco-testing

umbraco-testing

github.com/umbraco测试与质量27360 次安装6 周前更新
代码仓库

关于 umbraco-testing

面向 Umbraco backoffice 扩展开发者的测试路由技能，帮助选择单元、模拟 API、模拟 backoffice 或端到端测试，并指向测试数据和辅助技能。

主要功能

  1. 01按测试层级选择测试方案
  2. 02单元测试与 MSW 测试指引
  3. 03模拟 backoffice 测试指引
  4. 04端到端测试指引
  5. 05提供测试数据与辅助技能入口

适用场景

  1. 01为扩展逻辑选择测试方式
  2. 02测试 API 错误与加载状态
  3. 03无需 .NET 检查扩展界面
  4. 04针对 Umbraco 验证完整工作流

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/umbraco-testing确认已加载。

详细介绍

Umbraco 测试 - 路由

用于测试 Umbraco 后台扩展的入口点。使用此技能确定要采用哪种测试方法，然后调用相应的专用技能。

快速参考

级别技能适用场景
1umbraco-unit-testing隔离测试上下文、元素和控制器
2umbraco-msw-testing测试 API 错误处理和加载状态
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 元素渲染和 shadow DOM
  • 可观察对象订阅和状态变更
  • 控制器和实用函数

速度：毫秒级 | 后端：无 | 浏览器：Playwright launcher

选择 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~1s无
MSW 模拟6~30s无（MSW）
模拟存储库6~37s无
E2E7~15s真实 Umbraco
总计32
工作示例：tree-example

tree-example 展示了一个项目中采用的所有测试方法：

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