Tartalomjegyzék

< Angular End-to-end teszt

Angular - End-to-end teszt - Cypress

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 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

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: 

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

src/app/triangle/triangle.compoent.html
<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>
src/app/triangle/triangle.compoent.ts
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:

cypress/e2e/triangle.cy.ts
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