首页 >> js开发 >> js详解关于Vue单元测试的几个坑js大全
js详解关于Vue单元测试的几个坑js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
一、写在前面
一、写在前面一、写在前面这篇文章的代码使用karma，mocha，chai，sinon-chai配合Vue的实例属性进行单元测试二、全局的组件的坑
二、全局的组件的坑二、全局的组件的坑由于我的g-icon是全局注册的，所以使用g-input组件时的时候g-icon是直接用的，所以测试时有关icon的代码永远是错的。把g-icon局部注册的组件三、在测试中触发点击事件
三、在测试中触发点击事件三、在测试中触发点击事件模拟我在app.vue里使用g-input组件
it("支持事件", () => {
["change", "input", "focus", "blur"].forEach(eventName => {
vm = new Constructor({}).$mount();
const callback = sinon.fake();
vm.$on(eventName, callback);
let event = new Event(eventName);
Object.defineProperty(event, "target", {
value: { value: "hi" },
enumerable: true
});
let inputElement = vm.$el.querySelector("input");
inputElement.dispatchEvent(event);
expect(callback).to.have.been.calledWith("hi");
});
});
it("支持事件", () => {
["change", "input", "focus", "blur"].forEach(eventName => {
vm = new Constructor({}).$mount();
const callback = sinon.fake();
vm.$on(eventName, callback);
let event = new Event(eventName);
Object.defineProperty(event, "target", {
value: { value: "hi" },
enumerable: true
});
let inputElement = vm.$el.querySelector("input");
inputElement.dispatchEvent(event);
expect(callback).to.have.been.calledWith("hi");
});
});测试这个组件事件触发时，回调的参数，由于自定义事件没有target，我们需要自己写上去value: { value: "hi" }第一个value是defineProperty的四、Vue的版本
四、Vue的版本四、Vue的版本坑来自于下面一段代码
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
`;
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
`;
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});我使用直接在el上写入template代码，所以我默认的import Vue from "vue"（runtimeonly版本）无法编译这个代码，import Vue from "../node_modules/vue/dist/vue.esm.js"使用上面引入即可在没有template选项是，el不替换五、异步测试
五、异步测试五、异步测试还是这个代码，先看以下测试两个组件关系
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
`;
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
`;
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});先说为什么需要seTimeout
先说为什么需要seTimeout从created和mounted钩子说起，createElement和appendChild在js代码是同步的，两个钩子分别在这两段代码后执行，钩子异步执行的。由于我们在g-row组件中有mounted钩子，所以我们必须得进行异步检测，否则我们在new Vue之后立马进行测试，钩子还没执行完。mocha异步测试
mocha异步测试mocha默认不执行异步，加入done参数，调用done()就可以六、垃圾回收
六、垃圾回收六、垃圾回收每一个测试完成之后，都要写下面两条代码
vm.$el.remove();
vm.$destroy();
vm.$el.remove();
vm.$destroy();有两个作用：
销毁在页面中的数据
销毁在内存的数据
销毁在页面中的数据销毁在内存的数据虽然js是单线程，但是还有一个dom线程
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div. remove()
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div. remove()
}, 3000)现在我们讨论，什么时候div上的函数被回收函数被全局变量div上的onlick引用了div.remove（）只是在页面删掉了，没有被内存删掉div.remove（）只是在页面删掉了，没有被内存删掉
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div = mull
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div = mull
}, 3000)
这个函数并没有被删除，函数是写在dom上的，div变量只是引用了dom对象
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
var div2 = document. getElementById('xxx')
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
var div2 = document. getElementById('xxx')
}, 3000)
div= null和div.remove同时做就可以了，分别从内存和dom上删除了ie有bug，即使这样都删不了，div.onlick = null 可以
一、写在前面一、写在前面这篇文章的代码使用karma，mocha，chai，sinon-chai配合Vue的实例属性进行单元测试二、全局的组件的坑
二、全局的组件的坑二、全局的组件的坑由于我的g-icon是全局注册的，所以使用g-input组件时的时候g-icon是直接用的，所以测试时有关icon的代码永远是错的。把g-icon局部注册的组件三、在测试中触发点击事件
三、在测试中触发点击事件三、在测试中触发点击事件模拟我在app.vue里使用g-input组件
it("支持事件", () => {
["change", "input", "focus", "blur"].forEach(eventName => {
vm = new Constructor({}).$mount();
const callback = sinon.fake();
vm.$on(eventName, callback);
let event = new Event(eventName);
Object.defineProperty(event, "target", {
value: { value: "hi" },
enumerable: true
});
let inputElement = vm.$el.querySelector("input");
inputElement.dispatchEvent(event);
expect(callback).to.have.been.calledWith("hi");
});
});
it("支持事件", () => {
["change", "input", "focus", "blur"].forEach(eventName => {
vm = new Constructor({}).$mount();
const callback = sinon.fake();
vm.$on(eventName, callback);
let event = new Event(eventName);
Object.defineProperty(event, "target", {
value: { value: "hi" },
enumerable: true
});
let inputElement = vm.$el.querySelector("input");
inputElement.dispatchEvent(event);
expect(callback).to.have.been.calledWith("hi");
});
});测试这个组件事件触发时，回调的参数，由于自定义事件没有target，我们需要自己写上去value: { value: "hi" }第一个value是defineProperty的四、Vue的版本
四、Vue的版本四、Vue的版本坑来自于下面一段代码
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});我使用直接在el上写入template代码，所以我默认的import Vue from "vue"（runtimeonly版本）无法编译这个代码，import Vue from "../node_modules/vue/dist/vue.esm.js"使用上面引入即可在没有template选项是，el不替换五、异步测试
五、异步测试五、异步测试还是这个代码，先看以下测试两个组件关系
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});
it("接受gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});先说为什么需要seTimeout
先说为什么需要seTimeout从created和mounted钩子说起，createElement和appendChild在js代码是同步的，两个钩子分别在这两段代码后执行，钩子异步执行的。由于我们在g-row组件中有mounted钩子，所以我们必须得进行异步检测，否则我们在new Vue之后立马进行测试，钩子还没执行完。mocha异步测试
mocha异步测试mocha默认不执行异步，加入done参数，调用done()就可以六、垃圾回收
六、垃圾回收六、垃圾回收每一个测试完成之后，都要写下面两条代码
vm.$el.remove();
vm.$destroy();
vm.$el.remove();
vm.$destroy();有两个作用：
销毁在页面中的数据
销毁在内存的数据
销毁在页面中的数据销毁在内存的数据虽然js是单线程，但是还有一个dom线程
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div. remove()
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div. remove()
}, 3000)现在我们讨论，什么时候div上的函数被回收函数被全局变量div上的onlick引用了div.remove（）只是在页面删掉了，没有被内存删掉div.remove（）只是在页面删掉了，没有被内存删掉
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div = mull
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div = mull
}, 3000)
这个函数并没有被删除，函数是写在dom上的，div变量只是引用了dom对象
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
var div2 = document. getElementById('xxx')
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
var div2 = document. getElementById('xxx')
}, 3000)
div= null和div.remove同时做就可以了，分别从内存和dom上删除了ie有bug，即使这样都删不了，div.onlick = null 可以
相关文章:
- JavaScript详解node.js 事件循环
- jsvue中全局路由守卫中替代this操作(this.$store/this.$vux)js大全
- js基于 Vue 的 Electron 项目搭建过程图文详解js大全
- js浅谈JS for循环中使用break和continue的区别js大全
- js详谈vue中router-link和传统a链接的区别js大全
- js详解vue中v-on事件监听指令的基本用法js大全
- jsvue移动端弹起蒙层滑动禁止底部滑动操作js大全
- js解决vue单页面 回退页面 keeplive 缓存问题js大全
- jsES2021系列之空值合并运算符 '??'js大全
- js解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
