网络工作者的单元测试code [英] Unit test code of web worker

问题描述

HTTPS服用例如code：// developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/basic_usage ，是由一个网络工作者运行以下

Taking the example code from https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/basic_usage , the following is run by a web worker

// in worker.js
onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

由code在角服务/工厂运行

run by code in an Angular service/factory

var myWorker = new Worker("worker.js");

我希望能够单元测试code在 worker.js ，最好运行它作为一个角服务/工厂的一部分（在一个单独的在Web应用程序的工人跑？），所以我可以使用DI系统注入依赖的嘲笑，并有单元测试code远远望去像任何其他服务的测试。我怎样才能做到这一点？

I would like to be able to unit test the code in worker.js, ideally running it as part of an Angular service/factory (in a separate app running in the web worker?), so I can use the DI system to inject mocks of dependencies, and have the unit test code looking much like the tests for any other service. How can I do this?

推荐答案

有一种方法可以做到这一点，其中一个网络工作者的主要code运行运行作为一个独立的，手动自举，折角部分模块。

There is a way to do this, where the main code run in a web worker is run as part of a separate, manually-bootstrapped, Angular module.

为了在一个网络工作者加载角

In order to load Angular in a web worker

• 的环境需要用打补丁/猴/砍死所以角度不抛出各种异常时，它加载和白手起家由于缺少窗口和<$ C $进行修修补补C>文件对象


• 角然后必须通过 importScripts 包含


• 这时你想运行模块必须通过 importScripts 包含


• 则模块手动自举。

• The environment needs to be tinkered with/monkey patched/hacked so Angular doesn't throw various exceptions when it loads and bootstraps due to missing window and document objects
• Angular must then be included via importScripts
• Then the module you would like to run must be included via importScripts
• Then the module manually bootstrapped.

举例code，做这样的：

Example code that does this:

// worker.js

// Angular needs a global window object
var window = self;

// Skeleton properties to get Angular to load and bootstrap.
self.history = {};
var document = {
  readyState: 'complete',
  querySelector: function() {},
  createElement: function() {
    return {
      pathname: '',
      setAttribute: function() {}
    }
  }
};

// Load Angular: must be on same domain as this script
importScripts('angular.js');

// Put angular on global scope
angular = window.angular;

// Standard angular module definition
importScripts('worker-app.js');

// No root element seems to work fine
angular.bootstrap(null, ['worker-app']);

在角模块本身的code然后可以很标准：以根据需要定义的服务/工厂。在这种情况下，需要没有和我选择把这个例子的简单code作为运行回调（我省略了的console.log ■从问题）。

The code of the Angular module itself can then be very standard: with services/factories defined as desired. In this case, none are needed and I've opted to put the simple code of the example as a run callback (I've omitted the console.logs from the question).

// worker-app.js
(function() {
  'use strict';

  var app = angular.module('worker-app', []);

  app.run(function($window) {
    $window.onmessage = function(e) {
      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
      $window.postMessage(workerResult);
    };
  });

})();

这然后可以使用完全相同的测试就好像它是不意味着在网络工作者运行进行测试：

This can then be tested using exactly the same tests as if it weren't meant to run in a web worker:

// worker-app-spec.js
describe('worker-app', function() {
  'use strict';

  var $window;

  beforeEach(module('worker-app'));

  beforeEach(inject(function(_$window_) {
    $window = _$window_;
  }));

  beforeEach(function() {
    spyOn($window, 'postMessage');
  })

  it('attaches to $window onmessage', function() {
    var data = [2,3];
    var result = 'Result: ' + (data[0] * data[1]);
    $window.onmessage({data: data});
    expect($window.postMessage).toHaveBeenCalledWith(result);
  });
});

我不是黑客环境得到角加载，因为它感觉很脆给我这样的球迷，所以其他的答案非常欢迎！以上code，采用AngularJS v1.3.7测试。

I'm not such a fan of hacking the environment to get Angular to load, as it feels very brittle to me, so other answers very welcome! The above code was tested using AngularJS v1.3.7.

这篇关于网络工作者的单元测试code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！