专栏首页编程技术分享带你入门前端工程(四):测试

带你入门前端工程(四):测试

什么是测试

维基百科的定义:

在规定的条件下对程序进行操作,以发现程序错误,衡量软件质量,并对其是否能满足设计要求进行评估的过程。

也可以这样理解:测试的作用是为了提高代码质量和可维护性。

  1. 提高代码质量:测试就是找 BUG,找出 BUG,然后解决它。BUG 少了,代码质量自然就高了。
  2. 可维护性:对现有代码进行修改、新增功能从而造成的成本越低,可维护性就越高。

什么时候写测试

如果你的程序非常简单,可以不用写测试。例如下面的程序,功能简单,只有十几行代码:

function add(a, b) {
    return a + b
}

function sum(data = []) {
    let result = 0
    data.forEach(val => {
        result = add(result, val)
    })

    return result
}

console.log(sum([1,2,3,4,5,6,7,8,9,10])) // 55

如果你的程序有数百行代码,但封装得很好,完美的践行了模块化的理念。每个模块功能单一、代码少,也可以不用写测试。

如果你的程序有成千上万行代码,数十个模块,模块与模块之间的交互错综复杂。在这种情况下,就需要写测试了。试想一下,在你对一个非常复杂的项目进行修改后,如果没有测试会是什么情况?你需要将跟这次修改有关的每个功能都手动测一边,以防止有 BUG 出现。但如果你写了测试,只需执行一条命令就能知道结果,省时省力。

测试类型与框架

测试类型有很多种:单元测试、集成测试、白盒测试...

测试框架也有很多种:Jest、Jasmine、LambdaTest...

本章将只讲解单元测试和 E2E 测试(end-to-end test 端到端测试)。其中单元测试使用的测试框架为 Jest,E2E 使用的测试框架为 Cypress

Jest

安装

npm i -D jest

打开 package.json 文件,在 scripts 下添加测试命令:

"scripts": {
    "test": "jest",
 }

然后在项目根目录下新建 test 目录,作为测试目录。

单元测试

什么是单元测试?维基百科中给出的定义为:

单元测试(英语:Unit Testing)又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。

从前端角度来看,单元测试就是对一个函数、一个组件、一个类做的测试,它针对的粒度比较小。

单元测试应该怎么写呢?

  1. 根据正确性写测试,即正确的输入应该有正常的结果。
  2. 根据错误性写测试,即错误的输入应该是错误的结果。

对一个函数做测试

例如一个取绝对值的函数 abs(),输入 1,2,结果应该与输入相同;输入 -1,-2,结果应该与输入相反。如果输入非数字,例如 "abc",应该抛出一个类型错误。

// main.js
function abs(a) {
    if (typeof a != 'number') {
        throw new TypeError('参数必须为数值型')
    }

    if (a < 0) return -a
    return a
}

// test.spec.js
test('abs', () => {
    expect(abs(1)).toBe(1)
    expect(abs(0)).toBe(0)
    expect(abs(-1)).toBe(1)
    expect(() => abs('abc')).toThrow(TypeError) // 类型错误
})

现在我们需要测试一下 abs() 函数:在 src 目录新建一个 main.js 文件,在 test 目录新建一个 test.spec.js 文件。然后将上面的两个函数代码写入对应的文件,执行 npm run test,就可以看到测试效果了。

对一个类做测试

假设有这样一个类:

class Math {
    abs() {

    }

    sqrt() {

    }

    pow() {

    }
    ...
}

我们必须把这个类的所有方法都测一遍。

test('Math.abs', () => {
    // ...
})

test('Math.sqrt', () => {
    // ...
})

test('Math.pow', () => {
    // ...
})

对一个组件做测试

组件测试比较难,因为很多组件都涉及了 DOM 操作。

例如一个上传图片组件,它有一个将图片转成 base64 码的方法,那要怎么测试呢?一般测试都是跑在 node 环境下的,而 node 环境没有 DOM 对象。

我们先来回顾一下上传图片的过程:

  1. 点击 <input type="file" />,选择图片上传。
  2. 触发 inputchange 事件,获取 file 对象。
  3. FileReader 将图片转换成 base64 码。

这个过程和下面的代码是一样的:

document.querySelector('input').onchange = function fileChangeHandler(e) {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.onload = (res) => {
        const fileResult = res.target.result
        console.log(fileResult) // 输出 base64 码
    }

    reader.readAsDataURL(file)
}

上面的代码只是模拟,真实情况下应该是这样使用:

document.querySelector('input').onchange = function fileChangeHandler(e) {
    const file = e.target.files[0]
    tobase64(file)
}

function tobase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = (res) => {
            const fileResult = res.target.result
            resolve(fileResult) // 输出 base64 码
        }

        reader.readAsDataURL(file)
    })
}

可以看到,上面的代码出现了 window 的事件对象 eventFileReader。也就是说,只要我们能够提供这两个对象,就可以在任何环境下运行它。所以我们可以在测试环境下加上这两个对象:

// 重写 File
window.File = function () {}

// 重写 FileReader
window.FileReader = function () {
    this.readAsDataURL = function () {
        this.onload
            && this.onload({
                target: {
                    result: fileData,
                },
            })
    }
}

然后测试可以这样写:

// 提前写好文件内容
const fileData = 'data:image/test'

// 提供一个假的 file 对象给 tobase64() 函数
function test() {
    const file = new File()
    const event = { target: { files: [file] } }
    file.type = 'image/png'
    file.name = 'test.png'
    file.size = 1024

    it('file content', (done) => {
        tobase64(file).then(base64 => {
            expect(base64).toEqual(fileData) // 'data:image/test'
            done()
        })
    })
}

// 执行测试
test()

通过这种 hack 的方式,我们就实现了对涉及 DOM 操作的组件的测试。我的 vue-upload-imgs 库就是通过这种方式写的单元测试,有兴趣可以了解一下(测试文件放在 test 目录)。

测试覆盖率

什么是测试覆盖率?用一个公式来表示:代码覆盖率 = 已执行的代码数 / 代码总数。Jest 如果要开启测试覆盖率统计,只需要在 Jest 命令后面加上 --coverage 参数:

"scripts": {
    "test": "jest --coverage",
}

现在我们用刚才的测试用例再试一遍,看看测试覆盖率。

// main.js
function abs(a) {
    if (typeof a != 'number') {
        throw new TypeError('参数必须为数值型')
    }

    if (a < 0) return -a
    return a
}

// test.spec.js
test('abs', () => {
    expect(abs(1)).toBe(1)
    expect(abs(0)).toBe(0)
    expect(abs(-1)).toBe(1)
    expect(() => abs('abc')).toThrow(TypeError) // 类型错误
})

上图表示每一项覆盖率都是 100%。

现在我们把测试类型错误的那一行代码注释掉,再试试。

// test.spec.js
test('abs', () => {
    expect(abs(1)).toBe(1)
    expect(abs(0)).toBe(0)
    expect(abs(-1)).toBe(1)
    // expect(() => abs('abc')).toThrow(TypeError)
})

可以看到测试覆盖率下降了,为什么会这样呢?因为 abs() 函数中判断类型错误的那个分支的代码没有执行。

// 就是这一个分支语句
if (typeof a != 'number') {
    throw new TypeError('参数必须为数值型')
}

覆盖率统计项

从覆盖率的图片可以看到一共有 4 个统计项:

  1. Stmts(statements):语句覆盖率,程序中的每个语句是否都已执行。
  2. Branch:分支覆盖率,是否执行了每个分支。
  3. Funcs:函数覆盖率,是否执行了每个函数。
  4. Lines:行覆盖率,是否执行了每一行代码。

可能有人会有疑问,1 和 4 不是一样吗?其实不一样,因为一行代码可以包含好几个语句。

if (typeof a != 'number') {
    throw new TypeError('参数必须为数值型')
}

if (typeof a != 'number') throw new TypeError('参数必须为数值型')

例如上面两段代码,它们对应的测试覆盖率就不一样。现在把测试类型错误的那一行代码注释掉,再试试:

// expect(() => abs('abc')).toThrow(TypeError)

第一段代码对应的覆盖率

第二段代码对应的覆盖率

它们未执行的语句都是一样,但第一段代码 Lines 覆盖率更低,因为它有一行代码没执行。而第二段代码未执行的语句和判断语句是在同一行,所以 Lines 覆盖率为 100%。

TDD 测试驱动开发

TDD(Test-Driven Development) 就是根据需求提前把测试代码写好,然后根据测试代码实现功能。

TDD 的初衷是好的,但如果你的需求经常变(你懂的),那就不是一件好事了。很有可能你天天都在改测试代码,业务代码反而没怎么动。

所以 TDD 用不用还得取决于业务需求是否经常变更,以及你对需求是否有清晰的认识。

E2E 测试

端到端测试,主要是模拟用户对页面进行一系列操作并验证其是否符合预期。本章将使用 Cypress 讲解 E2E 测试。

Cypress 在进行 E2E 测试时,会打开 Chrome 浏览器,然后根据测试代码对页面进行操作,就像一个正常的用户在操作页面一样。

安装

npm i -D cypress

打开 package.json 文件,在 scripts 新增一条命令:

"cypress": "cypress open"

然后执行 npm run cypress 就可以打开 Cypress。首次打开会自动创建 Cypress 提供的默认测试脚本。

点击右边的 Run 19 integration specs 就会开始执行测试。

第一次测试

打开 cypress 目录,在 integration 目录下新建一个 e2e.spec.js 测试文件:

describe('The Home Page', () => {
    it('successfully loads', () => {
        cy.visit('http://localhost:8080')
    })
})

运行它,如无意外应该会看到一个测试失败的提示。

因为测试文件要求访问 http://localhost:8080 服务器,但现在还没有。所以我们需要使用 express 创建一个服务器,新建 server.js 文件,输入以下代码:

// server.js
const express = require('express')
const app = express()
const port = 8080

app.get('/', (req, res) => {
    res.send('Hello World!')
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

执行 node server.js,重新运行测试,这次就可以看到正确的结果了。

PS: 如果你使用了 ESlint 来校验代码,则需要下载 eslint-plugin-cypress 插件,否则 Cypress 的全局命令会报错。下载插件后,打开 .eslintrc 文件,在 plugins 选项中加上 cypress

"plugins": [
    "cypress"
]

模仿用户登录

上一个测试实在是有点小儿科,这次我们来写一个稍微复杂一点的测试,模仿用户登录:

  1. 用户打开登录页 /login.html
  2. 输入账号密码(都是 admin
  3. 登录成功后,跳转到 /index.html

首先需要重写服务器,修改一下 server.js 文件的代码:

// server.js
const bodyParser = require('body-parser')
const express = require('express')
const app = express()
const port = 8080
app.use(express.static('public'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/login', (req, res) => {
    const { account, password } = req.body
    // 由于没有注册功能,所以假定账号密码都为 admin
    if (account == 'admin' && password == 'admin') {
        res.send({
            msg: '登录成功',
            code: 0,
        })
    } else {
        res.send({
            msg: '登录失败,请输入正确的账号密码',
            code: 1,
        })
    }
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

由于没有注册功能,所以暂时在后端写死账号密码为 admin。然后新建两个 html 文件:login.htmlindex.html,放在 public 目录。

<!-- login.html  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <style>
        div {
            text-align: center;
        }

        button {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: 0.1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            border: 0;
        }

        button:active {
            background: #3a8ee6;
            border-color: #3a8ee6;
            color: #fff;
        }

        input {
            display: block;
            margin: auto;
            margin-bottom: 10px;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
      </style>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入账号" class="account">
        <input type="password" placeholder="请输入密码" class="password">
        <button>登录</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script>
        document.querySelector('button').onclick = () => {
            axios.post('/login', {
                account: document.querySelector('.account').value,
                password: document.querySelector('.password').value,
            })
            .then(res => {
                if (res.data.code == 0) {
                    kk = '/index.html'
                } else {
                    alert(res.data.msg)
                }
            })
        }
    </script>
</body>
</html>
<!-- index.html  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    Hello World!
</body>
</html>

login.html 静态页

index.html 静态页

然后把测试文件内容改一下:

describe('The Home Page', () => {
    it('login', () => {
        cy.visit('http://localhost:8080/login.html')
        // 输入账号密码
        cy.get('.account').type('admin')
        cy.get('.password').type('admin')

        cy.get('button').click()  
        // 重定向到 /index
        cy.url().should('include', 'http://localhost:8080/index.html')

        // 断言 index.html 页面是包含 Hello World! 文本
        cy.get('body').should('contain', 'Hello World!')
    })
})

现在重新运行服务器 node server.js,再执行 npm run cypress,点击右边的 Run... 开始测试。

测试结果正确。为了统一脚本的使用规范,最好将 node server.js 命令替换为 npm run start

"scripts": {
    "test": "jest --coverage test/",
    "lint": "eslint --ext .js test/ src/",
    "start": "node server.js",
    "cypress": "cypress open"
 }

小结

本章所有的测试用例都可以在我的 github 上找到,建议把项目克隆下来,亲自运行一遍。

参考资料

带你入门前端工程 全文目录:

  1. 技术选型:如何进行技术选型?
  2. 统一规范:如何制订规范并利用工具保证规范被严格执行?
  3. 前端组件化:什么是模块化、组件化?
  4. 测试:如何写单元测试和 E2E(端到端) 测试?
  5. 构建工具:构建工具有哪些?都有哪些功能和优势?
  6. 自动化部署:如何利用 Jenkins、Github Actions 自动化部署项目?
  7. 前端监控:讲解前端监控原理及如何利用 sentry 对项目实行监控。
  8. 性能优化(一):如何检测网站性能?有哪些实用的性能优化规则?
  9. 性能优化(二):如何检测网站性能?有哪些实用的性能优化规则?
  10. 重构:为什么做重构?重构有哪些手法?
  11. 微服务:微服务是什么?如何搭建微服务项目?
  12. Severless:Severless 是什么?如何使用 Severless?

javascript前端

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://segmentfault.com/u/woai3c/articles复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 带你入门前端工程(十):重构

    相同的地方是它们都在不改变程序功能的情况下修改代码;不同的地方是重构为了让代码变得更加容易理解、易于修改,性能优化则是为了让程序运行得更快。这里还得重点提一句,...

    谭光志
  • 《带你入门前端工程》开源了

    前端工程化,其实是软件工程在前端方面的应用。什么是软件工程?来看一下百度百科的定义:

    谭光志
  • 带你入门前端工程(三):前端组件化

    在了解模块化、组件化之前,最好先了解一下什么是高内聚,低耦合。它能更好的帮助你理解模块化、组件化。

    谭光志
  • 带你入门前端工程(一):技术选型

    技术选型应该对很多程序员都不陌生了,无论是大到技术框架、编程语言,还是小到工具库的选择,都属于技术选型的范围。个人认为技术选型应该按照以下四个指标进行选择:

    谭光志
  • 带你入门前端工程(二):统一规范

    代码规范是指程序员在编码时要遵守的规则,规范的目的就是为了让程序员编写易于阅读、可维护的代码。

    谭光志
  • 小白前端入门笔记(四),填充测试文本

    web开发人员传统上会使用lorem ipsum文本来作为测试排版时的填充文字,这个lorem ipsum大家看起来很陌生,这个是非常正常的。我查了一下,它是从...

    TechFlow-承志
  • 面向前端工程师的Nodejs入门手册(四)

    数据库,网站系统最重要的部分之一,它好比一个人的大脑,可以记下开发者们想让它记下任何的事情,而且它比人脑更可靠更精准。

    用户1462769
  • 手把手带你入门前端工程化——超详细教程

    另外我还写了一个前端工程化 demo 放在 github 上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode...

    谭光志
  • 手把手带你入门前端工程化——超详细教程

    另外我还写了一个前端工程化 demo 放在github上。这个 demo 包含了 js、css、git 验证,其中 js、css 验证需要安装 VSCode,具...

    若川
  • 打造前端工程测试体系(1)

    我们即将讨论的是如何在前端项目中引入自动化测试。虽然文章聚焦的是前端项目,但实际上讨论的内容也适合 Node 端应用。这是本系列文章的第一章,主要内容是对前端自...

    腾讯IVWEB团队
  • 面向前端工程师的 Node.js 入门手册(四)

    数据库,网站系统最重要的部分之一,它好比一个人的大脑,可以记下开发者们想让它记下任何的事情,而且它比人脑更可靠更精准。

    五月君
  • 前端工程化概述,带你全面深刻了解前端工程化思想

    大家好,今天我来和大家一起来了解前端工程化的知识,如有疑问和错误,欢迎指正,一起交流探讨哈!

    全栈加加
  • 带你入门 JavaScript ES6 (四)

    使用类声明是,需要先声明类,然后才能访问,否则抛出ReferenceError。这一点不同于函数声,函数声明会提升作用域,而无需事先声明

    柳公子
  • 课程 | 工程大咖带你入门深度学习+TensorFlow

    《深度学习基础与TensorFlow实践》 AI100学院有幸邀请到《深度学习原理与TensorFlow实践》作者之一、百纳信息公司AI方向负责人王琛老师6月...

    AI科技大本营
  • 写给前端工程师的 Serverless 入门

    Serverless 是前端圈近两年比较火热的词汇,但其第一次被提出已经是 7 年前的事情,那么什么是 Serverless 服务,其架构由哪些部分组成,又有什...

    政采云前端团队
  • [译] 写给前端工程师的 Docker 入门

    过去的我们,当业务发展需要部署新的应用时,DevOps 小伙伴通常会去买一台服务器,但是却不知道这个新应用具体需要多高的配置,往往都会造成资源浪费。

    savokiss
  • web前端工程师新手如何入门

    有很多想要学习web前端开发的新人都想自己能够快速的学习web前端开发,部分人因为自己基础比较薄弱,不知道自己该如何系统的学习,但是有着对web前端强烈的学习动...

    企鹅号小编
  • 树义带你学 Prometheus(四):PromQL 快速入门

    我们在 树义带你学 Prometheus(三):Grafana 图表配置快速入门 - 陈树义 - 博客园 中提到可以针对业务指标做自定义监控,其中有一个设置属性...

    陈树义

扫码关注腾讯云开发者

领取腾讯云代金券