À quoi servent les fichiers «spec.ts» générés par Angular CLi?


213

Je suis nouveau sur Angular 2 (et Angular en général ...) et je le trouve très engageant. J'utilise Angular CLi pour générer et servir des projets. Il semble bien fonctionner - même si pour mes petits projets d'apprentissage, il produit plus que ce dont j'ai besoin - mais c'est normal.

J'ai remarqué qu'il génère spec.tspour chaque élément angulaire d'un projet (composant, service, tuyau, etc.). J'ai cherché autour, mais je n'ai pas trouvé d'explication à quoi servent ces fichiers.

Ces fichiers de construction sont-ils normalement masqués lors de l'utilisation tsc? Je me suis posé la question car je voulais changer le nom d'un mal nommé Componentque j'avais créé et j'ai découvert que le nom était également référencé dans ces spec.tsfichiers.


import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
} from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { PovLevelComponent } from './pov-level.component';

describe('Component: PovLevel', () => {
  let builder: TestComponentBuilder;

  beforeEachProviders(() => [PovLevelComponent]);
  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
    builder = tcb;
  }));

  it('should inject the component', inject([PovLevelComponent],
      (component: PovLevelComponent) => {
    expect(component).toBeTruthy();
  }));

  it('should create the component', inject([], () => {
    return builder.createAsync(PovLevelComponentTestController)
      .then((fixture: ComponentFixture<any>) => {
        let query = fixture.debugElement.query(By.directive(PovLevelComponent));
        expect(query).toBeTruthy();
        expect(query.componentInstance).toBeTruthy();
      });
  }));
});

@Component({
  selector: 'test',
  template: `
    <app-pov-level></app-pov-level>
  `,
  directives: [PovLevelComponent]
})
class PovLevelComponentTestController {
}

Réponses:


267

Les fichiers de spécifications sont des tests unitaires pour vos fichiers source. La convention pour les applications angulaires est d'avoir un fichier .spec.ts pour chaque fichier .ts. Ils sont exécutés à l'aide du framework de test jasmine javascript via le lanceur de test Karma ( https://karma-runner.github.io/ ) lorsque vous utilisez la ng testcommande.

Vous pouvez l'utiliser pour quelques lectures supplémentaires:

https://angular.io/guide/testing


17
Merci, je me le demandais moi-même. Supposons que je ne veuille pas exécuter de tests, puis-je supprimer les fichiers .spec en toute sécurité? (et aussi les dossiers de test et les fichiers tels que le dossier e2e?)
Kokodoko

7
J'ai également l'impression que cette question nécessite un peu plus de réponses. Pouvons-nous simplement ignorer totalement ces fichiers et continuer notre travail?
Mateusz Migała

18
Comme l'affirme awiseman, les fichiers de spécifications sont en effet destinés à tester votre application. Si vous ne souhaitez pas utiliser les fichiers de test, vous pouvez simplement les supprimer ou les ignorer. Votre projet continuera de fonctionner sans les fichiers de spécifications.
dennismuijs

33
lorsque vous générez un nouveau composant avec CLI, vous pouvez ajouter --spec=falsepour exclure la génération d'un fichier de spécifications. La commande complète pour générer un nouveau composant serait: ng g component comp-name --spec=false. Plus d'infos ici: github.com/angular/angular-cli/wiki/generate-component
Dean

11
cela peut être désactivé en modifiant angular-cli.jsoncomme ceci:{ "defaults": { "component": { "spec": false } } }
Ali Sherafat

20

si vous générez un nouveau projet angulaire en utilisant "ng new", vous pouvez ignorer une génération de fichiers spec.ts. Pour cela, vous devez appliquer l'option --skip-tests.

ng new ng-app-name --skip-tests


1
Pouvez-vous définir cette option une fois le projet généré?
HughHughTeotl

2

Les fichiers .spec.ts sont destinés aux tests unitaires de composants individuels. Vous pouvez exécuter le gestionnaire de tâches Karma ng test. Afin de voir la couverture du code des cas de tests unitaires pour des composants particuliers exécutésng test --code-coverage


0

.spec.tsLe fichier est utilisé pour unit testingvotre application.

Si vous ne souhaitez pas le générer, utilisez-le --spec=falselors de la création d'un nouveau Component. Comme ça

ng generate component --spec=false mycomponentName
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.