Урок за Карма: Тестване на модул от предния край с помощта на тестовия бегач на Карма

karma tutorial front end unit testing using karma test runner

Този урок обяснява как да настроите Karma и да автоматизирате тестване на преден модул с помощта на Karma, основни опции за конфигурация за файл Karma.conf.js и др .:

Този урок обяснява процедурата за автоматизиране на Unit Testing на предния край на софтуера, използвайки Karma и някои от свързаните с него инструменти.

Ще започнем с уеб приложения, разработени с помощта на JavaScript библиотека: ‘Jquery’ и JavaScript runtime: ‘NodeJS’; и по-късно ще разгледаме някои JavaScript рамки като AngularJS и ReactJS.

=>ПРЕВЪРТИ НАДОЛУза да видите целия списък с уроци по Карма

Какво ще научите:

• Списък с уроци по карма
• Преглед на уроците по Карма в тази поредица
• Какво е тестване на предни устройства?
• Какво е Karma Test Runner?
  • Как Кармата работи като Теструнър?
• Какво е NodeJS?
  • Какво е Node Package Manager (Npm)?
• Как да инсталирам Карма?
  • Общ преглед на опциите за конфигурация на файла Karma.conf.js
• Карма инит Въпроси
  • Други файлове на karma.conf.js
  • Стартиращи програми за браузър Karma
• Заключение
  • Препоръчително четене

Списък с уроци по карма

Урок # 1: Урок за Карма: Тестване на модул от предния край с помощта на тестовия бегач на Карма
Урок # 2: Урок за рамка за жасмин, включващ жасминова жаба с примери
Урок № 3: Примерен проект за тестване на модул от предния край с помощта на KARMA И JASMINE

Преглед на уроците по Карма в тази поредица

Какво е тестване на предни устройства?

Предната част на всяка софтуерна система е просто интерфейсът, където потребителят има достъп до всички функционалности, предоставени от системата. За да се гарантира най-доброто потребителско изживяване, е необходимо да се гарантира, че разработчиците от предния край са кодирали предния край, като се имат предвид всички изисквания на потребителя.

Единственият начин да се приложи това е да се напишат и изпълнят тестове върху кодовете на разработчика. Доставката трябва да се приеме като качествен преден код / ​​функция само когато всички тези резултати от тестове са в състояние „преминаване“.

Единичното тестване е вид метод за тестване на софтуер, при който се тества всяка отделна и независима част от изходния код, за да се определи дали е достатъчно добър за използване.

Когато ние извършете това модулно тестване на фронт-енда (от страна на клиента) на софтуера, то се нарича като фронт-енд модулно тестване. Обратното на тестването отпред е тестването отзад (от страна на сървъра).

как да отворите .json файлове

Тестването на предни устройства може да се извърши ръчно или автоматично. Автоматизираното тестване на предни устройства е в тенденция в наши дни, тъй като е по-ефективно и спестява време. Съществуват разнообразни инструменти, които се предлагат за тестване на модули от предния край на различни програмни платформи.

AngularJS и ReactJS са две популярни фреймворкови JavaScript рамки, въпреки че ReactJS е доста нов.

За да се извърши модулно тестване на приложение, се използват фронт-ендовете, изградени с тези фронтови рамки или дори тези, изградени без рамки, определени инструменти за тестване на автоматизация като Karma, mocha, Jasmine, vic, ензим и др.

Първо, ще се научим как да провеждаме тестване на модули отпред, като използваме Карма и Жасмин, а след това, по-късно, можем да разгледаме и другите инструменти.

Ще започнем с провеждането на модулни тестове от предния край, като използваме приспособления за предни части, изградени без нито една от JavaScript рамките за предни части. Като цяло ще разделим нашите знания от тази поредица на три урока.

В този първи урок ще се опитаме да разберем как се създава Карма, вторият урок ще обясни подробно Жасмин, накрая, в третия урок ще разгледаме практическото му приложение.

Какво е Karma Test Runner?

Karma е базиран на възел инструмент за тестване, който ви позволява да тествате вашите JavaScript кодове в множество реални браузъри. Инструмент, базиран на възел, е всеки инструмент, който се нуждае от инсталиран двигател Nodejs, за да може да се стартира и може да бъде достъпен (инсталиран) чрез мениджъра на пакети за възли (npm).

Karma е инструмент, който прави нашето тестово развитие бързо, забавно и лесно. Технически е наречен тест-бегач. Забележително е да споменем тук, че Кармата е разработена от екипа на Angular.

Как Кармата работи като Теструнър?

Като пробен бегач, Карма прави три важни неща:

• Той стартира уеб сървър и обслужва вашите JavaScript източници и тестови файлове на този сървър.
• Зарежда всички източници и тестови файлове в правилния ред.
• И накрая, той завърта браузърите, за да стартира тестовете.

Какво друго може да направи Карма?

Освен гореизброените функции на Карма, има и няколко други неща, които Карма може да бъде конфигурирана да прави. Например, за публикуване на покритие на тестов код гащеризони.io ; транспилирайте код от формат es6 в es5, обединявайки множество файлове в един файл и генерирайте изходни карти.

В следващите ни уроци ще видим как работят някои от тези неща.

Изисквания за започване на работа с Карма

За да започнете с Karma, трябва да имате разбиране за NodeJS и Node package manager.

Какво е NodeJS?

Nodejs решава блокиращата природа на асинхронните повиквания на JavaScript, т.е.когато асинхронната функция е достъпна в JavaScript, тя предотвратява изпълнението на останалите части на кода, докато асинхронното повикване не се върне. С NodeJS обаче могат да се извършват асинхронни неблокиращи извиквания на функции.

От техническа гледна точка за NodeJS може да се каже, че е асинхронно управлявано от събития JavaScript изпълнение, което прави изграждането на скалируеми мрежови приложения лесно и възможно.

Първи стъпки с NodeJS

Просто трябва да инсталирате рамката NodeJS. Всичко, което трябва да направите, е да посетите техния уебсайт и, въз основа на вашата операционна система, трябва да изтеглите инсталатора и да следвате инструкциите на техния сайт относно инсталирането му.

Какво е Node Package Manager (Npm)?

Мениджърът на пакети на възли (npm) е мениджър на пакети на JavaScript, който се използва за инсталиране на други предварително изградени базирани на възли приложения или модули, които може да искате да използвате повторно в собственото си приложение.

Npm се инсталира, когато инсталирате NodeJS, но npm се актуализира по-бързо от възела. Следователно може да се наложи да актуализирате npm в даден момент. За да инсталирате най-новата версия на npm, трябва да изпълните тази команда от вашия команден ред: npm инсталирайте npm @ най-новото -g

Горната команда показва, че искате от черупката на операционната система да изпълни приложението npm и приложението трябва да извърши инсталацията на пакета npm. @latest показва, че трябва да се инсталира най-новата версия на пакета, опцията -g показва, че пакетът трябва да се инсталира глобално.

Повече подробности за npm можете да намерите тук .

Има две важни неща, които трябва да бъдат споменати тук, т.е. инсталиране на пакет с опциите –save и –save-dev.

По време на тестовете всеки инсталиран пакет трябва да бъде инсталиран с помощта на опцията –save-dev, т.е. да се инструктира мениджърът на пакети да инсталира пакета като зависимост от разработката, а не като зависимост от проекта (когато използвам –save).

Зависимостта от разработката трябва да бъде избрана, тъй като този пакет не е необходим на приложението по време на производствената фаза, а е необходим само по време на фазата на разработване с цел осигуряване на качеството.

Как да инсталирам Карма?

За да започнете с Karma, трябва да създадете папка за проекта, за който ще напишете модулните тестове. Можете да го наречете като „basicUT“. Използвам Visual Studio Code като текстов редактор, затова ви препоръчвам да го изтеглите и инсталирате. Можете да го намерите тук .

Отворете прозореца на вградения терминал на кода на Visual, щракнете върху менюто „Преглед“ и след това изберете подменюто на интегрирания терминал.

В прозореца на терминала въведете „npminit“, както е показано на фигурата по-долу. Тази команда ви ръководи да настроите автоматично файла ‘package.json’, който всяко приложение, базирано на възел, трябва да има.

Файлът package.json съхранява информация за вашето приложение, като неговото име, номер на версия, автор, зависимости на приложението, зависимости за разработка, тестова команда или скрипт и скрипт, за да стартира приложението или да изгради приложението в изпълним формуляр.

Щракнете тук за повече подробности относно файла ‘package.json’.

Екранна снимка на инициализиране на файл package.json с помощта на npminit

Както е описано по-горе, за да инсталирате Karma, трябва само да изпълните командата npm инсталирайте Karma @ най-новата –save-dev . Надявам се, че сега можете да интерпретирате какво предполага тази команда.

Сега успешно инсталирахме Karma, кое е следващото нещо, което трябва да направите, за да използвате Karma за вашето тестване на предния модул?

Всичко, което трябва да направите, е да напишете конфигурационния файл за него и той обикновено се нарича Karma.conf.js за JavaScript. При CoffeeScript обаче е различно. Щракнете тук за да разгледате повече за конфигурационния файл на Karma.

Общ преглед на опциите за конфигурация на файла Karma.conf.js

Конфигурационният файл Karma.conf.js трябва да съдържа инструкциите за настройка, които Karma трябва да следва, за да изпълнява трите важни функции на Karma.

Този конфигурационен файл може да бъде създаден ръчно или автоматично с помощта на командата: ‘karma init’, която започва да показва различни въпроси, на които да отговорите, а Karma използва отговорите, които предоставяте, за да настрои конфигурационния файл.

Вече бихте открили, че стартирането на командата: ‘karma init’ дава грешка ' „Karma“ не се разпознава като вътрешна или външна операционна програма или команден файл ”.

Това е така, защото Karma е инсталирана локално, а не глобално в проекта, по който работите. Следователно черупката на вашата операционна система не може да намери приложението Karma в настройките на околната среда по пътя си, ако използвате Windows или във файла .bash_profile, ако използвате Mac.

най-добрият софтуер за отдалечен работен плот за Windows

За да коригираме тази грешка, трябва да инсталираме Karma глобално. Не само Karma, но пакетът, специално проектиран да позволи използването на Karma в командния ред, който е Karma-cli. Просто изпълнете командата, ′ Npm инсталиране -g karma-cli ” .

Сега стартирайте отново командата karma-init и можете да видите въпросите, както е показано на фигурата по-долу. Когато отговорите на всеки въпрос и натиснете бутона „ENTER“, ще се появи следващият въпрос.

Стартиране на командата Karma init в командния ред.

Таблицата по-долу ще ви даде списък с въпросите, тяхното значение заедно с това какъв трябва да бъде отговорът ви в контекста на този урок.

Карма инит Въпроси

В # 1) Коя рамка за тестване искате да използвате?

Обяснение: Рамката за тестване е пакет, който предоставя функциите и рутините, необходими за автоматизиране на процеса на кодиране на тестове за всеки софтуерен продукт на определен език. Например, jasmine и mocha тестват рамки за софтуерни пакети на JavaScript, Junit и JTest тестват рамки за Java, проверете това за повече информация.

Отговор: Появява се инструкция, която ви моли да използвате раздела, за да видите други налични рамки за тестване за базирано на възел приложение, но по подразбиране виждате жасмин, така че просто щракнете върху Enter.

В # 2) Искате ли да използвате Require.js?

Обяснение: Require.js е JavaScript файл и модул за зареждане. Може би се чудите: защо имате нужда от файл или модул за зареждане? Прочети това

Отговор: В кода ще пишем, не бих използвал require.js, така че просто отговорете не. въпросът е какво бихме използвали? За да можем да използваме операторите require, за да внесем външни файлове в друг файл, имаме нужда от модул за зареждане, така че бихме избрали Browserify. Повече подробности ще видите по-долу.

В # 3) Искате ли да заснемете някой браузър автоматично?

Обяснение: Спомнете си, че кармата е инструмент, който ви помага да тествате вашия интерфейс в различни браузъри, следователно този въпрос е предназначен за вас да изберете браузърите, които бихте искали да завъртите, когато стартирате теста с карма старт.

Отговор: За този урок изберете chrome, firefox и phantomjs. Сега въпросът е какво е PhantomJS? PhantomJS е безглавен уеб браузър, който е предназначен за тестване на уебсайт без глава, заснемане на екрана, автоматизация на страници и мрежово наблюдение, можете да видите подробности тук .

Друг въпрос, какво е уеб браузър без глава? Безглав уеб браузър е браузър без графичен потребителски интерфейс, кодовете се изпълняват в конзолна среда.

В # 4) Какво е местоположението на вашите източници и тестови файлове?

Обяснение: Този въпрос има за цел да разкрие пътя, където ще запишете файловете от предния край и тестовите файлове, които ще извършат Unit тестване върху тях.

Отговор: За този проект въведете public / js / *. Js за пътя на изходните файлове и test / * Spec.js за пътя на тестовите файлове. * Spec.js показва, че всички тестови файлове могат да се наричат ​​по всякакъв начин, но трябва да съдържат Spec в края с разширение на .js файл.

В # 5) Трябва ли да се изключи някой от файловете, включени в предишните модели?

Обяснение: Понякога може да има нужда определени файлове и тестови файлове да не се зареждат, този въпрос е предназначен за вас да посочите такива файлове, които не трябва да се зареждат в браузъра от Karma.

Отговор: Просто въведете празен низ, като натиснете enter. Видяхте ли изявлението „Можете да използвате глобусни модели, Например, “** / *. Swp”. ’. Глобалните модели се използват за задаване на набор от имена на файлове в Unix-подобна среда, използвайки заместващия знак.
В нашия случай public / js / *. Js означава всеки файл, наречен произволен набор от символи, както е посочено от (*) и има файловото разширение .js и се намира в пътя public / js. Прочетете още тук

В # 6) Искате ли Karma да гледа всички файлове и да провежда тестовете при промяна?

Обяснение: Когато бегач на задачи / тестове гледа вашите файлове, всичко означава просто, че всеки път, когато редактирате файловете по време на разработката, тестът / бегачът на задачи, презарежда файла или изпълнява отново функцията си във файла, без да идвате да питате ръчно го направете отново.

Отговор: Така че просто отговорете да.

Други файлове на karma.conf.js

# 1) basePath : Тази конфигурация носи името на всяка папка, която трябва да се използва за разрешаване на информацията за пътя, предоставена за тестови и изходни файлове.

# 2) препроцесори : Това носи името на програмните файлове, които трябва да се използват за обработка на изходни и тестови файлове, преди да се заредят в браузъра.

Защо е необходимо това?

С появата на ES6 стил на кодиране, който все още не е разбран от браузърите, има нужда да се транслира кодът от ES6 формат в ES5, който браузърът може да разбере, поради което може да се посочи препроцесор на babel за Karma, който да се използва за транпилиране на код от ES6 до ES5, преди да го заредите в браузъра.

Има и други приложения на препроцесора, E.g. публикуване на покритие на тестов код в coveralls.io, вж тук за повече информация.

# 3) репортери : Тази опция за конфигуриране определя пакета, който ще се използва за отчитане на резултатите от теста. Има няколко репортери за отчитане на тестовия код; E.g. покритие. Но по подразбиране е настроено да напредва. Имайте предвид, че това е масив, поради което можете да добавите и други репортери.

# 4) порт : Това указва порта, на който е завъртян браузърът.

# 5) цветове : Указва дали репортерите трябва да изготвят докладите с оцветяване.

# 6) logLevel : Това определя нивото на регистриране. По подразбиране е зададено на config.LOG_INFO, което означава, че се записва само информацията.

# 7) singleRun : Това указва дали Karma трябва да излезе след еднократно провеждане на теста. Ако е зададено на true, Karma изпълнява теста и излиза със статус 0 или 1 в зависимост от това дали тестът е неуспешен или преминат, иначе Karma не спира.

Тази конфигурация е необходима за целите на теста за непрекъсната интеграция, като се използват инструменти като TravisCI и CircleCI.

# 8) паралелност : Това указва колко браузъри трябва да стартират Karma едновременно. По подразбиране е зададено на безкрайност.

Щракнете тук за подробна информация относно опциите за конфигуриране на Karma.

Ако сте наблюдателен обучаем, тогава трябва да сте видели тези три реда.

Нека разгледаме това в раздела по-долу.

Стартиращи програми за браузър Karma

Karma-firefox-launcher, Karma-chrome-launcher и Karma-phantomjs-launcher обикновено могат да бъдат наречени като браузъри за стартиране на Karma.

Karma трябва да завърти тези независими приложения на браузъра, така че приложението на трета страна трябва да предостави интерфейс на Karma за изпълнение на командата на черупката, която завърта браузърите във всяка операционна система, на която Karma провежда тест.

По този начин те са стартиращи браузъри Karma съответно за firefox, chrome и phantomjs. Karma изскача тези изявления, за да ни информира за неспособността си да инсталира тези изисквания и след това иска да го инсталираме сами.

За да направим това, ще използваме диспечера на пакетите на възела и ще стартираме тези команди от командния ред: npm инсталирайте Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Всички ние трябва да имаме инсталирани браузъри chrome и firefox, като не са инсталирани phantomjs. Ако това е вярно, тогава трябва да го инсталирате, вижте тук за подробности и щракнете тук за ръководство за бърз старт.

Заключение

В този урок се опитахме да разберем какво представлява тестването на предния модул. Представихме и основен инструмент за тестване на модули отпред за софтуер на JavaScript, известен като Karma, който е инструмент, базиран на възли. Представихме и основните опции за конфигурация на файла Karma.conf.js и какво означават те.

Вземане

• Единичното тестване е вид метод за тестване на софтуер, при който се тества всяка отделна и независима част от изходния код, за да се определи дали е достатъчно добър за използване.
• Когато извършваме това модулно тестване на фронт-енда (от страна на клиента) на софтуера, то е известно като фронт-енд тестване на модули.
• Karma е базиран на възел инструмент за тестване, който ви позволява да тествате вашите JavaScript кодове в множество реални браузъри. Следователно той се нарича тестващ бегач.
• Nodejs е асинхронен JavaScript, изпълняван от събития, който прави изграждането на мащабируеми мрежови приложения лесно и възможно.
• Мениджърът на пакети на възли (npm) е мениджър на пакети на JavaScript, който се използва за инсталиране на други предварително изградени базирани на възли приложения или модули, които може да искате да използвате повторно в собственото си приложение.

Следващ урок

Карма сама по себе си не може да автоматизира модулно тестване на приложения на JavaScript, а също така трябва да работи с други инструменти за тестване като тестова рамка, която ще улесни писането на нашите тестови случаи.

В нашия предстоящ урок ще разгледаме Жасмин и пакета Jasmine-Jquery, който разширява функционалността на Jasmine, за да може да тества HTML устройства, които използват JavaScript библиотеката: Jquery.

Препоръчително четене

• 20 най-популярни инструмента за единично тестване през 2021 г.
• Ключ към успешното тестване на единици - Как разработчиците тестват собствения си код?
• ТОП 45 въпроса за интервю за JavaScript с подробни отговори
• Урок за AngularJS за абсолютно начинаещи (с Ръководство за инсталиране)
• Разлика между ъгловите версии: Angular Vs AngularJS
• Тестово покритие при тестване на софтуер (Съвети за максимално покритие на тестване)
• 48 най-добри въпроси и отговори за интервю за AngularJS (СПИСЪК 2021)
• Как да настроите рамката за тестване на Node.js: Урок за Node.js