szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » angular » angular_teszteles
Nyomvonal: • angular_teszteles
oktatas:web:angular:angular_teszteles

Tartalomjegyzék

< Angular

Angular tesztelés

Jasmine

Fontosabb Jasmine eszközök

  • describe - Egy blokk definiálása
    • Minden egyedi tesztet egy ilyen blokkba kerül.
    • Egyedi teszt, angolul individual test, röviden it.
  • beforeEach
    • Minden egyes teszt előtt lefut.
    • Ha 5 teszt van 5-ször fut le.
    • A teszt beállításait tartalmazza.
  • afterEach
    • Minden egyes teszt után lefut.
    • Leépítési funkciók.
  • beforeAll
    • Az összes teszt előtt egyszer fut le.
  • afterAll
    • Az összes teszt után egyszer fut le.

Figyelmeztetések

  • toBeDefined
  • toBeTruthy
  • toContain
  • toEqual
  • toThrow
  • toBeNull

Példa: 

expect(myData).toBeGreaterThan(4);

Az állítás megfordítása: 

expect(myData).not.toBeGreaterThan(4);

Készíthetünk saját illeszkedést is.

TestBed

A TestBed Angular teszteléshez elérhető eszköz. 

import { TestBed } from '@angular/core/testing';

By

A By segítségével elérhetők a HTML oldal elemei. 

import { By } from '@angular/platform-browser';

Beállítás

Véletlen végrehajtás

A tesztek alapértelmezetten véletlen sorrendben futnak le.

Ezt állíthatjuk a karma.conf.js fájl jasmine részben:

karma.conf.js
module.exports = function (config) {
  config.set({
    client: {
      jasmine: {
        random: false
      },
    },
  });
};

Több információ

Kezdeti teszt

app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
 
describe('AppComponent', () => {
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
 
  });
 
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 
  it(`should have as title 'app08'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('app08');
  });
 
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('.content span')?.textContent).toContain('app08 app is running!');
  });
 
});

Kiegészítve

Egy beforeAll() függvényt teszünk a tesztek elejére.

app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
 
describe('AppComponent', () => {
  beforeAll(()=>{
    console.log('Egyszer lefut')
  })
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
 
  });
 
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 
  it(`should have as title 'app08'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('app08');
  });
 
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('.content span')?.textContent).toContain('app08 app is running!');
  });
 
});

Teszt indítása

ng test

A tesztek alapértelmezetten véletlenszerű sorrendben hajtódnak végre. A teszt egy új böngészőablakban fut, és az eredményt is látjuk.

Teszt kiegészítése

Egy negyedik tesztet adunk a meglévő tesztekhez:

app.component.spec.ts
describe('AppComponent', () => {
 
  //...
 
  it('Háromszög tesztelése', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.calcArea(30, 35)).toEqual(525);
  })
}

Kiegészítő osztályhoz tesztírás

Ha készítünk egy triangle.ts fájlt a Triangle osztály számára, készíthetünk hozzá tesztállományokat is. Követelmény a .spec.ts kiterjesztés.

triangle.ts
export class Triangle {
    base: number;
    height: number;
    area: number;
    constructor() {
        this.base = 0;
        this.height = 0;
        this.area = 0;
    }
    calcArea() {
        this.area = this.base * this.height / 2;
    }
}
triangle.spec.ts
import { Triangle } from './triangle';
 
describe('Triangle osztály tesztje', () => {
    let triangle: Triangle;
    beforeEach(() => {
        triangle = new Triangle();
    });
 
    it('Területszámítás', () => {
        triangle.base = 30;
        triangle.height = 35;
        triangle.calcArea();
        let actual = triangle.area;
        let expected = 525;
        expect(expected).toEqual(actual);
    });
});

Futó alkalmazás

Az alapértelmezetten létrejött utolsó, „should render title” nevű teszt megkövetel egy HTML tartalmat: 

<div class="content"><span>{{ title }} app is running!</span></div>

Az app/app.component.html fájlt tartalmát törölni szoktuk, mivel saját tartalommal töltjük azt meg. A „should render title” teszt ezért hibára fut.

FormsModule

Ha az app.module.ts fájlban importáljuk a FormsModule modult, és input elemeket hozunk létre az app.component.html fájlban akkor az importálást a tesztfájlban is meg kell csinálni:

app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
 
import { FormsModule } from '@angular/forms';
 
 
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule
      ],      
    }).compileComponents();
  });
 
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 
  it(`should have as title 'triangle'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('triangle');
  });
 
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('.content span')?.textContent).toContain('triangle app is running!');
  });
});

A HttpClient teszthez: 

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ TasksComponent ],
      imports: [HttpClientModule]
    })
    .compileComponents();
  });

HTML elemek tesztje

app.component.html
<nav>
  <div></div>
  <div></div>
</nav>
app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';
 
describe('AppComponent', () => {
 
  it('létrehozható az app objektum', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 
  it('van nav elem', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const nav = fixture.debugElement.queryAll(By.css('nav'));
    expect(nav.length).toBe(1);
  });
 
  it('van nav elemben két div elem', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const nav_div = fixture.debugElement.queryAll(By.css('nav div'))
    expect(nav_div.length).toBe(2);
  });
 
});

Osztály vizsgálata

  it('a nav elemnek van navbar osztálya', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const navbar = fixture.debugElement.queryAll(By.css('.navbar'));
    expect(navbar.length).toBe(1);
  });

Tartalom

A query() függvény egyetlen elemmel tér vissza. A queryAll() függvény az összes elemmel tér vissza, tömbként. 

  it('második <a> elem tartalma', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const aElem = fixture.debugElement.queryAll(By.css('.nav-item'));
    expect(aElem[1].nativeElement.textContent.trim()).toBe('Features');    
  });

HttpClien tesztje

Legyen a példa kedvért egy ApiService osztály, ami HttpClientModule-t igényli. A kezdeti tesztfájl így néz ki:

src/app/shared/api.service.spec.ts
import { TestBed } from '@angular/core/testing';
 
import { ApiService } from './api.service';
 
describe('ApiService', () => {
  let service: ApiService;
 
  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ApiService);
  });
 
  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

A HttpClienModule-t külön be kell itt is tölteni.

src/app/shared/api.service.spec.ts
import { HttpClientModule } from '@angular/common/http';
import { TestBed } from '@angular/core/testing';
 
import { ApiService } from './api.service';
 
describe('ApiService', () => {
  let service: ApiService;
 
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
      ]
    });
    service = TestBed.inject(ApiService);
  });
 
  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Függelék

Példa

<nav>
   <div></div>
   <div>
     <ul>
        <li><a class="nav-link">Valami</a></li>
     </ul>
   </div>
</nav>
app.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser';
 
describe('AppComponent', () => {
  let fixture : ComponentFixture<AppComponent>;
  let app: AppComponent;
  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
 
  it('létrehozható az app objektum', () => {    
    expect(app).toBeTruthy();
  });
 
  it('van nav elem', () => {    
    const nav = fixture.debugElement.queryAll(By.css('nav'));
    expect(nav.length).toBe(1);
  });
 
  it('van nav elemben két div elem', () => {    
    const nav_div = fixture.debugElement.queryAll(By.css('nav div'))
    expect(nav_div.length).toBe(2);
  });
 
  it('a nav elemnek van navbar osztálya', () => {    
    const navbar = fixture.debugElement.queryAll(By.css('.navbar'));
    expect(navbar.length).toBe(1);
  });
 
  it('második <a> elem tartalma', () => {
    fixture.detectChanges();
    const aElem = fixture.debugElement.queryAll(By.css('.nav-item'));
    expect(aElem[1].nativeElement.textContent.trim()).toBe('Valami');    
  });
 
});

Gyermek komponens

Angular gyermek komponens tesztje: 

  it('app-vehicle meg van', () => {
    fixture.detectChanges();
    const childElem = fixture.debugElement.queryAll(By.css('app-vehicles'));
    expect(childElem).toBeTruthy();
  });

Linkek

oktatas/web/angular/angular_teszteles.txt · Utolsó módosítás: 2023/04/06 12:24 szerkesztette: admin

Eszközök az oldalon

Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki