javascript - 单元测试 Javascript Web worker 。并在 Web Worker 中模拟 http 调用

Question

我是网络 worker 的新手。我编写了一个 Web Worker，它获取消息并读取 onmessage 事件上的数据，然后进行 ajax/http 调用来获取数据。一旦从 ajax/http 调用返回数据，它就会使用 postMessage 事件发回消息。现在我想知道如何使用 Jasmine 和 Karma 对该 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 的参数一片空白。我不确定你是否真的在测试任何有用的东西，因为你必须模拟一切。但尝试模拟 http.get 的返回值:{TotalOpenOrders: 45} .

您可以使 Worker 成为构造函数并将 http 附加到它:

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

测试中: spyOn(worker.http, 'get').and.returnValue({});