Настройка окружения unit тестирования javascript

Вначале была функция и вызывали ее в одном месте. Потом мы захотели вызвать ее в другом месте с новыми возможностями и обновили ее. Нам эта ф-ия так понравилась, что мы вызвали ее в третьем месте и еще сделали функциональные правки и… в первом месте что-то пошло не так. А как узнать? Проверять во всех местах где мы использовали эту функцию, все ли правильно работает? Можно, но лучше использовать unit тесты.

Всем привет. На связи аноним из песочницы. Как правильно тестировать свой код вы можете найти в первых строчках поисковика, а вот с настройкой окружения приходится повозиться. Так вот сегодня я хочу помочь начинающим разработчикам настроить окружение для unit тестирования своего кода.

P.S. — имеет смысл читать статью далее, если читатель освоил работу с npm или подобным менеджером пакетов.

Начнем с небольших определений:

• unit-тестирование — это технология, цель которой уменьшить вероятность ошибок и побочных эффектов (когда при исправлении одного бага вносится другой баг).
• karma — инструмент, позволяющий запустить java-script тесты в браузерах.
• jasmine — фреймворк для тестирования javasctript кода.

В инструкции по установке Karma (как и во многих других) говорится, что пакеты следует установить в проекте локально.

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

Для удобства мы также можем установить глобально karma-cli npm install -g karma-cli, иначе из терминала команды будут доступна так ./node_modules/karma/bin/karma.

После чего мы можем создать файл конфигурации:

karma init karma.conf.js

• Вначале у нас спросят используемый фреймворк для тестирования. ( jasmine )
• Используем ли мы файловый/модульный загрузчик Require.js. ( Нет )
• Какие браузеры мы хотим просматривать ( Chrome )
• Какие файлы мы прослушиваем. ( *[Ss]pec.js )
• Следует ли исключить какие-то файлы
• Следить ли за изменениям тестов ( yes )

Ответив на вопросы, у нас появится файл конфигурации.

// Karma configuration
// Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 (зима))

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      '*[Ss]pec.js'
    ],

    // list of files / patterns to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Создадим еще один файл с тестами.

// test.spec.js
describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(false);
  });
});

Мы уже можем посмотреть как работает наш тест запустив команду karma start karma.conf.js, но я рекомендую немного подождать и сделать дополнительные надстройки.

Установим пакет npm i -D karma-jasmine-html-reporter, который в браузере динамически отобразит результаты тестов. Дополним конфиг кармы:

...
reporters: ['progress', 'kjhtml'],
client: {
  clearContext: false // leave Jasmine Spec Runner output visible in browser
},
...

Теперь у нас все готово. Запускаем karma start karma.conf.js и приступаем к своему первому тестированию :D