< Angular End-to-end teszt

Angular - End-to-end teszt - Cypress

Szerző: Sallai András

Copyright © Sallai András, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A Cypress

Nyílt forráskódú tesztelő keretrendszer. Nem használja a WebDrivert, egyéni eszközöket használ. Egy Node.js 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, azon 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álaszoljunk „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.

Nem interaktív futtatás:

npx cypress run

Interaktív futtatás:

npx cypress open

A triangle tesztelése

<h2>Triangle</h2> <form > <div class="mt-3"> <label for="base">Alap</label> <input type="text" id="base" [formControl]="base"> </div> <div class="mt-3"> <label for="height">Magasság</label> <input type="text" id="height" [formControl]="height"> </div> <button type="button" (click)="calcButtonClick()" id="calcButton">Számít</button> <div class="mt-3"> <label for="area">Terület</label> <input type="text" id="area" [formControl]="area"> </div> </form>
import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-triangle', templateUrl: './triangle.component.html', styleUrls: ['./triangle.component.scss'] }) export class TriangleComponent implements OnInit { base = new FormControl(''); height = new FormControl(''); area = new FormControl(''); constructor() { } ngOnInit(): void { } calcButtonClick() { let area = this.calcTriangleArea(this.base.value, this.height.value); this.area.setValue(area); } calcTriangleArea(base: number, height: number): number { return base * height / 2; } }

A teszt:

describe('Három területszámító teszt', () => { beforeEach(() => { cy.visit('/') }) it('Alap szerepel az oldalon', () => { cy.contains('Alap') }) it('Magasság szerepel az oldalon', () => { cy.contains('Magasság') }) it('Terület szerepel az oldalon', () => { cy.contains('Terület') }) it('Van button', () => { cy.get('button') }) it('Számít működik 30, 35 inputra', () => { cy.get('#base').type('30') cy.get('#height').type('35') cy.get('#calcButton').click() .then( () => { cy.get('#area').should('have.value', '525'); }) }) })

Linkek

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