Как начать тестирование фронтенд-приложений с помощью Mocha и Chai
Предупреждение: этот пост старый и может не отражать текущее состояние дел.
Mocha - отличный и универсальный инструмент для тестирования. Существует множество фреймворков для тестирования, и я выбрал Mocha из-за его популярности и простоты использования.
Давайте сначала посмотрим, как запускать тесты в браузере. Скачать
- https://github.com/visionmedia/mocha
- https://github.com/chaijs/chai
- https://github.com/chaijs/chai-jquery
Поместите соответствующие файлы 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 с обновленной версией базового движка.
Больше руководств по инструментам разработчика:
- Знакомство с Йоманом
- Bower, менеджер пакетов браузера
- Введение в тестирование веб-интерфейса
- Использование node-webkit для создания настольного приложения
- VS Code: используйте настройки для конкретного языка
- Введение в Webpack
- Краткое и простое руководство по Вавилону
- Введение в пряжу
- Обзор инструментов разработчика браузера
- Отформатируйте свой код с помощью Prettier
- Держите свой код в чистоте с ESLint
- Список интересных советов и приемов Chrome DevTools
- Тестирование JavaScript с помощью Jest
- Как использовать код Visual Studio
- Введение в Электрон
- Посылка, более простой веб-пакет
- Справочник Emmet для HTML
- Двигатель JavaScript V8
- Настройка VS Code
- Настройка командной строки macOS
- Как отключить правило ESLint
- Как открыть VS Code из командной строки
- Как настроить горячую перезагрузку на Electron