Я работаю в моей нынешней компании уже больше года, и меня всегда смущал тот факт, что у нас нет абсолютно никакого тестового покрытия для нашего JavaScript. Из-за некоторого простоя в текущем спринте моей команды я спросил своего руководителя группы и технического директора, не будут ли они здоровы, если я посвятю некоторое время настройке автоматизированной системы тестирования для нашего JS (примечание для младших разработчиков: продолжайте просить о работе, если есть неработающие время, не сидите без дела, ожидая, пока кто-то даст вам задание. Если они не могут ничего придумать, тогда внесите предложения, это покажет им, что вы мотивированы, и может предоставить забавные возможности попробовать некоторые вещи, которые вы не делаете. обычно не использую на работе!).
Мне не потребовалось много времени, чтобы врезаться головой в кирпичную стену, пытаясь настроить свои тесты. Мы используем RequireJS для всего нашего кода JS, и есть довольно много файлов с большим количеством зависимостей, внедренных через их блок определения. Но, к счастью, именно здесь Squire.js оказывается очень кстати, но мы вернемся к этому позже. Сначала я познакомлю вас со структурой нашего приложения, установленными зависимостями и настрою файл конфигурации Karma.
$ tree
.
|-- js
| |-- src code files
| |-- lib
`-- test
npm install karma karma-chai chai karma-mocha mocha karma-requirejs requirejs karma-phantomjs-launcher --save-dev
npm install -g karma-cli
#This last dependency allows you just to type 'karma' to run Karma without having to type in the full path in node modules. Also noted in the docs http://karma-runner.github.io/1.0/intro/installation.html you will need to do this anyway if you're on a Windows machine.
Здесь нет ничего сложного, у нас действительно простая структура приложения, но важно знать, где все находится при настройке Karma, чтобы она знала, где искать определенные файлы. После установки всех зависимостей у Karma есть отличная документация о том, как все настроить для запуска тестов с модулями RequireJS, здесь http://karma-runner.github.io/1.0/plus/requirejs.html.
Изюминкой этого является тип karma init
и выберите «да», когда он спросит, используете ли вы RequireJS. Это укажет Karma создать для вас файл test-main.js
с каркасом для настройки вашей конфигурации RequireJS. Он также спросит вас, какую среду тестирования вы используете, это легко изменить в конфигурации, поэтому не беспокойтесь, если вы не уверены, какую среду тестирования вы собираетесь использовать, и хотите ее изменить. Мой конфиг в итоге выглядел так:
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'requirejs', 'chai'],
files: [
{pattern: 'js/**/*.js', included: false},
{pattern: 'test/**/*.js', included: false},
'test-main.js'
],
exclude: [],
preprocessors: {},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
});
};
Примечание. Я добавил «chai» в frameworks:
array после создания этого файла, поскольку Karma не добавила его автоматически. Здесь важно убедиться, что шаблоны файлов для исходного кода, библиотеки (при необходимости) и тестовых файлов соответствуют структуре каталогов и расширениям файлов вашего приложения. Путь к файлу начинается с того места, где вы запускаете karma start
, поэтому, поскольку я буду запускать эту команду из корня моего приложения, я хочу начать искать в js и тестовых каталогах мои файлы для загрузки в тестах.
Следующий файл Karma генерирует в файле test-main.js, здесь мы настраиваем пути к нашим модулям RequireJS, чтобы начать использовать их в наших тестах. Вот фрагмент этого файла.
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
paths: {
'calculator': 'js/calculator'
}
});
Итак, здесь я говорю RequireJS искать в каталоге «js» файл с именем calculate.js каждый раз, когда я запрашиваю «calculator». Теперь мы можем писать тесты для модуля калькулятора!
define(['calculator'], function(calculator) { describe('Calculator #add', function() { it('adds two integers', function() { calculator.add(2,2).should.eq(4); }); }); });
Отлично, но это не очень хорошо работает для модулей с зависимостями. Если бы модуль калькулятора имел зависимость от модуля с именем math, нам пришлось бы добавить это в нашу конфигурацию RequireJS. Ничего страшного, но чем больше модулей вы начинаете вводить с другими зависимостями, тем сложнее становится. Вот где SquireJS приходит на помощь. Я расскажу о том, как я это настроил, в следующей части моего прохождения, спасибо за чтение!