I’ve written a unit test for the following code and stubbed the browser methods (read: web-extension API) using Sinon (more specifically: sinon-chrome, a dated but still functioning library for my use case).
/** * Returns an array of languages based on getAcceptLanguages and getUILanguage to use as defaults * for when no saved languages exist in browser storage. * * @memberof Helpers * @returns {array} Array of language codes i.e. ['en-US', 'fr'] */ async function getDefaultLanguages () { const acceptedLanguages = await browser.i18n.getAcceptLanguages() const uiLanguage = browser.i18n.getUILanguage() return [uiLanguage].concat(acceptedLanguages) }
The unit test:
const sinon = require('sinon') const browser = require('sinon-chrome/extensions') const { assert } = require('chai') const helpers = require('../src/helpers') // helpers that rely on the web-extension API (will need to be mocked) describe('Helpers: Web-Extension API', function () { const { getDefaultLanguages } = helpers let languages before(async function () { global.browser = browser // need to patch global browser with mocked api browser.menus = browser.contextMenus // sinon-chrome doesn't wrap this method as it should sinon.stub(browser.i18n, 'getAcceptLanguages').resolves(['de-de', 'en-au']) sinon.stub(browser.i18n, 'getUILanguage').returns('en-en') languages = await getDefaultLanguages() }) it('asserts that getDefaultLanguages() returns an array of strings', function () { assert.isTrue(languages.every(x => typeof x === 'string')) }) it('asserts that getDefaultLanguages() includes UI and i18n languages', function () { assert.sameMembers(languages, ['de-de', 'en-en', 'en-au']) }) })
The tests fail due to both the stubbed methods returning undefined, but the Sinon docs state quite clearly that stub.resolves(value)
:
Causes the stub to return a Promise which resolves to the provided value.
When constructing the Promise, sinon uses the Promise.resolve method. You are responsible for providing a polyfill in environments which do not provide Promise. The Promise library can be overwritten using the usingPromise method.
Since node has built in Promise support, I would expect the above stubs to resolve with the values specified (an array of locale strings and a locale string), but both resolve/return undefined.
Would appreciate some help with this one!
Advertisement
Answer
Turns out sinon-chrome, for whatever reason, needs to register the ‘i18n’ plugin during runtime and before tests are run.
Why this specific part of the web-extensions API is not implemented the same way all the other mocks are remains a mystery, but adding two lines fixed the problem and allowed the sinon stubs to work as expected:
const sinon = require('sinon') const browser = require('sinon-chrome/extensions') const I18nPlugin = require('sinon-chrome/plugins').I18nPlugin // I18n plugin constructor const { assert } = require('chai') const helpers = require('../src/helpers') // helpers that rely on the web-extension API (will need to be mocked) describe('Helpers: Web-Extension API', function () { const { getDefaultLanguages } = helpers let languages before(async function () { global.browser = browser // need to patch global browser with mocked api browser.menus = browser.contextMenus // sinon-chrome doesn't wrap this method as it should browser.registerPlugin(new I18nPlugin()) // register the plugin on browser instance sinon.stub(browser.i18n, 'getAcceptLanguages').resolves(['de-de', 'en-au']) sinon.stub(browser.i18n, 'getUILanguage').returns('en-en') languages = await getDefaultLanguages() }) })
Sinon-chrome throws a type error if you try to spy on a non-existent object property, or if the given property is not a function. Unfortunately it does not throw any error and simply returns undefined if trying to stub a non-existent object property, which seems like a poor design choice.
That is why both the returns()
and resolves()
stubs, in the original code, returned undefined.