C4 连接器
故事书
打开 PR 时, 将部署带有更改的故事本版本 自动访问,可通过点击PR中的链接访问.
设计系统兼容模式
每个导出组件支持选入 mode 道具,通过
C4ConnectorsContextProvider数字 :
import "@camunda/c4-connectors/index.scss" // existing Carbon styles
import "@camunda/design-system/styles.css" // required only if you use mode="ds"
<C4ConnectorsContextProvider apiBaseUrl={...} organizationId={...} mode="ds">
<C4InboundConnectorsTable onClick={...} />
</C4ConnectorsContextProvider>
mode="carbon"(默认)——用碳设计系统来做,与以前的版本没有变化.mode="ds"- 与@camunda/design-system消费者必须额外进口@camunda/design-system/styles.css一旦在他们的应用根上——这个库不会为您导入它,就像它不导入自己的一样index.scss给你的.
少数部件还没有设计系统等同性,而且总是
作为碳,在两种模式中: Grid编号 :Column 编程在 C4Page, (中文(简体) ), Layer 财务报告和审定财务报表
Section 在可执行细节视图和土司通知中。 这个
库中的故事书有一个“设计系统”工具栏来切换预览两种模式
对于任何故事.
中断更改
需要反应 19 - 从v1.7.0开始,这个图书馆需要反应19
(单位:千美元)^19.0.0。反应 18 不再支持.
德维
预备
有几个 npm 包只提供给 Camundis, 所以你首先需要 在 GitHub 上创建个人访问令牌。 要创建此符号, 请遵循步骤 下图:
- 转到 https://github.com/ settings/tokens 页面存档备份,存于互联网档案馆。 。 。 .
- 单击生成新令牌 .
- 至少选择
read:packages。 。 。 . - 生成相.
- 将生成的令牌保存在一个安全的地方(例如卡蒙达的秘密)
因为你再也见不到它了.
重要启用 SSO 允许符号访问 相机云层 文物. - 将生成的令牌添加到您的环境中 。 见以下例子:
林纳:
export NPM_TOKEN=ghp_imiJmvG46E6wo7V4ANwurstbrotXafCg - 接下来,运行如下:
yarn
注:强烈建议你将出口说明加入你的.简介,以便 自动添加到您的环境中.
* 安装
# install
yarn
# start storybook
yarn storybook
# build components
yarn build
使用控制台 SM 运行
见
这个
需要更多信息的文档.
热带木材数据库; 使用以下内容
实现最小设置运行的环境变量 :
#build the project, go to the root directory (camunda-cloud-management-apps)
pnpm build
# camunda-cloud-management-apps/apps/console-sm-backend
NODE_ENV=local SERVICE_NAME=console-sm-backend CAMUNDA_CONSOLE_DISABLE_AUTH=true pnpm run start
# camunda-cloud-management-apps/apps/console-sm-frontend
pnpm run start:local
导航到localhost:4200打开控制台. 由于配置图的内容只是 假信息,获取所有外部数据将失败( 从网络应用进行遥测,.).
环境变量 CAMUNDA_CONSOLE_DISABLE_AUTH 禁用登录
师曰. 那种设定简化了本地实例 因为没有依赖性
这需要建立起来.
QQ 本地实例的配置图内容可见于 应用程序. yaml。 。 。 .
QQ 发布
官方发布
驻地协调员和最终释放都使用同样的方法
发布-弧工作流程。 。 。 .
从 GitHub 动作标签中运行并选择 release_type 输入.
建议的两步进程:
-
释放候选人 - 运行工作流程与
release_type = RC这个 发布 npm 预释( 标记)rc)并打开一个名为chore: bump version to X.Y.Z-rc.N由于部门保护限制 你必须 手动合并此 PR。 。 。 . -
最后发行 - 一旦驻地协调员得到验证,将再次使用
release_type = Final。此选项将最后的软件包发布到 npm,创建 GitHub 发布,并更新更改日志. 再来一次,合并结果chore: bump version to X.Y.Z公关 手动。 。 。 .
当地释放
你用得着 也门 在本地部署软件包.
然后可以在另一个工程中通过添加来使用软件包 workspace: 页:1
依赖版本 package.json。 。 。 .
测试
单位和互动测试
单位测试使用情况 维特 和故事书交互测试使用
@storybook/test
启用 a11y 检查.
yarn test:unit # Vitest unit tests
yarn test:storybook # Storybook interaction + a11y tests (requires a running Storybook)
yarn test:ci # TypeScript check + unit tests + Storybook tests (used in CI)
每一次推都自动在CI里运行 新逻辑必须有一个 *.test.ts
单位测试; 新组件状态或用户交互必须有一个故事本
play 函数.
视觉回归测试( VRT)
我们用 剧作家 要进行的截图测试 了解通过依赖性更新或更改 组件代码.
本地运行 VRT
我们在一个容器内运行 VRT 以避免不同的结果 不同的平台。 简单运行 :
yarn start:docker-storybook
接下来
yarn test:visual-regression:docker
上述命令将:
- 构建故事书.
- 启动带有此名称的 Playwright 容器
c4-visual-regression。 。 。 . - 在垃圾箱里写故事书.
- 在嵌入容器内进行视觉回归测试.
开发这些步骤不一定总能起到帮助作用 一次 一次吗 您可以在 软件包.json。 。 。 .
在 CI 中运行 VRT
有一个 Visual regression tests 自动启动的工作流程
推动。 也可以手动触发 Actions 选项卡.
如果工作流程失败,您可以通过导航到
工作流程运行摘要,然后滚动到 Artifacts 节。 点击
所谓的文物 Playwright report 要下载,请下载
文件夹,然后打开 index.html 浏览器中的测试报告文件
查看报告.
如何处理失败的测试
当 VRT 失败时, 这可能有两个原因:
- 不知不觉中实行了一种改变。 这样的话,你看看测试 报告并检查是否打算更改。 如果是,请按2进行.
- 你故意改头换面的 在这种情况下,你需要更新 截图如下 .
确保你有 c4-visual-regression 运行或启动嵌入容器
就像描述的那样 这里然后,看看测试
报告:
yarn report:visual-regression
重复检查,通过查看 失败测试报告中突出的差别.
要更新所有截图, 请运行 :
yarn update:visual-regression:docker
测试应该通过当地和CI。 提交并推进更新 截图.