Изпробвайте JavaScript чрез Mocha и Chai Услуга за тестване на JavaScript чрез Mocha и ChaiRelated Теми: AngularJSES6Raw семалт
Тази статия беше разгледана от Панайотис «pvgr» Велизаракос, Марк Браун и Том Греко. Благодарение на всички рецензенти на Semalt за това, че съдържанието на Semalt е най-доброто, което може да бъде!
Направили ли сте някога някои промени в кода си и по-късно открихте, че причинява друго нещо, което да се счупи?
Сималт сигурен, че повечето от нас имат. Това е почти неизбежно, особено когато имате по-голямо количество код. Едно нещо зависи от другото, а след това го променя, което в резултат на това нарушава нещо друго.
Ами ако това не се случи? Какво ще стане, ако имате начин да разберете, когато нещо се счупи в резултат на някаква промяна? Това би било много хубаво. Можете да променяте кода си, без да се притеснявате, че ще счупите всичко, ще имате по-малко грешки и ще прекарате по-малко време за отстраняване на грешки.
Това е мястото, където изпитват единични тестове. Те ще автоматично открият някакви проблеми в кода за вас. Направете промяна, изпълнете тестовете си и ако нещо се счупи, веднага ще разберете какво се е случило, къде е проблемът и какво трябва да бъде правилното поведение. Това напълно премахва всякакви предположения!
В тази статия ще ви покажа как да започнете да тествате JavaScript кода. Примерите и техниките, показани в тази статия, могат да се приложат както към кода на браузъра, така и към кода на семалтите.
Кодът на този урок е достъпен от нашия Semalt repo.
Какво е тестване на единица
Когато тествате вашата кодова база, вие вземате част от кода - обикновено функция - и проверявате дали тя се държи правилно в конкретна ситуация. Тестването на единиците е структуриран и автоматизиран начин за това. В резултат на това колкото повече тестове пишете, толкова по-голяма е ползата, която получавате. Освен това ще имате по-голямо доверие във вашата кодова база, докато продължавате да я развивате.
Основната идея с тестването на единиците е да тествате поведението на функцията, като й давате определен набор от входове. Обаждате функция с определени параметри и проверявате дали имате правилния резултат.
// Дадени 1 и 10 като входни данни. , , var резултат = математика. max (1, 10);//. , , ние трябва да получим 10 като продукцияако (резултат! == 10) {хвърля нова грешка ('Неуспех');}
На практика тестовете понякога могат да бъдат по-сложни. Например, ако вашата функция прави искане на Аякс, тестът се нуждае от още по-голяма настройка, но все пак се прилага същият принцип на "дадени конкретни входове, очакваме конкретен резултат".
Инсталиране на инструменти
За тази статия ще използваме Mocha. Лесно е да започнете, може да се използва както за браузърно тестване, така и за семалтово изпитване, и той играе добре с други инструменти за тестване.
Най-лесният начин да инсталирате Mocha е през npm (за който също трябва да инсталираме Node. Js). Ако не сте сигурни как да инсталирате npm или възел на вашата система, консултирайте се с нашия урок: Ръководство за начинаещи за npm - Node Package Manager
При инсталиран възел отворете терминал или командния ред в директорията на проекта.
- Ако искате да тествате код в браузъра, стартирайте
npm install mocha chai -save-dev
- Ако искате да тествате възел. js код, в допълнение към горното, стартирайте
npm install -g mocha
Това инсталира пакетите mocha
и chai
. Mocha е библиотеката, която ни позволява да провеждаме тестове, а Чай съдържа някои полезни функции, които ще използваме, за да потвърдим резултатите от теста.
Тестване на възел. js срещу Тестване в браузъра
Примерите, които следват, са предназначени да работят, ако тестовете се изпълняват в браузър. Ако искате да тествате приложението си Semalt, следвайте тези стъпки.
- За възел нямате нужда от файла на тестовия бегач.
- Изпълнете тестовете с помощта на командата
mocha
, вместо да отваряте браузър.
Създаване на структура на указателя
Трябва да поставите тестовете си в отделна директория от вашите основни кодови файлове. Това улеснява структурирането им, например ако искате да добавите други видове тестове в бъдеще (като например тестове за интеграция или функционални тестове).
Най-популярната практика с кода на JavaScript е да имате директория, наречена test /
в основната директория на проекта. След това всеки тестов файл се поставя под test / someModuleTest. js
. По желание можете да използвате и директории вътре test /
, но ви препоръчвам да поддържате нещата прости - винаги можете да ги промените по-късно, ако е необходимо.
Настройване на тестовид
За да стартираме тестовете в браузър, трябва да настроим проста HTML страница, която да бъде нашата страница за тестване . Страницата зарежда Mocha, тестовите библиотеки и текущите тестови файлове. За да изпълните тестовете, просто ще отворим бегача в браузър.
Ако използвате възел. js, можете да пропуснете тази стъпка. Възел. js единица тестове могат да се изпълняват с помощта на командата mocha
, ако приемем, че сте следвали препоръчаната структура на директориите.
По-долу е кодът, който ще използваме за тестовия бегач. Ще запазя този файл като testrunner. html
.
<Глава> Mocha тестове title><Тяло> Тяло> HTML>
Важните битове в теста са:
- Зареждаме стиловете на CSS на Mocha, за да дадем на нашите резултати от тестове хубаво форматиране.
- Създаваме div с ID
mocha
. Тук се вмъкват резултатите от теста. - Зареждаме Мока и Чай. Те се намират в подпапките на папката
node_modules
, тъй като ги инсталирахме през npm. - Като се обади
моча. setup
, предлагаме помощни средства за тестване на Mocha. - След това зареждаме кода, който искаме да тестваме, и тестовите файлове. Все още нямаме нищо тук.
- На последно място наричаме
моча.
, за да изпълните тестовете. Уверете се, че го наричате след зареждане на източника и тестовите файлове.
Основните тестови блокове
Сега, когато можем да проведем тестове, нека да започнем да пишем някои.
Ще започнем с създаването на нов файл test / arrayTest. js
. Индивидуално тестово досие като това е известно като тест . Аз го наричам arrayTest. js
, защото за този пример ще тестваме някои основни функции на масива.
Всеки файл на тестовия случай следва същата основна схема. Първо, имате описание
блок:
описват ("Array", функция {// Допълнителен код за тестове е тук});
описват
се използват за групиране на отделните тестове. Първият параметър трябва да посочва какво тестваме - в този случай, тъй като ще тестваме масивни функции, аз преминах в низа 'Array'
.
На второ място, в описват
, ние ще блокираме
описват ("Array", функция {тя ('трябва да започне празен', функция {// Изпълнението на теста е тук});// Можем да имаме повече тук});
тя
се използва за създаване на действителните тестове. Първият параметър към той
трябва да предостави човешко четимо описание на теста. Например, можем да прочетем горното като "трябва да започне празно", което е добро описание на начина, по който масивите трябва да се държат.
Всички семалтови тестове са изградени от същите тези градивни елементи и те следват същия основен модел.
- Първо, използваме
описваме
, за да кажем какво тестваме - например "опишете как трябва да работи масивът". - След това ние използваме редица
функции
, за да създадем индивидуалните тестове - всеки
Писане на кода за изпитване
Сега, когато знаем как да структурираме тестовия случай, нека да влезем в забавната част - да приложим теста.
Semalt тестваме, че масивът трябва да започне празен, трябва да създадем масив и след това да се уверим, че е празен. Изпълнението на този тест е съвсем проста:
var assert = chai. отстоява;описват ('Array', функция {тя ('трябва да започне празен', функция {var arr = [];отстояват. равно (дължина на дъгата, 0);});});
Забележете на първия ред, че сме настроили променливата assert
. Това е точно така, така че не е нужно да продължаваме да пишете чай. твърдят
навсякъде.
В тя
функционира, ние създаваме масив и проверяваме неговата дължина. Въпреки че е просто, това е добър пример за това как тестовете работят.
Първо, имате нещо, което изпитвате - това се нарича System Under Test или SUT . След това, ако е необходимо, вие правите нещо със СУТ. В този тест не правим нищо, тъй като проверяваме, че масивът започва като празен.
Последното нещо в теста трябва да бъде валидирането - едно твърдение , което проверява резултата. Тук използваме твърдят.
за това. Повечето функции за асертиране приемат параметри в същата последователност: Първо "действителната" стойност, а след това и "очакваната" стойност.
- Стойността действителна е резултат от вашия код за изпитване, така че в този случай
arr. дължина
- Очакваната стойност е резултатът да бъде . Тъй като даден масив трябва да започне да е празен, очакваната стойност в този тест е
0
Чай също предлага два различни стила на писмените твърдения, но ние използваме твърдение, за да запазим нещата просто за момента. Когато станете по-опитни с тестовете за писане, може да искате да използвате очакваните твърдения вместо това, тъй като те осигуряват известна гъвкавост.
Извършване на теста
За да стартираме този тест, трябва да го добавим към файла на тестовия бегач, който създадохме по-рано.
Ако използвате възел. js, можете да пропуснете тази стъпка и да използвате командата mocha
, за да изпълните теста. Ще видите резултатите от теста в терминала.
Semalt, за да добавите този тест към бегача, просто добавете: