JS тесты с кармой / мокко / чай / глотком
Я попытался добавить тестирование в мой шаблон веб-приложения, которое проводится вместе с gulp.
Я добавил Karma/Mocha/Chai и выполнил тестирование в часах Gulp:
gulp.task('watch', ['browserSync', 'build-css'], () => {
gulp.watch('./app/scss/**/*.scss', ['build-css']);
gulp.watch(['app/*.html', 'app/js/**/*.js'], browserSync.reload); //Also reloads the browser when HTML or JS changes
gulp.watch(['app/js/**/*.js', 'test/**/*.test.js'], ['test']); //Re-run tests whenever JS or test changes
});
gulp.task('test', //Run tests once
shell.task('karma start --single-run --browsers ChromeHeadless karma.conf.js')
);
В моем karma.conf.js
Я загружаю все мои файлы:
files: [
'app/*.html',
'app/css/*.css',
'app/js/**/*.js',
'test/**/*.test.js'
],
Теперь актуальный тестовый файл работает. Так что, если у меня есть это:
script.test.js
describe('Array', () => {
describe('#indexOf()', () => {
it('should return -1 when the value is not present', () => {
assert.equal(-1, [1,2,3,].indexOf(4));
});
});
});
тогда я получу пропуск, без проблем.
У меня проблема в том, что мой основной файл script.js вызывает падение Кармы. Я верю, что это потому, что он пытается манипулировать DOM. У меня есть функция под названием createUI
которая принимает пару аргументов, одним из которых является идентификатор элемента страницы, в который должен быть вставлен пользовательский интерфейс. Он работает точно так, как я хочу, когда он работает нормально, но когда Карма запускает тест, он дает мне это:
HeadlessChrome 64.0.3282 (Mac OS X 10.13.2) ERROR
{
"message": "Uncaught ReferenceError: table is not defined\nat /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43\n\nReferenceError: table is not defined\n at Object.require./Users/jamesbrenton/Documents/webapp-boilerplate/app/js/script.js (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43)\n at s (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/node_modules/browser-pack/_prelude.js:1:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:1:273)\n at app/js/script.js:1:34",
"str": "Uncaught ReferenceError: table is not defined\nat /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43\n\nReferenceError: table is not defined\n at Object.require./Users/jamesbrenton/Documents/webapp-boilerplate/app/js/script.js (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/app/js/script.js:10:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:11:43)\n at s (/var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/node_modules/browser-pack/_prelude.js:1:0 <- /var/folders/bb/v9p4j7395_9f24f49p04h1pr0000gq/T/195d5d9b0835bfdadaba24427f863496.browserify:1:273)\n at app/js/script.js:1:34"
}
Если я заверну свой вызов функции внутри window.onload
блок, как это:
script.js
window.onload = function() {
cards.createUI(deck, table);
};
тогда испытания кажутся успешными. Однако я не могу поверить, что это правильный способ решения этой проблемы, поскольку код работает в нормальных условиях. Могу ли я отложить карму от запуска тестов до загрузки DOM? Или я что-то здесь упустил?