testing - 如何测试 Chrome Extension/Firefox WebExtension 代码？

Question

由于 Firefox 强制我这样做，我正在重写我的扩展以使用 WebExtension API，即 Chrome 的扩展 API。我想进行自动化测试。到目前为止，我已经试过了:

我有一个 package.json 以便 npm 将安装 depedencies:

{
  "name": "extension-api-tests",
  "version": "0.0.1",
  "scripts": {
    "test": "karma start"
  },
  "devDependencies": {
    "karma": "^1.3.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-mocha": "^1.3.0",
    "karma-sinon-chrome": "^0.2.0",
    "mocha": "^3.1.2",
    "sinon-chrome": "^2.1.2"
  }
}

我有一个 karma.conf.js 来设置那个测试运行器:

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'sinon-chrome'],
    files: ['test.js'],
    reporters: ['dots'],
    autoWatch: false,
    browsers: ['Firefox'],
    singleRun: true,
    concurrency: Infinity,
  });
};

我有基本的测试:

describe('my frustration', () => {
  it('works when it uses no APIs', done => {
    done();
  });

  it('should respond to messages!', done => {
    console.log('message test starting');
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
      console.log('received message');
      sendResponse(true);
    });
    chrome.runtime.sendMessage({}, result => {
      console.log('received response to message');
      done();
    });
  });

  it('should open a tab!', done => {
    console.log('tab test starting');
    chrome.tabs.create({
      'active': true,
      'url': 'http://www.example.com/',
    }, tab => {
      console.log('created a tab:', tab);
      done();
    });
  });
});

这当然是一个简化的测试用例。当我运行 npm test 时，我得到(稍微缩写):

> extension-api-tests@0.0.1 test .../ext-test
> karma start

25 07 2017 11:57:10.395:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
25 07 2017 11:57:10.397:INFO [launcher]: Launching browser Firefox with unlimited concurrency
25 07 2017 11:57:10.404:INFO [launcher]: Starting browser Firefox
25 07 2017 11:57:14.687:INFO [Firefox 54.0.0 (Ubuntu 0.0.0)]: Connected on socket iIjNRRQfzWj68_GNAAAA with id 42440302
.
LOG: 'message test starting'
Firefox 54.0.0 (Ubuntu 0.0.0) my frustration should respond to messages! FAILED
        Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
LOG: 'tab test starting'
Firefox 54.0.0 (Ubuntu 0.0.0) my frustration should open a tab! FAILED
        Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
Firefox 54.0.0 (Ubuntu 0.0.0): Executed 3 of 3 (2 FAILED) (3.998 secs / 4.001 secs)
npm ERR! Test failed.  See above for more details.

我尝试使用扩展 API 的测试都失败了。它确实 不 说(例如)chrome.runtime 未定义(但如果我从 karma.conf 中删除 'sinon-chrome' 它会.js)，所以我相信我已经设置了 sinon。但是 API 从来没有做任何事情，从来没有工作过。我要测试的代码是关于通过这些 API 传递数据的所有(尤其是作为消息，以跨越 chrome/content 边界)。

Answer 1

除了原始问题中的所有设置之外，要意识到 Sinon 只提供 API 表面的 stub /模拟:而不是伪造的 API 实现。

要使测试“起作用”，还必须声明模拟的行为；参见例如https://sinonjs.org/releases/latest/mocks/和 https://sinonjs.org/releases/latest/stubs/ .原始问题中的那种测试是“不可能的”，因为您主要是在测试您还需要在测试中编写的虚假实现。

一旦设置好 sinon-chrome，您就可以编写更像

的测试

chrome.tabs.executeScript.callsArg(2);
// ... call code under test ...    
assert(chrome.tabs.executeScript.calledOnce);

(这不是我真正想写的那种测试。)