Как начать тестирование фронтенд-приложений с помощью Mocha и Chai

Предупреждение: этот пост старый и может не отражать текущее состояние дел.

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

Давайте сначала посмотрим, как запускать тесты в браузере. Скачать

Поместите соответствующие файлы mocha.js, chai.js, chai-jquery.js в подпапку test / на вашем сайте.

Выберите свой файл index.html и загрузите его, затем мы настроим Mocha для использования стиля тестирования BDD и загрузим файл с именем test.web.js, в котором будут размещены наши правила тестирования.

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

Внутри вашего тела поместите div # mocha:

<div id="mocha"></div>

файл test / test.web.js является основной частью игры, и в нем будут размещены правила тестирования.

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})
describe(‘After this’, function() {
it(‘should be logged in’, function(done) {
expect($(’#the-main-div’)).to.exist;
done();
});
});

Эти тесты теперь можно запустить в браузере, открыв консоль браузера и набравmocha.run().

Это здорово, так как во время выполнения тестов вы можете наблюдать за изменением экрана и читать сообщения консоли.

С помощьюPhantomJS- безголовая реализация WebKit - вы можете запускать тесты в терминале. Обратной стороной является то, что PhantomJS не является реальной средой, в которой будет выполняться ваш код, но лучше для автоматического обнаружения проблем.

Как это сделать? Загрузите и установите PhantomJS. Установите Mocha, используя глобальныйnpmустановка:npm install -g mocha. Загрузите этот пакетhttps://github.com/Backbonist/front-tests, и поместите его в каталог вашего проекта, например, в test /.

Затем вы можете запустить свои тесты, позвонивphantomjs run-mocha.js http://test-site.com

Проблема с этим подходом заключается в том, что вы не можете программно выполнять тесты, запущенные в реальной среде, в которой они будут выполняться. На самом деле это не проблема, когда вы все еще создаете прототипы и разрабатываете до их публикации для публики, но в процессе производства вы не хотите запускать набор тестов из браузера каждый раз, когда вы хотите протестировать. В каждом браузере, верно?Тестемсоздан для этого. Это просто средство запуска тестов, не зависящее от среды тестирования, поэтому оно может запускать Mocha, Jasmine, QUnit или то, что вы используете.

$ npm install testem -g
зайдите в тестовый каталог вашего приложения, введите$ testem
откройте браузер в указанном месте, чтобы запустить тесты.

Вы можете запускать тесты в любом браузере, запустив их, или сказать testem, чтобы они запускали тесты за вас, запустив

$ testem -l Chrome,Safari

Вы также можете использовать testem в режиме непрерывной интеграции (CI).

$ testem ci

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

Браузерное тестирование

Вы, вероятно, будете разрабатывать свой сайт в Chrome или Firefox: их инструменты разработчика потрясающие, и они помогут вам ускорить процесс.

У Google Chrome есть отдельные версии, которые вы можете использовать для тестирования своего сайта. Стабильная и обычная версия, а также Chrome Canary.

Canary - это браузер, который можно запускать параллельно с обычным Google Chrome. Его преимущество в том, что вы получаете ежедневные обновления информации об источниках Chromium, и вы можете получить доступ к новым функциям за 11 недель до того, как они будут отправлены на основной стабильный канал Chrome, ифайл ошибокесли тебе нужно. Вы даже можете установить его в качестве браузера по умолчанию.

У Mozilla есть свояFirefox Nightlyон делает то же самое, что и Chrome canary: в ваш браузер будут приходить ежедневные обновления.

Возможно, вы захотите использоватьКанал Chrome Dev, иFirefox Авроракоторые представляют собой «менее передовую» версию, чем Canary / Nightly.

Чтобы протестировать Safari, вы можете использоватьНочные сборки WebKit. Когда вы используете WebKit, вы в основном запускаете Safari с обновленной версией базового движка.

Введение в тестирование веб-интерфейса

Как начать тестирование фронтенд-приложений с помощью Mocha и Chai

Браузерное тестирование

Больше руководств по инструментам разработчика: