feat: 补充单元测试并增加 e2e 相关测试 (#34)

* feat: 单元测试增加jsdom相关测试 * test: 添加 e2e 的测试并使用 eslint 重新格式化整个项目 * feat: 新增获取元素样式的值的函数 * test: 修复错误的 computedTextWidth 测试用例逻辑 * ci: 添加 cypress 的缓存 --------- Co-authored-by: lyj <liyanjie@cennavi.com.cn> Co-authored-by: liunian <liunian@2077tech.com>
NI-Web-Infra-Team · Jul 11, 2023 · 0a1c5ed · 0a1c5ed
1 parent 5e1d04e
commit 0a1c5ed
Show file tree

Hide file tree

Showing 70 changed files with 15,405 additions and 10,609 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,6 +3,7 @@ module.exports = {
     node: true,
     browser: true,
     es2021: true,
+    "cypress/globals": true,
   },
   globals: {
     describe: true,
@@ -13,21 +14,21 @@ module.exports = {
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier"],
   parserOptions: {
     ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module',
-    project: ["tsconfig.json"]
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
+    project: ["tsconfig.json"],
   },
-  plugins: ["@typescript-eslint", "prettier"],
-  ignorePatterns: ['.eslintrc.cjs'],
+  plugins: ["@typescript-eslint", "prettier", "cypress"],
+  ignorePatterns: [".eslintrc.cjs"],
   rules: {
-    'no-param-reassign': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-require-imports': 'off',
+    "no-param-reassign": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-require-imports": "off",
     "@typescript-eslint/no-misused-promises": [
       "error",
       {
-        "checksVoidReturn": false
-      }
-    ]
+        checksVoidReturn: false,
+      },
+    ],
   },
 };
diff --git a/.github/CONTRIBUTING.zh-CN.md b/.github/CONTRIBUTING.zh-CN.md
@@ -12,24 +12,19 @@ NI Web Infra Team 的成长离不开大家的支持，如果你愿意为 NI Web
 
 ## Pull Request 规范
 
+- 请使用 [pnpm](https://pnpm.io/zh/) 进行开发
 - 如果您是团队外用户请先 fork 一份到自己的项目下，不要直接在仓库下建分支。
-
 - commit 信息要以 `type(scope): 描述信息` 的形式填写，例如 `fix(components): [scrollbar] fix xxx bug`（推荐使用 `git-cz` 生成）。
 
-    1. type: 必须是 'build', 'chore', 'ci', 'conflict', 'delete', 'docs', 'downgrade', 'feat', 'fix', 'font', 'lint', 'perf', 'refactor', 'release', 'revert', 'stash', 'style', 'test', 'upgrade', 'wip' 其中的一个。
+  1. type: 必须是 'build', 'chore', 'ci', 'conflict', 'delete', 'docs', 'downgrade', 'feat', 'fix', 'font', 'lint', 'perf', 'refactor', 'release', 'revert', 'stash', 'style', 'test', 'upgrade', 'wip' 其中的一个。
 
-    2. scope: 必须是 components, directives, hooks, locale, test-utils, theme-chalk, tokens, utils, project, core, style, docs, ci, dev, build, deploy, other, typography, color, border, var 其中的一个。
+  2. scope: 必须是 components, directives, hooks, locale, test-utils, theme-chalk, tokens, utils, project, core, style, docs, ci, dev, build, deploy, other, typography, color, border, var 其中的一个。
 
-    3. header: 描述信息不要超过 128 个字符并且不要少于 3 个字符。
+  3. header: 描述信息不要超过 128 个字符并且不要少于 3 个字符。
 
 - **不要提交** `.gitignore` 里面忽略的文件。
-
-- 执行 `npm run build` 后可以正确打包文件。
-
+- 执行 `pnpm run build` 后可以正确打包文件。
 - 提交 PR 前请 rebase，确保 commit 记录的整洁。
-
 - 确保 PR 是提交到 `development` 分支，而不是 `main` 分支。
-
 - 如果是修复 bug，请在 PR 中给出描述信息。
-
 - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,8 +1,6 @@
 ---
-
 name: Bug 提交
 about: 使用此模板来提交一个 bug。
-
 ---
 
 <!-- generated by template DO NOT REMOVE -->

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -6,4 +6,3 @@ contact_links:
   - name: 贡献指南
     url: https://github.com/NI-Web-Infra-Team/common-utils/blob/main/.github/CONTRIBUTING.zh-CN.md
     about: 如果您不知道如何提交一个 issue，请查看项目贡献指南
-
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,8 +1,6 @@
 ---
-
 name: 功能请求
 about: 使用此模板来提交一个功能请求。
-
 ---
 
 <!-- generated by template DO NOT REMOVE -->

diff --git a/.github/workflows/pr-auto-assign.yml b/.github/workflows/pr-auto-assign.yml
@@ -19,7 +19,7 @@ jobs:
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
-        
+
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |

diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml
@@ -46,7 +46,7 @@ jobs:
         run: pnpm run banner
 
       - name: Test
-        run: pnpm run test
+        run: pnpm run test:all
 
   publish:
     needs: test

diff --git a/.github/workflows/test-coverage.yml b/.github/workflows/test-coverage.yml
@@ -24,6 +24,14 @@ jobs:
         with:
           require: "write"
 
+      - uses: actions/cache@v3
+        name: Setup cypress cache
+        with:
+          path: ~/.cache/Cypress
+          key: ${{ runner.os }}-cypress
+          restore-keys: |
+            ${{ runner.os }}-cypress
+
       - name: Setup node
         uses: actions/setup-node@v3
         with:
@@ -55,6 +63,9 @@ jobs:
       - name: Generate coverage
         run: pnpm run test:coverage
 
+      - name: Merge unit and e2e coverage
+        run: node ./scripts/mergeCoverageReport.cjs
+
       - name: "Report Coverage"
         if: always() # Also generate the report if tests are failing
         uses: davelosert/vitest-coverage-report-action@v1
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,6 @@ components.d.ts
 **/.vitepress/dist
 **/.vitepress/cache
 coverage
+*-coverage
+.nyc_output
+cypress
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,2 @@
 auto-install-peers=true
-registry=https://registry.npmmirror.com
+registry=https://registry.npmmirror.com
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,55 +1,50 @@
 # [1.1.0-beta.1](https://github.com/NI-Web-Infra-Team/common-utils/compare/v1.0.0...v1.1.0-beta.1) (2023-06-14)
 
-
 ### Features
 
-* 添加文档搜索功能 ([#24](https://github.com/NI-Web-Infra-Team/common-utils/issues/24)) ([9248fb6](https://github.com/NI-Web-Infra-Team/common-utils/commit/9248fb662831c73ff6f5dc29bc633b3cfac84baf))
+- 添加文档搜索功能 ([#24](https://github.com/NI-Web-Infra-Team/common-utils/issues/24)) ([9248fb6](https://github.com/NI-Web-Infra-Team/common-utils/commit/9248fb662831c73ff6f5dc29bc633b3cfac84baf))
 
 # 1.0.0 (2023-06-02)
 
-
 ### Bug Fixes
 
-* 修复由于修改仓库名而丢失的链接 ([752f3b9](https://github.com/NI-Web-Infra-Team/common-utils/commit/752f3b916fdfeec986f1454e00e029008f4f3ffe))
-* 修复由于修改仓库名而丢失的链接 ([ccb0cac](https://github.com/NI-Web-Infra-Team/common-utils/commit/ccb0cac99e21f1297c0664628731ca36eb4ff352))
-
+- 修复由于修改仓库名而丢失的链接 ([752f3b9](https://github.com/NI-Web-Infra-Team/common-utils/commit/752f3b916fdfeec986f1454e00e029008f4f3ffe))
+- 修复由于修改仓库名而丢失的链接 ([ccb0cac](https://github.com/NI-Web-Infra-Team/common-utils/commit/ccb0cac99e21f1297c0664628731ca36eb4ff352))
 
 ### Features
 
-* 添加文档框架 ([1e64c6b](https://github.com/NI-Web-Infra-Team/common-utils/commit/1e64c6b89b9e63c528086d4a88427a515f63d97e))
-* 添加文档框架 ([1960f59](https://github.com/NI-Web-Infra-Team/common-utils/commit/1960f5952016709f27ddfe918e73d1ef7f97e3c5))
-* 添加文档框架 ([a7aa14b](https://github.com/NI-Web-Infra-Team/common-utils/commit/a7aa14bc07241d0d5e62311433cdbae480b5f2c7))
-* 添加文档框架 ([da23561](https://github.com/NI-Web-Infra-Team/common-utils/commit/da23561d0d15c4a86b48cf52e795476e6c49a2ad))
-* 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
-* 计算文字宽度 ([03fb18c](https://github.com/NI-Web-Infra-Team/common-utils/commit/03fb18c06c0b1f73981f6d69df718d55b06a5d92)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
-* 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
+- 添加文档框架 ([1e64c6b](https://github.com/NI-Web-Infra-Team/common-utils/commit/1e64c6b89b9e63c528086d4a88427a515f63d97e))
+- 添加文档框架 ([1960f59](https://github.com/NI-Web-Infra-Team/common-utils/commit/1960f5952016709f27ddfe918e73d1ef7f97e3c5))
+- 添加文档框架 ([a7aa14b](https://github.com/NI-Web-Infra-Team/common-utils/commit/a7aa14bc07241d0d5e62311433cdbae480b5f2c7))
+- 添加文档框架 ([da23561](https://github.com/NI-Web-Infra-Team/common-utils/commit/da23561d0d15c4a86b48cf52e795476e6c49a2ad))
+- 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
+- 计算文字宽度 ([03fb18c](https://github.com/NI-Web-Infra-Team/common-utils/commit/03fb18c06c0b1f73981f6d69df718d55b06a5d92)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
+- 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
 
 # 1.0.0 (2023-05-30)
 
-
 ### Features
 
-* 添加文档框架 ([1e64c6b](https://github.com/NI-Web-Infra-Team/common-utils/commit/1e64c6b89b9e63c528086d4a88427a515f63d97e))
-* 添加文档框架 ([da23561](https://github.com/NI-Web-Infra-Team/common-utils/commit/da23561d0d15c4a86b48cf52e795476e6c49a2ad))
-* 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
-* 计算文字宽度 ([03fb18c](https://github.com/NI-Web-Infra-Team/common-utils/commit/03fb18c06c0b1f73981f6d69df718d55b06a5d92)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
-* 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
+- 添加文档框架 ([1e64c6b](https://github.com/NI-Web-Infra-Team/common-utils/commit/1e64c6b89b9e63c528086d4a88427a515f63d97e))
+- 添加文档框架 ([da23561](https://github.com/NI-Web-Infra-Team/common-utils/commit/da23561d0d15c4a86b48cf52e795476e6c49a2ad))
+- 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
+- 计算文字宽度 ([03fb18c](https://github.com/NI-Web-Infra-Team/common-utils/commit/03fb18c06c0b1f73981f6d69df718d55b06a5d92)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
+- 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
 
 # 1.0.0-beta.1 (2023-05-30)
 
-
 ### Features
 
-* 添加文档框架 ([1e64c6b](https://github.com/NI-Web-Infra-Team/common-utils/commit/1e64c6b89b9e63c528086d4a88427a515f63d97e))
-* 添加文档框架 ([da23561](https://github.com/NI-Web-Infra-Team/common-utils/commit/da23561d0d15c4a86b48cf52e795476e6c49a2ad))
-* 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
-* 计算文字宽度 ([03fb18c](https://github.com/NI-Web-Infra-Team/common-utils/commit/03fb18c06c0b1f73981f6d69df718d55b06a5d92)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
-* 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
+- 添加文档框架 ([1e64c6b](https://github.com/NI-Web-Infra-Team/common-utils/commit/1e64c6b89b9e63c528086d4a88427a515f63d97e))
+- 添加文档框架 ([da23561](https://github.com/NI-Web-Infra-Team/common-utils/commit/da23561d0d15c4a86b48cf52e795476e6c49a2ad))
+- 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
+- 计算文字宽度 ([03fb18c](https://github.com/NI-Web-Infra-Team/common-utils/commit/03fb18c06c0b1f73981f6d69df718d55b06a5d92)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
+- 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
 
 # 1.0.0-development.1 (2023-05-25)
 
 ### Features
 
-* 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
-* 计算文字宽度 ([b916185](https://github.com/NI-Web-Infra-Team/common-utils/commit/b9161853527356b36ae1af906a47ef237416671d)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
-* 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
+- 清除历史日志，项目迁移 ([5ec0f43](https://github.com/NI-Web-Infra-Team/common-utils/commit/5ec0f435f781a51e9014640907bb8fe80a70d1ec))
+- 计算文字宽度 ([b916185](https://github.com/NI-Web-Infra-Team/common-utils/commit/b9161853527356b36ae1af906a47ef237416671d)), closes [#15](https://github.com/NI-Web-Infra-Team/common-utils/issues/15)
+- 重置版本号 ([55def4a](https://github.com/NI-Web-Infra-Team/common-utils/commit/55def4acc2d3cf528f8103b08a7970e6213504ae))
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # @ni-web-infra/common-utils
+
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FNI-Web-Infra-Team%2Fcommon-utils.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FNI-Web-Infra-Team%2Fcommon-utils?ref=badge_shield)
 公共工具类库
 
@@ -36,24 +37,71 @@ getBrowserInfo();
 </script>
 ```
 
-<!-- ## API
+## 文档
 
-[API 文档](https://unpkg.com/@ni-web-infra/common-utils/docs/index.html)
+[在线文档](<[common-utils.js.org](https://common-utils.js.org/)>)
 
 ## 如何开发
 
 请遵循[贡献指南](https://github.com/NI-Web-Infra-Team/common-utils/blob/main/.github/CONTRIBUTING.zh-CN.md)
 
 ```shell
+# 推荐启动 corepack
+$ corepack enable
+
 # 安装依赖
-$ yarn install
+$ pnpm install
 
-# 打包依赖
-$ yarn build
+# 测试
+$ pnpm test:all
+
+# 打包
+$ pnpm build
 ```
 
 在 debug 文件夹下添加调试 html，引入 dist 目录下的 js 文件，即可调试。
 
+> 如果在安装依赖时遇到网络问题，推荐在配置文件中加入 npmmirror 镜像站配置
+
+1. 打开配置文件：
+
+```shell
+# 使用 vscode 打开 npm 用户配置文件
+code ~/.npmrc
+```
+
+2. 加入以下内容：
+
+> 参考 cnpm 配置 - [binary-mirror-config/package.json](https://github.com/cnpm/binary-mirror-config/blob/692b69014a900943166e0a039638729f6ff644d3/package.json#L47)
+
+```shell
+COREPACK_NPM_REGISTRY=https://registry.npmmirror.com,
+NODEJS_ORG_MIRROR=https://cdn.npmmirror.com/binaries/node,
+NVM_NODEJS_ORG_MIRROR=https://cdn.npmmirror.com/binaries/node,
+PHANTOMJS_CDNURL=https://cdn.npmmirror.com/binaries/phantomjs,
+CHROMEDRIVER_CDNURL=https://cdn.npmmirror.com/binaries/chromedriver,
+OPERADRIVER_CDNURL=https://cdn.npmmirror.com/binaries/operadriver,
+CYPRESS_DOWNLOAD_PATH_TEMPLATE=https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip,
+ELECTRON_MIRROR=https://cdn.npmmirror.com/binaries/electron/,
+ELECTRON_BUILDER_BINARIES_MIRROR=https://cdn.npmmirror.com/binaries/electron-builder-binaries/,
+SASS_BINARY_SITE=https://cdn.npmmirror.com/binaries/node-sass,
+SWC_BINARY_SITE=https://cdn.npmmirror.com/binaries/node-swc,
+NWJS_URLBASE=https://cdn.npmmirror.com/binaries/nwjs/v,
+PUPPETEER_DOWNLOAD_HOST=https://cdn.npmmirror.com/binaries/chrome-for-testing,
+PUPPETEER_DOWNLOAD_BASE_URL=https://cdn.npmmirror.com/binaries/chrome-for-testing,
+PLAYWRIGHT_DOWNLOAD_HOST=https://cdn.npmmirror.com/binaries/playwright,
+SENTRYCLI_CDNURL=https://cdn.npmmirror.com/binaries/sentry-cli,
+SAUCECTL_INSTALL_BINARY_MIRROR=https://cdn.npmmirror.com/binaries/saucectl,
+RE2_DOWNLOAD_MIRROR=https://cdn.npmmirror.com/binaries/node-re2,
+RE2_DOWNLOAD_SKIP_PATH=true,
+PRISMA_ENGINES_MIRROR=https://cdn.npmmirror.com/binaries/prisma,
+npm_config_better_sqlite3_binary_host=https://cdn.npmmirror.com/binaries/better-sqlite3,
+npm_config_keytar_binary_host=https://cdn.npmmirror.com/binaries/keytar,
+npm_config_sharp_binary_host=https://cdn.npmmirror.com/binaries/sharp,
+npm_config_sharp_libvips_binary_host=https://cdn.npmmirror.com/binaries/sharp-libvips,
+npm_config_robotjs_binary_host=https://cdn.npmmirror.com/binaries/robotjs
+```
+
 ## 如何发布
 
 ```shell
@@ -77,10 +125,10 @@ $ npm publish
 // Babel 显式转译列表
 {
   // ...
-    transpileDependencies: ['/@ni-web-infra/common-utils/']
+  transpileDependencies: ["/@ni-web-infra/common-utils/"];
 }
 ```
 
 ## License
 
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FNI-Web-Infra-Team%2Fcommon-utils.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FNI-Web-Infra-Team%2Fcommon-utils?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FNI-Web-Infra-Team%2Fcommon-utils.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FNI-Web-Infra-Team%2Fcommon-utils?ref=badge_large)
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "cypress";
+import { setupNodeEvents } from "./tests/e2e/plugins/index";
+
+export default defineConfig({
+  env: { CYPRESS_COVERAGE: "true" },
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+  e2e: {
+    specPattern: ["**/tests/e2e/**/?(*.){test,spec}.?(c|m)[jt]s?(x)"],
+    supportFile: "tests/e2e/support/index.ts",
+    setupNodeEvents,
+  },
+});
diff --git a/cypress.d.ts b/cypress.d.ts
@@ -0,0 +1,12 @@
+import { mount } from "cypress/vue";
+
+type MountParams = Parameters<typeof mount>;
+type OptionsParam = MountParams[1];
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}