义乌公司网站制作,凉山州建设局网站,做手机版网站和做app差别,网站开发要学哪些知识1、基本的示例
单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码#xff0c;使得添加新功能和追踪问题更容易。Vue 的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现#xff0c;并帮助其他…1、基本的示例
单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码使得添加新功能和追踪问题更容易。Vue 的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现并帮助其他开发者理解你的组件的作用。 这是一个判断一些文本是否被渲染的简单的示例
templatedivinput v-modelusernamedivv-iferrorclasserror{{ error }}/div/div
/template
script
export default {name: Hello,data () {return {username: }},computed: {error () {return this.username.trim().length 7? Please enter a longer username: }}
}
/scriptimport { shallowMount } from vue/test-utils
import Hello from ./Hello.vue
test(Hello, () {// 渲染这个组件const wrapper shallowMount(Hello)// username 在除去头尾空格之后不应该少于 7 个字符wrapper.setData({ username: .repeat(7) })// 确认错误信息被渲染了expect(wrapper.find(.error).exists()).toBe(true)// 将名字更新至足够长wrapper.setData({ username: Lachlan })// 断言错误信息不再显示了expect(wrapper.find(.error).exists()).toBe(false)
})上述代码片段展示了如何基于 username 的长度测试一个错误信息是否被渲染。它展示了 Vue 组件单元测试的一般思路渲染这个组件然后断言这些标签是否匹配组件的状态。
2、为什么要测试
组件的单元测试有很多好处
提供描述组件行为的文档节省手动测试的时间减少研发新特性时产生的 bug改进设计促进重构自动化测试使得大团队中的开发者可以维护复杂的基础代码
3、实际的例子
单元测试应该
可以快速运行易于理解只测试一个独立单元的工作我们在上一个示例的基础上继续构建同时引入一个工厂函数 (factory function)使得我们的测试更简洁更易读。这个组件应该展示一个“Welcome to the Vue.js cookbook”的问候语提示用户输入用户名如果输入的用户名少于七个字符则展示错误信息让我们先看一下组件代码
templatedivdiv classmessage{{ message }}/divEnter your username: input v-modelusernamedivv-iferrorclasserrorPlease enter a username with at least seven letters./div/div
/template
script
export default {name: Foo,data () {return {message: Welcome to the Vue.js cookbook,username: }},computed: {error () {return this.username.trim().length 7}}
}
/script我们应该测试的内容有
message 是否被渲染如果 error 是 true则 应该展示 如果 error 是 false则 不应该展示我们的第一次测试尝试
import { shallowMount } from vue/test-utils
import Foo from ./Foo.vue
describe(Foo, () {it(renders a message and responds correctly to user input, () {const wrapper shallowMount(Foo, {data: {message: Hello World,username: }})// 确认是否渲染了 messageexpect(wrapper.find(.message).text()).toEqual(Hello World)// 断言渲染了错误信息expect(wrapper.find(.error).exists()).toBeTruthy()// 更新 username 并断言错误信息不再被渲染wrapper.setData({ username: Lachlan })expect(wrapper.find(.error).exists()).toBeFalsy()})
})上述代码有一些问题
单个测试断言了不同的事情很难阐述组件可以处于哪些不同的状态以及它该被渲染成什么样子接下来的示例从这几个方面改善了测试每个 it 块只做一个断言让测试描述更简短清晰只提供测试需要的最小化数据把重复的逻辑重构到了一个工厂函数中 (创建 wrapper 和设置 username 变量)更新后的测试
import { shallowMount } from vue/test-utils
import Foo from ./Foo
const factory (values {}) {return shallowMount(Foo, {data () {return {...values}}})
}
describe(Foo, () {it(renders a welcome message, () {const wrapper factory()expect(wrapper.find(.message).text()).toEqual(Welcome to the Vue.js cookbook)})it(renders an error when username is less than 7 characters, () {const wrapper factory({ username: })expect(wrapper.find(.error).exists()).toBeTruthy()})it(renders an error when username is whitespace, () {const wrapper factory({ username: .repeat(7) })expect(wrapper.find(.error).exists()).toBeTruthy()})it(does not render an error when username is 7 characters or more, () {const wrapper factory({ username: Lachlan })expect(wrapper.find(.error).exists()).toBeFalsy()})
})注意事项 在一开始工厂函数将 values 对象合并到了 data 并返回了一个新的 wrapper 实例。这样我们就不需要在每个测试中重复 const wrapper shallowMount(Foo)。另一个好处是当你想为更复杂的组件在每个测试中伪造或存根一个方法或计算属性时你只需要声明一次即可。
4、额外的上下文
上述的测试是非常简单的但是在实际情况下 Vue 组件常常具有其它你想要测试的行为诸如
调用 API为 Vuex 的 storecommit 或 dispatch 一些 mutation 或 action测试用户交互我们在 Vue Test Utils 的教程中提供了更完整的示例展示这些测试。 Vue Test Utils 及庞大的 JavaScript 生态系统提供了大量的工具促进 100% 的测试覆盖率。单元测试只是整个测试金字塔中的一部分。其它类型的测试还包括 e2e (端到端) 测试、快照比对测试等。单元测试是最小巧也是最简单的测试——它们通过隔离单个组件的每一个部分来在最小工作单元上进行断言。
快照比对测试会保存你的 Vue 组件的标记然后比较每次新生成的测试运行结果。如果有些东西改变了开发者就会得到通知并决定这个改变是刻意为之 (组件更新时) 还是意外发生的 (组件行为不正确)。
端到端测试致力于确保组件的一系列交互是正确的。它们是更高级别的测试例如可能会测试用户是否注册、登录以及更新他们的用户名。这种测试运行起来会比单元测试和快照比对测试慢一些。
单元测试中开发的时候是最有用的即能帮助开发者思考如何设计一个组件或重构一个现有组件。通常每次代码发生变化的时候它们都会被运行。
