понедельник, 20 мая 2013 г.

Тестирование JavaScript-код через Mocha JS и Chai в браузере

Представим, что ваш проект имеет следующую структуру расположения папок и файлов:

/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.

Комментариев нет:

Отправить комментарий