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')
      }
    })
  }
}

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

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

相關文章