Se vuoi eseguire test automatici usando Chrome Headless, non devi cercare oltre. Questo articolo spiega come iniziare a usare Karma come runner e Mocha+Chai per i test di authoring.
Che cosa sono?
Karma, mocha, chai, headless Chrome, oh wow!
Karma è un'apparecchiatura di test compatibile con tutti i framework di test più diffusi (Jasmine, Mocha, QUnit).
Chai è una libreria di asserzioni che funziona con il nodo e nel browser. La seconda è la seconda.
Chrome headless è un modo per eseguire il browser Chrome in un ambiente headless senza l'interfaccia utente completa del browser. Uno dei vantaggi dell'utilizzo di Chrome headless (anziché dei test direttamente in Node) è che i test JavaScript verranno eseguiti nello stesso ambiente degli utenti del tuo sito. Chrome headless ti offre un contesto vero e proprio del browser senza il sovraccarico di memoria associato all'esecuzione di una versione completa di Chrome.
Imposta
Installazione
Installa Karma, i plug-in pertinenti e i test runner utilizzando yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
oppure usa npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
In questo post sto usando Mocha e Chai, ma se non ti piace fan, scegli la tua libreria di asserzioni preferita che funzioni nel browser.
Configura Karma
Crea un file karma.conf.js che utilizzi Avvio app di ChromeHeadless.
karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'chai'],
files: ['test/**/*.js'],
reporters: ['progress'],
port: 9876, // karma web server port
colors: true,
logLevel: config.LOG_INFO,
browsers: ['ChromeHeadless'],
autoWatch: false,
// singleRun: false, // Karma captures browsers, runs the tests and exits
concurrency: Infinity
})
}
Scrivi un test
Crea un test in /test/test.js.
/test/test.js
describe('Array', () => {
describe('#indexOf()', () => {
it('should return -1 when the value is not present', () => {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Esegui i test
Aggiungi uno script test in package.json che esegue Karma con le nostre impostazioni.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Quando esegui i test (yarn test), Chrome headless dovrebbe attivarsi e inviare i risultati al terminale:
Creazione del tuo Avvio app headless di Chrome
L'Avvio app ChromeHeadless è eccezionale perché funziona subito per i test su Chrome headless. Include i flag di Chrome appropriati e
avvia una versione di debug remoto di Chrome sulla porta 9222.
Tuttavia, a volte potresti voler passare flag personalizzati a Chrome o modificare la porta di debug remoto utilizzata da Avvio app. Per farlo, crea un campo customLaunchers che espanda l'Avvio app di base ChromeHeadless:
karma.conf.js
module.exports = function(config) {
...
config.set({
browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],
customLaunchers: {
MyHeadlessChrome: {
base: 'ChromeHeadless',
flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']
}
},
}
};
Gestione completa su Travis CI
La parte difficile è configurare Karma per l'esecuzione dei test in Chrome headless. L'integrazione continua in Travis è a poche righe.
Per eseguire i test in Travis, usa dist: trusty e installa il componente aggiuntivo stabile di Chrome:
.travis.yml
language: node_js
node_js:
- "7"
dist: trusty # needs Ubuntu Trusty
# Note: if you switch to sudo: false, you'll need to launch Chrome with --no-sandbox.
# See https://github.com/travis-ci/travis-ci/issues/8836
sudo: required
addons:
chrome: stable # have Travis install Chrome stable.
cache:
yarn: true
directories:
- node_modules
install:
- yarn
script:
- yarn test