Tests, Performance & CI/CD Production

1. Tests Unitaires & Tests d’Intégration

Les tests constituent l’étape finale avant la livraison. Ils permettent de garantir qu’aucune régression ne se glisse dans votre code. Dans Angular, la qualité des tests influence directement la stabilité de l’application en production.

• Vitest → jusqu’à 90% plus rapide que Jasmine/Karma.
• TestBed → pour isoler les services et composants.
• HttpTestingController → indispensable pour mocker les appels API.
• Cypress → tests E2E réalistes : parcours utilisateur, formulaires, navigation.
• Mock Providers → éviter les dépendances réelles en test.

Exemple — Test de service avec mock API

it('should fetch products (service)', fakeAsync(() => {
  const mock = [{ id: 1, name: 'Laptop', price: 1200 }];

  service.getAll().subscribe(res => {
    expect(res).toEqual(mock);
  });

  const req = http.expectOne('/api/products');
  req.flush(mock);
  tick();
}));

Exemple — Test d’un Component avec rendu DOM

it('should display product name', () => {
  component.items = [{ id: 1, name: 'Dell XPS', price: 2200 }];
  fixture.detectChanges();

  const li = fixture.nativeElement.querySelector('li');
  expect(li.textContent).toContain('Dell XPS');
});

Astuce avancée : Mock d’un service complet

const productServiceMock = {
  getAll: () => of([{ id: 99, name: 'Mocked Product' }])
};

TestBed.configureTestingModule({
  providers: [
    { provide: ProductService, useValue: productServiceMock }
  ]
});

2. Performance & Optimisation Avancée

Les performances Angular reposent sur trois piliers : Change Detection, structure des composants, et coût des opérations asynchrones. Un projet performant n’est pas un luxe : c’est un avantage business.

• OnPush réduit les re-rendus inutilement coûteux.
• Signals offrent une granularité plus fine que RxJS.
• trackBy évite la reconstruction permanente du DOM.
• Lazy Loading booste le temps de chargement initial.
• Pré-chargement sélectif pour améliorer la navigation.

Exemple — composant ultra-performant

@Component({
  selector: 'app-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    

      {{item.name}}
    
`
})
export class ProductListComponent {
  @Input() items: Product[] = [];
  trackById(index: number, item: Product) { return item.id; }
}

Astuce — limiter les “heavy pipes” dans les templates

{{ amount | currency:'EUR' }}

➡️ Pré-calculer dans le component → moins de CPU

Astuce — éviter les fuites mémoire RxJS

this.products$ = this.http.get('/api/products').pipe(
  takeUntil(this.destroy$),
  shareReplay(1)
);

3. CI/CD GitLab : Build, Tests, Qualité & Déploiement

Une pipeline bien conçue transforme votre workflow : build automatisé, tests systématiques, qualité contrôlée, déploiement sans intervention humaine.

• lint + test + build en 3 jobs parallèles.
• cache npm pour accélérer les builds.
• scans de sécurité (npm audit / Trivy Docker).
• environments GitLab pour staging & production.
• review apps pour tester chaque merge request.

Pipeline GitLab optimisée

# .gitlab-ci.yml
stages: [lint, build, test, deploy]

lint:
  stage: lint
  image: node:20
  script:
    - npm ci
    - npm run lint

build:
  stage: build
  image: node:20
  cache: { paths: ["node_modules/"] }
  script:
    - npm ci
    - npm run build -- --configuration production

test:
  stage: test
  image: node:20
  script:
    - npm ci
    - npm run test:ci

deploy:
  stage: deploy
  image: google/cloud-sdk:slim
  script:
    - firebase deploy --token $FIREBASE_TOKEN

4. Déploiement & Monitoring Production

Miser sur la production, c’est assurer la surveillance continue : erreurs, lenteurs, pics de trafic, ressources consommées, latence API. Voici les indispensables.

• Sentry : erreurs Angular + stack trace.
• Grafana : dashboards & alertes backend.
• Firebase Hosting : CDN rapide & SSL automatique.
• Déploiement Docker NGINX pour servir Angular.

Dockerfile optimisé

FROM nginx:alpine
COPY dist/app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]