Samouczek Karma: Testowanie jednostek front-end za pomocą narzędzia Karma Test Runner

karma tutorial front end unit testing using karma test runner

Ten samouczek wyjaśnia, jak skonfigurować Karma i zautomatyzować testowanie jednostek front-end za pomocą Karma, podstawowe opcje konfiguracji dla pliku Karma.conf.js itp .:

Ten samouczek wyjaśnia procedurę automatyzacji testów jednostkowych front-endu oprogramowania przy użyciu Karmy i niektórych powiązanych z nią narzędzi.

Zaczniemy od aplikacji internetowych opracowanych przy użyciu biblioteki JavaScript: „Jquery” i środowisko wykonawcze JavaScript: „NodeJS”; a później przyjrzymy się niektórym frameworkom JavaScript, takim jak AngularJS i ReactJS.

=>PRZEWIŃ W DÓŁaby zobaczyć całą listę samouczków Karma

Czego się nauczysz:

• Lista samouczków Karma
• Przegląd samouczków Karma z tej serii
• Co to jest testowanie jednostkowe front-end?
• Co to jest Biegacz Testów Karmy?
  • Jak działa Karma jako tester?
• Co to jest NodeJS?
  • Co to jest menedżer pakietów węzłów (Npm)?
• Jak zainstalować Karmę?
  • Przegląd opcji konfiguracji pliku Karma.conf.js
• Pytania dotyczące karmy init
  • Inna zawartość pliku karma.conf.js
  • Wyrzutnie przeglądarki Karma
• Wniosek
  • rekomendowane lektury

Lista samouczków Karma

Samouczek nr 1: Samouczek Karma: Testowanie jednostek front-end za pomocą narzędzia Karma Test Runner
Samouczek nr 2: Jasmine Framework Tutorial, w tym Jasmine Jquery z przykładami
Samouczek nr 3: Przykładowy projekt dotyczący testów jednostkowych front-end z wykorzystaniem KARMA i JAŚMIN

Przegląd samouczków Karma z tej serii

Co to jest testowanie jednostkowe front-end?

Front-end każdego systemu oprogramowania to po prostu interfejs, w którym użytkownik uzyskuje dostęp do wszystkich funkcji oferowanych przez system. Aby zagwarantować najlepsze wrażenia użytkownika, należy upewnić się, że programiści front-endu zakodowali front-end, pamiętając o wszystkich wymaganiach użytkownika.

Jedynym sposobem na wymuszenie tego jest napisanie i wykonanie testów na kodach programisty. Element dostarczany powinien zostać zaakceptowany jako wysokiej jakości kod / funkcja front-endu tylko wtedy, gdy wszystkie te testy mają status „pozytywny”.

Testowanie jednostkowe to rodzaj metody testowania oprogramowania, w której każda indywidualna i niezależna część kodu źródłowego jest testowana w celu ustalenia, czy jest wystarczająco dobra do użycia.

Kiedy my wykonać te testy jednostkowe na front-endzie (po stronie klienta) oprogramowania, nazywa się to testowaniem jednostkowym front-end. Przeciwieństwem testów frontendowych są testy back-end (po stronie serwera).

Testowanie jednostkowe front-end może być przeprowadzane ręcznie lub automatycznie. Zautomatyzowane testy jednostkowe front-end są obecnie popularne, ponieważ są bardziej efektywne i oszczędzają czas. Istnieją różne narzędzia, które są dostępne do testów jednostkowych front-end na różnych platformach programistycznych.

AngularJS i ReactJS to dwa popularne front-endowe frameworki JavaScript, chociaż ReactJS jest całkiem nowy.

Aby przeprowadzić testy jednostkowe aplikacji, front-endy zbudowane z tych front-endów lub nawet te zbudowane bez frameworków, używane są niektóre narzędzia do testowania automatyzacji, takie jak Karma, mocha, Jasmine, jest, enzyme itp.

Najpierw uczylibyśmy się, jak przeprowadzać testy jednostkowe front-end przy użyciu Karmy i Jasmine, a później możemy również przyjrzeć się innym narzędziom.

Zaczniemy od uruchomienia testów jednostkowych front-endu przy użyciu urządzeń dla front-endów zbudowanych bez żadnego z frameworków JavaScript dla front-endów. W sumie podzielimy naszą wiedzę z tej serii na trzy samouczki.

W tym pierwszym samouczku postaramy się zrozumieć, w jaki sposób przygotowywana jest Karma, drugi samouczek szczegółowo wyjaśni Jasmine, a na koniec, w trzecim samouczku, przyjrzymy się jej praktycznemu zastosowaniu.

Co to jest Biegacz Testów Karmy?

pierwsze wyszukiwanie w głębi c ++

Karma to oparte na węzłach narzędzie testowe, które umożliwia testowanie kodów JavaScript w wielu prawdziwych przeglądarkach. Narzędzie oparte na węzłach to dowolne narzędzie, które wymaga zainstalowania silnika Nodejs, aby mogło działać i jest dostępne (instalowane) za pośrednictwem menedżera pakietów węzłów (npm).

Karma to narzędzie, które sprawia, że ​​nasz programowanie oparte na testach jest szybkie, przyjemne i łatwe. Jest technicznie określany jako biegacz testowy. Warto tutaj wspomnieć, że Karma została opracowana przez zespół Angular.

Jak działa Karma jako tester?

Jako biegacz testowy Karma robi trzy ważne rzeczy:

• Uruchamia serwer WWW i udostępnia pliki źródłowe JavaScript oraz pliki testowe na tym serwerze.
• Ładuje wszystkie pliki źródłowe i testowe we właściwej kolejności.
• Wreszcie, uruchamia przeglądarki, aby uruchomić testy.

Co jeszcze może zrobić Karma?

Oprócz wyżej wymienionych funkcji Karmy jest jeszcze kilka innych rzeczy, do których Karma można skonfigurować. Na przykład, opublikować pokrycie testów kodu kombinezony.io ; transpile kodu z formatu es6 do es5, łączenie wielu plików w jeden plik i generowanie map źródłowych.

W naszych kolejnych samouczkach zobaczymy, jak działają niektóre z tych rzeczy.

Wymagania dotyczące rozpoczęcia pracy z karmą

Aby rozpocząć pracę z Karmą, musisz znać NodeJS i menedżera pakietów Node.

Co to jest NodeJS?

Nodejs rozwiązuje blokującą naturę wywołań asynchronicznych JavaScript, tj. Gdy dostęp do funkcji asynchronicznej jest uzyskiwany w JavaScript, zapobiega uruchamianiu innych części kodu do czasu powrotu wywołania asynchronicznego. Jednak w przypadku NodeJS można wykonywać asynchroniczne nieblokujące wywołania funkcji.

Z technicznego punktu widzenia NodeJS można powiedzieć, że jest asynchronicznym, sterowanym zdarzeniami środowiskiem wykonawczym JavaScript, który umożliwia łatwe i możliwe tworzenie skalowalnych aplikacji sieciowych.

Pierwsze kroki z NodeJS

Wystarczy zainstalować framework NodeJS. Wszystko, co musisz zrobić, to odwiedzić ich stronie internetowej i, w oparciu o swój system operacyjny, musisz pobrać instalator i postępować zgodnie z instrukcjami w ich witrynie, dotyczącymi jego instalacji.

Co to jest menedżer pakietów węzłów (Npm)?

Menedżer pakietów węzłów (npm) to menedżer pakietów JavaScript używany do instalowania innych gotowych aplikacji lub modułów opartych na węzłach, których możesz chcieć ponownie użyć we własnej aplikacji.

Npm jest instalowany podczas instalowania NodeJS, ale npm jest aktualizowany szybciej niż węzeł. Dlatego w pewnym momencie może zaistnieć potrzeba zaktualizowania swojego npm. Aby zainstalować najnowszą wersję npm, musisz uruchomić to polecenie z linii poleceń: npm install npm@latest -g

Powyższe polecenie wskazuje, że prosisz powłokę systemu operacyjnego o wykonanie aplikacji npm, a aplikacja powinna przeprowadzić instalację pakietu npm. @latest wskazuje, że należy zainstalować najnowszą wersję pakietu, opcja -g wskazuje, że pakiet powinien być zainstalowany globalnie.

Więcej szczegółów na temat npm można znaleźć tutaj .

Należy tu wspomnieć o dwóch ważnych rzeczach, tj. Instalowaniu pakietu z opcją –save i –save-dev.

Podczas testów każdy zainstalowany pakiet powinien być instalowany przy użyciu opcji –save-dev, tj. Poinstruować menedżera pakietów, aby zainstalował pakiet jako zależność programistyczną, a nie jako zależność projektu (gdy używam –save).

Należy wybrać zależność od rozwoju, ponieważ ten pakiet nie jest potrzebny aplikacji na etapie produkcji, ale jest wymagany tylko w fazie rozwoju do celów zapewnienia jakości.

Jak zainstalować Karmę?

Aby rozpocząć pracę z Karmą, musisz utworzyć folder dla projektu, dla którego masz zamiar napisać testy jednostkowe. Możesz go nazwać „basicUT”. Używam Visual Studio Code jako edytora tekstu, dlatego też polecam Ci go pobrać i zainstalować. Możesz to znaleźć tutaj .

Otwórz okno terminala z wbudowanym kodem programu Visual studio, kliknij menu „Widok”, a następnie wybierz podmenu zintegrowanego terminala.

W oknie terminala wpisz „npminit”, jak pokazano na poniższym rysunku. To polecenie prowadzi użytkownika do automatycznego skonfigurowania pliku „package.json”, który musi mieć każda aplikacja oparta na węzłach.

Plik package.json przechowuje informacje o aplikacji, takie jak nazwa, numer wersji, autor, zależności aplikacji, zależności programistyczne, polecenie testowe lub skrypt i skrypt, aby uruchomić aplikację lub zbudować aplikację w formie, którą można uruchomić.

Kliknij tutaj aby uzyskać więcej informacji na temat pliku „package.json”.

Zrzut ekranu przedstawiający inicjowanie pliku package.json przy użyciu npminit

Jak opisano powyżej, aby zainstalować Karmę, wystarczy uruchomić polecenie npm zainstaluj Karma @ latest –save-dev . Mam nadzieję, że możesz teraz zinterpretować, co oznacza to polecenie.

Teraz, pomyślnie zainstalowaliśmy Karmę, jaka jest następna rzecz, którą musisz zrobić, aby używać Karmy do testowania jednostek front-end?

Wszystko, co musisz zrobić, to napisać dla niego plik konfiguracyjny, a plik zwykle nosi nazwę Karma.conf.js dla JavaScript. Jednak w przypadku CoffeeScript jest inaczej. Kliknij tutaj aby dowiedzieć się więcej o pliku konfiguracyjnym Karma.

Przegląd opcji konfiguracji pliku Karma.conf.js

Plik konfiguracyjny Karma.conf.js powinien zawierać instrukcje konfiguracyjne, których Karma musi przestrzegać, aby wykonać trzy ważne funkcje Karmy.

Ten plik konfiguracyjny można utworzyć ręcznie lub automatycznie za pomocą polecenia: „karma init”, które zaczyna wyświetlać różne pytania, na które trzeba odpowiedzieć, a Karma używa odpowiedzi, które podałeś, aby skonfigurować plik konfiguracyjny.

Już byś odkrył, że wykonanie polecenia: „karma init” powoduje błąd ' „Karma” nie jest rozpoznawana jako program lub plik wsadowy, który można obsługiwać za pomocą poleceń wewnętrznych lub zewnętrznych ”.

Dzieje się tak, ponieważ Karma została zainstalowana lokalnie, a nie globalnie w projekcie, nad którym pracujesz. Dlatego powłoka systemu operacyjnego nie może znaleźć aplikacji Karma w ustawieniach środowiska ścieżki, jeśli używasz systemu Windows lub w pliku .bash_profile, jeśli używasz komputera Mac.

Aby naprawić ten błąd, musimy zainstalować Karmę globalnie. Nie tylko Karma, ale pakiet specjalnie zaprojektowany, aby umożliwić użycie Karmy w linii poleceń, którym jest Karma-cli. Po prostu uruchom polecenie, ‘npm install -g karma-cli’ .

Teraz ponownie uruchom polecenie karma-init i zobaczysz pytania, jak pokazano na poniższym rysunku. Gdy odpowiesz na każde pytanie i naciśniesz klawisz „ENTER”, pojawi się następne pytanie.

Uruchomienie polecenia Karma init w wierszu poleceń.

Poniższa tabela zawiera listę pytań, ich znaczenie wraz z odpowiedzią w kontekście tego samouczka.

Pytania dotyczące karmy init

P # 1) Z jakiego frameworka testowego chcesz skorzystać?

Wyjaśnienie: Framework testowy to pakiet, który udostępnia funkcje i procedury potrzebne do automatyzacji procesu kodowania testów dla dowolnego produktu oprogramowania w określonym języku. Na przykład, jaśmin i mokka testują frameworki dla pakietów oprogramowania JavaScript, Junit i JTest testują frameworki dla Javy, sprawdź to po więcej szczegółów.

przykłady testów białoskrzynkowych

Odpowiedź: Pojawia się instrukcja prosząca o użycie karty, aby wyświetlić inne dostępne ramy testowe dla aplikacji opartej na węzłach, ale domyślnie widzisz jaśmin, więc po prostu kliknij Enter.

Pytanie 2) Czy chcesz używać Require.js?

Wyjaśnienie: Require.js to plik JavaScript i moduł ładujący. Możesz się zastanawiać: dlaczego potrzebujesz programu ładującego pliki lub moduły? Czytać to

Odpowiedź: W kodzie, który będziemy pisać, nie użyłbym require.js, więc po prostu odpowiedz „nie”. pytanie brzmi, czego byśmy użyli? Aby móc użyć instrukcji require w celu przeniesienia plików zewnętrznych do innego pliku, potrzebujemy modułu ładującego, więc zdecydowaliśmy się na Browserify. Więcej szczegółów znajdziesz poniżej.

Pytanie 3) Czy chcesz automatycznie przechwytywać przeglądarki?

Wyjaśnienie: Przypomnij sobie, że karma to narzędzie, które pomaga przetestować front-end w różnych przeglądarkach, dlatego to pytanie ma na celu wybranie przeglądarek, które chciałbyś uruchomić za każdym razem, gdy uruchamiasz test z uruchomieniem karmy.

Odpowiedź: Na potrzeby tej lekcji wybierz chrome, firefox i phantomjs. Teraz pytanie brzmi, co to jest PhantomJS? PhantomJS to bezgłowa przeglądarka internetowa, która jest przeznaczona do bezgłowego testowania witryn, przechwytywania ekranu, automatyzacji stron i monitorowania sieci, możesz zobaczyć szczegóły tutaj .

Kolejne pytanie, czym jest bezgłowa przeglądarka internetowa? Bezgłowa przeglądarka internetowa to przeglądarka bez graficznego interfejsu użytkownika, kody są wykonywane w środowisku podobnym do konsoli.

P # 4) Jaka jest lokalizacja plików źródłowych i testowych?

Wyjaśnienie: To pytanie ma na celu ujawnienie ścieżki, w której zapiszesz pliki frontonu i pliki testowe, które będą wykonywać na nich testy jednostkowe.

Odpowiedź: W przypadku tego projektu wprowadź public / js / *. Js jako ścieżkę do plików źródłowych i test / * Spec.js jako ścieżkę do plików testowych. Znak * Spec.js wskazuje, że wszystkie pliki testowe mogą mieć dowolną nazwę, ale muszą zawierać na końcu Spec z rozszerzeniem .js.

P # 5) Czy którykolwiek z plików zawartych w poprzednich wzorcach powinien być wykluczony?

Wyjaśnienie: Czasami może zaistnieć potrzeba, aby niektóre pliki źródłowe i pliki testowe nie były ładowane, to pytanie jest przeznaczone dla Ciebie, aby określić takie pliki, które nie powinny być ładowane w przeglądarce przez firmę Karma.

Odpowiedź: Po prostu wprowadź pusty ciąg, naciskając klawisz Enter. Czy widziałeś stwierdzenie „Możesz używać wzorców glob, Na przykład, „** / *. Swp”. ”. Wzorce glob są używane do określenia zestawu nazw plików w środowisku uniksopodobnym za pomocą znaku wieloznacznego.
W naszym przypadku public / js / *. Js oznacza dowolny plik o dowolnym zestawie znaków wskazanym przez (*) i ma rozszerzenie .js i znajduje się w ścieżce public / js. Czytaj więcej tutaj

Pytanie 6) Czy chcesz, aby Karma obejrzała wszystkie pliki i przeprowadzała testy po zmianie?

Wyjaśnienie: Gdy programista zadań / testów ogląda twoje pliki, oznacza to po prostu, że za każdym razem, gdy edytujesz pliki podczas programowania, test / program uruchamiający zadania ponownie ładuje plik lub ponownie wykonuje swoją funkcję w pliku, bez konieczności ręcznego pytania zrobić to ponownie.

Odpowiedź: Po prostu odpowiedz tak.

co to jest test alfa na przykładzie

Inna zawartość pliku karma.conf.js

# 1) basePath : Ta konfiguracja nosi nazwę dowolnego folderu, którego należy użyć do rozpoznania informacji o ścieżce dostarczonych dla plików testowych i źródłowych.

# 2) preprocesory : Nosi nazwę plików programu, które powinny być używane do przetwarzania plików źródłowych i testowych przed załadowaniem ich do przeglądarki.

Dlaczego jest to potrzebne?

Wraz z pojawieniem się stylu kodowania ES6, który nie jest jeszcze zrozumiały dla przeglądarek, istnieje potrzeba przetransponowania kodu z formatu ES6 do ES5, który przeglądarka może zrozumieć, stąd preprocesor babel dla Karma może zostać określony do użycia do transpozycji kod z ES6 do ES5 przed załadowaniem go do przeglądarki.

Istnieją inne zastosowania preprocesora, Na przykład. publikowanie pokrycia testów kodu na stronie coveralls.io, zobacz tutaj po więcej szczegółów.

# 3) reporterzy : Ta opcja konfiguracji określa pakiet, który ma być używany do raportowania wyników testów. Istnieje kilku reporterów zgłaszających pokrycie testów kodu; Na przykład. pokrycie. Ale domyślnie jest ustawiony na postęp. Zauważ, że jest to tablica, dlatego możesz dodać również innych reporterów.

# 4) port : Określa port, na którym uruchamiana jest przeglądarka.

# 5) kolory : Określa, czy reporterzy powinni tworzyć raporty z kolorami.

# 6) logLevel : Określa poziom rejestrowania. Domyślnie jest ustawiony na config.LOG_INFO, co oznacza, że ​​rejestrowane są tylko informacje.

# 7) singleRun : Określa, czy Karma ma wyjść po jednokrotnym uruchomieniu testu. Jeśli ma wartość true, Karma uruchamia test i wychodzi ze stanem 0 lub 1 w zależności od tego, czy test się nie powiódł, czy też przeszedł, w przeciwnym razie Karma nie zatrzymuje się.

Ta konfiguracja jest wymagana do celów testów ciągłej integracji przy użyciu narzędzi takich jak TravisCI i CircleCI.

# 8) współbieżność : Określa, ile przeglądarek Karma powinno uruchamiać się w tym samym czasie. Domyślnie jest ustawiony na nieskończoność.

Kliknij tutaj aby uzyskać szczegółowe informacje na temat opcji konfiguracyjnych Karma.

Jeśli jesteś uważnym uczniem, to na pewno widziałeś te trzy kwestie.

Przyjrzyjmy się temu w poniższej sekcji.

Wyrzutnie przeglądarki Karma

Karma-firefox-launcher, Karma-chrome-launcher i Karma-phantomjs-launcher można ogólnie określić jako programy uruchamiające przeglądarkę Karmy.

Karma musi uruchomić te niezależne aplikacje przeglądarki, więc aplikacja innej firmy musi zapewnić interfejs Karmie, aby uruchomić polecenie powłoki, które włącza przeglądarki w dowolnym systemie operacyjnym, w którym Karma przeprowadza test.

Są to zatem programy uruchamiające przeglądarki Karma odpowiednio dla firefox, chrome i phantomjs. Karma wyświetla te oświadczenia, aby poinformować nas o niemożności zainstalowania tych wymagań, a następnie prosi nas o samodzielną instalację ręcznie.

Aby to zrobić, użyjemy menedżera pakietów węzłów i uruchomimy następujące polecenia z wiersza poleceń: npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Każdy z nas musi mieć zainstalowane przeglądarki Chrome i Firefox, a nie zainstalowane phantomjs. Jeśli to prawda, musisz ją zainstalować, zobacz tutaj po szczegóły i kliknij tutaj aby uzyskać przewodnik szybkiego startu.

Wniosek

W tym samouczku staraliśmy się zrozumieć, o co chodzi w testowaniu jednostkowym front-end. Wprowadziliśmy również główne narzędzie do testowania jednostek front-end dla oprogramowania JavaScript, znane jako Karma, które jest narzędziem opartym na węzłach. Przedstawiliśmy również podstawowe opcje konfiguracyjne dla pliku Karma.conf.js i wszystko, co one implikują.

Dania na wynos

• Testowanie jednostkowe to rodzaj metody testowania oprogramowania, w której każda indywidualna i niezależna część kodu źródłowego jest testowana w celu ustalenia, czy jest wystarczająco dobra do użycia.
• Kiedy wykonujemy te testy jednostkowe po stronie front-end (po stronie klienta) oprogramowania, nazywa się to testowaniem jednostkowym front-end.
• Karma to oparte na węzłach narzędzie testowe, które umożliwia testowanie kodów JavaScript w wielu prawdziwych przeglądarkach. Dlatego nazywa się go testerem.
• Nodejs to asynchroniczny, sterowany zdarzeniami skrypt JavaScript, który ułatwia i umożliwia tworzenie skalowalnych aplikacji sieciowych.
• Menedżer pakietów węzłów (npm) to menedżer pakietów JavaScript używany do instalowania innych gotowych aplikacji lub modułów opartych na węzłach, których możesz chcieć ponownie użyć we własnej aplikacji.

Następny samouczek

Sama Karma nie może zautomatyzować testów jednostkowych aplikacji JavaScript, musi również współpracować z innymi narzędziami testującymi, takimi jak framework testowy, który ułatwi pisanie naszych przypadków testowych.

W naszym nadchodzącym samouczku zajmiemy się Jasmine i pakietem Jasmine-Jquery, który rozszerza funkcjonalność Jasmine o możliwość testowania poprawek HTML korzystających z biblioteki JavaScript: Jquery.

rekomendowane lektury

• 20 najpopularniejszych narzędzi do testowania jednostek w 2021 r
• Klucz do udanego testowania jednostkowego - jak programiści testują swój własny kod?
• TOP 45 JavaScript pytań do wywiadów ze szczegółowymi odpowiedziami
• Samouczek AngularJS dla początkujących (z instrukcją instalacji)
• Różnica między wersjami kątowymi: Angular kontra AngularJS
• Pokrycie testów w testowaniu oprogramowania (wskazówki dotyczące maksymalizacji pokrycia testowego)
• 48 najważniejszych pytań i odpowiedzi do wywiadu AngularJS (LISTA 2021)
• Jak skonfigurować środowisko testowe Node.js: samouczek Node.js.