如何对第一个Vue.js组件进行单元测试 (上)
首先,为什么要单元测试组件?
单元测试是持续集成的关键。通过专注于小的、独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿。
单元测试不仅限于脚本。可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法。这些实例包括单一责任、可预测性和松散耦合。
作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择。我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行。
在开始之前
Vue CLI 3发布了。Vue Test Utils-官方的Vue.js单元测试实用程序库-已经成长为beta版。在第一篇教程中,我们使用了webpack-simple,一个不包含测试功能的原型模板。出于这些原因,最简单的方法是“擦干净黑板”并将项目从教程迁移到更新后的Vue.js安装。
我从第一个教程重新创建了项目,因此您可以直接从GitHub下载它。然后导航到解压缩的目录并安装依赖项。
注意:确保在继续之前安装Node.js:
运行项目:
Vue Test Utils和Jest
在本教程中,我们将使用Vue Test Utils——官方Vue.js测试工具包,以及Jest,一个由Facebook支持的JavaScript测试运行器。
Vue Test Utils允许您单独安装Vue组件并模拟用户交互。它有测试单个文件组件所需的所有实用程序,包括使用Vue Router或Vuex的实用程序。
Jest是一个功能齐全的测试运行器,几乎不需要配置。它还提供了一个内置的断言库。
Vue CLI 3(我用它来生成样板文件)允许您选择自己喜欢的测试运行器,并设置好它。如果要使用其他测试运行器(如Mocha),请安装Vue CLI 3并生成自己的启动项目。然后,您可以从我的样板中直接迁移源文件。
我们应该测试什么?
单元测试的一种常见方法是仅关注公共API(也称为黑盒测试)。通过忽略实现细节,您可以在不必调整测试的情况下进行内部更改。毕竟,您要做的是确保您的公共API不会中断。在“引擎盖”下发生的事情是被间接测试的,但重要的是公共API保持可靠。
这也是Vue Test Utils指南的官方建议。因此,我们只测试我们可以从组件外部访问的内容:
交互
道具变化
我们不会直接测试计算属性、方法或钩子(hooks)。这些将通过测试公共接口进行隐性测试。
设置spec文件
与常规测试一样,每个组件都有一个spec文件,用于描述我们要运行的所有测试。
规范是JavaScript文件。按照惯例,JavaScript与它们正在测试的组件具有相同的名称,加上.spec后缀。
继续创建一个test/unit/Rating.spec.js文件:
我们已经导入了Rating组件和shallowMount。后者是Vue Test Utils的一个功能,它允许我们挂载我们的组件而不挂载它的子组件。
describe函数调用包含了我们即将编写的所有测试-它描述了我们的测试套件。它有自己的地域,可以自己包装其他嵌套套件。
好了,让我们开始编写测试。
确定测试方案
当我们从外部看评级时,我们可以看到它在执行以下操作:
它呈现的stars列表等于用户传递的maxStars道具的属性;
它为每个star添加一个活动类,其索引值小于或等于用户传递的stars属性;
当用户点击它时,它会切换star上的活动类别,并在下一个stars上移除它;
当用户点击一个star时,它会切换图标star和star-o;
如果用户将hasCounter prop设置为true,则呈现计数器,如果将其设置为false,则隐藏它,并显示表示当前活动的最大stars数量的文本;
请注意,我们只关注组件从外部执行的操作。我们不关心点击star执行率的方法,还是内部stars数据属性发生的变化。我们可以重命名这些,但这不应该破坏我们的测试。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
区块链教程Fabric1.0源代码分析policy(背书策略)-兄弟连区块链
区块链教程Fabric1.0源代码分析policy(背书策略),2018年下半年,区块链行业正逐渐褪去发展之初的浮躁、回归理性,表面上看相关人才需求与身价似乎正在回落。但事实上,正是初期泡沫的渐退,让人们更多的关注点放在了区块链真正的技术之上。 Fabric 1.0源代码笔记 之 policy(背书策略) 1、policy概述 policy代码分布在core/policy、core/policyprovider、common/policies目录下。目录结构如下: core/policy/policy.go,PolicyChecker接口定义及实现、PolicyCheckerFactory接口定义。 core/policyprovider/provider.go,PolicyChecker工厂默认实现。 common/policies目录* policy.go,ChannelPolicyManagerGetter接口及实现。 * implicitmeta_util.go,通道策略工具函数。 2、PolicyChecker工厂 2.1、PolicyCheckerFactory接口定义 t...
- 下一篇
区块链教程Fabric1.0源代码分析Proposal(提案)-兄弟连区块链学院
区块链教程Fabric1.0源代码分析Proposal(提案),2018年下半年,区块链行业正逐渐褪去发展之初的浮躁、回归理性,表面上看相关人才需求与身价似乎正在回落。但事实上,正是初期泡沫的渐退,让人们更多的关注点放在了区块链真正的技术之上。 Fabric1.0源代码笔记之Proposal(提案) 1、Proposal概述 Proposal,即向Endorser发起的提案。Proposal代码分布在protos/utils、protos/peer目录下,目录结构如下: protos/utils目录:proputils.go,Proposal工具函数。txutils.go,Proposal工具函数。protos/peer目录:proposal.pb.go,Proposal相关结构体定义。 2、Proposal相关结构体定义 2.1、SignedProposal定义 type SignedProposal struct { ProposalBytes []byte //Proposal序列化,即type Proposal struct Signature []byte //signer....
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境