Vue2的单元测试与调试技术

时间:2022-04-22
本文章向大家介绍Vue2的单元测试与调试技术,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

测试是一个非常美妙的世界,一旦进入根本停不下来~在Java中,我们可以使用JUnit做单元测试,但在前端开发中,想做单元测试并不是一件特别容易的事情,但如果你采用angularjs,react或Vue这类的前端技术,您的项目势必重度采用前端技术,这时做单元测试就显得非常重要;

我们以开源的QB风格的Vue组件库为例(https://github.com/kongshanxuelin/webui-qb),详细介绍Vue的单元测试与调试技术;

利用Vue-cli的webpack方式,在提示使用哪种技术做单元测试时,选择karma即可,单元测试文件都被放在工程的test/unit/specs目录下,每个测试文件以*.spec.js结尾,最简单测试一个我们的Label标签是否能被正确显示:

注:特别注意,如果您的项目中使用了Less,那么做单元测试时是无法识别Less变量的,所以应该剔除掉这些文件,方法是在unit/index.js中做下修改如下:

实际中做单元测试并没有像上次这么简单,你可能需要模拟Ajax请求,模拟点击事件,模拟触发事件等,是否符合预想中的效果,一般来说,单元测试做功能测试比较多,对于样式,利用Vue的“所见即所得”调试已经足够方便,利用"npm run dev“命令执行后启动Web前端程序,您的任何一次代码修改都会利用websocket推送告知前端刷新页面(局部刷新,所以在一些自定义组件的初始化过程中,想要看效果,可能还需要手动刷新页面,因为页面载入的自定义创建初始化过程可能导致布局不准),确保您的代码与前端展现的完全一致,所以下文主要针对单元测试中常遇到的场景做下简单介绍。

初始化测试;

这是一个组件测试的基础,以便于测试组件在初始化过程中,是否按预想的过程完成了初始化步骤,以sl-checkbox初始化为例,我们想要知道sl-checkbox在初始化完成后,应该被包裹在.checkbox-component的span内,并且按传入的value值会有一个checkbox,并且他的value值是给定值,我们就认为初始化是成功的,以下是脚本代码:

事件处理测试;

组件的事件测试也是比较重要的一环,通过程序模拟点击,滑动,输入测试控件在与人交互过程中,是否按预想的一样工作,比如还是以sl-checkbox为例,我们希望点击这个span标签应该复选框被选中了,那么这个组件被绑定的v-model中的data值应该发生了变化,原来是空数组的值应该变成了选中的值,这样我们认为他的点击事件是符合预期的,请看如下脚本:

其他事件的模拟同click类似,只需要模拟相应的Dom Event即可,即修改:slCheckbox.querySelector('xxx').click()这行。

Ajax请求模拟测试;

Ajax是Web前端中最常使用的技术了,主要是有些组件数据的获取支持Ajax方式,那么测试这些组件的时候我们必须仿真Ajax(包括请求头,超时,出错,延迟执行等),为js世界提供仿真技术的最优秀的库是sinon,sinon将测试替身分为3种类型:

Spies:模拟一个函数实现,检测函数调用的信息;

Stubs:与Spies类似,但完全替换目标函数;

Mocks:通过组合Spies和Stubs,使替换一个完整对象更容易;

在编写调试Ajax代码时,有时我们并不需要实际发出Ajax请求到服务端,而是根据接口协议只需要拿到测试数据即可,那么使用仿真技术就是不二之选,比如我们仿真一条Ajax获取数据的例子:

端到端测试:Nightwatch;

单元测试讲究局部的代码运行是否正确,端到端测试则是一种相对完整的外部模拟操作过程,通过借助Selemium服务器和WebDriver来模拟用户操作来完成,如以下脚本用来测试页面打开后是否有container的样式,页面图片个数是否为1张,这些测试脚本可以编写在e2e/spec目录下:

收尾:在Vue调试程序中,我们经常要查看组件对外提供的方法和属性列表,可以通过Vue Dev-Tool的Chrome插件来查看哦,当选中某个Element时,Vue-Dev Tool还会全貌展现它的所有方法或vue属性等,非常方便哦~在编写单元测试时,要往组件传入属性值使用的不是props而是propsData哦,当组件有异步操作时,比如data重新设置值,我们应该使用Vue.nextTick函数在回调函数中处理expect,当处理事件时,我们可以找到对应的dom节点,然后向浏览器发出event指令来模拟,比如通过vm.$el拿到当前dom树,通过querySelector来筛选出对应的节点,并向这个dom节点调用dispathEvent函数即可,在处理用户输入时,做单元测试,并不需要模拟输入,而是将对应的绑定的v-model的data值重新设置值,然后去看看这个input组件库中的value值是否做了修改即可,好了,喜欢这篇文章就收藏一下吧~也可以通过以下图片打赏我哦~