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

Proves i Depuració del Projecte

Següent ►
►

En aquesta secció, aprendrem com assegurar-nos que el nostre projecte final funcioni correctament mitjançant proves i depuració. Aquest procés és crucial per garantir que el nostre codi sigui robust, fiable i lliure d'errors.

Objectius d'Aprenentatge

  • Comprendre la importància de les proves i la depuració.
  • Aprendre a escriure proves unitàries i d'integració.
  • Utilitzar eines de depuració per identificar i corregir errors.
  • Implementar proves de cap a cap per assegurar-se que el projecte funcioni com s'espera en un entorn real.

  1. Importància de les Proves i la Depuració

Per què són importants les proves?

  • Qualitat del Codi: Les proves ajuden a mantenir la qualitat del codi, assegurant que cada part del programa funcioni com s'espera.
  • Prevenció d'Errors: Identifiquen errors abans que arribin a producció, evitant problemes potencials per als usuaris finals.
  • Facilitat de Manteniment: Un codi ben provat és més fàcil de mantenir i actualitzar, ja que les proves poden detectar si els canvis introdueixen nous errors.

Per què és important la depuració?

  • Identificació d'Errors: La depuració permet identificar i corregir errors en el codi.
  • Comprensió del Codi: Ajuda a comprendre millor com funciona el codi, facilitant la resolució de problemes.
  • Millora del Rendiment: Pot ajudar a identificar i solucionar problemes de rendiment.

  1. Proves Unitàries

Què són les proves unitàries?

Les proves unitàries són proves que verifiquen el funcionament correcte de components individuals del codi, com ara funcions o mètodes.

Eina Recomanada: Jest

Jest és una eina de proves unitàries popular per a JavaScript.

Exemple de Prova Unitària amb Jest

// funcions.js
function suma(a, b) {
  return a + b;
}

module.exports = suma;

// funcions.test.js
const suma = require('./funcions');

test('suma de 1 + 2 és igual a 3', () => {
  expect(suma(1, 2)).toBe(3);
});

Com executar les proves amb Jest

  1. Instal·la Jest: 
    npm install --save-dev jest
  2. Afegeix un script al teu package.json: 
    "scripts": {
  "test": "jest"
}
  3. Executa les proves: 
    npm test

  1. Proves d'Integració

Què són les proves d'integració?

Les proves d'integració verifiquen que diferents components del sistema funcionin correctament junts.

Exemple de Prova d'Integració

// api.js
const express = require('express');
const app = express();
app.get('/suma', (req, res) => {
  const { a, b } = req.query;
  const resultat = parseInt(a) + parseInt(b);
  res.send({ resultat });
});

module.exports = app;

// api.test.js
const request = require('supertest');
const app = require('./api');

test('GET /suma retorna la suma de dos números', async () => {
  const res = await request(app).get('/suma?a=1&b=2');
  expect(res.body.resultat).toBe(3);
});

Com executar les proves d'integració

  1. Instal·la Supertest: 
    npm install --save-dev supertest
  2. Executa les proves amb Jest com abans: 
    npm test

  1. Proves de Cap a Cap (E2E)

Què són les proves de cap a cap?

Les proves de cap a cap simulen el comportament de l'usuari per verificar que tot el sistema funcioni correctament des del principi fins al final.

Eina Recomanada: Cypress

Cypress és una eina popular per a proves de cap a cap.

Exemple de Prova de Cap a Cap amb Cypress

// cypress/integration/test.spec.js
describe('Prova de Cap a Cap', () => {
  it('Visita la pàgina principal i comprova el títol', () => {
    cy.visit('http://localhost:3000');
    cy.title().should('include', 'Títol de la Pàgina');
  });
});

Com executar les proves amb Cypress

  1. Instal·la Cypress: 
    npm install --save-dev cypress
  2. Afegeix un script al teu package.json: 
    "scripts": {
  "cypress:open": "cypress open"
}
  3. Executa Cypress: 
    npm run cypress:open

  1. Depuració

Eines de Depuració

  • Consola del Navegador: Utilitza console.log per imprimir valors i seguir el flux del codi.
  • Depurador del Navegador: Utilitza punts de ruptura (breakpoints) per aturar l'execució del codi i inspeccionar l'estat actual.

Exemple de Depuració amb console.log

function suma(a, b) {
  console.log('a:', a, 'b:', b); // Afegir un log per veure els valors
  return a + b;
}

Depuració amb Breakpoints

  1. Obre les DevTools del navegador (F12 o clic dret -> Inspeccionar).
  2. Navega a la pestanya "Sources" (Fonts).
  3. Troba el fitxer JavaScript que vols depurar.
  4. Fes clic al número de línia on vols afegir un breakpoint.
  5. Executa el codi i el navegador s'aturarà en el breakpoint, permetent-te inspeccionar variables i l'estat del programa.

Resum

En aquesta secció, hem après la importància de les proves i la depuració en el desenvolupament de programari. Hem vist com escriure proves unitàries, d'integració i de cap a cap utilitzant eines com Jest, Supertest i Cypress. També hem explorat tècniques de depuració utilitzant la consola i els breakpoints del navegador. Amb aquestes habilitats, estàs preparat per assegurar-te que el teu projecte final funcioni correctament i sigui robust davant errors.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

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