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

Proves Unitàries en Ionic

Següent ►
►

Les proves unitàries són una part essencial del desenvolupament de programari, ja que permeten verificar que les diferents parts del codi funcionen correctament de manera independent. En aquest tema, aprendrem com configurar i escriure proves unitàries per a una aplicació Ionic.

Objectius del Tema

  • Entendre la importància de les proves unitàries.
  • Configurar l'entorn de proves unitàries en un projecte Ionic.
  • Escriure i executar proves unitàries bàsiques.

  1. Importància de les Proves Unitàries

Les proves unitàries ajuden a:

  • Detectar errors en fases primerenques del desenvolupament.
  • Assegurar que els canvis en el codi no introdueixin nous errors (regressions).
  • Millorar la qualitat del codi i la confiança en el producte final.

  1. Configuració de l'Entorn de Proves Unitàries

2.1 Instal·lació de Dependències

Ionic utilitza Angular, i Angular ve amb un conjunt d'eines per a proves unitàries, com Jasmine i Karma. Per començar, assegura't que tens les dependències necessàries instal·lades:

npm install --save-dev @angular/cli @angular/core @angular/compiler-cli jasmine-core karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter

2.2 Configuració de Karma

Karma és un test runner per a JavaScript. La configuració de Karma es troba en el fitxer karma.conf.js. Aquí tens un exemple de configuració bàsica:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

  1. Escriure Proves Unitàries

3.1 Estructura d'una Prova Unitària

Les proves unitàries en Angular es fan amb Jasmine. Aquí tens un exemple bàsic d'una prova unitària per a un component:

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

3.2 Explicació del Codi

  • describe: Defineix un conjunt de proves per a un component o servei.
  • beforeEach: Executa codi abans de cada prova. Aquí es configura el mòdul de proves i es crea una instància del component.
  • it: Defineix una prova individual. En aquest cas, verifica que el component es crea correctament.

3.3 Exemple Pràctic

Suposem que tenim un component CounterComponent que incrementa un comptador. Aquí tens una prova unitària per verificar aquesta funcionalitat:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

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

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

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

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

  1. Executar les Proves Unitàries

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

ng test

Aquest comandament obrirà un navegador i mostrarà els resultats de les proves.

Exercicis Pràctics

Exercici 1: Prova Unitària per a un Servei

Crea un servei MathService amb una funció add(a: number, b: number): number que retorni la suma de dos números. Escriu una prova unitària per verificar aquesta funció.

Solució

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

@Injectable({
  providedIn: 'root'
})
export class MathService {
  add(a: number, b: number): number {
    return a + b;
  }
}

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

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

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

  it('should add two numbers', () => {
    expect(service.add(1, 2)).toBe(3);
  });
});

Conclusió

En aquesta secció, hem après la importància de les proves unitàries, com configurar l'entorn de proves en un projecte Ionic, i com escriure i executar proves unitàries bàsiques. Les proves unitàries són una eina poderosa per assegurar la qualitat del codi i la seva robustesa davant de canvis futurs. En el proper tema, explorarem les proves de cap a cap per verificar el funcionament complet de l'aplicació.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats