From umbraco-cms-backoffice-testing-skills
Routes testing approaches for Umbraco backoffice extensions: unit tests for elements/contexts, MSW mocks for APIs/loading, mocked backoffice UI, or E2E workflows with Playwright.
npx claudepluginhub umbraco/umbraco-cms-backoffice-skills --plugin umbraco-cms-backoffice-testing-skillsThis skill uses the workspace's default tool permissions.
---
Runs Umbraco backoffice UI with mocked APIs for visual extension testing without .NET backend. Enables rapid iteration, demos, and CI/CD via MSW handlers or mock repository.
Provides complete working blueprints and mandatory workflows for building Umbraco backoffice extensions combining sections, menus, trees, dashboards, and workspaces.
Suggests manual /compact at logical task boundaries in long Claude Code sessions and multi-phase tasks to avoid arbitrary auto-compaction losses.
Share bugs, ideas, or general feedback.
Entry point for testing Umbraco backoffice extensions. Use this skill to determine which testing approach to use, then invoke the appropriate specialized skill.
| Level | Skill | Use 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 | Purpose |
|---|---|
umbraco-test-builders | JsonModels.Builders for test data |
umbraco-playwright-testhelpers | Full API reference for testhelpers |
umbraco-example-generator | Generate testable example extensions |
umbraco-unit-testing)Best for fast, isolated testing:
Speed: Milliseconds | Backend: None | Browser: Playwright launcher
umbraco-msw-testing)Best for testing API behavior without backend:
Speed: Fast | Backend: None (mocked) | Browser: Playwright
umbraco-mocked-backoffice)Best for testing extensions in realistic UI:
Speed: Fast | Backend: None (MSW) | Browser: Chromium
umbraco-e2e-testing)Best for full acceptance testing:
Speed: Slower | Backend: Running Umbraco | Browser: Chromium
umbraco-test-builders if neededA 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) │
└─────────────────────────────────────┘
| Level | Tests | Speed | Backend Required |
|---|---|---|---|
| Unit | 13 | ~1s | None |
| MSW Mocked | 6 | ~30s | None (MSW) |
| Mock Repository | 6 | ~37s | None |
| E2E | 7 | ~15s | Real Umbraco |
| Total | 32 |
The tree-example demonstrates all testing approaches in one project:
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 \
UMBRACO_USER_LOGIN=admin@example.com \
UMBRACO_USER_PASSWORD=yourpassword \
npm run test:e2e # 7 tests, ~15s
Location: umbraco-backoffice/examples/tree-example/Client/
The Umbraco-CMS repository contains extensive test examples:
| Type | Location |
|---|---|
| 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/ |