istanbul 繞過 window 變數儲存覆蓋率資料

骷髏弓箭手發表於2020-06-18

參考文章:
https://testerhome.com/topics/23698
https://testerhome.com/topics/8919

WEB端部分完全參照了這兩篇文章的內容。
大體上還是沿用了RN的覆蓋率方法,在這裡就不再贅述,有興趣的請移步上文的連結。

起因

公司的專案使用的是 WEEX,而不是 RN。
WEEX有一個地方和RN非常不一樣,就是在移動平臺,window變數被禁用了
具體在這裡:https://weex.apache.org/zh/guide/platform-difference.html
所以,直接使用 window 去儲存覆蓋率資料會失敗。
那沒得說,只好找一個新的變數去取代 window 做儲存。

結果

中間當然走了很多彎路,但是也沒什麼值得說的,直接上結果。
當前是在src目錄增加一個person_global.js檔案,裡面只有一個空的字典。

// src/person_global.js
export const p_global = {}

然後在所有插樁後的JS檔案中,修改檔案內容。
修改檔案內容我使用的是python指令碼,畢竟比較順手。

// 任意插樁後的JS檔案
import { p_global } from '@/person_global' //新增
function cov_1kb7rxg7li() {
var path = "/home/app/src/api/api.js";
var hash = "7332365d3e2a48aa04ad78999bdebfefc3a21e3a";
// var global = new Function("return this")(); 這是原有的程式碼
var global = p_global //新增
var gcv = "__coverage__";

這樣的話,就能把覆蓋率資料的儲存變數從window變為p_global。
至於具體裡面的資料是怎麼儲存的,大家可以自己去試一試,我只能說,JS的字典是真的靈活。
做完這些後,只需要在APP的首頁檔案中加上以下程式碼。

// APP.vue
import { p_global } from '@/person_global'
var stream = weex.requireModule('stream')

export default {
created(){
stream.fetch({
method: 'POST',
url: 'http://10.96.2.20:8889/coverage/client',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(p_global.__coverage__)
}, function(ret) {
if (ret.ok) {
console.log('[Coverage] upload success')
}
else {
console.log('[Coverage] upload failed')
}
})
}
}

我並沒有使用定時上傳的方式,而是選擇了每次載入首頁的時候才會觸發上傳,總之只是策略不同而已。

因為網上相關的資料非常少,所以這裡做一個記錄吧,希望可以幫到一些同學。

相關文章