В Часть 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: Следующий пост готов!