[[oktatas:web:angular|< Angular]]

====== Angular 18 Tesztelés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu


===== A főkomponens tesztje =====

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

</code>

Futtassuk a tesztet:
  ng test

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

<code javascript src/app/app.component.html>

</code>

Futtassuk újra a tesztet:
  ng test

A teszt most hibára fut.


Most javítsuk a sablon fájt:
<code javascript src/app/app.component.html>
<h1>Hello, {{ title }}</h1>
</code>

Futtassuk újra a tesztet:
  ng test

A teszt újra teljesül.


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

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


Javítsuk a sablon fájt is:
<code javascript src/app/app.component.html>
<h1>{{ title }}</h1>
</code>

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

</code>


===== Egységteszt =====

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

<code javascript>
  calcTriangleArea(base: number, height: number): number {
    return (base * height) / 2;
  }
</code>



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

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



===== HttpClient tesztelése =====


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

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

</code>


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

});

</code>