單元測試Javascript Web worker。並在Web Worker內模擬http調用

Question

我是web worker的新手。我已經寫了一個Web工作人員獲取消息並讀取onmessage事件的數據，然後它進行ajax/http調用以獲取數據。一旦從ajax/http調用返回數據，就會使用postMessage事件回發消息。 現在我想知道如何使用茉莉花和噶瑪單元測試這個Web Worker。我嘗試過測試它，但無法模擬web worker內部的http調用。以下是我的代碼。提前致謝。

worker.js

(function() { 
'use strict'; var startDate, endDate, token, initialized; 

var http = {}; 

/* Code To make http request - Starts */ 
http.x = function() { 
    if (typeof XMLHttpRequest !== 'undefined') { 
     return new XMLHttpRequest(); 
    } 
    var versions = [ 
     "MSXML2.XmlHttp.6.0", 
     "MSXML2.XmlHttp.5.0", 
     "MSXML2.XmlHttp.4.0", 
     "MSXML2.XmlHttp.3.0", 
     "MSXML2.XmlHttp.2.0", 
     "Microsoft.XmlHttp" 
    ]; 

    var xhr; 
    for (var i = 0; i < versions.length; i++) { 
     try { 
      xhr = new ActiveXObject(versions[i]); 
      break; 
     } catch (e) { 
     } 
    } 
    return xhr; 
}; 

http.send = function (url, callback, method, data, async, headerToken) { 
    if (async === undefined) { 
     async = true; 
    } 
    var x = http.x(); 
    x.open(method, url, async); 
    if (headerToken !== null && headerToken !== "") { 
     x.setRequestHeader("Authorization", "Bearer " + headerToken); 
    } 
    x.onreadystatechange = function() { 
     if (x.readyState === 4 && x.responseText !== "" && x.responseText !== undefined && x.responseText !== null) { 
      callback(JSON.parse(x.responseText)); 
     } 
    }; 
    x.send(data); 
}; 

http.get = function (url, data, callback, async, headerToken) { 
    var query = []; 
    for (var key in data) { 
     if (data.hasOwnProperty(key)) { 
      query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); 
     } 
    } 
    http.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async, headerToken); 
}; 
/* Code To make http request - ends */ 


var postOpenOrdersTile = function (result) { 
    if (result) { 
     postMessage('<div id="openOrdersTile" class="tileContent">' +result.TotalOpenOrders +'</div>'); 
    } 

}; 

function run(url) { 
    var baseUrl = url; 
    var openOrdersTilesUrl = baseUrl + "/DashboardTiles/GetOpenOrderTileValues"; 
    http.get(openOrdersTilesUrl, createDashboardTileInput(startDate, endDate), postOpenOrdersTile, true, token); 
} 

var load = function (response) { 
    var baseUrl = response.base + response.api; 
    run(baseUrl); 
} 

/* Code To triggere Worker - onmessage */ 
self.onmessage = function (msg) { 
    if (msg.data.baseUrl && !initialized) { 
     self.importScripts(msg.data.baseUrl + '/BaseApp/Scripts/moment.js'); 
     startDate = msg.data.fromDate; 
     endDate = msg.data.toDate; 
     token = msg.data.token; 
     http.get(msg.data.baseUrl + '/CardioDashboard/config.json', '', load, true, ''); 
    } 
};}()); 

WorkerSpec.js

define([], 

function() { 'use strict' 

describe('Web Worker : Tiles Sharing web Worker', function() {  . 
var worker, data ;   

http = { get: function() { return {} } }; 
    beforeEach(function() { 
     worker = new Worker('path/Worker.js'); 
     data = { 
      baseUrl: "xyz", 
      fromDate: '2017-04-13', 
      toDate: '2017-04-07', 
      token: ''    
     }; 
     worker.postMessage(data); 
    }); 

    afterEach(function() { 

    }); 


    it('Tests the Webworker', function (done) { 
     spyOn(http, 'get').and.returnValue({}); 
     spyOn(window, 'postOpenOrdersTile').and.callFake(function() { 
      return {}; 
     }); 
     worker.addEventListener('message', function (e) { 
      if (e.data) { 
       expect(e.data).toBe('<div id="openOrdersTile" class="tileContent">45</div>');       
      } 
      if (triggerCount === 6) { 
       done(); 
      } 
     }); 

    }); 
});}); 

Answer 1

原因輸出<div id="openOrdersTile" class="tileContent">null</div>是因爲postOpenOrdersTile參數爲null。我不確定你是否真的測試了任何有用的東西，因爲你必須嘲笑一切。但嘗試嘲笑http.get的返回值：{TotalOpenOrders: 45}。

可以使職工的構造和HTTP連接到它：

var Worker = function() { 
    this.http = { 
    send: function() { 
     // do something 
    }, 
    get: function() { 
     // do something 
    } 
    }; 
} 

在測試： spyOn(worker.http, 'get').and.returnValue({});