# Umbraco 城市固体废物测试 ## 这是什么？ MSW（模拟服务工作者）通过拦截 API 调用并返回模拟响应来测试 Umbraco 后台扩展。这非常适合在没有运行 Umbraco 实例的情况下测试错误状态、加载状态和边缘情况。 ## 何时使用 * 测试 API 错误处理（404、500、验证错误） * 测试加载旋转器和骨架状态 * 测试网络重试行为 * 在没有后端设置的情况下测试边缘情况 * 在单元测试中添加 API 模拟 ## 相关技能 * **umbraco-testing** \- 掌握测试概述的技能 * **umbraco-unit-testing** \- 单元测试模式（与 MSW 结合） ## 文档 * **MSW 文档**： * **参考处理程序** : `Umbraco-CMS/src/Umbraco.Web.UI.Client/src/mocks/handlers/` ** ** ## 设置 ### 依赖关系添加到 `package.json`: { “开发依赖项”：{ "@open-wc/testing": "^4.0.0", "@web/dev-server-esbuild": "^1.0.0", "@web/dev-server-import-maps": "^0.2.0", "@web/test-runner": "^0.18.0", "@web/test-runner-playwright": "^0.11.0", “msw”：“^2.7.0” }, “脚本”：{ "postinstall": "npx msw init .--save", “测试”：“网络测试运行程序”， “测试：手表”：“web-test-runner --watch” } } 然后运行： npm 安装 npx 剧作家安装 chromium `postinstall` 脚本将 `mockServiceWorker.js` 复制到您的项目根目录。 **如果没有此文件，MSW 将默默失败。** ### 配置创建“web-test-runner.config.mjs”：从 '@web/dev-server-esbuild' 导入 { esbuildPlugin }；从 '@web/test-runner-playwright' 导入 { playwrightLauncher }；从 '@web/dev-server-import-maps' 导入 { importMapsPlugin }；导出默认值{ 根目录: '.', 文件：['./src/**/*.test.ts', '!**/node_modules/**'], 节点解析：{ 导出条件：['开发']，更喜欢内置：假，浏览器：假， }, 浏览器：[playwrightLauncher({ 产品: 'chromium' })], 插件：[ 导入地图插件({ 注入：{ 导入映射：{ 进口：{ '@umbraco-cms/backoffice/external/lit': '/node_modules/lit/index.js', '@umbraco-cms/backoffice/lit-element'： '/node_modules/@umbraco-cms/backoffice/dist-cms/packages/core/lit-element/index.js', '@umbraco-cms/backoffice/element-api'： '/node_modules/@umbraco-cms/backoffice/dist-cms/libs/element-api/index.js', '@umbraco-cms/backoffice/observable-api'： '/node_modules/@umbraco-cms/backoffice/dist-cms/libs/observable-api/index.js', '@umbraco-cms/backoffice/context-api'： '/node_modules/@umbraco-cms/backoffice/dist-cms/libs/context-api/index.js', '@umbraco-cms/backoffice/controller-api'： '/node_modules/@umbraco-cms/backoffice/dist-cms/libs/controller-api/index.js', '@umbraco-cms/backoffice/class-api'： '/node_modules/@umbraco-cms/backoffice/dist-cms/packages/core/class-api/index.js', }, }, }, }), esbuildPlugin({ ts：真实的， tsconfig: './tsconfig.json', 目标：'自动'， json：正确， }), ], testRunnerHtml：（测试框架）=> ` <头> <元字符集=“UTF-8”/> <正文> `, }; ### 目录结构我的扩展/ ├── src/ │ ├── my-element.ts │ ├── my-element.test.ts │ └── 模拟/ │ ├── handlers.ts # 垃圾处理程序 │ ├── setup.ts # Worker 设置 │ └── 数据/ │ └── items.db.ts # 模拟数据库 ├── mockServiceWorker.js # 由 postinstall 生成 ├── web-test-runner.config.mjs ├── package.json └── tsconfig.json ** ** ## 模式 ### MSW v2 语法 Umbraco 使用 **MSW v2**。关键 API 模式：概念 | MSW v2 语法 ---|--- HTTP 方法 | `http.get()`、`http.post()`、`http.put()`、`http.delete()` JSON 响应 | `HttpResponse.json(数据)` 状态代码 | `HttpResponse.json（数据，{状态：201}）` 空响应 | `新的 HttpResponse(null, { 状态: 204 })` 请求参数 | `({ 参数 }) => { ... }` 请求正文 | `({ request }) => { const body = wait request.json(); }` 延迟| `等待延迟(2000)` ### 全球城市固体废物获取 const { http, HttpResponse, 延迟 } = window.MockServiceWorker; ### umbracoPath 助手从'@umbraco-cms/backoffice/utils'导入{umbracoPath}； // 创建：/umbraco/management/api/v1/document/:id umbracoPath('/文档/:id') ### 基本处理程序 **获取处理程序：** const { http, HttpResponse } = window.MockServiceWorker; 从'@umbraco-cms/backoffice/utils'导入{umbracoPath}；导出常量处理程序 = [ http.get(umbracoPath('/document/:id'), ({ params }) => { const id = params.id 作为字符串；返回 HttpResponse.json({ 身份证号， name: '测试文档', 文档类型：{别名：'testType'}， }); }), ]; **POST 处理程序：** http.post(umbracoPath('/document'), async ({ request }) => { const body =等待request.json(); if (!body.name) { 返回 HttpResponse.json( { 类型：'验证'，状态：400，错误：{ name: ['名称为必填项'] }, }, { 状态：400 } ）； } const newId = crypto.randomUUID(); 返回 HttpResponse.json( { id: 新的Id }, { 状态：201， headers: { 'Umb-Generate-Resource': newId }, } ）； }), **放置处理程序：** http.put(umbracoPath('/document/:id'), async ({ params, request }) => { const id = params.id 作为字符串； const body =等待request.json(); mockDb.update(id, body); 返回新的 HttpResponse(null, { 状态: 200 }); }), **删除处理程序：** http.delete(umbracoPath('/document/:id'), ({ params }) => { const id = params.id 作为字符串； mockDb.delete(id); 返回新的 HttpResponse(null, { 状态: 200 }); }), ### 模拟状态 **错误响应：** // 404 未找到 http.get(umbracoPath('/document/:id'), ({ params }) => { const doc = mockDb.read(params.id as string); if (!doc) return new HttpResponse(null, { status: 404 }); 返回 HttpResponse.json(doc); }), // 500 服务器错误 http.get(umbracoPath('/document/:id'), () => { 返回 HttpResponse.json( { type: 'error',detail: '内部服务器错误' }, { 状态：500 } ）； }), **验证错误：** http.post(umbracoPath('/document'), async ({ request }) => { const body =等待request.json(); if (!body.name) { 返回 HttpResponse.json( { 类型：'验证'，错误：{ name: ['姓名为必填项'], title: ['标题必须至少3个字符'], }, }, { 状态：400 } ）； } 返回新的 HttpResponse(null, { 状态: 201 }); }), **延迟响应（加载状态）：** http.get(umbracoPath('/slow-endpoint'), async () => { 等待延迟（2000）；返回 HttpResponse.json({ data: '已加载' }); }), ### 模拟数据库模式 // src/mocks/data/items.db.ts 接口项{ id：字符串；名称：字符串；值：数字； } 类 ItemsMockDb { 私有数据： Item[] = [ { id: '1', 名称: '项目 1', 值: 100 }, { id: '2', 名称: '项目 2', 值: 200 }, ]; 读取（id：字符串）{ return this.data.find((item) => item.id === id); } 读取全部() { 返回[...这个.数据]； } 创建（项目：省略<项目，'id'>）{ const newItem = { ...item, id: crypto.randomUUID() }; this.data.push(newItem); 返回newItem.id； } 更新（id：字符串，更新：部分<项目>）{ const index = this.data.findIndex((i) => i.id === id); if (索引!== -1) { this.data[索引] = { ...this.data[索引], ...更新 }; } } 删除（id：字符串）{ this.data = this.data.filter((i) => i.id !== id); } } 导出 const itemsDb = new ItemsMockDb(); ### 工作人员设置 // src/mocks/setup.ts const { setupWorker } = window.MockServiceWorker; 从 './handlers.js' 导入 { handlers } ； const worker = setupWorker(...handlers); 导出 const startMockServiceWorker = () => 工人.开始({ onUnhandledRequest: '警告', 安静：真实， }); ### 与测试集成 **在测试文件中：** 从'@open-wc/testing'导入{expect,fixture}；从'./mocks/setup.js'导入{startMockServiceWorker}；导入'./my-element.js'; // 在测试之前启动 MSW 之前（异步（）=> { 等待 startMockServiceWorker(); }); 描述（'MyElement with API', () => { it('显示来自API的数据', async () => { const element =等待fixture(html``); 等待元素.updateComplete; // 元素应该显示模拟数据 Expect(element.shadowRoot?.textContent).to.include('项目 1'); }); }); ** ** ## 示例 ### 完整处理程序文件 // src/mocks/handlers.ts const { http, HttpResponse } = window.MockServiceWorker; 从'@umbraco-cms/backoffice/utils'导入{umbracoPath}；从'./data/items.db.js'导入{itemsDb}；导出常量处理程序 = [ // 列出项目 http.get(umbracoPath('/my-extension/items'), () => { const items = itemsDb.readAll(); return HttpResponse.json({ 总计: items.length, items }); }), // 获取单个项目 http.get(umbracoPath('/my-extension/items/:id'), ({ params }) => { const item = itemsDb.read(params.id as string); if (!item) return new HttpResponse(null, { status: 404 }); 返回 HttpResponse.json(item); }), // 创建项目 http.post(umbracoPath('/my-extension/items'), async ({ request }) => { const body =等待request.json(); if (!body.name) { 返回 HttpResponse.json( { 类型：'验证'，错误：{ 名称：['必需'] } }， { 状态：400 } ）； } const id = itemsDb.create(body); 返回 HttpResponse.json( { id }, { 状态：201， headers: { 'Umb-Generate-Resource': id }, } ）； }), // 更新项目 http.put(umbracoPath('/my-extension/items/:id'), async ({ params, request }) => { const id = params.id 作为字符串； if (!itemsDb.read(id)) return new HttpResponse(null, { status: 404 }); itemsDb.update(id, 等待 request.json()); 返回新的 HttpResponse(null, { 状态: 200 }); }), // 删除项目 http.delete(umbracoPath('/my-extension/items/:id'), ({ params }) => { const id = params.id 作为字符串； if (!itemsDb.read(id)) return new HttpResponse(null, { status: 404 }); itemsDb.delete(id); 返回新的 HttpResponse(null, { 状态: 200 }); }), ]; ### 处理程序组织 src/模拟/ ├── handlers.ts # 聚合所有处理程序 ├── setup.ts # Worker 设置 ├── 处理程序/ │ ├── 文档.handlers.ts │ ├── media.handlers.ts │ └── my-extension.handlers.ts └── 数据/ ├── 文档.db.ts └── items.db.ts // 处理程序.ts 从 './handlers/document.handlers.js' 导入 { documentHandlers }；从'./handlers/media.handlers.js'导入{mediaHandlers}；从 './handlers/my-extension.handlers.js' 导入 { myExtensionHandlers } ；导出常量处理程序 = [ ...文档处理程序， ...媒体处理程序， ...我的扩展处理程序， ]; ** ** ## 运行测试 # 运行所有测试 npm测试 # 以监视模式运行 npm 运行测试：watch # 运行特定文件 npx web-test-runner src/my-element.test.ts ** ** ## 故障排除 ### MSW 不拦截请求 1.检查项目根目录中是否存在`mockServiceWorker.js` 2. 验证 MSW 脚本是否已加载到测试 HTML 中：`` 3.确保worker在测试运行之前启动 ###“http 未定义” 使用全局访问：`const { http, HttpResponse } = window.MockServiceWorker;` ### 处理程序不匹配检查路径是否完全匹配。使用“umbracoPath()”作为 Umbraco API 路径。 ### 请求仍然到达真实服务器确保设置 `onUnhandledRequest: 'warn'` 以在控制台中查看未处理的请求。 ** ** ## 从 MSW v1 迁移如果从 MSW v1 升级，则主要变化如下：城市固体废弃物 v1 |城市固体废物v2 ---|--- `rest.get()` | `http.get()` `rest.post()` | `http.post()` `(req, res, ctx) => res(ctx.json(data))` | `() => HttpResponse.json(数据)` `res(ctx.status(404))` | `新的 HttpResponse(null, { 状态: 404 })` `res(ctx.delay(2000), ctx.json(数据))` | `等待延迟（2000）；返回 HttpResponse.json(数据)` `req.params.id` | `({ params }) => params.id` `等待 req.json()` | `({ request }) => wait request.json()`

Umbraco 城市生活垃圾测试

包含技能