Les proves de cap a cap (E2E) són un tipus de proves que simulen el comportament real dels usuaris en una aplicació. Aquestes proves verifiquen que totes les parts del sistema funcionen correctament quan es combinen, des de la interfície d'usuari fins al backend. En aquest tema, aprendrem com configurar i executar proves E2E en una aplicació Angular utilitzant Protractor, una eina de proves E2E específica per a aplicacions Angular.
Continguts
Introducció a les proves de cap a cap
Les proves E2E són essencials per assegurar-se que l'aplicació funciona correctament des del punt de vista de l'usuari. Aquestes proves simulen interaccions reals, com ara navegar per pàgines, omplir formularis i fer clic en botons.
Avantatges de les proves E2E
- Verificació completa: Asseguren que totes les parts del sistema funcionen conjuntament.
- Detecció de problemes d'integració: Identifiquen problemes que poden no ser evidents en proves unitàries o de components.
- Simulació real: Reprodueixen el comportament real dels usuaris.
Configuració de Protractor
Protractor és una eina de proves E2E per a aplicacions Angular que s'integra amb Selenium WebDriver per controlar el navegador i simular interaccions d'usuari.
Instal·lació de Protractor
Per instal·lar Protractor, utilitza npm:
Configuració del fitxer protractor.conf.js
El fitxer de configuració de Protractor (protractor.conf.js) defineix com s'executaran les proves. Aquí tens un exemple bàsic:
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['e2e/**/*.e2e-spec.js'],
capabilities: {
'browserName': 'chrome'
},
onPrepare: function() {
browser.ignoreSynchronization = true;
}
};Estructura d'una prova E2E
Una prova E2E típica amb Protractor es compon de tres parts principals:
- Configuració inicial: Configura l'entorn de prova.
- Accions de l'usuari: Simula les interaccions de l'usuari amb l'aplicació.
- Verificacions: Comprova que l'aplicació es comporta com s'espera.
Exemple de prova E2E
describe('Prova de cap a cap de l\'aplicació', function() {
it('hauria de tenir el títol correcte', function() {
browser.get('http://localhost:4200');
expect(browser.getTitle()).toEqual('Nom de la teva aplicació');
});
});Escriure proves E2E
Exemple pràctic
Suposem que tenim una aplicació amb una pàgina de login. Escriurem una prova E2E per verificar que l'usuari pot iniciar sessió correctament.
HTML de la pàgina de login
<form (ngSubmit)="onSubmit()"> <input type="text" name="username" [(ngModel)]="username" placeholder="Username"> <input type="password" name="password" [(ngModel)]="password" placeholder="Password"> <button type="submit">Login</button> </form>
Prova E2E per a la pàgina de login
describe('Pàgina de login', function() {
it('hauria de permetre a l\'usuari iniciar sessió', function() {
browser.get('http://localhost:4200/login');
element(by.name('username')).sendKeys('usuari');
element(by.name('password')).sendKeys('contrasenya');
element(by.buttonText('Login')).click();
expect(browser.getCurrentUrl()).toEqual('http://localhost:4200/dashboard');
});
});Executar proves E2E
Per executar les proves E2E, utilitza el següent comandament:
Aquest comandament compilarà l'aplicació, iniciarà el servidor de proves i executarà les proves E2E definides.
Consells i millors pràctiques
- Mantén les proves simples: Les proves E2E poden ser lentes, així que mantén-les el més simples possible.
- Utilitza identificadors únics: Utilitza identificadors únics per als elements HTML per facilitar la selecció en les proves.
- Evita les dependències externes: Les proves E2E haurien de ser independents de serveis externs per evitar problemes de disponibilitat.
- Executa les proves regularment: Integra les proves E2E en el teu procés de CI/CD per assegurar-te que l'aplicació es manté funcional.
Conclusió
Les proves de cap a cap són una eina poderosa per assegurar-se que l'aplicació Angular funciona correctament des del punt de vista de l'usuari. Amb Protractor, podem simular interaccions reals i verificar que totes les parts del sistema funcionen conjuntament. Seguint les millors pràctiques, podem mantenir les proves E2E eficients i efectives.
Curs d'Angular
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- Arquitectura d'Angular
- Primera aplicació Angular
Mòdul 2: Components d'Angular
- Comprendre els components
- Crear components
- Plantilles de components
- Estils de components
- Interacció de components
Mòdul 3: Enllaç de dades i directives
- Interpolació i enllaç de propietats
- Enllaç d'esdeveniments
- Enllaç de dades bidireccional
- Directives integrades
- Directives personalitzades
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
- Introducció al client HTTP
- Fer sol·licituds HTTP
- Gestionar respostes HTTP
- Utilitzar observables
- Gestió d'errors
Mòdul 8: Gestió d'estat
- Introducció a la gestió d'estat
- Utilitzar serveis per a la gestió d'estat
- NgRx Store
- NgRx Effects
- NgRx Entity
Mòdul 9: Proves a Angular
- Proves unitàries
- Proves de components
- Proves de serveis
- Proves de cap a cap
- Simulació de dependències
Mòdul 10: Conceptes avançats d'Angular
- Angular Universal
- Optimització del rendiment
- Internacionalització (i18n)
- Tubs personalitzats
- Animacions d'Angular