Статьи

Покрытие кода для тестов QUnit с использованием Istanbul и Karma

Июнь 30, 2018

QUnit , используемый такими проектами, как jQuery и jQuery Mobile , является довольно популярной платформой для тестирования JavaScript. Для тестов, написанных с использованием QUnit, как мы измеряем покрытие кода ? Возможное решение, которое довольно легко настроить, — использовать смертельную комбинацию Кармы и Стамбула .

Как и в нашем предыдущем приключении с покрытием кода Jasmine , давайте взглянем на простой код, который нам нужно протестировать. Эта функция My.sqrtявляется повторной реализацией, Math.sqrtкоторая может вызвать исключение, если ввод неверен.

var My = {
  sqrt: function(x) {
    if (x < 0) throw new Error("sqrt can't work on negative number");
      return Math.exp(Math.log(x)/2);
  }
};

Очень простой тест на основе QUnit для приведенного выше кода заключается в следующем.

test("sqrt", function() {
  deepEqual(My.sqrt(4), 2, "square root of 4 is 2");
});

Выполнить тест вручную просто, как открыть тестер в веб-браузере:

QUnit

Для сглаженного рабочего процесса разработки, автоматический способ запуска тестов будет гораздо предпочтительнее. Здесь карма становится очень полезной. Карма также имеет возможность запускать заранее заданную коллекцию браузеров или даже использовать PhantomJS для чисто безголового исполнения (подходит для тестирования дыма и / или непрерывной доставки).

Прежде чем мы сможем использовать Карму, необходима установка:

npm install karma karma-qunit karma-coverage

Карма требует файл конфигурации. Для этого файл конфигурации очень прост. В качестве иллюстрации, выполнение выполняется PhantomJS, но легко включить и другие браузеры .

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['qunit'],
    files: [
      '*.js',
      'test/spec/*.js'
    ],
    browsers: ['PhantomJS'],
    singleRun: true,
    reporters: ['progress', 'coverage'],
    preprocessors: { '*.js': ['coverage'] }
  });
};

Теперь вы можете запустить Karma с вышеуказанной конфигурацией, это будет означать, что тест проходит просто отлично. Если у вас возникнут какие-то проблемы, вы можете посмотреть пример репозитория, который у меня есть. Github.com/ariya/coverage-qunit-istanbul-karma. Он может быть полезен в качестве отправной точки или ссылки для вашего собственного проекта. Для удобства тест в этом хранилище можно выполнить с помощью npm test.

Что еще интереснее, так это то, что Karma использует свой процессор покрытия, как указано preprocessorsв приведенной выше конфигурации. Карма будет управлять Стамбулом , полнофункциональным инструктором и трекером освещения. По сути, Стамбул получает исходный код JavaScript и вводит дополнительный инструментальный код, чтобы он мог собирать метрики выполнения после завершения процесса (см. Также мой предыдущий пост в блоге о покрытии кода JavaScript в Стамбуле ). В этой комбинации Карма и Стамбул сгенерированный отчет о покрытии доступен в подкаталоге coverage.

branch_uncovered

Приведенный выше отчет указывает на то, что в одном тесте по- My.sqrtпрежнему отсутствует тест для неверного ввода, благодаря функции покрытия филиалов в Стамбуле. IИндикатор рядом с условным оператором говорит нам о том , что если отрасль никогда не принималась. Конечно, как только проблема известна, добавить другой тест, который будет охватывать эту ветвь, легко (оставлено в качестве упражнения для читателя).

Теперь, когда покрытие кода отслеживается, возможно, вы готовы к следующему уровню? Речь идет об установке жесткого порога, чтобы в будущем регрессия покрытия никогда не происходило. Защитите себя и свою команду от невнимательности, самоуверенности или честных ошибок!

38
Share: