Gözetimsiz Chrome'u kullanarak otomatik testler çalıştırmak istiyorsanız doğru yerdesiniz. Bu makalede, Karma'yı çalıştırıcı olarak, Mocha+Chai'yi ise test oluşturmak için kullanarak gerekli tüm ayarları yapmanıza yardımcı olunacaktır.
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. İkincisine ihtiyacımız var.
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 Node'da test etmenin aksine) 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 simgesini 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 kitaplıkları beğenmiyorsanız tarayıcıda çalışan en sevdiğiniz beyan kitaplığını seçin.
Karma'yı 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 alanı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ı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 açılır 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ünü Travis CI'de ç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 entegrasyona ulaşmak için birkaç satır kod yazmanız yeterlidir.
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