El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Les proves de components són una part essencial del desenvolupament d'aplicacions Angular. Aquest tipus de proves asseguren que els components funcionin correctament de manera aïllada, sense dependre d'altres parts de l'aplicació. En aquesta secció, aprendrem com configurar i escriure proves per als components Angular utilitzant el framework de proves Jasmine i l'eina de test Karma.

Objectius

Comprendre la importància de les proves de components.
Configurar l'entorn de proves per a components Angular.
Escriure proves unitàries per a components.
Utilitzar mocks i espies per aïllar les proves.
Executar i interpretar els resultats de les proves.

Configuració de l'entorn de proves

Angular CLI ve amb una configuració predeterminada per a Karma i Jasmine, que facilita la creació i execució de proves. Quan creem un nou component amb Angular CLI, es genera automàticament un fitxer de proves amb l'extensió .spec.ts.

Exemple de fitxer de proves generat

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Explicació del codi

Imports: Importem ComponentFixture i TestBed d'@angular/core/testing i el component que volem provar.
Describe: Definim un bloc de proves per al component MyComponent.
BeforeEach (async): Configura el mòdul de proves amb el component que volem provar.
BeforeEach: Crea una instància del component i la seva fixture.
It: Defineix una prova que verifica si el component es crea correctament.

Escriure proves unitàries per a components

Prova de propietats del component

Podem escriure proves per verificar les propietats del component.

it('should have a default title', () => {
  expect(component.title).toBe('default title');
});

Prova de mètodes del component

Podem provar els mètodes del component per assegurar-nos que funcionen correctament.

it('should increment the counter', () => {
  component.increment();
  expect(component.counter).toBe(1);
});

Prova de la plantilla del component

Podem verificar que la plantilla del component es renderitza correctament.

it('should render title in a h1 tag', () => {
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('default title');
});

Utilitzar mocks i espies

Mock de serveis

Podem utilitzar mocks per aïllar les proves del component dels serveis externs.

class MockMyService {
  getValue() {
    return 'mock value';
  }
}

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ MyComponent ],
    providers: [
      { provide: MyService, useClass: MockMyService }
    ]
  })
  .compileComponents();
});

Espies

Podem utilitzar espies per verificar que els mètodes dels serveis es criden correctament.

it('should call getValue from MyService', () => {
  const myService = TestBed.inject(MyService);
  spyOn(myService, 'getValue').and.returnValue('mock value');
  component.ngOnInit();
  expect(myService.getValue).toHaveBeenCalled();
});

Executar i interpretar els resultats de les proves

Per executar les proves, utilitzem el següent comandament:

ng test

Aquest comandament executarà Karma, que correrà totes les proves i mostrarà els resultats en una finestra del navegador.

Interpretació dels resultats

Verd: La prova ha passat correctament.
Vermell: La prova ha fallat. Karma mostrarà un missatge d'error amb informació sobre la causa del fall.

Resum

En aquesta secció, hem après com configurar i escriure proves unitàries per a components Angular. Hem vist com utilitzar mocks i espies per aïllar les proves i com executar-les utilitzant Karma. Les proves de components són essencials per assegurar la qualitat i la fiabilitat de les nostres aplicacions Angular.

Proves de components

Objectius

Configuració de l'entorn de proves

Exemple de fitxer de proves generat

Explicació del codi

Escriure proves unitàries per a components

Prova de propietats del component

Prova de mètodes del component

Prova de la plantilla del component

Utilitzar mocks i espies

Mock de serveis

Espies

Executar i interpretar els resultats de les proves

Interpretació dels resultats

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques