Angular

Appearance

Comment utiliser useClass dans le provider dans Angular ? ​

Pour utiliser useClass dans le provider d'un module Angular, vous devez d'abord déclarer votre classe et ses éventuelles dépendances. Par exemple, supposons que vous avez une classe LoggerService qui dépend d'une classe LogLevel :

ts
export class LogLevel {
  static readonly DEBUG: string = 'DEBUG';
  static readonly INFO: string = 'INFO';
  static readonly WARN: string = 'WARN';
  static readonly ERROR: string = 'ERROR';
}

export class LoggerService {
  constructor(private level: LogLevel) {}

  log(message: string) {
    console.log(`[${this.level}]: ${message}`);
  }
}
export class LogLevel {
  static readonly DEBUG: string = 'DEBUG';
  static readonly INFO: string = 'INFO';
  static readonly WARN: string = 'WARN';
  static readonly ERROR: string = 'ERROR';
}

export class LoggerService {
  constructor(private level: LogLevel) {}

  log(message: string) {
    console.log(`[${this.level}]: ${message}`);
  }
}

Ensuite, vous pouvez utiliser useClass dans le provider d'un module Angular en spécifiant la classe que vous souhaitez utiliser et ses éventuelles dépendances. Par exemple :

ts
import { LoggerService, LogLevel } from './logger.service';

@NgModule({
  providers: [
    {
      provide: LoggerService,
      useClass: LoggerService,
      deps: [LogLevel]
    }
  ]
})
export class AppModule {}
import { LoggerService, LogLevel } from './logger.service';

@NgModule({
  providers: [
    {
      provide: LoggerService,
      useClass: LoggerService,
      deps: [LogLevel]
    }
  ]
})
export class AppModule {}

Vous pouvez maintenant injecter LoggerService dans n'importe quel composant ou service de votre application.

ts
import { LoggerService } from './logger.service';

@Component({
  // ...
})
export class AppComponent {
  constructor(private logger: LoggerService) {}
}
import { LoggerService } from './logger.service';

@Component({
  // ...
})
export class AppComponent {
  constructor(private logger: LoggerService) {}
}

Exemple de useClass pour créer un mock ​

INFO

Cette exemple utilise useClass dans les tests unitaires pour montrer un exemple concret

Dans le module où vous voulez utiliser le mock, utilisez la méthode useClass de l'objet TestBed dans votre fonction de configuration du module pour remplacer l'implémentation de l'interface par votre classe de mock. Voici un exemple de code :

ts
// Créez une interface pour représenter une fonctionnalité que vous souhaitez mock
export interface MonInterface {
  maMethode(): string;
}

// Créez une classe de mock qui implémente l'interface
@Injectable()
export class MonMock implements MonInterface {
  maMethode(): string {
    return 'Je suis un mock';
  }
}

// Créez un composant ou un service qui utilise l'interface
@Injectable()
export class MonService {
  constructor(private monInterface: MonInterface) {}

  utiliserInterface(): string {
    return this.monInterface.maMethode();
  }
}

// Créez un test pour votre composant ou service
describe('MonService', () => {
  let service: MonService;
  let mock: MonMock;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MonService,
        { provide: MonInterface, useClass: MonMock }
      ]
    });

    // Injectez une instance de votre service et de votre mock
    service = TestBed.inject(MonService);
    mock = TestBed.inject(MonMock);
  });

  it('devrait utiliser l\'interface mockée', () => {
    // Vérifiez que votre service utilise correctement l'interface mockée
    expect(service.utiliserInterface()).toEqual('Je suis un mock');
  });
});
// Créez une interface pour représenter une fonctionnalité que vous souhaitez mock
export interface MonInterface {
  maMethode(): string;
}

// Créez une classe de mock qui implémente l'interface
@Injectable()
export class MonMock implements MonInterface {
  maMethode(): string {
    return 'Je suis un mock';
  }
}

// Créez un composant ou un service qui utilise l'interface
@Injectable()
export class MonService {
  constructor(private monInterface: MonInterface) {}

  utiliserInterface(): string {
    return this.monInterface.maMethode();
  }
}

// Créez un test pour votre composant ou service
describe('MonService', () => {
  let service: MonService;
  let mock: MonMock;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MonService,
        { provide: MonInterface, useClass: MonMock }
      ]
    });

    // Injectez une instance de votre service et de votre mock
    service = TestBed.inject(MonService);
    mock = TestBed.inject(MonMock);
  });

  it('devrait utiliser l\'interface mockée', () => {
    // Vérifiez que votre service utilise correctement l'interface mockée
    expect(service.utiliserInterface()).toEqual('Je suis un mock');
  });
});