Wprowadzenie do testów jednostkowych AngularJS
Korzystając z AngularJS, możesz budować niesamowite interfejsy użytkownika, ale gdy wzrasta złożoność projektu, testy jednostkowe stają się ważną częścią. Aby poprawić jakość kodu, testowanie jest bardzo ważne. W testach jednostkowych testujemy funkcjonalność komponentu w izolacji, bez żadnych zewnętrznych zasobów, np. DB, plików itp. Testy jednostkowe są łatwe do napisania i szybsze w wykonaniu. W testach jednostkowych nie testujemy funkcjonalności aplikacji, stąd niska pewność. AngularJS składa się z różnych elementów składowych, takich jak usługi, komponenty, dyrektywy itp. Dla każdego z nich musimy napisać osobne przypadki testowe.
Podstawy testów jednostkowych
- Musimy przestrzegać czystych praktyk kodowania.
- Zastosuj te same zasady, co kod funkcjonalny.
- Przypadki testowe to mała funkcja / metoda o długości 10 linii lub mniejszej.
- Użyj właściwej konwencji nazewnictwa.
- Mają tylko jedną odpowiedzialność, tj. Przetestować tylko jedną rzecz.
Narzędzia testowe AngularJS
1) Jasmine
Framework programistyczny do testowania kodu javascript. Zapewnia funkcje, które pomagają w tworzeniu przypadków testowych. Ponieważ projekty stają się skomplikowane, a testy rosną, ważne jest, aby były one dobrze zorganizowane i udokumentowane, a Jasmine pomaga to osiągnąć. Aby użyć Jasmine z Karmą, użyj biegacza testowego karma-jaśmin.
2) Karma
Tester do pisania i uruchamiania testów jednostkowych podczas tworzenia aplikacji AngularJS. Zwiększa produktywność programistów. Odrodzi serwer WWW, który ładuje kod aplikacji i wykonuje przypadki testowe.
Jest to aplikacja NodeJS instalowana przez npm / przędzę. Można go skonfigurować do pracy z różnymi przeglądarkami, aby zapewnić działanie aplikacji we wszystkich dostępnych przeglądarkach.
3) Mocky kątowe
AngularJS zapewnia moduł ngMock, który daje nam próbne testy. Służą do wstrzykiwania i kpienia z usług AngularJS w testach jednostkowych.
Konfiguracja środowiska
- Zainstaluj NodeJS w swoim systemie. (https://nodejs.org/en/download/).
- Zainstaluj dowolne IDE (np. Kod VS, nawiasy itp.).
- Utwórz pusty folder (test jednostkowy $ mkdir) w swoim katalogu.
- Otwórz folder testów jednostkowych w swoim IDE. Następnie otwórz terminal (wiersz polecenia) w folderze testowania jednostki.
- W terminalu wykonaj kolejno następujące polecenia:
Utwórz pakiet.json:
npm initInstall Angular:
npm i angular –saveInstall Karma:
npm i -g karma –save -devInstall Jasmine:
npm i karma-jasmine jasmine-core –save -devInstall Angular mocks:
npm i angular-mocks –save -devZainstaluj przeglądarkę Karma Chrome:
npm i karma-chrome-launcher –save-dev - Utwórz dwa foldery o nazwie jako aplikacja i przetestuj w folderze testów jednostkowych.
- Utwórz karma.config.js. W terminalu podaj poniższe polecenie:
karma init
Zadaje ci zestaw pytań. Wybierz dla niego poniższe odpowiedzi.
-> Wybierz środowisko testowe jako Jasmine.
-> Wybierz Chrome jako przeglądarkę.
-> Podaj ścieżkę do plików js i spec (app / * js and tests / *. Spec.js)
-> Po kilku kolejnych pytaniach zostanie to zrobione.
-> Otwórz pliki karma.config.js oraz ścieżkę i wtyczki, jak pokazano poniżej. Poniżej znajduje się plik karma.config.js.
// Karma configuration
module.exports = function(config) (
config.set((
// base path is used to resolve all patterns
basePath: '',
plugins:('karma-jasmine', 'karma-chrome-launcher'),
frameworks: ('jasmine'),
// list of files to load in the browser
files: (
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*.spec.js'
),
// list of files to exclude
exclude: (),
preprocessors: (),
reporters: ('progress'),
// server port
port: 9876,
// enable / disable colors in output
colors: true,
logLevel: config.LOG_INFO,
// enable / disable watch mode for files
autoWatch: true,
browsers: ('Chrome'),
singleRun: false,
// how many browser should start simultaneous
concurrency: Infinity
))
)
Folder skonstruowany po wykonaniu tych kroków powinien wyglądać jak poniżej:
Przykład z implementacją
Testowanie filtra
Filtry to metody zmieniające dane w format czytelny dla człowieka. W tym module utworzymy filtr i zapiszemy testy jednostkowe dla tego filtra i sprawdzimy, czy działa on zgodnie z oczekiwaniami.
Kroki:
Utwórz plik o nazwie filter.js w folderze aplikacji.
filter.js
angular.module('MyApp', ())
.filter('compute', (function()(
return function(number)(
if(number<0)(
return 0;
)
return number+1;
)
)))
Teraz napiszmy przypadki testów jednostkowych, aby sprawdzić, czy filtr działa zgodnie z oczekiwaniami, czy nie.
Jasmine Framework Methods
- Describe (): Definiuje zestaw testów - grupę powiązanych testów.
- It (): Definiuje specyfikację lub test.
- Expect (): Pobiera rzeczywistą wartość jako parametr i jest łączony za pomocą funkcji matcher.
- Funkcja Matcher: przyjmuje oczekiwaną wartość jako parametry. Jest odpowiedzialny za zgłaszanie się do Jasmine, jeśli oczekiwanie jest prawdziwe lub fałszywe.
Przykład:
toBe („wartość”), toContain („wartość”), toEqual (12), toBeNull (), toBeTruthy (), toBeDefined ().
Utwórz plik o nazwie filter.spec.js w folderze testów.
filter.spec.js
//1. Describe the object type
describe('Filters', function () (
//2. Load the Angular App
beforeEach(module('MyApp'));
//3. Describe the object by name
describe('compute', function () (
var compute;
//4. Initialize the filter
beforeEach(inject(function ($filter) (
compute = $filter('compute', ());
)));
//5. Write the test in the it block along with expectations.
it('Should return 0 if input is negative', function () (
const result = compute(-1);
expect(result).toBe(0); //pass
));
it('Should increment the input if input is positive', function () (
const result = compute(1);
expect(result).toBe(2);//pass
//expect(compute(3)).toBe(5);//fail
));
));
));
Aby uruchomić test, podaj poniżej polecenie w terminalu folderu testów jednostkowych.
Karma start
lub możesz ustawić „karma start” w skrypcie testowym package.json i podać poniższe polecenie.
test npm
Spowoduje to otwarcie przeglądarki Chrome.
Wyjście w terminalu:
Testowanie kontrolera i usługi
AngularJS oddziela logikę od warstwy widoku, dzięki czemu kontrolery i usługi są łatwe do przetestowania.
Kroki:
1. Utwórz plik o nazwie controller.js w folderze aplikacji.
controller.js
var app = angular.module('Myapp', ())
app.service('calcService', (
function()(
function square(o1)(
return o1*o1;
)
return (square:square);
)
));
app.controller('MyController', function MyController($scope) (
$scope.title = "Hello MyController";
$scope.square = function() (
$scope.result = calcService.square($scope.number);
)
));
2. Utwórz plik o nazwie controller.spec.js w folderze testów.
controller.spec.js
describe('MyController', function() (
var controller, scope;
beforeEach(angular.mock.module('Myapp'));
beforeEach(angular.mock.inject(function($rootScope, $controller) (
scope = $rootScope.$new();
controller = $controller('MyController', ( $scope : scope ));
)));
it('Title should be defined', inject(function ($rootScope, $controller) (
expect(scope.title).toBeDefined();
)));
it('Title as Hello MyController', inject(function ($rootScope, $controller) (
expect(scope.title).toEqual('Hello MyController');
)));
));
describe('square', function()(
var calcService;
beforeEach(function()(
module('Myapp');
inject( function($injector)(
calcService = $injector.get('calcService');
));
));
it('should square the number', function()(
var result = calcService.square(3);
expect(result).toBe(9);
));
));
Wyjście w terminalu:
Wniosek
Aplikacje AngularJS składają się z modułów. Na poziomie aplikacji są to moduły AngularJS. Na poziomie modułu są to usługi, fabryki, komponenty, dyrektywy i filtry. Każdy z nich może komunikować się ze sobą za pośrednictwem zewnętrznego interfejsu. Pisanie testów jednostkowych dla aplikacji AngularJS przyspiesza proces debugowania i programowania.
Polecane artykuły
Jest to przewodnik po testowaniu jednostek AngularJS. Tutaj omawiamy wprowadzenie i podstawy testowania jednostkowego wraz z narzędziami testowymi AngularJS i przykład z implementacją. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -
- Kariera w AngularJS
- ReactJs vs AngularJs
- Aplikacja kątowa JS
- Kariera w DevOps