Gözetimsiz Chrome'u kullanarak otomatik testler çalıştırmak istiyorsanız başka bir uygulamaya gerek yok. Bu makalede, koşucu olarak Karma ve test yazmak için Mocha+Chai'nin kullanılmasıyla ilgili talimatlar sunulmaktadır.
Bunlar nelerdir?
Karma, Mocha, Çay, Dikkatsiz Chrome, imdat!
Karma, en popüler test çerçevelerinin (Jasmine, Mocha, QUnit) herhangi biriyle çalışan bir test grubudur.
Chai, Node ile ve tarayıcıda çalışan bir onaylama kitaplığıdır. İkincisi gereklidir.
Gözetimsiz Chrome, Chrome tarayıcıyı tam tarayıcı kullanıcı arayüzü olmadan gözetimsiz bir ortamda çalıştırmanın bir yoludur. Gözetimsiz Chrome'u kullanmanın (doğrudan Düğüm'de test etmek yerine) avantajlarından biri, JavaScript testlerinizin sitenizin kullanıcılarıyla aynı ortamda yürütülmesidir. Gözetimsiz Chrome, Chrome'un tam sürümünü çalıştırmanın sağladığı bellek ek yükü olmadan size gerçek bir tarayıcı bağlamı sunar.
Kurulum
Döşeme
yarn kullanarak Karma'yı, alakalı eklentileri ve test çalıştırıcılarını yükleyin:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
veya npm kullanın:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Bu gönderide Mocha ve Chai'yi kullanıyorum, ancak hayranı değilseniz tarayıcıda çalışan, en sevdiğiniz onaylama kitaplığını seçin.
Karma'yı yapılandırma
ChromeHeadless başlatıcıyı kullanan bir karma.conf.js dosyası oluşturun.
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
})
}
Test yazın
/test/test.js uygulamasında bir test oluşturun.
/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));
});
});
});
Testlerinizi çalıştırın
package.json öğesine, ayarlarımızla Karma çalıştıran bir test komut dosyası ekleyin.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Testlerinizi (yarn test) çalıştırdığınızda, gözetimsiz Chrome etkinleşir ve sonuçları terminale verir:
Kendi gözetimsiz Chrome başlatıcınızı oluşturma
ChromeHeadless başlatıcı, gözetimsiz Chrome'da test yaparken kullanıma hazır olarak çalıştığı için harika bir araçtır. Sizin için uygun Chrome işaretlerini içerir ve 9222 bağlantı noktasında Chrome'un uzaktan hata ayıklama sürümünü başlatır.
Ancak bazen Chrome'a özel işaretler iletmek veya başlatıcının kullandığı uzaktan hata ayıklama bağlantı noktasını değiştirmek isteyebilirsiniz. Bunu yapmak için temel ChromeHeadless başlatıcıyı genişleten bir customLaunchers alanı oluşturun:
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']
}
},
}
};
Her şeyi Travis CI'da çalıştırma
İşin zor kısmı, Karma'yı testlerinizi gözetimsiz Chrome'da çalıştıracak şekilde yapılandırmaktır. Travis'te sürekli entegrasyona birkaç satır kaldı.
Testlerinizi Travis'te çalıştırmak için dist: trusty kullanın ve Chrome kararlı eklentisini yükleyin:
.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