El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Proves unitàries

Següent ►
►

Les proves unitàries són una part essencial del desenvolupament de programari, ja que permeten verificar que les unitats individuals de codi funcionen correctament. En Angular, les proves unitàries es realitzen principalment amb el framework de proves Jasmine i l'executor de proves Karma.

Objectius del Mòdul

  • Entendre la importància de les proves unitàries.
  • Aprendre a configurar l'entorn de proves en Angular.
  • Escriure i executar proves unitàries per components, serveis i altres unitats de codi.

Continguts

  1. Introducció a les proves unitàries
  2. Configuració de l'entorn de proves
  3. Escriure proves unitàries
  4. Executar proves unitàries
  5. Exemples pràctics
  6. Exercicis pràctics

Introducció a les proves unitàries

Les proves unitàries són proves automàtiques que verifiquen el comportament d'una unitat de codi, com ara una funció, un mètode o una classe. Aquestes proves ajuden a detectar errors en fases primerenques del desenvolupament i asseguren que el codi es comporti com s'espera.

Beneficis de les proves unitàries

  • Detecció primerenca d'errors: Les proves unitàries permeten detectar errors en fases primerenques del desenvolupament.
  • Facilitat de manteniment: Les proves unitàries fan que el codi sigui més fàcil de mantenir, ja que qualsevol canvi que introdueixi errors serà detectat immediatament.
  • Documentació: Les proves unitàries serveixen com a documentació del comportament esperat del codi.

Configuració de l'entorn de proves

Angular ve amb una configuració de proves predefinida que utilitza Jasmine i Karma. Quan es crea un nou projecte Angular, l'entorn de proves ja està configurat.

Fitxers clau

  • karma.conf.js: Configuració de Karma.
  • tsconfig.spec.json: Configuració TypeScript per a les proves.
  • test.ts: Punt d'entrada per a les proves.

Instal·lació de dependències

Assegura't que les dependències necessàries estiguin instal·lades:

npm install --save-dev jasmine-core karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter

Escriure proves unitàries

Les proves unitàries en Angular es defineixen en fitxers amb l'extensió .spec.ts. Aquests fitxers contenen blocs de proves definits amb Jasmine.

Estructura bàsica d'una prova

describe('Nom de la unitat de codi', () => {
  it('hauria de fer alguna cosa', () => {
    // Configuració de la prova
    const resultat = funcióATestar();
    // Expectativa
    expect(resultat).toBe(valorEsperat);
  });
});

Exemple: Prova d'una funció simple

// funcions.ts
export function suma(a: number, b: number): number {
  return a + b;
}

// funcions.spec.ts
import { suma } from './funcions';

describe('Funció suma', () => {
  it('hauria de retornar la suma de dos nombres', () => {
    const resultat = suma(2, 3);
    expect(resultat).toBe(5);
  });
});

Executar proves unitàries

Per executar les proves unitàries, utilitza el següent comandament:

ng test

Aquest comandament iniciarà Karma, que executarà les proves i mostrarà els resultats en temps real.

Exemples pràctics

Prova d'un component

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>'
})
export class AppComponent {
  title = 'Hola, Angular!';
}

// app.component.spec.ts
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('hauria de crear el component', () => {
    expect(component).toBeTruthy();
  });

  it('hauria de tenir el títol "Hola, Angular!"', () => {
    expect(component.title).toBe('Hola, Angular!');
  });

  it('hauria de mostrar el títol en un h1', () => {
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Hola, Angular!');
  });
});

Exercicis pràctics

Exercici 1: Prova d'una funció

Crea una funció que multipliqui dos nombres i escriu una prova unitària per verificar el seu comportament.

Solució

// funcions.ts
export function multiplica(a: number, b: number): number {
  return a * b;
}

// funcions.spec.ts
import { multiplica } from './funcions';

describe('Funció multiplica', () => {
  it('hauria de retornar el producte de dos nombres', () => {
    const resultat = multiplica(2, 3);
    expect(resultat).toBe(6);
  });
});

Exercici 2: Prova d'un servei

Crea un servei que retorni un missatge de benvinguda i escriu una prova unitària per verificar el seu comportament.

Solució

// benvinguda.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BenvingudaService {
  getMissatge(): string {
    return 'Benvingut a Angular!';
  }
}

// benvinguda.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { BenvingudaService } from './benvinguda.service';

describe('BenvingudaService', () => {
  let service: BenvingudaService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(BenvingudaService);
  });

  it('hauria de ser creat', () => {
    expect(service).toBeTruthy();
  });

  it('hauria de retornar el missatge de benvinguda', () => {
    expect(service.getMissatge()).toBe('Benvingut a Angular!');
  });
});

Conclusió

Les proves unitàries són una eina poderosa per assegurar la qualitat del codi en aplicacions Angular. Amb Jasmine i Karma, és fàcil escriure i executar proves unitàries que verifiquin el comportament de components, serveis i altres unitats de codi. Practicar l'escriptura de proves unitàries millorarà la teva habilitat per detectar i corregir errors, fent que el teu codi sigui més robust i mantenible.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats