如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
通常,使用测试驱动开发(TDD)最困难的部分是开始。你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了。
但是,你不是一个普通的开发者。你就可以开始就使用TDD与Vue,所以你可以确信你的代码是完全如预期的。现在我们一起在一个新的Vue项目开始测试工作,通过默认的测试,然后添加一些我们自己想做的。
设置
启动TDD的最简单方法是使用Vue-cli工具。如果你还没有使用过它,Vue-cli工具提供了你从命令行开始进行一个新的Vue项目的方法。
当你使用Vue-cli脚手架启动项目,所有你需要做的就是按照提示然后测试会自动为你设置。这有多容易?让我们走过这个过程,这样我们就可以确切地看到如何去做。
第一步是安装Vue-cli的工具,如果你还没有。使用npm,你可以打开你的终端运行npm install -g vue-cli安装它。
在创建项目之前,我们需要选择一个模板。Vue-cli给我们几个不同的模板选项如WebPack,browserify,PWA,simple。他们每个都有自己独特的设置,我会让你选择最适合你的。请注意,“sample”版本不包括测试。在本教程中,我将使用WebPack模板。
现在,浏览到你想创建新的Vue项目所在的目录。在这里你可以运行vue init <template-name> <project-name>。Vue-cli工具将提示您提供一系列的关于项目的问题,像这样:
你看,我已经接受了大部分默认脚手架设置,但我关掉Vue-router因为我们暂时不需要它。你选择什么取决于你的项目,但请确保启用单元测试!
当你启用单元测试时,你将被要求选择一个测试运行器。
我选择Karma和Mocha,因为那是我所熟悉的。但是,我听说过很多关于Jest的东西,我一定很快就想试试。
在那之后,Vue-cli会问你,如果你想与Nightwatch建立端到端的测试。这有点超出了“入门”教程的范围,所以我们现在不说了。最后,选择是否运行run npm 或者yarn 安装后,它会为您生成项目。
哦,我们有了一个新的测试,已经为我们构建了Vue项目!如果你的cd到您的项目和运行新的运行测试,我们可以看到,Vue-cli已经包括我们的项目和他们通过的一些测试。
看看情况
现在我们都准备好了,让我们四处看看,看看我们的项目是什么样子。我们的文件结构应该如下所示:
我们可以看到,Vue-cli做了大量的工作,我们!虽然这里有很多内容,但对于本教程,我们只关心测试和SRC目录。
在src中,我们可以看到,我们有两个Vue组件和main.js文件。然后,在测试中,我们可以看到一些测试设置文件和我们的规格目录。这是我们写测试的地方。让我们看看里面,看看helloworld.spec.js中有什么。
让我们一块一块地把这个文件打开。在最开始,我们引入Vue和HelloWorld的组件可以用在测试。接下来,我们使用**describe()功能,封装测试断言。我们的主张是在it()**函数中定义。这是我们可以看到组件测试的地方。
如果你是新的测试,这可能是一个困难的概念包装你的脑海中。我喜欢思考的是,我们的应用程序的测试就像一个大标准化测试,我们都在最初阶段。每个**describe()函数是一个不同的主题,然后每个it()**功能测试包含一个问题。随着你对测试越来越熟悉,我相信你会想出自己编写测试的内容。
回到HelloWorld.spec.js,我们知道我们的“主体”是helloworld.vue和我们的测试问题,应该给予它正确的内容。那么,我们怎么做呢?
首先,我们使用Vue.extend(HelloWorld)通过Vue函数在HelloWorld类的基础上构建一个之类。接下来,我们实例化HelloWorld这样我们可以与它进行交互。在测试中,这通常被称为“设置”或“构建”,本质上,我们正在初始化环境以匹配测试过程中要与之交互的适当状态。
最后,我们准备看看我们的断言。在这里,我们期待着里面的文字,在你的vue.js程序中设置**.hello**
中的h1为“Welcome to Your Vue.js App.”。“这是真的吗?”好吧,如果你已经运行你的测试,你知道他们通过了。所以,让我们看看**helloworld.vue,**看看它的代码设置。
在第3行,我们看到里面的H1。你好,是从我们的Vue数据传递一个信息。然后,在28行我们看到,信息是我们预期的字符串:“Welcome to Your Vue.js App.”看起来我们的测试像是正确的!
写一个测试
既然我们确信我们的测试是正确的,那么我们来添加一个我们自己的测试。编写任何测试的第一步总是弄清楚我们想要测试什么。这也是最难做的事情,也是最容易解释的部分。
那里有许多不同的策略。我发现一个好的做法是花一点时间思考给定的组件应该做什么,然后编写测试来验证它。我通常不担心“单元”测试每个方法或属性。相反,我专注于测试我期望从组件中获得的行为。
让我们把这种方法用在我们的HelloWorld组件。我们期望什么样的行为?我们希望它能提供一组静态信息,而我们当前的测试涵盖了。如果动态MSG不呈现,那么我们可以相当肯定我们的内容渲染会有问题。但是,让我们编写一个测试来确保所有链接都显示在页面上,即使出现了一个未知问题。
首先,让我们来考虑一下我们的测试。我们希望确保所有链接都显示正确。因此,让我们编写一个测试,以确保我们呈现正确的链接数量。
回到HelloWorld.spec.js,我们的第一**it()**右下方,我们可以添加一个像这样:
it('should show all the links', () => {
})
现在,我们需要像在第一次测试中那样,建立我们的内容。所以,我们可以添加相同的常量,我们在第一个**it()**中。
it('should show all the links', () => {
const Constructor = Vue.extend(HelloWorld)
const vm = new Constructor().$mount()
})
我们要确保所有的链接显示相应的页面。让我们试着找出我们组件呈现的所有链接的计数,看看是否符合我们的期望。在helloworld.vue我们有9个环节,所以我们希望我们的组件来呈现9个环节。
it('should show all the links', () => {
const Constructor = Vue.extend(HelloWorld)
const vm = new Constructor().$mount()
expect(vm.$el.querySelectorAll('a').length)
.to.equal(9)
})
当我们运行测试套件时,我们可以看到我们运行结果正在变绿!要检查是否正常,请尝试注释一个链接,以确保它像我们预期的那样失败。
总结
我们在这次演练中已经讨论了很多。我们开始把我们的项目和Vue-cli运行。然后,我们查看了默认测试,看看它们是如何工作的。最后,我们编写了自己的测试,以确保我们的组件能按照我们期望的方式工作。
虽然我们涉及了很多,但这只是冰山一角。学习测试Vue我推荐你看看Vue课程 和TDD课程。其他一些很棒的资源是mocha入门指南也有免费的内容和vue.js测试文档。
当然,我们都知道最好的学习方法就是继续练习。所以,对于你的下一个项目或者全新的组件,试着设置测试并给它一个点赞。我敢打赌你会对你所能取得的成就印象深刻。如果你被卡住了,可以在评论中问我任何问题。直到下一次,快乐的编码!
汇智网(www.hubwiz.com)小智翻译,原文有修改。
如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)的更多相关文章
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- ubuntu下安装vue/cli提示No command 'vue' found
通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...
- Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)
vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- 17、vue-cli3 js项目中引入ts混用(typeScript)
说明: vue3.0搭建的项目,不过没有引入ts,后来需要用到一个插件是用ts写的,所以vue要用到ts... 一.安装typescript及loader npm install typescript ...
随机推荐
- matplotlib绘制常用统计图
常见统计图:单条折线图.多条折线图.直方图.柱状图.饼状图 #!/usr/bin/python # -*- coding: utf-8 -*- import numpy as np import ma ...
- sqlite developer注册码
sqlite developer注册码网上没有找到,只有通过注册表,删除继续使用,删除注册表中 HKEY_CURRENT_USER\SharpPlus\SqliteDev.
- C#注释——爱你不是两三天
说到注释这个东东,我不得不说:爱你不是两三天,每天却想你很多遍...原来梁静茹同学这首歌不全然是情歌啊~ 一句注释也没有的一大片的代码有木有 看着那些无名者写的神秘代码,有没有骂一句,你妹的... ...
- JMeter 二:执行顺序 & 支持的协议
执行顺序 参考:http://jmeter.apache.org/usermanual/test_plan.html#executionorder 不同种类元素之间,执行顺序如下: Configura ...
- Oracle 临时表空间 temp表空间切换
一.TEMP表空间 临时表空间主要用途是在数据库进行排序运算.管理索引.访问视图等操作时提供临时的运算空间,当运算完成之后系统会自动清理.当oracle里需要用到sort的时候,PGA中sort_ar ...
- iOS 使用NSUserdefault 保存自定义的 对象
一:NSUserDefaults支持的数据格式有:NSNumber(Integer.Float.Double),NSString,NSData,NSArray,NSDictionary,BOOL类型: ...
- Android BaseAdapter和ViewHolder 优化 解决ListView的item抢焦点问题和item错乱问题
首先赞下hyman大神 曾经仅仅是简单的重写个BaseAdapter,将getView方法保持抽象.而ViewHolder没有抽象过. .. ViewHolder (用了一个集合+泛型管理存取view ...
- 算法笔记_073:哈密顿回路问题(Java)
目录 1 问题描述 2 解决方案 1 问题描述 什么是哈密顿回路? 引用自百度百科: 哈密顿图(哈密尔顿图)(英语:Hamiltonian path,或Traceable path)是一个无向图, ...
- linux 安装mysql 5.6.11
tar zxvf mysql-.tar.gz cd mysql- cmake . -DCMAKE_INSTALL_PREFIX=/home/mysql/ -DMYSQL_DATADIR=/home/m ...
- css zoom与scale区别
转自:http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 1.zoom的缩放是相对于左上角的:而scale默认 ...