Please document how to use browser / webextension API in tests

Here’s a reduced test case: https://gist.github.com/arantius/33d318f57ced2f1b7ef5c49740b00e01

Try to use sinon-chrome, with browser API. Fail. chrome here works (well, doesn’t crash before Karma initialization does, for this reduced case). Documentation claims both APIs are supported, but I can’t tell how.

[Sxderp]

I’ve been looking into this, and this is what I’ve found.

Firstly, loading sinon-chrome as a framework requires the karma-sinon-chrome package. However, this package requires an older version of sinon-chrome and therefore downloads and uses that version (in it’s own local node_modules namespace).

Unfortunately, that’s only part of the problem. Suppose you manually load the WebExtension part of sinon-chrome in the files section of the karma.conf[1] you will only have access to a global ‘chrome’ object. Despite the name, this is the actual ‘browser’ API[2]. The reason that that the global object name is ‘chrome’ is that the auto-bundler (webpack) is configured to name the object ‘chrome’.

What makes this even worse is that, while the APIs are ‘defined’, the stubs that are created are not configured to return promises. Therefore any time you perform a .then the interpreter will error with browser.func() is undefined (since nothing is returned).

Although, creating the stubs to autoresolve a promise would probably create all sorts of problems too. Since the promise chain would be expecting particular input and I suppose it can only be simulated to a certain extent.

Along those lines, the best thing I could offer is to assume, during testing, that all browser functions are working properly (heh) and use before() blocks to configure what the functions resolve to.

[1] With say, ./node_modules/sinon-chrome/bundle/sinon-chrome-webextensions.min.js. [2] As defined in https://github.com/acvetkov/sinon-chrome/blob/058cc9304fedfb3db0e04eae7ff0bdbe93dfdda2/src/config/stable-api-ff.json

---

It should also be noted that the Karma config linked will uses the actual browser to execute the tests. This particular package was created to run tests in a node environment. Thus the expectation would be to do the following:

const chrome = require('sinon-chrome/extensions');
const browser = require('sinon-chrome/webextensions');

You could use something like requireJS to mimic this functionality. I attempted to do this with the Greasemonkey codebase, unfortunately due to async loading (of requireJS) and the fact that the GM codebase isn’t based on a module / export structure I was unable get it working properly.

[stoically]

One way to test completely in Node without exporting the system under test using module.exports is to assign browser on global, then require the production code and finally wait until process.nextTick. Here’s an example how to do so.

Another way would be to have something like if (process && module && module.exports) { module.exports = foo; } in the system under test which would allow to export/require the actual code without having to use e.g. requireJS. Or setting global._testEnv = true in the test and doing if (_testEnv) { module.exports = foo; } in the production code. Admittedly those are not the cleanest solutions, but personally I think it’s a small price to pay for easy to test code.