成人视屏在线观看-国产99精品-国产精品1区2区-欧美一级在线观看-国产一区二区日韩-色九九九

您的位置:首頁技術文章
文章詳情頁

詳解關于Vue單元測試的幾個坑

瀏覽:6日期:2023-01-24 15:56:28

一、寫在前面

這篇文章的代碼使用karma,mocha,chai,sinon-chai配合Vue的實例屬性進行單元測試

二、全局的組件的坑

由于我的g-icon是全局注冊的,所以使用g-input組件時的時候g-icon是直接用的,所以測試時有關icon的代碼永遠是錯的。

把g-icon局部注冊的組件

三、在測試中觸發點擊事件

模擬我在app.vue里使用g-input組件

<g-input v-model='message'></g-input>

使用new event 和 dispatch 模擬事件在組件上觸發,雖然這個事件和我們實際的事件不一樣,但名字一樣就夠了,測試回調函數自帶的參數

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的版本

坑來自于下面一段代碼

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 = ` <g-row gutter='20'> <g-col></g-col> <g-col></g-col> </g-row>`; 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 = ` <g-row gutter='20'> <g-col></g-col> <g-col></g-col> </g-row>`; 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

從created和mounted鉤子說起,createElement和appendChild在js代碼是同步的,兩個鉤子分別在這兩段代碼后執行,鉤子異步執行的。

由于我們在g-row組件中有mounted鉤子,所以我們必須得進行異步檢測,否則我們在new Vue之后立馬進行測試,鉤子還沒執行完。

mocha異步測試

mocha默認不執行異步,加入done參數,調用done()就可以

六、垃圾回收

每一個測試完成之后,都要寫下面兩條代碼

vm.$el.remove(); vm.$destroy();

有兩個作用:

銷毀在頁面中的數據 銷毀在內存的數據

雖然js是單線程,但是還有一個dom線程

var div = document. getElementById(’xxx’)div.onclick = function() { ///code}setTimeout(function(){ div. remove()}, 3000)

現在我們討論,什么時候div上的函數被回收

函數被全局變量div上的onlick引用了

div.remove()只是在頁面刪掉了,沒有被內存刪掉

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)

div= null和div.remove同時做就可以了,分別從內存和dom上刪除了

ie有bug,即使這樣都刪不了,div.onlick = null 可以

到此這篇關于關于Vue單元測試的幾個坑的文章就介紹到這了,更多相關 Vue單元測試 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 一区二区三区在线免费视频 | 美国一级大黄香蕉片 | 性色午夜视频免费男人的天堂 | 亚洲欧美国产高清va在线播放 | 欧美综合一区二区三区 | 精品少妇一区二区三区视频 | 日本高清福利视频在线观看 | 一级毛片免费播放视频 | 国产日韩亚洲欧美 | 米奇888在线播放欧美 | 国产成人亚洲精品2020 | 成人免费大片黄在线观看com | 欧美一线高本道高清在线 | 欧美最猛性xxxxx亚洲精品 | 久久厕所精品国产精品亚洲 | 欧美一级毛片生活片 | 在线日韩国产 | 国产一级片毛片 | 日本欧美一区二区三区片 | 欧美高清视频手机在在线 | 久久午夜精品 | 韩国日本三级在线观看 | 亚洲国产成人91精品 | 高清国产精品久久久久 | 国产精品久久久久久久9999 | 欧美另类videosbestsex久久 | 91p在线| 日本在线网 | 日韩高清一级毛片 | 午夜毛片不卡高清免费 | 欧美一区=区三区 | 久久免费激情视频 | 成年女人看片免费视频频 | 日本一区深夜影院深a | 在线亚洲精品中文字幕美乳 | 久久精品欧美日韩精品 | 欧美一级香蕉毛片 | 亚洲欧美精品网站在线观看 | 久久久综合久久 | 亚洲最大成人 | 亚洲人成在线免费观看 |