Gözetimsiz Chrome'u kullanarak otomatik testler çalıştırmak istiyorsanız doğru yerdesiniz. Bu makalede, koşucu olarak Karma'yı, test yazmak için Mocha+Chai'yi ise kullanmaya hazır olacaksınız.
Bunlar nelerdir?
Karma, Mocha, Chai, Headless Chrome, aman tanrım!
Karma, en popüler test çerçevelerinden herhangi biriyle (Jasmine, Mocha, QUnit) çalışan bir test aracıdır.
Chai, Node ile ve tarayıcıda çalışan bir beyan kitaplığıdır. İkincisi gerekli.
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. Doğrudan Düğüm'de test etmek yerine Gözetimsiz Chrome kullanmanın avantajlarından biri, JavaScript testlerinizin sitenizin kullanıcılarıyla aynı ortamda yürütülmesidir. Gözetimli olmayan Chrome, Chrome'un tam sürümünü çalıştırmanın bellek yükü olmadan gerçek bir tarayıcı bağlamı sunar.
Kurulum
Kurulum
Karma, ilgili eklentileri ve test çalıştırıcılarını yarn
kullanarak 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 yayında Mocha ve Chai kullanıyorum, ancak bu içeriğin hayranı değilseniz tarayıcıda çalışan favori onay kitaplığınızı seçin.
Karmayı yapılandırma
ChromeHeadless
başlatıcısını 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 yazma
/test/test.js
uygulamasında 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ırma
package.json
'a, Karma'yı ayarlarımızla çalıştıran bir test
komut dosyası ekleyin.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Testlerinizi çalıştırdığınızda (yarn test
) Gözetimsiz Chrome etkinleşir ve sonuçları terminale gönderir:
Kendi Gözetimsiz Chrome başlatıcınızı oluşturma
ChromeHeadless
başlatıcı, Gözetimsiz Chrome'da test için hazır olarak çalıştığından mükemmel bir seçenektir. 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ığı uzak hata ayıklama bağlantı noktasını değiştirmek isteyebilirsiniz. Bunun için temel ChromeHeadless
başlatıcıyı genişleten bir customLaunchers
alanını 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']
}
},
}
};
Tüm özellikleri Travis CI'da çalıştırma
Karma'yı, testlerinizi Gözetimsiz Chrome'da çalıştıracak şekilde yapılandırmak en zor kısımdır. Travis'te sürekli entegrasyon sadece birkaç satır uzaklıkta!
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