如何为ng-table贡献代码？单元测试、E2E测试与语义化自动发布流程指南

如何为ng-table贡献代码？单元测试、E2E测试与语义化自动发布流程指南

【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table

ng-table 是一款为 AngularJS 打造的表格增强组件，为 HTML 表格提供排序、筛选、分页和分组能力。想参与开源？本文带你完整走通 ng-table 的贡献流程：搭建开发环境、运行单元测试、执行 E2E 端到端测试，并理解它如何用 Conventional Commits + semantic-release 实现语义化自动发布 🚀

先认识项目结构：代码在哪里

ng-table 已用 TypeScript 重写，源码按职责清晰分层，贡献前先弄清每个目录的用途：

核心入口见 index.ts，最重要的参数类是 src/core/ngTableParams.ts，测试配置在 tsconfig.json。

克隆仓库并初始化开发环境

按官方 CONTRIBUTING.md 指南，环境搭建只需两步：

git clone https://gitcode.com/gh_mirrors/ng/ng-table cd ng-table npm install && npm run setup

npm run setup会一次完成三件事（定义在 package.json 的 scripts 中）：

1. 构建主库—— 编译 TypeScript 并执行 Webpack 打包；
2. 安装各演示应用依赖—— 自动遍历demo-apps/下的 4 个子应用执行npm install；
3. link 本地库到演示应用—— 让 demo 直接引用你本地修改的 ng-table，改完即见效；
4. 更新 Webdriver—— 为 Protractor E2E 测试准备 Selenium 驱动。

💡 提交代码前还有precommit钩子会自动跑tsc做类型检查，husky 会在提交时把关，类型错误无法溜进提交历史。

运行单元测试：npm test 背后的机制

ng-table 使用Karma + Jasmine运行单元测试，配置文件为 karma.conf.js，几个关键设计值得了解：

• 测试入口是test/index.js，由 Webpack 预处理（preprocessors），所以可以直接import源码模块；
• 非调试模式默认使用PhantomJS无头浏览器，方便 CI；调试模式（npm run test:debug）则用 Chrome；
• 测试报告会输出覆盖率到out/coverage/（lcov / cobertura / json 三种格式）。

常用命令一览：

单元测试覆盖NgTableParams、过滤、分组、默认数据加载等核心行为，用例都在test/specs/下，例如：

• test/specs/tableParams.spec.ts —— 参数与分页逻辑
• test/specs/filters.spec.ts —— 过滤功能
• test/specs/table.spec.ts 与 test/specs/tableDynamic.spec.ts —— 两种表格指令
• test/specs/ngTableDefaultGetData.spec.ts —— 数据加载

贡献代码时的标准做法：先在 test/specs/ 中为新功能补充describe / it用例，再跑npm run test:w，保存即验证，循环直到全绿。

运行 E2E 测试：让 4 个演示应用都过一遍

单元测试验证"内部逻辑"，E2E 测试则验证"真实页面能否渲染"。ng-table 的 E2E 由Protractor + Jasmine驱动，配置在 e2e/protractor.config.js：

• 使用Chrome浏览器，baseUrl指向http://localhost:8080/；
• 通过ts-node直接运行 TypeScript 用例，无需预编译；
• 集成protractor-jasmine2-screenshot-reporter，失败截图汇总到out/test/end2end/reports/e2e.html，跑完可用npm run poste2e-only打开报告。

E2E 采用页面对象模式（Page Object），页面对象定义在 e2e/demo-ng-table.po.ts：只封装"打开页面、定位table[ng-table]、统计数据行"三件事，用例复用性极强。

最核心的用例 e2e/builds.spec.ts 会遍历es5、es6-systemjs、es6-webpack、ts-webpack四个演示应用，断言"表格存在且数据行数大于 0"——等于一次性回归了 4 种集成方式。

运行 E2E 需要两个终端（CONTRIBUTING.md 官方说明）：

# 终端 1：启动演示应用静态服务器 npm run e2e-server # 终端 2：构建全部应用后运行 E2E npm run e2e

💡 如果已经npm run setup构建过，直接npm run e2e-only即可，省去重复构建时间。

语义化自动发布：提交信息如何决定版本号

ng-table 最优雅的贡献体验是：你根本不需要手动打 tag、改版本号、发 npm 包。整套自动发布由 semantic-release 驱动，规则链条如下：

1. Conventional Commits 提交规范—— 提交信息格式（feat:/fix:/perf:/BREAKING CHANGE等）决定下次发布是 minor、patch 还是 major 版本（遵循 semver 规则）；
2. 自动生成 Release Notes—— 提交历史被整理成人类可读的发布说明；
3. 自动发布到 npm—— 推送到master后，npm run semantic-release（即semantic-release pre && npm publish && semantic-release post，见 package.json 第 117 行）接管发布。

为避免手写提交信息出错，项目内置了Commitizen：

npm run cm

它会交互式引导你选择类型（feat/fix/docs/…）、填写范围与描述，生成 100% 合规的提交信息。同时validate-commit-msg钩子会拦截不合规的git commit——这也是 CONTRIBUTING.md 强调"用npm run cm而非git commit"的原因。

关于发布后的版本策略，RELEASING.md 有明确说明：

• 新版本默认以next标签发布（publishConfig.tag: next），用户需npm install ng-table@next安装，降低对生产环境的影响；
• 维护者验证稳定后，手动执行npm dist-tag add ng-table@n.n.n latest，该版本才会进入默认的npm install ng-table；
• 文档站点更新则走npm run doc（重新生成 API 文档）+npm run doc-deploy（发布演示站点）。

也就是说，贡献者只需写好代码 + 规范提交，版本号、npm 发布、发布说明全部自动完成 ✨

完整贡献流程清单

把上面的内容串起来，一条完整的贡献路径是：

1. Fork 并克隆仓库，执行npm install && npm run setup初始化；
2. 运行npm test+ E2E，确认现有代码全绿（证明环境正确）；
3. 修改 src/ 下的源码，开发时用npm run test:w保存即测；
4. 在 test/specs/ 补充单元测试，可选在 e2e/ 补充 E2E 用例；
5. 再次运行npm test与 E2E 确认全绿；
6. 用npm run cm生成规范提交信息并提交推送，发起 Pull Request；
7. 合并后由 semantic-release 自动完成版本号计算与 npm 发布。

写在最后

ng-table 的贡献门槛不高：TypeScript 源码结构清晰、Karma/Protractor 命令开箱即用、Commitizen 帮你写好提交信息、semantic-release 帮你搞定发布。熟悉本文的npm run setup → npm test → e2e → npm run cm四步循环，你的第一个 PR 就可以出发了 💪

【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table