教你如何编写Vue.js的单元测试的方法
vue.js是一个javascript框架,可用于构建web应用程序的前端框架。特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期。然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦。因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行。在本文中,我们将为vuejs创建一些简单的单元测试。
要进行测试,我们将先制作一个基本的待办事项列表组件。我们将测试该列表是否正确显示,并且用户可以将新项目添加到待办事项列表中。希望在本教程结束之前,您可以编写测试,检查您的组件输出给用户,以及通过与html进行交互来模拟用户操作(例如通过单击按钮)。
本文中的所有代码可以在 github 下载。
搭建环境
搭建javascript项目可能是一个复杂的过程。有那么多库需要选择,所有这些库的目的都略有不同。幸运的是,对于vuejs,我们有vue-cli,它为我们设定了一切!您需要首先安装npm,然后可以运行以下命令:
npm install -g vue-cli vue init webpack project-name
在这个阶段,你会被提示几个问题。大多数都可以直接继续,您可以选择默认选项,唯一的要求是您回答yes以包括vue-router和yes来设置karma和mocha的单元测试。然后安装依赖项:
cd project-name npm install
这个最终命令将启动您的浏览器并打开localhost运行您的应用程序:
npm run dev
下面是对vue-cli为我们设置的一些关键依赖关系(非常重要)的简要概述,包括为我自己的项目安装的版本。
依赖
webpack (v2.3) 是一个捆绑器,它结合了各种javascript,css,html(和其他)文件,使他们可以随时由客户端处理。
babel (v6.22) 是ecmascript 6到ecmascript 5的编译器。这些是不同的javascript标准,目前的浏览器不能解析所有的ecmascript 6,因此需要进行转换。
测试依赖关系
karma (v1.4) 是一个测试运行器,它运行一个web服务器,其中包含项目的应用程序代码,并对其执行测试。
mocha (v3.2) 是javascript的测试框架。
chai (v3.5) 是可以与mocha一起使用的断言库。
在您的项目中,您应该能找到以下文件夹:build,config,node_modules,src,static和test。对本文来说,重要的是src,它将保存我们的应用程序代码并进行test。
我的第一个测试
一个好的开始需要去做一些基本工作。我们将从创建简单列表组件开始。在src/components文件夹中创建一个名为list.vue的新文件,并将以下代码放在里面:
<template> <div> <h1>my to do list</h1> </br> <!--displays list --> <ul> <li v-for="item in listitems">{{ item }}</li> </ul> </div> </template> <script> export default { name: 'list', data () { return { listitems: ['buy food', 'play games', 'sleep'], } } } </script>
在组件中,列表项存储在组件数据中的数组(listitems)中。然后可以在模板中访问该数据,并在foreach循环中循环(v-for),并显示在页面上。
为了使我们的列表看起来更有趣,我们可以创建一个新的路径来显示我们的组件。进入src/router/index.js并添加路由,你的代码应该是这样的:
import vue from 'vue' import router from 'vue-router' import hello from '@/components/hello' import list from '@/components/list' vue.use(router) export default new router({ routes: [ { path: '/', name: 'hello', component: hello }, { path: '/to-do', name: 'todo', component: list }, ] })
现在,如果您导航到localhost:8080/#/to-do,您将在浏览器中看到您的列表效果!
首先我们要测试数据是否正确显示。在 test/unit/specs 下创建一个新的文件list.spec.js并放上如下代码:
import list from '@/components/list'; import vue from 'vue'; describe('list.vue', () => { it('displays items from the list', () => { // our test goes here }) })
在这个文件中,我们描述list.vue组件,我们有一个单独的空测试,它将检查它(组件)是否从列表中显示项目。这是mocha测试的基本文件结构。
在我们的测试中,我们首先需要设置vue组件。复制下面的代码,并将其放在注释“our test goes here”的位置:
// build component const constructor = vue.extend(list); const listcomponent = new constructor().$mount();
我们扩展vue然后安装我们的组件。安装组件很重要,因为这是在我们的模板中呈现html。这实际上意味着html被构建,并且我们的模板中的变量(例如{{item}})被填满数据,使得我们可以访问html(通过$el)。
随着我们的组件准备好,我们可以写第一个断言。在这个例子中,我们使用了'expect'风格,由chai断言库提供,以及'should'和'assert'。 安装组件后放置以下代码:
// assert that component text contains items from the list expect(listcomponent.$el.textcontent).to.contain('play games');
如上所述,我们可以使用listcomponent.$el获取组件的html,并且使用listcomponent.$el.textcontent只访问内部html(即文本)。断言是检查文本是否包含在组件数据中设置的列表项之一。
为了检查一切都能正常工作,我们可以运行测试!使用vue-cli项目,我们可以简单地输入npm run unit,这是一个别名 cross-env babel_env = test karma start test/unit/karma.conf.js --single-run。
npm run unit
如果所有的测试都已经通过,它将显示绿色,并显示成功测试和代码覆盖率报告的列表,让您知道在测试期间执行的应用程序代码的百分比。
模拟用户输入
这是一个很好的开始,但是很少有应用程序只会显示数据。我们要添加的下一个功能是让用户能够在其列表中添加新项目。为此,我们需要一个输入框,用户可以在其中键入新项目,并在按钮上添加项目到列表中。这是list.vue的更新版本:
<template> <div> <h1>my to do list</h1> </br> <input v-model="newitem" > <button @click="additemtolist">add</button> <!-- displays list --> <ul> <li v-for="item in listitems">{{ item }}</li> </ul> </div> </template> <script> export default { name: 'test', data () { return { listitems: ['buy food', 'play games', 'sleep'], newitem: '' } }, methods: { additemtolist() { this.listitems.push(this.newitem); this.newitem = ''; } } } </script>
使用v-model,输入框的值绑定到存储在组件数据中的newitem变量。当单击按钮时,将执行additemtolist函数,将newitem添加到列表数组中,并清除newitem,以便可以将更多的内容添加到列表中。
要开始测试此功能,请在list.spec.js中创建一个新的空测试,并添加测试代码:
it('adds a new item to list on click', () => { // our test goes here })
首先我们要构建我们的组件,并模拟一个用户在输入框中输入的内容。由于vuejs将输入框的值绑定到newitem变量,所以我们可以简单地将我们的值设置为newitem。
// build component const constructor = vue.extend(list); const listcomponent = new constructor().$mount(); // set value of new item listcomponent.newitem = 'brush my teeth';
接下来我们需要点击按钮。我们必须在html中找到这个按钮,它可以使用$el。只有这一次,我们才可以使用queryselector来查找实际的元素。可以使用它的类(.buttonclass),其id(#buttonid)或元素的名称(button)来找到一个元素。
// find button const button = listcomponent.$el.queryselector('button');
为了模拟一个点击,我们需要将按钮传递给一个新的事件对象。在测试环境中,list组件不会监听任何事件,因此我们需要手动运行监视器。
// simulate click event const clickevent = new window.event('click'); button.dispatchevent(clickevent); listcomponent._watcher.run();
最后,我们需要检查newitem是否显示,我们已经知道如何从第一个测试中完成!我们可能还想检查newitem是否存储在列表数组中。
//assert list contains new item expect(listcomponent.$el.textcontent).to.contain('brush my teeth'); expect(listcomponent.listitems).to.contain('brush my teeth');
以下是完整的测试文件:
import list from '@/components/list'; import vue from 'vue'; describe('list.vue', () => { it('displays items from the list', () => { const constructor = vue.extend(list); const listcomponent = new constructor().$mount(); expect(listcomponent.$el.textcontent).to.contain('play games'); }) it('adds a new item to list on click', () => { // build component const constructor = vue.extend(list); const listcomponent = new constructor().$mount(); // set input value listcomponent.newitem = 'brush my teeth'; // simulate click event const button = listcomponent.$el.queryselector('button'); const clickevent = new window.event('click'); button.dispatchevent(clickevent); listcomponent._watcher.run(); // assert list contains new item expect(listcomponent.$el.textcontent).to.contain('brush my teeth'); expect(listcomponent.listitems).to.contain('brush my teeth'); }) })
现在我们可以再次运行我们的测试,应该会显示绿色!
希望这段代码对你来说能够很清楚,但是它不是特别容易理解,特别是对于第一次进行vuejs测试的人来说。有一个vuejs实用程序库,其中包含了一些更复杂的外观代码。要使用它,我们可以转到我们的项目根目录并运行以下命令:
npm install avoriaz
现在我们可以隐藏mount()之后的vue组件的设置,并且为了单击按钮,我们需要的是两行代码:find()该按钮和dispatch() )点击事件。
import { mount } from 'avoriaz'; import list from '@/components/list'; import vue from 'vue'; describe('list.vue', () => { // previous tests .. it('adds new item to list on click with avoriaz', () => { // build component const listcomponent = mount(list); // set input value listcomponent.setdata({ newitem: 'brush my teeth', }); // simulate click event const button = listcomponent.find('button')[0]; button.dispatch('click'); // assert list contains new item expect(listcomponent.text()).to.contain('brush my teeth'); expect(listcomponent.data().listitems).to.contain('brush my teeth'); }) })
总结
我个人认为写作测试对于我的正常工作流程至关重要,但是使用javascript,特别是vuejs,我开始碰到一些麻烦。希望本教程将帮助任何与我一样遇到麻烦的人!
本文中的所有代码可以在 github 下载。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。