3.4 jest使用pug

项目中会有多份jest的报告，需要对报告进行管理

思路上用使用pug模板生成html，读取报告目录里的html文件后，进行排序，根据排序，使用cheerio解析html，然后进行数据组装，然后使用gulp-pug进行参数传递，需要用到的包fs、gulp-pug、cheerio

一、编写pug模板

<!DOCTYPE html>
headh2 TestRunner ResultListmeta(http-equiv="Content-Type" content="text/html; charset=UTF-8")meta(http-equiv="X-UA-Compatible" content="IE=8")meta(http-equiv="Expires" content="0")meta(http-equiv="Pragma" content="no-cache")meta(http-equiv="Cache-control" content="no-cache")meta(http-equiv="Cache" content="no-cache")link(rel="stylesheet" href="result.css" type="text/css")body(id="main")div(id="app")table(id="table" border="1")tr- var title = titleeach item in titleth= item- var length = length- var value = value- for (var i = 0;i < length; i++)tr- for (var x = 0; x < title.length; x++)if x === 0td(class=`row${x}`)=itema(href=value[i][x],target="_blank")=value[i][x]elsetd(class=`row${x}`)=value[i][x]

二、编写css

#table{width: 100%;height: 40px;text-align: center;font-size: 14px;background-color: whitesmoke;border-collapse: collapse;
}
#main{margin: 20px;padding: 0px;text-align: center;
}
.row0{width: 30%;
}
.row1,.row2,.row3,.row4,.row5,.row6.row7 {width: 10%;
}
.row1,.row2,.row3{color: limegreen;
}
.row4{color:red;
}
.row5{color: sandybrown;
}
tr{height: 60px;
}
h2{font-size: 24px;
}#app{background-color: whitesmoke;border: 1px solid black;padding: 20px;
}
#main{background-color: whitesmoke;
}

三、编写排序和数据组装

const fs = require('fs')
const cheerio = require('cheerio')
exports.sort = function (data) {let arr = [];for (let i in data) {arr.push(data[i].toString().replace(/-/g, '',).replace('.html', ''));}arr.sort().reverse();for (let i in data) {for (let j in arr) {if (data[i].toString().replace(/-/g, '',).replace('.html', '') === arr[j]) {arr[j] = data[i]}}}return arr
}exports.analysis = function (path) {const $ = cheerio.load(fs.readFileSync(path));let str = $('#resData').text();let json = JSON.parse(eval('(' + str + ')'));let arr = [];if(json._reporterOptions.pageTitle.startsWith('J')){arr.push('Jest');}else {arr.push('Workflow');}arr.push(json.numTotalTestSuites);arr.push(json.numTotalTests)arr.push(json.numPassedTests)arr.push(json.numFailedTests)arr.push(json.numPendingTests)arr.push((json.endTime - json.startTime) / 1000 + 's');return arr;
}

四、编写gulp的Task

const pugdata = {title: ["Name", "Type","Test Suites Total", "Tests Total", "Passed", "Failed", "Skiped", "During"],length: 0,value: []
}
gulp.task('pug', async function () {let arr = [];await fs.readdir('report/child/', function (err, data) {let temp = html.sort(data);if(temp.length > 9){pugdata.length = 10}else {pugdata.length = temp.length}for (let i of temp) {let str = './child/' + i;arr = html.analysis('report/child/' + i);arr.unshift(str);pugdata.value.push(arr);}})return await gulp.src('src/config/pug/*.pug').pipe(pug({pretty: true,data: pugdata})).pipe(gulp.dest('./report/'));
});

gulp.task('copy', function () {return gulp.src('./src/config/pug/*.css').pipe(gulp.dest('./report/'));
})

五、命令配置

"scripts": {"test": "jest & gulp list & gulp weibo & gulp website & gulp pug","start": "jest & gulp list & gulp pug","debug": "node --inspect ./node_modules/jest/bin/jest --runInBand --no-cache --no-watchman"},//提交代码，最好把'&'换成';'

六、效果展示

3.4 jest使用pug相关推荐

npm i和npm_让您的NPM套件包含Jest和Codecov☂️
npm i和npm by Carl-Johan Kihl 卡尔·约翰·基尔(Carl-Johan Kihl) 让您的NPM套件包含Jest和Codecov☂️ (Get your NPM-packag ...
angular select设置默认选中_改进 Angular + Jest 项目中组件测试的调试
@angular-extensions/pretty-html-log 原文链接medium.com原作者:Kevin Kreuzermedium.com 译者: 知乎用户www.zhihu.c ...
vue+vuex+leaflet Jest单测踩坑指南
环境 Vue CLI 3 TypeScript 3.1.4 Leaflet 1.3.4 相关文档 vue-test-utils.vuejs.org/zh/guides/#- 踩坑 1.iview按需引 ...
你知道什么是Jest吗？
点击蓝色"程序猿DD"关注我哟加个"星标",不忘签到哦关注我,回复口令获取可获取独家整理的学习资料: - 001:领取<Spring Boot基础教程 ...
前端测试 jest 中判断函数由来
jest 中函数如何注入在以前使用 jest 的时候,就很好奇,jest 中判断函数是如何注入到文件中的.因为 test 文件并没有 require 引入所需要的测试的函数. 例如: import ...
关于 jest 测试结果如何在浏览器上显示的问题
最近在做jest的测试,发现关于jest的文章翻来覆去就那几篇,在这里补充一篇我在执行 yarn test 的时候,觉得在小黑框里看测试结果有点难受,就想去网上找一些关于jest reporter的 ...
使用 Jest 和 Enzyme 测试 React 组件
type: FrontEnd title: Testing React components with Jest and Enzyme link: hackernoon.com/testing-rea ...
测试框架 Jest 实例教程
Jest 是由 Facebook 开源出来的一个测试框架,它集成了断言库.mock.快照测试.覆盖率报告等功能.它非常适合用来测试 React 代码,但不仅仅如此,所有的 js 代码都可以使用 Jes ...
js pug 代码_用JS写的windows95操作系统
README.md 这是Windows95,在Electron应用程序中运行.是的,这是完整的. 它有用吗? 是的,可以.实际上,在macOS,Windows和Linux上.请记住,这完全是用Java ...

3.4 jest使用pug

3.4 jest使用pug相关推荐

最新文章

热门文章