3.4 jest使用pug

最新推荐文章于 2023-02-21 20:17:23 发布

LetsStudy

最新推荐文章于 2023-02-21 20:17:23 发布

阅读量182

点赞数

分类专栏： Node自动化测试文章标签： pug合并报告

本文链接：https://blog.csdn.net/LetsStudy/article/details/118389615

版权

Node自动化测试专栏收录该内容

54 篇文章 0 订阅

订阅专栏

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

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

一、编写pug模板

<!DOCTYPE html>
head
    h2 TestRunner ResultList
    meta(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 = title
                     each item in title
                        th= 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 === 0
                             td(class=`row${x}`)=item
                                a(href=value[i][x],target="_blank")=value[i][x]
                         else
                             td(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"
  },

//提交代码，最好把'&'换成';'

六、效果展示

LetsStudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.4 jest使用pug

项目中会有多份jest的报告，需要对报告进行管理思路上用使用pug模板生成html，读取报告目录里的html文件后，进行排序，根据排序，使用cheerio解析html，然后进行数据组装，然后使用gulp-pug进行参数传递，需要用到的包fs、gulp-pug、cheerio一、编写pug模板<!DOCTYPE html>head h2 TestRunner ResultList meta(http-equiv="Content-Type" content="tex
复制链接

扫一扫