Angular 18 Tesztelés

• Szerző: Sallai András
• Copyright © 2024, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

src/app/app.component.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
 
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).compileComponents();
  });
 
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 
  it(`should have the 'app11' title`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('app11');
  });
 
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent)
    .toContain('Hello, app11');
  });
});

Futtassuk a tesztet:

ng test

Most töröljük az app.component.html tartalmát, ahogy azt szoktuk.

src/app/app.component.html

Futtassuk újra a tesztet:

ng test

A teszt most hibára fut.

Most javítsuk a sablon fájt:

src/app/app.component.html

<h1>Hello, {{ title }}</h1>

Futtassuk újra a tesztet:

ng test

A teszt újra teljesül.

Most állítsuk be tesztet saját h1 tartalomra. Például:

  it(`should have the 'Háromszög területe`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('Háromszög területe');
  });
 
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent)
    .toContain('Háromszög területe');
  });

Javítsuk a sablon fájt is:

src/app/app.component.html

<h1>{{ title }}</h1>

src/app/app.component.html

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Háromszög területe';
}

Az app.components.ts fájlban írjuk meg a calcTriangleArea() függvényt.

  calcTriangleArea(base: number, height: number): number {
    return (base * height) / 2;
  }

Az app.component.spec.ts fájlban vegyünk fel egy újabb describe() függvényt.

describe('calcTriangleArea', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).compileComponents();
  });
  it('should return the area of a triangle', () => {
    const app = new AppComponent();
    expect(app.calcTriangleArea(3, 4)).toBe(6);
  });
});

Meg kell adni a provideHttpClient() az api.service.spec.ts és a app.component.spec.ts fájlban is:

src/app/shared/api.service.spec.ts

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

src/app/app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { provideHttpClient } from '@angular/common/http';
 
describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      providers: [provideHttpClient()],
    }).compileComponents();
  });
 
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 
});