В Часть 7 мы повторили наши тесты и внесли несколько улучшений, поэтому теперь они запускаются в браузере, они автоматизированы, а также мы тестируем связанный код. для браузера вместо кода CommonJS. Отлично, теперь у нас более надежный процесс тестирования, но мы можем его еще немного улучшить! Это связано с тем, что, как упоминалось в предыдущем посте, мы не знаем, какая часть нашего кода покрывается нашими тестами, то есть нам не хватает покрытия кода. Покрытие кода — еще одна полезная метрика для оценки нашего кода, так что давайте начнем!

Karma, наш тестовый бегун, уже имеет поддержку покрытия кода с помощью плагина karma-coverage, поэтому, как описано на их странице, мы начинаем с его установки:

$ npm install karma-coverage --save-dev

После установки настраиваем как описано, редактируя karma.conf.js следующим образом:

preprocessors: {
  'test/**/*.spec.js': ['webpack', 'sourcemap', 'coverage']
},
reporters: ['progress', 'coverage'],
coverageReporter: {
  reporters: [
    { type: 'text' }
  ]
}

Итак, мы добавили karma-coverage в качестве препроцессора, добавили его в список репортеров и настроили тип отчетов, которые мы хотим, выбрав тип text (он выведет покрытие на терминал). Согласно их странице, это должно быть так, давайте попробуем запустить наши тесты:

$ npm run test:browser

Хорошо, теперь у нас есть отчет о покрытии кода, отлично! Но… Что-то не так. Если мы проверим столбец для File, он не увидит popup.js, а также столбец Uncovered Lines (в котором указаны строки, которые не были покрыты при запуске тесты) указывает на строки 25487 и 25488 как непокрытые… Это происходит потому, что, аналогично тому, что мы прошли ранее для отчета о строке тестовой ошибки, он сообщает о покрытии кода для связанного файла, а не для исходных файлов, что означает, что конфигурация по умолчанию не подойдет. Итак, как мы это исправим? Что ж, нам нужно внести некоторые коррективы, чтобы мы инструментировали не пакетный код, а наш исходный код:

Инструментация кода — это настройка кода, выполненная istanbul (инструмент покрытия кода, используемый karma-coverage), который позволяет идентифицировать строки, которые были покрыты тестами. Описанная конфигурация не будет работать, потому что, как мы видим в списке препроцессора, плагин покрытия идет после веб-пакета, а это означает, что код уже собран, когда istanbul его инструментирует.

Имея это в виду, мы сначала удаляем karma-coverage как препроцессор, сохраняя его настроенным как репортер:

preprocessors: {
  'test/**/*.spec.js': ['webpack', 'sourcemap']
},

Хорошо, но нам все еще нужно инструментировать наш код, чтобы он мог генерировать отчет о покрытии, так как же нам это сделать? Мы можем сделать это с помощью babel-istanbul-loader:

babel-istanbul-loader — это загрузчик webpack для babel-istanbul, а babel-istanbul — это ответвление istanbul. Babel-istanbul транспилирует код с помощью Babel, а также инструментирует его с помощью istanbul.

Итак, мы должны установить babel-istanbul-loader:

$ npm install babel-istanbul-loader --save-dev

И отредактируйте webpack.config.js, чтобы использовать babel-istanbul в качестве нашего транспилятора вместо Babel (кстати, при добавлении загрузчиков нам не нужно добавлять суффикс loader, поэтому вместо babel-istanbul-loader мы можем просто написать babel-istanbul и webpack будет работать так же ):

loaders: [
  {
    test: /\.js$/,
    loader: 'babel-istanbul',
    exclude: /node_modules/
  }
]

Теперь снова запускаем тесты:

Теперь у нас есть отчет о покрытии по исходному файлу, намного лучше! Но теперь мы замечаем, что он также сообщает о покрытии для тестовых файлов, что лично я не считаю важным, а также мы не хотим использовать babel-istanbul в качестве нашего транспилятора для производства. код. Откройте webpack.config.js и внесите следующие изменения, чтобы сразу решить обе эти проблемы:

loaders: PRODUCTION
  ? [
      {
        test: /\.js$/, 
        loader: 'babel', 
        exclude: /node_modules/ 
      }
  ]
  : [
      { 
        test: /\.js$/, 
        loader: 'babel', 
        exclude: /node_modules|src/ 
      },
      {
        test: /\.js$/,
        loader: 'babel-istanbul',
        exclude: /node_modules|test/ 
      }
  ]
}

Теперь перезапустите тесты:

Теперь у нас есть покрытие кода только для исходных файлов, отлично! В заключение давайте добавим генератор отчетов типа html, который поможет нам лучше визуализировать покрытие кода. Просто откройте karma.conf.js и добавьте его в список репортеров:

reporters: [
  { type: 'text' },
  { type : 'html', dir : 'coverage' }
]

Повторите тесты еще раз, и он должен создать каталог с именем coverage, с двумя каталогами, соответствующими нашим настроенным браузерам (Firefox и Chrome), каждый из которых содержит файл index.html. Открыв этот файл и перейдя к popup.js, мы можем получить более подробное представление о покрытии кода, например:

Как и в случае с тестами, покрытие кода не гарантирует его пуленепробиваемость, но это еще один показатель качества нашего кода.

Код доступен здесь.

Спасибо за чтение!

PS: Следующий пост готов!