Я работаю в моей нынешней компании уже больше года, и меня всегда смущал тот факт, что у нас нет абсолютно никакого тестового покрытия для нашего 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 приходит на помощь. Я расскажу о том, как я это настроил, в следующей части моего прохождения, спасибо за чтение!