Skip to content

组件自检清单

Jump to bottom
Kagol edited this page Mar 29, 2022 · 6 revisions

自动化代码检查

参考以下CodeCheck指南：

DevUI CLI 中 CodeCheck 代码检查功能使用指南

组件功能自检步骤

以下步骤需要形成相应的自动化单元测试用例。

第1步：创建一个vite工程

npm create vite my-vue-devui-app --template vue-ts

第2步：在vite工程中安装和引入最新版本Vue DevUI 

npm i vue-devui

import DevUI from 'vue-devui'
import 'vue-devui/style.css'

createApp(App).use(DevUI).mount('#app')

第3步：测试组件最核心的L0功能

  • 在页面中以最简方式(只写必填的props或slots)使用相应的组件<d-button>确认</d-button>，看默认情况下，渲染和功能是否正常。

  • 测试最核心的交互功能，比如Button组件最核心的是click事件：<d-button @click="confirm">确认</d-button>

第4步：测试每一个单独的api功能是否符合预期

以Button组件为例，需要测试：

  1. type的每一个值是否符合预期
  2. disabled是否正常
  3. ...

第5步：测试api之间的组合是否功能正常

第6步：测试边界情况（可选）

  1. 测试空值：null、undefined、NaN、''、0、[]、{}等值
  2. 测试文本超长/超短的、其他语言、特殊的emoji字符等
  3. 数值类型则测试超大数值、负数、0、小数等
  4. 测试组件在浏览器边缘显示是否正常
  5. 快速操作，比如快速连续单击/双击/快速拖拽等

第7步：兼容性测试（可选）

  1. Chrome最新的3个大版本（Windows 10）
  2. Firefox最新的3个大版本（Windows 10）
  3. Edge最新的3个大版本（Windows 10）
  4. Safari最新的3个大版本（MacOS 10）

3 组件文档自检步骤

组件文档的自检以Ng DevUI文档为依据，需要照着Ng DevUI官网的文档来，不一致的地方需要保持一致，如果有无法保持不一致的地方，可以记录下为什么不一致。

Ng DevUI官网： https://devui.design/components/zh-cn/overview

第1步：检查组件md文档的标题、描述、何时使用3块内容是否缺失、不一致或有错别字

第2步：检查组件demo是否正确

  • 检查右侧快速前往的demo分类数量、名称是否正确
  • 检查每一个demo与Ng DevUI的是否一致，主要看demo使用的api是否正确，使用的文案是否正确

第3步：检查api是否正确

api文档一般是一个表格，也有文字说明的，保持和Ng DevUI一致即可。

检查每一个api的名称、类型、默认值、说明、跳转demo这5项是否与Ng DevUI一致。

Clone this wiki locally