CWA下一个模块(开发中)
该模块设计用于 API组件包 并将提供一个完整的用户界面和实用程序,以方便地创建自定义web应用程序与先进的在线内容管理系统
CWA模块在运行
模板使用该模块作为前端,API组件包作为后端
https://github.com/components-web-app/components-web-app/tree/v3
在线部署模板应用程序
https://cwa-v3-silverback-web-apps.vercel.app/
开发
- 运行
pnpm run dev:prepare生成类型存根。 - 使用
pnpm run dev开始 操场上 处于开发模式。
产品毛羽
- 运行
pnpm run lint或者pnpm run lint:fix
测试
该模块分为四层进行测试。在这个模块中,每个特性都得到了验证。模板自己的e2e套件用于从模板构建的项目,而不是模块特性。
1. 单元和组件测试(Vitest)
pnpm run test:单次运行。规范位于它们所涵盖的代码旁边(*.spec.ts)。pnpm run test:coverage一样,有保险。pnpm run test:watch(或pnpm run test:watch:coverage):开发时的观看模式。pnpm vitest run --reporter=verbose path/to/file.spec.ts:一个文件。
2. 构建输出警卫
pnpm run test:e2e 建造操场和跑步 pnpm run test:e2e:guards 针对这个构建:
- 包预算: 入口块和一个匿名访问者的页面预加载不持有管理或按需代码,并保持在他们的gzip预算(
test/e2e/entry-bundle-markers.mjs,test/e2e/visitor-page-preloads.mjs). 当捆绑收缩时,降低预算。永远不要为了通过而举起它。 - 预取: 管理块从不预取(
test/e2e/prefetch-hints.mjs)。 - 服务器响应: 状态码,页面缓存报头错误,站点地图缓存报头,以及服务器的API URL永远不会发布到浏览器。
pnpm run test:types 对模块和游乐场进行类型检查。 pnpm run test:fresh-install 打包该包,并将其安装到一个一次性应用程序中。
3. 管理浏览器测试:针对真实API进行演练,在CI中重播
管理功能(选择,添加,排序,发布,克隆,移动,共享组件徽章等)在一个真实的浏览器中使用剧作家测试(test/browser/admin.spec.mjs)。
CI从不与实时API对话。每个场景都是 排练 一次针对真正的API,然后提交排练(每个请求和响应)。CI 回放 它:记录的响应充当API的一部分,排练中缺少的任何请求都将失败。在CI中没有Docker或注册表的情况下,根据真正的bundle实际回答的内容测试模块。
重播 (什么CI运行在左腿上):
pnpm run dev:build
pnpm run test:browser # all scenarios
pnpm run test:browser --grep " 23\. " # one scenario
排练 (记录真实的API)每当一个场景,它的种子数据或模块的请求改变:
- 在本地运行模板应用程序
https://localhost与您正在测试的API组件包版本,以及admin/admin用户。 pnpm run dev:buildpnpm run test:browser:rehearse(或--grep " 23\. "对于一个场景)。- 提交更改后的文件
test/browser/rehearsals/.
规则:
- 播种你自己的数据。 每个场景都通过API (
test/browser/seed.mjs),并且从不依赖于模板的fixture。 - 记录bundle版本。 每个排练文件里都有。需要更新包的特性会针对该包进行排练,并且更改日志将其命名为最小版本。
- 一个代理可以看到一切。 代理(
test/browser/rehearsal.mjs)位于游乐场和API之间,因此它可以看到服务器端和浏览器的请求。水星本身就是一条无声的流,所以记录是确定的。 - 默认值: 模板的Caddy根CA和bundle版本从
components-web-app-php-1容器。用REHEARSAL_CA,REHEARSAL_BUNDLE,REHEARSAL_PHP_CONTAINER或者REHEARSAL_API. - 没有睡觉。 除非场景允许,否则控制台错误或页面错误会使场景失败。等待一个积极的信号,而不是一个固定的延迟。
- 记录仪也进行了测试。
test/browser/rehearsal.spec.ts(部分pnpm run test)记录一个虚假的API,并在停止的情况下重播。它涵盖了:一次写入后的应答、未记录的请求失败、path回退、原点和水星重写、cookie编校和CORS。
4. 在你推我之前
pnpm run lint:fix, pnpm run test, pnpm run dev:build && pnpm run test:e2e:guards && pnpm run test:browser.