Webupblog

JavaScript тестирование с Mocha

Шевченко Вячеслав

Mocha (Мока) — многофункциональная среда JavaScript-тестирования, работающая на Node.js и в браузере, что делает асинхронное тестирование простым и интересным. Тесты Mocha запускаются серийно, что позволяет гибко и точно создавать отчеты.

При первом знакомстве Mocha может показаться сложным фреймворком, но на самом деле работа с ним легка и приносит удовольствие.

Установка Mocha через терминал

Для установки выполните команду:

$ npm install -g mocha

Если вы устанавливаете npm модуль глобально, вы не ограничиваете его использование в рамках одного проекта. В место этого вы имеете доступ к фреймворку с любого каталога и проекта.

Как только Mocha будет установлен глобально вы сможете запускать команды в терминале используя ключевое слово mocha.

Что бы проверить установку используйте команду $ mocha --version

Создание проекта

Далее мы создадим папку для проекта с именем test. В папке test мы создадим файл с именем test.js. Находясь в директории в терминале запустим команду $ npm init для инициализации проекта.

Команда $ npm init — самый простой и короткий способ создания файла package.json. Теперь мы можем запускать Mocha выполнив в терминале команду $ npm test.

У вас должна получится такая структура файлов.

test
   |-- test.js
   |-- package.json

В package.json должен быть следующий код.

"scripts": {
  "test": "mocha"
},

Если вы выполнили все верно и получили такой же результат, то можно приступать к тестированию.

Написание первого теста

Мы скопируем пример теста из документации mocha, я дальше поясню что происходит в коде. А пока скопируйте код ниже в файл test.js.

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function(){
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

Теперь запустите ваш тест в терминале выполнив команду $ npm test. Вы должны получить сообщение:

Array
  #indexOf()
    ✓ should return -1 when the value is not present
1 passing (9ms)

Это сообщение означает что тест пройден, это конечно хорошо но мы и понятия не имеем как работает этот код. Поэтому давайте пройдемся по основным моментам.

Можно запускать Mocha единожды, и в режиме постоянного тестирования при каждом изменении файлов. Для второго варианта нужно указать параметр watch: $ mocha --watch

Когда вы пишите тест вам необходимо знать о двух базовых функциях: describe() и it(). Мы их используем в примере выше.

describe(a,b) — это самый простой способ сгруппировать тесты в Mocha. Мы можем объединять тесты в различные группы исходя из желаний. Функция принимает два аргумента:

a — имя тестовой группы

b — функция обратного вызова

describe('string name', function(){
  // еще describe(), или тесты
});

В нашем примере выше есть группа тестов Array, которая содержит тестовую группу #indexOf(), которая в свою очередь является контейнером для теста.

It(a,b) — служит для индивидуальных тест кейсов и так же принимает два аргумента.

a — строка, которая содержит объяснение того, что тест должен делать.
b — функция обратного вызова, которая содержит сам тест.

it('should blah blah blah', function(){
  // Здесь тесты
});

Вместе с Mocha можно использовать Assert библиотеки. Этот инструмент используется для проверки разного вида вещей на корректность — это то что определенно определяет результат.

Использование Assert библиотек не есть необходимостью, но они делают тестирование намного проще. Mocha позволяет нам использовать любые библиотеки. В примере ниже (и во всех других примерах) мы используем модули Node.js.

Это строка кода которая подключает библиотеку.

var assert = require('assert');

Существует определенное количество тестов включенных в assert.

Assert библиотеки

Mocha позволяет выбирать стили/библиотеки.

Одна из них — assert.equal(actual, expected); она проверяет равенство между нашим явным и ожидаемым параметрами, используя двойное равно ==.

Вспомните наш пример:

it('should return -1 when the value is not present', function(){
  assert.equal(-1, [1,2,3].indexOf(4));
});

Все что мы сделали — это проверили равняется ли -1 этот элемент массива [1,2,3].indexOf(4). Если наш ожидаемый параметр равен явному, то тест пройден.

Далее снова запускаем наш тест с терминала командой $ npm test.

Array
  #indexOf()
    ✓ should return -1 when the value is not present
1 passing (9ms)

Давайте разберем сообщение построчно.

Объяснение

Мы уже имеем все части пазла, давайте попробуем собрать их вместе. Здесь приведен код оригенального теста, с комментариями чтобы объяснить каждую строку.

// подключение встроенной библиотеки assert
 var assert = require('assert');
// создание группы тестов Arrays
 describe('Array', function() {
// В середине группы Array создаем тесты indexOf
  describe('#indexOf()', function() {
// Пояснения, что мы тестируем
   it('should return -1 when the value is not present', function(){
// Наш тест: -1 должен быть равным indexOf(...)
   assert.equal(-1, [1,2,3].indexOf(4));
   });
  });
 });

Проверка знаний

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

Ответ

Если у вас не получилось написать собственный тест, то это нормально.

Давайте, посмотрим на решение:

// подключение библиотеки
var assert = require('assert');
// создание группы тестов с именем Math
 describe('Math', function() {
// Первый тест: Пояснение того, что мы тестируем
  it('should test if 3*3 = 9', function(){
// Наш тест: 3*3 должен равняться 9
   assert.equal(9, 3*3);
  });
// Второй тест: комментарий к тесту
  it('should test if (3-4)*8 = -8', function(){
// Сам тест: (3-4)*8 должен равняться -8
   assert.equal(-8, (3-4)*8);
  });
 });

После запуска $ npm test в терминале мы получаем:

Math
  √ should test if 3*3 = 9
  √ should test if (3-4)*8 = -8
2 passing (13ms)

Запуск в браузере

Mocha можно запустить и в браузере, для этого необходимо подключить скрипт и указать какой интерфейс вы хотите использовать и потом запустить тесты:

<link href="mocha.css" rel="stylesheet">
<div></div>
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="test.array.js"></script>
<script>
    mocha.checkLeaks();
    mocha.globals(['jQuery']);
    mocha.run();
</script>

Генераторы отчетов

Генерируют отчеты в разных вариантах, а так же генерируют документацию к тестам:

Что бы выбрать вариант теста, используйте параметр reporter

username:/$ mocha --reporter list
username:/$ mocha --reporter min
username:/$ mocha --reporter markdown
comments powered by HyperComments