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

<code>
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.
</code>

===== A cypress könyvtár =====

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



  * 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

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

===== Teszt futtatása =====

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

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

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

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

</code>



<code javascript 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;
  }
}

</code>


A teszt:

<code javascript 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');
    })
  })
})

</code>


===== Linkek =====

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