249 votes

Quel est l'utilisation des fichiers "spec.ts" générés par Angular CLI?

Je suis nouveau sur Angular 2 (et sur Angular en général...) et je trouve ça très captivant. J'utilise Angular CLI pour générer et servir des projets. Cela semble fonctionner bien - bien que pour mes petits projets d'apprentissage, il produise plus que ce dont j'ai besoin - mais c'est normal.

J'ai remarqué qu'il génère des fichiers spec.ts pour chaque élément Angular dans un projet (Composant, Service, Pipe, etc). J'ai cherché un peu mais je n'ai pas trouvé une explication de l'utilité de ces fichiers.

S'agit-il de fichiers de construction qui sont normalement cachés lors de l'utilisation de tsc? Je me suis posé la question car je voulais changer le nom d'un Composant mal nommé que j'avais créé et j'ai découvert que le nom était également référencé dans ces fichiers spec.ts.


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) => {
        let query = fixture.debugElement.query(By.directive(PovLevelComponent));
        expect(query).toBeTruthy();
        expect(query.componentInstance).toBeTruthy();
      });
  }));
});

@Component({
  selector: 'test',
  template: `

  `,
  directives: [PovLevelComponent]
})
class PovLevelComponentTestController {
}

311voto

awiseman Points 2926

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

Vous pouvez utiliser ceci pour plus de lectures :

https://angular.io/guide/testing

20 votes

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

9 votes

Je ressens aussi que cette question nécessite une réponse un peu plus détaillée. Pouvons-nous simplement ignorer complètement ces fichiers et continuer notre travail ?

21 votes

Comme le dit un sage, les fichiers de spécification sont en effet destinés au test de votre application. Si vous ne voulez pas utiliser les fichiers de test, vous pouvez simplement les supprimer ou les ignorer. Votre projet continuera de fonctionner sans les fichiers de spécification.

23voto

trueboroda Points 830

Si vous générez un nouveau projet Angular en utilisant "ng new", vous pouvez éviter de générer des fichiers spec.ts. Pour cela, vous devez appliquer l'option --skip-tests.

ng new nom-de-l'application-angular --skip-tests

3 votes

Pouvez-vous définir cette option après que le projet a été généré ?

2voto

Pritam Sinha Points 1

Les fichiers .spec.ts sont destinés aux tests unitaires pour les composants individuels. Vous pouvez exécuter le Karma task runner via ng test. Pour voir la couverture de code des cas de test unitaires pour des composants particuliers, exécutez ng test --code-coverage

1voto

r15 Points 3007

.spec.ts fichier est utilisé pour le tests unitaires de votre application.

Si vous ne voulez pas le générer, utilisez simplement --spec=false lors de la création d'un nouveau Component. Comme ceci

ng generate component --spec=false monNomDeComposant

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X