Представим, что ваш проект имеет следующую структуру расположения папок и файлов:
/css
/js/jquery.js
/js/index.js
/index.html
Файл jquery.js вы можете скачать с сайта jquery.com
Код файла index.js
function sayOK(){
return 'OK';
}
Код файла index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert(sayOK());
});
</script>
<title>My Page</title>
</head>
<body>
<h1>My Page</h1>
</body>
</html>
При открытии файла index.html в браузере будет выполнен код функции sayOK() и выведено сообщение "ОК".
Для функции sayOK() нам необходимо будет написать тесты, которые будут выполняться через Mocha JS в браузере.
Для тестирования JavaScript-кода через Mocha JS в браузере необходимо
скачать и распаковать архив проекта "Mocha in Browser", который
расположен в GitHub по адресу
https://github.com/adomokos/mocha-in-browser/blob/master/mocha-in-browser.zip
Из распакованного архива вам потребуется взять всего 2 файла:
spec/lib/mocha.js - файл с кодом библиотеки Mocha JS.
spec/lib/browser/mocha.css - файл со стилями оформления для вывода результатов тестирования на страницу в браузере.
Файл mocha.js скопируйте в папку js. А файл mocha.css скопируйте в папку css.
После этого структура расположения папок и файлов в проекте будет выглядеть так:
/css/mocha.css
/js/mocha.js
/js/jquery.js
/js/index.js
/index.html
Далее в папке js создадим файл tests.js, к котором напишем тесты для функции sayOK() с применением Mocha JS.
Код файла tests.js
// Код функции запуска тестов
function runTests() {
mocha.setup('bdd'); // Устанавливаем тип тестов BDD
// Определяем функцию assert, которую будем использовать для тестов ниже.
function assert(expr, msg) {
if (!expr) throw new Error(msg || 'failed');
}
// Создаем набор тестов, использующих Mocha JS
describe("Say OK Tests", function() {
describe("Function must return OK", function() {
it("returns OK", function() {
var result = sayOK();
assert(result === 'OK');
});
});
describe("Function return OKI", function() {
it("returns OK", function() {
var result = sayOK() + 'I';
assert(result === 'OKI');
});
});
describe("Function return Not a Number", function() {
it("returns NaN", function() {
var result = sayOK();
assert(isNaN(result));
});
});
});
var runner = mocha.run(); // Запускаем наш набор тестов
}
$(document).ready(function(){
runTests(); // Запускаем наши тесты после загрузки страницы
});
Теперь структура нащего проекта будет выглядеть так:
/css/mocha.css
/js/mocha.js
/js/jquery.js
/js/index.js
/js/tests.js
/index.html
Далее создадим HTML-файл testrunner.html, который мы будем открывать в брузере для запуска тестов нашего кода.
Код файл testrunner.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/mocha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mocha.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/tests.js"></script>
<title>Test Runner</title>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
В файле testrunner.html производится загрузка файла библиотеки Mocha JS, файла index.js с кодом функции sayOK(), которую мы будем тестировать и набор тестов для этой функции в файле tests.js, которые автоматически запускаются после загрузки файла testrunner.html в браузере.
Результаты выполнения тестов помещаются в специальный блок <div id="mocha"></div> внутри тэга <body>.
Полная структура проекта в итоге будет выглядеть так:
/css/mocha.css
/js/mocha.js
/js/jquery.js
/js/index.js
/js/tests.js
/index.html
/testrunner.html
Теперь, если вместо определенной нами в файле tests.js функции
function assert(expr, msg) {
if (!expr) throw new Error(msg || 'failed');
}
мы захотим использовать для тестирования JavaScript-кода библиотеку Chai, то скопируем в папку js файл chai.js, вкоторый можно взять по адресу
chaijs.com/chai.js
В результате структура нашего проекта станет выглядеть так:
/css/mocha.css
/js/mocha.js
/js/chai.js
/js/jquery.js
/js/index.js
/js/tests.js
/index.html
/testrunner.html
В HTML-файле для запуска тестов testrunner.html добавим ссылку на файл chai.js
Итоговый код файла testrunner.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/mocha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mocha.js"></script>
<script type="text/javascript" src="js/chai.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/tests.js"></script>
<title>Test Runner</title>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
В файле tests.js удалим код функции assert() и заменим старые тесты на тесты, использующие код билиотеки Chai.
Итоговый код файла tests.js
// Код функции запуска тестов
function runTests() {
mocha.setup('bdd'); // Устанавливаем тип тестов BDD
// Создаем набор функций для тестирования с использованием библиотеки Chai.
var assert = chai.assert,
expect = chai.expect,
should = chai.should(); // Обратите внимание, что should должна быть иметь скобки ()
// Создаем набор тестов, использующих Mocha JS вместе с Chai
describe('Say OK Tests', function() {
describe('Function sayOK()', function() {
it('should work with assert', function() {
assert.equal(sayOK(), 'OK');
});
it('should work with expect', function() {
expect(sayOK()).to.equal('OK');
})
it('should work with should', function() {
sayOK().should.equal('OK');
});
});
});
var runner = mocha.run();
}
$(document).ready(function(){
runTests();
});
Таким образом для тестирования JavaScript-кода в браузере можно использовать Mocha JS вместе с Chai.
Комментариев нет:
Отправить комментарий