अगर आपको Headless Chrome का इस्तेमाल करके, अपने-आप चलने वाले टेस्ट चलाने हैं, तो यहां जाएं! इस लेख में, आपको टेस्ट बनाने के लिए Mocha+Chai और रनर के तौर पर Karma का इस्तेमाल करने का पूरा तरीका बताया गया है.
ये चीज़ें क्या हैं?
Karma, Mocha, Chai, Headless Chrome, वाह!
Karma एक टेस्टिंग हार्नेस है, जो सबसे लोकप्रिय टेस्टिंग फ़्रेमवर्क (Jasmine, Mocha, QUnit) के साथ काम करता है.
Chai एक ऐसी एश्योरेशन लाइब्रेरी है जो Node और ब्राउज़र, दोनों के साथ काम करती है. हमें बाद वाले विकल्प की ज़रूरत है.
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome, Chrome ब्राउज़र को बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले एनवायरमेंट में चलाने का एक तरीका है. सीधे Node में टेस्ट करने के बजाय, Headless Chrome का इस्तेमाल करने का एक फ़ायदा यह है कि आपके JavaScript टेस्ट उसी एनवायरमेंट में चलाए जाएंगे जिसमें आपकी साइट के उपयोगकर्ताओं को अनुभव मिलता है. Headless Chrome, आपको Chrome के पूरे वर्शन को चलाने के लिए ज़्यादा मेमोरी के बिना, रीयल ब्राउज़र कॉन्टेक्स्ट देता है.
सेटअप
इंस्टॉल करना
yarn का इस्तेमाल करके, Karma, काम के प्लग इन, और टेस्ट रनर इंस्टॉल करें:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
या npm का इस्तेमाल करें:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
इस पोस्ट में, मैंने Mocha और Chai का इस्तेमाल किया है. हालांकि, अगर आपको इनका इस्तेमाल पसंद नहीं है, तो ब्राउज़र में काम करने वाली अपनी पसंदीदा एश्योरेशन लाइब्रेरी चुनें.
Karma को कॉन्फ़िगर करना
ChromeHeadless लॉन्चर का इस्तेमाल करने वाली karma.conf.js फ़ाइल बनाएं.
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/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));
});
});
});
टेस्ट चलाना
package.json में ऐसी test स्क्रिप्ट जोड़ें जो हमारी सेटिंग के साथ Karma को चलाती हो.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
टेस्ट (yarn test) चलाने पर, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome चालू हो जाएगा और टर्मिनल पर नतीजे दिखाएगा:
अपना Headless Chrome लॉन्चर बनाना
ChromeHeadless लॉन्चर बहुत अच्छा है, क्योंकि यह बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome पर जांच करने के लिए, बिना किसी सेटअप के काम करता है. इसमें आपके लिए सही Chrome फ़्लैग शामिल होते हैं. साथ ही, यह पोर्ट 9222 पर Chrome का रिमोट डीबगिंग वर्शन लॉन्च करता है.
हालांकि, कभी-कभी आपको Chrome में कस्टम फ़्लैग पास करने या लॉन्चर के इस्तेमाल किए जाने वाले रिमोट डीबगिंग पोर्ट को बदलने की ज़रूरत पड़ सकती है. ऐसा करने के लिए, customLaunchers
ऐसा फ़ील्ड बनाएं जो बुनियादी 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']
}
},
}
};
Travis CI पर इसे चलाना
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome में टेस्ट चलाने के लिए, Karma को कॉन्फ़िगर करना मुश्किल है. Travis में लगातार इंटिग्रेशन करने के लिए, आपको बस कुछ लाइनें लिखनी होंगी!
Travis में अपने टेस्ट चलाने के लिए, dist: trusty का इस्तेमाल करें और 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