课程时长

2天（6小时/天）

课程大纲

前端单元测试原理与入门

1.    什么是单元测试？

a)      单元测试，Unit testing，又称为“模块测试”，是对程序最小单元进行正确性检验的测试工作。

b)     这个最小单元可以是一个函数方法、一个类、一个执行过程代码等等。

c)      单元测试的理想情况是能独立于整个软件项目，隔离出来进行单独测试验证。

2.    前端单元测试主要做什么？

a)      狭义概念。

b)     广义概念。

3.    前端单元测试发展历程

a)      Node.js诞生之前，主要在浏览器环境里验证。

b)     测试用例代码在浏览器运行，代表框架 Qunit。

c)      受限浏览器环境，只能验证在浏览器运行的代码。

d)     Node.js诞生之后，主要在Node.js环境里验证

e)     测试用例在Node.js环境运行，代表框架有Jest，Mocha。

f)       可以在Node.js环境模拟浏览器运行时和API，从而验证浏览器里运行的代码。

g)     可以测试Node.js服务端代码。

4.    前端单元测试有哪些主要概念

a)      测试块

b)     对需要测试代码进行测试验证的代码模块

c)      输入和输出

d)     输入：可以是函数入参，或者是HTML渲染执行代码等需要的被测试代码。

e)     输出，可以是函数返回结果，或者是浏览渲染的HTML结果内容。

f)       断言和匹配器

g)     断言，就是对测试单元输入数据后产生的结果进行验证，比如Jest里的expect()。

h)     匹配器，就是对单元测试输出结果期待值进行判读，不符合期待就抛出异常，比如Jest的toBe()

i)       比如一个加法函数，输入1和2，断言就是判断是否为3

j)       快照

k)      对复杂测试内容进行存储，常见是将断言的校验数据进行静态的数据存储。

l)       比如验证React组件的HTML渲染结果，将其首次渲染HTML结果存储在静态文件里，作为下次校验数据。

m)    覆盖率

n)     行覆盖率：Line Coverage，衡量被测试代码每行的执行覆盖情况，但是注释除外。

o)     语句覆盖率：Statement Coverage，被测试代码中每条语句的执行覆盖情况。

p)     函数覆盖率：Function Coverage，被测试代码中每个声明函数的执行覆盖情况。

q)     分支覆盖率：Branch Coverage，被测试代码中每个分支的执行覆盖率，比如 if-else。

5.    单元测试执行原理

a)      第一步：启动测试，将测试代码进行AST解析。

b)     第二步：执行测试，执行测试块内容，进行断言和匹配结果，同时通过AST收集代码执行覆盖情况。

c)      第三步：生产报告，对AST语法树执行收集的数据，进行多种覆盖率分析和产出报告。

6.    课堂实验：用Jest进行一个简单的单元测试

a)      实验1：简单的JS函数单元测试。

b)     实验2：简单的HTML快照单元测试。

前端单元测试实战-浏览器环境

1.    Node.js如何模拟浏览器环境？

a)      基于JSDOM模拟浏览器的DOM操作

b)     基于sinon等框架模拟浏览器HTTP请求和响应操作

c)      基于自定义代码模拟window全局方法操作

2.    DOM操作单元测试和实战讲解

a)      实战1：DOM渲染和测试

b)     实战2: DOM事件的触发和测试，JS触发点击事件。

c)      实战3：DOM事件的模拟和测试，图片img模拟加载请求。

3.    CSS样式单元测试和实战讲解

a)      实战1：获取DOM样式和测试

b)     实战2：修改DOM样式和测试

4.    React组件单元测试和实战讲解

a)      实战1：React普通渲染组件的测试

b)     实战2：React组件事件的测试

c)      实战3：React动态渲染事件测试

d)     实战4：React模拟图片组件请求事件测试

5.    Vue组件单元测试和实战讲解

a)      实战1：Vue普通渲染组件的测试

b)     实战2：Vue组件事件的测试

c)      实战3：Vue动态渲染事件测试

d)     实战4：Vue模拟图片组件请求事件测试

6.    问题：Node.js环境如何对React和Vue的SSR渲染单元测试

前端单元测试实战-全栈环境

1.    Node.js如何模拟浏览器的HTTP请求和响应？

a)      覆盖重写XMLHTTPRequest

b)     覆盖重写window.fetch

c)      基于第三方库，比如sinon，进行请求模拟

2.    模拟浏览器HTTP请求和响应实战讲解

a)      实战：基于sinon，进行请求模拟

3.    Node.js服务端代码如何单元测试？

a)      实战1：测试基于Koa.js的HTTP服务GET请求。

b)     实战2：测试基于Koa.js的HTTP服务POST请求。

4.    Node.js服务业务逻辑如何单元测试？

a)      前置条件：HTTP协议的理解和掌握

b)     校验状态，比如Cookie，HTTP Headers等登录态判断。

c)      数据库读写，比如MySQL数据库读写是否成功。

d)     远程服务，比如RPC服务的请求校验。

5.    服务端业务逻辑单元测试实战和讲解

a)      实战1：Node.js模拟登录单元测试。

b)     实战2：Node.js服务的MySQL数据库单元测试。

c)      实战3：RPC远程服务调用单元测试。

6.    问题：单元测试就能完整保障项目质量吗？

更多维度的前端测试方案

1.    单元测试的有什么局限性吗？

a)      单元测试覆盖率只是在功能维度上的测试，就是一种代码质量指标，无法保证完整功能是否符合预期。

b)     单元测试只是代码层面的质量检查，无法验证实际前端UI界面的质量检查。

c)      单元测试只能验证代码的逻辑功能，无法覆盖所有边界场景，比如项目性能质量。

2.    还有哪些维度的测试方案？

a)      UI维度：E2E测试

b)     性能维度：基准测试

c)      项目完整功能测试：集成测试

3.    什么是E2E测试？

a)      E2E测试，End to End Testing，也称端对端测试，用于测试应用程序流是否从头到尾按设计执行的方法。

b)     前端领域的E2E测试，就是模拟真实用户界面环境，比如Chrome浏览器访问页面，然后测试所有操作和反应是否符合预期。

c)      E2E测试没有统一的实现标准，目前主流的方案有两种。

d)     方案1，用脚本操作和验证真实浏览器访问结果，比如Cypress

e)     方案2，用脚本访问和操作界面，然后用无头浏览器截图进行图像比对，比如用Puppeteer进行访问截图。

4.    如何做E2E测试？

a)      实验1：基于Cypress的E2E测试

b)     实验2：基于Puppeteer的E2E测试

5.    什么是基准测试？

a)      基准测试，Benchmarking，是测试和评估软件性能指标的测试工作。

b)     基准测试就是通过设定可控条件，对程序代码进行多次测试观察，获取和验证程序性能极限数据。

c)      比如：测试服务端HTTP接口每秒能响应多少次请求。

6.    如何做基准测试？

a)      实验：用npm模块benchmark验证函数的执行极限

7.    什么是集成测试？

a)      集成测试，Integration Testing，又称“组装测试”，对多个模块的程序组合联动起来的测试。

b)     弥补了单元测试局限性，把多个功能模块结合起来进行测试，从而验证模块联合起来的功能流程是否正常。通常没有固定的具体技术方案，可以是多种测试方案结合，可以是E2E测试和单元测试对模块的组合进行测试。

c)      比如，一个完整的注册和登录流程的测试，先执行注册模块单元测试，获取新注册账号，用于登录模块单元测试，验证新注册账号是否有效，再用E2E从新注册一遍，用再多次新注册的账号基于UI界面验证登结果。

8.    问题：前端性能还有哪些维度的测试方案？比如帧率维度。