[[oktatas:web:angular:angular_end-to-end_teszt|< Angular End-to-end teszt]] ====== Angular - End-to-end teszt - Cypress ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2023 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 =====

Triangle

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)