chore: add test:ui script to visualize and interact with tests

FightingDesign · Jul 31, 2024 · f216ad0 · f216ad0
1 parent 7678bad
commit f216ad0
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 11 deletions.
diff --git a/CONTRIBUTING.en-US.md b/CONTRIBUTING.en-US.md
@@ -81,6 +81,7 @@ fighting-design 内部设置了很多的命令，在 [package.json](https://gith
 | `new`           | `pnpm new xxx`       | 构建全新组件，生产组件所需要的文件，执行配置文件 [index.ts](https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-add-component/index.ts)，详情参考 [README.md](https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-add-component/README.md) |
 | `test`          | `pnpm test`          | 执行单元测试                                                                                                                                                                                                                                                                                       |
 | `test:coverage` | `pnpm test:coverage` | 查看单元测试覆盖率，可在终端中生成覆盖率，也可查看项目根目录下的 `coverage/index.html`，参考 [Coverage](https://vitest.dev/guide/coverage.html)                                                                                                                                                    |
+| `test:ui`       | `pnpm test:ui`       | 提供了一个可视化的界面来查看单元测试并与之交互，参考 [Vitest UI](https://vitest.dev/guide/ui) |
 | `prettier`      | `pnpm prettier`      | 全局格式化                                                                                                                                                                                                                                                                                         |
 | `commit`        | `pnpm commit`        | commit 钩子                                                                                                                                                                                                                                                                                        |
 | `lint`          | `pnpm lint`          | 全局 eslint 检测，规则参考 [](https://github.com/FightingDesign/fighting-design/blob/master/packages/eslint-config/index.js)                                                                                                                                                                       |

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -77,6 +77,7 @@ fighting-design 内部设置了很多的命令，在 [package.json](https://gith
 | `new`           | `pnpm new xxx`       | 构建全新组件，生产组件所需要的文件，执行配置文件 [index.ts](https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-add-component/index.ts)，详情参考 [README.md](https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-add-component/README.md) |
 | `test`          | `pnpm test`          | 执行单元测试                                                                                                                                                                                                                                                                                       |
 | `test:coverage` | `pnpm test:coverage` | 查看单元测试覆盖率，可在终端中生成覆盖率，也可查看项目根目录下的 `coverage/index.html`，参考 [Coverage](https://vitest.dev/guide/coverage.html)                                                                                                                                                    |
+| `test:ui`       | `pnpm test:ui`       | 提供了一个可视化的界面来查看单元测试并与之交互，参考 [Vitest UI](https://vitest.dev/guide/ui) |
 | `prettier`      | `pnpm prettier`      | 全局格式化                                                                                                                                                                                                                                                                                         |
 | `commit`        | `pnpm commit`        | commit 钩子                                                                                                                                                                                                                                                                                        |
 | `lint`          | `pnpm lint`          | 全局 eslint 检测，规则参考 [](https://github.com/FightingDesign/fighting-design/blob/master/packages/eslint-config/index.js)                                                                                                                                                                       |

diff --git a/docs/docs/contributing.md b/docs/docs/contributing.md
@@ -77,6 +77,7 @@ fighting-design 内部设置了很多的命令，在 [package.json](https://gith
 | `new`           | `pnpm new xxx`       | 构建全新组件，生产组件所需要的文件，执行配置文件 [index.ts](https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-add-component/index.ts)，详情参考 [README.md](https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-add-component/README.md) |
 | `test`          | `pnpm test`          | 执行单元测试                                                                                                                                                                                                                                                                                       |
 | `test:coverage` | `pnpm test:coverage` | 查看单元测试覆盖率，可在终端中生成覆盖率，也可查看项目根目录下的 `coverage/index.html`，参考 [Coverage](https://vitest.dev/guide/coverage.html)                                                                                                                                                    |
+| `test:ui`       | `pnpm test:ui`       | 提供了一个可视化的界面来查看单元测试并与之交互，参考 [Vitest UI](https://vitest.dev/guide/ui) |
 | `prettier`      | `pnpm prettier`      | 全局格式化                                                                                                                                                                                                                                                                                         |
 | `commit`        | `pnpm commit`        | commit 钩子                                                                                                                                                                                                                                                                                        |
 | `lint`          | `pnpm lint`          | 全局 eslint 检测，规则参考 [](https://github.com/FightingDesign/fighting-design/blob/master/packages/eslint-config/index.js)                                                                                                                                                                       |

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "serve:docs": "pnpm run -C docs serve",
     "new": "pnpm run -C packages/fighting-add-component new",
     "test": "vitest",
+    "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
     "prettier": "prettier --write .",
     "commit": "cz",
@@ -46,6 +47,7 @@
     "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^2.0.4",
+    "@vitest/ui": "^2.0.5",
     "@vue/test-utils": "^2.4.5",
     "autoprefixer": "^10.4.13",
     "commitizen": "^4.2.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml