< Angular

Angular - End-to-end teszt

Szerző: Sallai András

Copyright © Sallai András, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Egység tesztek

A Karma és a Jasmine a JavaScript kódra összpontosítanak, amit egy elszigetelt tesztkörnyezetben futtatnak. Szeretnénk olyanokat is tesztelni, hogy egy kattintásra megtörténik-e valami.

Ezt általában kézi teszteléssel végezzük. Egy dedikált tesztelő egy teszt terv szerint végigjárja a teszteket.

A kézi tesztek lassúak és nem mindig ismételhetők meg.

Olyan automatizált tesztekre van szükségünk, ami a felhasználói oldalról közelíti meg az alkalmazást. Ezeket nevezzük End-to-end vagy E2E teszteknek.

Az E2E tesztek gyakran lassúk és hibásak, de ezek tájékoztatnak minket arról, hogy valóban működi-e az alkalmazás.

Meghatározott környezet

Az adatbázist előre elkészített hamis adatokkal töltjük fel, amit utána törlünk, azaz az adatbázist kezdeti állapotba hozzuk.

A végpontok közötti tesztek működése

A teszt utánozza a felhasználói kommunikációt az alkalmazással, másként szólva, szimulálja a felhasználói műveleteket.

Például a teszt kitölt egy űrlapot és kattint a küldés gombra.

E2E keretrendszerek

Kétféle van:

WebDriver-t használ

nem használ WebDriver-t

WebDriver

A WebDriver lehetővé teszik a böngésző távoli irányítását. Ilyen a Selenium böngésző automatizáló projekt, amit a W3C fejleszt.

Néhány WebDriver parancs:

navigáljon egy URL-re

Kattintson egy elemre

JavaScript kód végrehajtása

Billentyűzet bevitel küldése egy űrlapelembe

Egy elemről információkérés

A tesztek akár több böngészőben egyszerre is futtathatók.

Az Angular

A 12-es verzióig az Angular a Protactort használta alapértelmezett teljes körű tesztelő keretrendszernek. A 12 verziótól azonban elavult. A 12 verziótól nincs alapértelmezetten megadott keretrendszer. Telepítenünk kell egyet.

A következőket használhatjuk:

Cypress

Nightwatch

WebdriverIO

Ha futtatjuk az ng e2e parancsot és még nincs telepítve egyik sem:

ng e2e
Cannot find "e2e" target for the specified project.
You should add a package that implements end-to-end testing capabilities.
For example:
Cypress: ng add @cypress/schematic
Nightwatch: ng add @nightwatch/schematics
WebdriverIO: ng add @wdio/schematics
More options will be added to the list as they become available.

A ng e2e röviden: ng e.

A Cypress

Nyílt forráskódú tesztelő keretrendszer. Nem használja a WebDrivert, egyéni eszközöket használ. Egy NodeJS alkalmazás elindítja a böngészőt. A böngésző ugyan nem vezérelhető távolról, de tesztek közvetlenül a böngészőben futnak.

A Cypress hasonlít ugyan a Jasmin-ra, de részleteiben mégis különbözik.

A Cypress a Firefoxot és a Chromium alapú böngészőket támogatja, mint a Google Chrome és a Microsoft Edge. Kísérletileg támogatja a WebKit és a Safari által használt motort. A régi Edge és Internet Explorer nem támogatott.

Telepítés

ng add @cypress/schematic

Mi történik:

A package.json fájlba beíródik a függőség.

Létre jön a cypress.config.ts fájl.

Módosítja az angular.json fájlt, az belül az ng run részt.

Létre jön egy cypress alkönyvtár.

A telepítő megkérdezi, hogy szeretnék az ng e2e paranccsal indítani a Cypress parancsot. Válaszóljunk „Yes”-szel. Ha 12 előtti Angular verziónk van, és van Protactor, akkor lehet jó válasz a „No”, így elérhetővé válik a Protactor továbbra is.

ng add @cypress/schematic
ℹ Using package manager: npm
✔ Found compatible package version: @cypress/schematic@2.4.0.
✔ Package information loaded.
The package @cypress/schematic@2.4.0 will be installed and executed.
Would you like to proceed? (Y/n)
✔ Package successfully installed.
? Would you like the default `ng e2e` command to use Cypress? [ Protractor to Cy
press Migration Guide: https://on.cypress.io/protractor-to-cypress?cli=true ] (Y
/n)
? Would you like to add Cypress component testing? This will add all files need
ed for Cypress component testing. (Y/n)
CREATE cypress.config.ts (288 bytes)
CREATE cypress/tsconfig.json (139 bytes)
CREATE cypress/e2e/spec.cy.ts (143 bytes)
CREATE cypress/fixtures/example.json (85 bytes)
CREATE cypress/support/commands.ts (1377 bytes)
CREATE cypress/support/e2e.ts (649 bytes)
CREATE cypress/support/component-index.html (290 bytes)
CREATE cypress/support/component.ts (1123 bytes)
UPDATE package.json (1220 bytes)
UPDATE angular.json (4451 bytes)
✔ Packages installed successfully.

A cypress könyvtár

app01/
|-cypress/
|-e2e/
|-fixtures/
|-support/
`-tsconfig.json

e2e/ - A tesztek helye

fixtures/ - ide írjuk a tesztadatokat

support/ - egyéni parancsok, teszt segédletek

tsconfig.json - TypeScript beállítások ehhez a könyvtárhoz

A tesztek az e2e könyvtárban találhatók .cy.ts kiterjesztéssel.

Alrendszerek

A Cypress a Mocha és Chai rendszerekre épül. A Mocha és a Chai népszerű kombináció. Nagyjából ugyanazt csinálják mint a Jasmine, gazdagabb funkciókkal.

Ha használtunk már Jasmine-t, akkor láthatjuk hasonló teszteket kell írnunk.

describe('', () => {})

Egy fájl általában egyetlen describe blokkot tartalmaz, ami újabb beágyazott describe blokkokat tartalmazhat.

A describe blokkon belül itt is használhatók a következő blokkok:

beforeEach

afterEach

beforeAll

afterAll

describe('Leírás', () => { beforeEach(() => { //Weblapra navigálás }); it('leírás', () => { //Interakció a weblappal //Figyelmeztetések }); });

Teszt futtatása

Telepítés után van egy cypress/e2e/spec.cy.ts tesztünk:

describe('My First Test', () => { it('Visits the initial project page', () => { cy.visit('/') cy.contains('app is running!') }) })

A futtatást itt tesztelhetjük. Futtatás:

npx cypress run

Linkek

https://testing-angular.com/end-to-end-testing/#end-to-end-testing (2023)