Comment configurer et tester votre application Angular avec

Créer des composants Angulaire robustes : gestion des dépendances et unit testing

Les applications web complexes nécessitent souvent la création de composants Angulaire robustes qui peuvent gérer plusieurs dépendances. Dans cet article, nous allons voir comment créer un module Angulaire qui contient un composant avec une dépendance à l’API Store de @ngrx et comment utiliser les mocks pour effectuer des tests unitaires.

Création d’un module Angulaire

Tout d’abord, créons un nouveau module Angulaire appelé AboutModule. Ce module importe le module CommonModule et déclare le composant AboutComponent.

import { CommonModule } from '@angular/common';
import { AboutComponent } from './about.component';

@NgModule({
  imports: [CommonModule],
  declarations: [AboutComponent],
  exports: [AboutComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AboutModule { }

Utilisation du composant dans un template

Ensuite, nous allons créer un nouveau composant appelé AboutComponent qui utilise le composant MyWebcomponent.

import { Component } from '@angular/core';

@Component({
  selector: 'myapp-about',
  template: `<my-webcomponent></my-webcomponent>`
})
export class AboutComponent { }

Mise à jour des typings

Il est important de mettre à jour les typings régulièrement pour garantir que notre projet est toujours compatible avec la dernière version d’Angular. Si vous voyez une erreur de déprecation, vous pouvez utiliser la commande suivante pour mettre à jour les typings :

npm run typings -- install dt~jasmine --save --global

Mockage de l’API Store

Lorsque nous créons des composants qui utilisent l’API Store de @ngrx, il est important de mockiser la dépendance pour effectuer des tests unitaires. Nous allons créer un nouveau classe appelé MockStore qui implémente l’interface Observer.

import { Injectable } from '@angular/core';
import { TestBed, async} from '@angular/core/testing';
import { AppComponent } from './app.component';

class MockStore {
  public dispatch(obj) {
    console.log('dispatching from the mock store!')
  }
  public select(obj) {
    console.log('selecting from the mock store!');
    return Observable.of({})
  }
}

Unit testing d’un composant avec une dépendance à l’API Store

Maintenant que nous avons créé notre classe MockStore, nous pouvons écrire des tests unitaires pour un composant qui utilise l’API Store.

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        SmartComponentComponent,
        DumbComponentComponent,
      ],
      imports: [
        StoreModule.provideStore({mainReducer})
      ],
      providers: [
        {provide: Store, useClass: MockStore}
      ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

Mockage d’une observable

Lorsque nous créons des composants qui utilisent des observables, il est important de mockiser la dépendance pour effectuer des tests unitaires. Nous allons créer un nouveau classe appelé MockObservable qui implémente l’interface Observer.

import { Injectable } from '@angular/core';
import { TestBed, async} from '@angular/core/testing';
import { AppComponent } from './app.component';

class MockObservable {
  public next(value) {
    console.log('next value:', value);
  }
  public error(error) {
    console.log('error:', error);
  }
}

Unit testing d’un composant avec une dépendance à un observable

Maintenant que nous avons créé notre classe MockObservable, nous pouvons écrire des tests unitaires pour un composant qui utilise un observable.

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        SmartComponentComponent,
        DumbComponentComponent,
      ],
      imports: [
        HttpModule
      ],
      providers: [
        {provide: HttpClient, useClass: MockHttpClient}
      ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

En résumé, dans cet article nous avons vu comment créer un module Angulaire qui contient un composant avec une dépendance à l’API Store de @ngrx et comment utiliser les mocks pour effectuer des tests unitaires. Nous avons également vu comment mockiser des observables pour effectuer des tests unitaires.

Prochaines étapes

• Créer des tests unitaires pour d’autres composants qui utilisent l’API Store.
• Utiliser les mocks pour effectuer des tests de performance sur les composants.
• Créer des tests unitaires pour les services qui utilisent des observables.

Liens utiles

• Documentation officielle d’Angular : https://angular.io/docs
• Documentation officielle de @ngrx/store : https://github.com/ngrx/store

J’espère que cet article vous aura été utile. N’hésitez pas à partager vos commentaires et suggestions pour améliorer cet article.