以下所有内容都是基于 这周的作业 的记录，主要是讲解配置travis-ci和coverage的心路历程，主要是倾诉为什么会产生50+的commit。
由于只是心路历程，可能并不通用于所有人。
首先肯定是先把作业完成，由于之前在公司经常跟后台一起混，被他怂恿实现了一遍平衡二叉树的插入和删除，所以对链表操作相对比较熟悉。
核心就是while循环操作
// 核心
var node = list; // 当前节点
while(node) { // 迭代链表
node = node.tail;
console.log(node.head);
}
// sub核心
/**
@params {List} L 链表
@params {Number} start 开始的节点
@params {Number} len 要获取的长度
*/
var node = L; // 当前节点
var idx = 0; // 迭代索引
var length = 0; // 截取的长度
var newList = null; // 新的链表
while(node) { // 迭代链表
var l = new List();
l.head = node.head();
if(idx >= start && length < len) {
if(!newList) newList.head = l;
else newList.tail = I;
}
node = node.tail;
idx++;
}
对于作业方面就不多说了，因为造成50+ commit的并不是作业本身，而是配置万恶的Travis-ci与Coverage。
话不多说了好不好，咱们直接开始脑交吧。
首先要先跑通karma，所以要先在package.json装上浏览器插件的依赖
如果对karma参数懵逼的同学可以看看中文注释
package.json:
// 首先是package.json里面的开发依赖
"devDependencies": {
"othersDependencies": "*", // 其他依赖
"karma-chrome-launcher": "^2.2.0", // karma谷歌浏览器测试
"karma-firefox-launcher": "^1.0.1", // karma火狐浏览器测试
}
配置完成了以后在 终端命令行 npm install一遍，由于fork下来的作业本身已经完成初始化，我这里就不初始化karma了。
接下来是配置karma.conf.js
karma.conf.js:
module.exports = function(config) {
const cfg = {
// 其他配置
othersConfig: '***',
// karma需要测试的文件，应该是按执行顺序由上至下的顺序引入吧，猜的。
// 虽然初始化已经把这里写好了，但还是当给自己记录一遍吧，毕竟第一次捣鼓karma，增强一下记忆。
files: [
'node_modules/should/should.js',
'js/*.js',
'quz/*.js',
'test/*.js'
],
// 引入刚刚在package.json依赖的插件
plugins: [
'karma-mocha', // 为什么刚刚package.json没有说装这个？因为作业本身就有了。。
'karma-chrome-launcher',
'karma-firefox-launcher'
],
// 配置自动化测试浏览器，注意大小写，曾经在这里引发了好几次commit调试的血案（微笑）
browsers: ['Firefox', 'Chrome'],
// 其他配置
othersConfig: '***'
}
config.set(cfg)
}
配置完plugins和browsers后，然后在终端命令行跑npm test or karma start。
理论上karma就可以跑起来了。
接下来，该切入第一个主题了，配置Travis-ci，以及在github显示下边那个磨人的build passing小图标
还是那句，话不多说直接解剖。
首先我们要配置
.travis.yml文件.travis.yml
language: node_js
node_js:
- "8"
sudo: required
addons:
chrome: stable // 多了这一行，添加chrome插件
firefox: latest
before_script:
- "export DISPLAY=:99.0"
- "sh -e /etc/init.d/xvfb start"
- sleep 3 # give xvfb some time to start
before_install:
- npm install karma-cli -g
我回去看了一下作业最原始的状态，貌似我就新增了这一行，还有把node版本从6 -> 8了。
这里虽然只添加了一行，但是调试这个文件产生20多个commit这种事情，我真的不会乱说。
从yaml语法，到karma引用测试不通过（当时还不会npm test在本地测试），到配置那个小图表build passing，可以说是一路电光带火花的调试了过来。
当时为了调试这个文件，专门去看一下yaml的语法，感觉就是把yaml格式转成json格式，具体转化可以看看这个网站自己调试一下。
回到正题上吧，这个文件给我的感觉就是travis-ci服务器自动执行的脚本配置，就是转化成json格式作为参数，上传到travis-ci服务器那边跑测试自动要运行的命令（咳咳，还是猜的）。
剩下的就是回到karma.conf.js配置：
karma.conf.js:
module.exports = function(config) {
const cfg = {
// 其他配置
othersConfig: `***`,
// 自定义运行装置
customLaunchers: {
ChromeHeadless: {
base: 'Chrome',
flags: ['--no-sandbox']
},
FirefoxHeadless: {
base: "Firefox",
flags: ["-headless"]
}
},
// 如果在TRAVIS环境下，开启持续集成模式
singleRun: process.env.TRAVIS,
// 其他配置
othersConfig: `***`
}
// 如果在TRAVIS环境下，就将启动浏览器改成*Headless的浏览器（注释）
if (process.env.TRAVIS) {
cfg.browsers = ["ChromeHeadless", 'FirefoxHeadless'];
}
config.set(cfg)
}
注释：*Headless浏览器，我也只是道听途说，这种是谷歌和火狐出的一种无界面浏览器，类似于PhantomJS。
因为我们要在Travis-CI上运行测试，所以要用无界面的浏览器跑程序，上面的代码就判断了在Travis-ci服务器环境下，就跑*Headless浏览器。
到这里基本配完了，然后到https://www.travis-ci.org链接自己github的项目。
接下来就是git add -A，git commit -m "update"，git push origin master:master一波流了。
提交完毕后可以看到自己项目在Travis-CI上跑了，照着以上的配置多半是可以passed的。
不管passed还是failed，先把小图标加上：
点击红框的位置，第2个
select框打开，选择markdown，复制最下面textarea文本框里面的内容到你项目的Readme.md文件的顶部，再 git push 一波，完成。
接下来就是coverage了，这个结果比较简单，但是过程依旧是血泪史，过程就不说了，10多个commit的调试吧…
还是老套路https://coverage.io链接自己的github项目。
继续配置package.json：
package.json:
"devDependencies": {
"karma-coverage": "*",
"mocha-lcov-reporter": "*", // 这个报告不知道要不要装，赶时间没有去测试
}
karma.conf.js:
plugins: [
'karma-mocha',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-coverage' // 添加对依赖插件的引用
],
// 添加预处理
preprocessors: {
"js/*.js": "coverage",
"quz/*.js": "coverage",
"test/*.js": "coverage"
},
// 报告加上coverage
reporters: ['progress', 'coverage'],
coverageReporter: {
type: "lcov",
dir: "coverage/"
}
这里的reporters其实我都不太理解，但是没时间了就不管了哈哈哈哈哈，该简化的地方都简化的7788了。
加完以后就可以开始提交到github跑Travis-ci。
跑完以后到coverage上看项目：
点击红色框，拿到markdown，放到Readme.md文件中
基本完成了，但是之前拷贝的这个
coverage的markdown貌似不会随着测试覆盖率的更新而改变百分比。
我原本是46%，但是coverage里面已经100%了，我这里还是不会改变。
最后我重新copy了一次100%的markdown小图标才刷新了。
附上一张完成作品的帅照：
网友评论