Do czego służą pliki „spec.ts” generowane przez Angular CLi?


210

Jestem nowy w Angular 2 (i ogólnie Angular ...) i uważam, że jest bardzo wciągający. Używam Angular CLi do generowania i obsługi projektów. Wydaje się, że działa dobrze - chociaż w przypadku moich małych projektów edukacyjnych produkuje więcej, niż potrzebuję - ale tego należy się spodziewać.

Zauważyłem, że generuje on spec.tsdla każdego elementu Angular w projekcie (komponent, usługa, rura itp.). Szukałem w okolicy, ale nie znalazłem wyjaśnienia, do czego służą te pliki.

Czy te pliki kompilacji są zwykle ukryte podczas używania tsc? Zastanawiałem się, ponieważ chciałem zmienić nazwę źle nazwanego Component, który utworzyłem, i odkryłem, że w tych spec.tsplikach jest również mowa o nazwie .


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 {
}

Odpowiedzi:


265

Pliki specyfikacji to testy jednostkowe plików źródłowych. Konwencją dla aplikacji Angular jest posiadanie pliku .spec.ts dla każdego pliku .ts. Są one uruchamiane przy użyciu środowiska testowego javascript Jasmine za pomocą programu uruchamiającego test Karma ( https://karma-runner.github.io/ ) podczas korzystania z ng testpolecenia.

Możesz użyć tego do dalszej lektury:

https://angular.io/guide/testing


17
Dzięki, zastanawiałem się nad tym sam. Załóżmy, że nie chcę uruchamiać żadnych testów, czy mogę bezpiecznie usunąć pliki .spec? (a także foldery testowe i pliki, takie jak folder e2e?)
Kokodoko,

7
Czuję też, że to pytanie wymaga nieco więcej odpowiedzi. Czy możemy całkowicie zignorować te pliki i zająć się naszą pracą?
Mateusz Migała

18
Jak twierdzi awiseman, pliki specyfikacji są rzeczywiście przeznaczone do testowania aplikacji. Jeśli nie chcesz używać plików testowych, możesz je po prostu usunąć lub zignorować. Twój projekt będzie nadal działał bez plików specyfikacji.
dennismuijs

33
podczas generowania nowego komponentu za pomocą interfejsu CLI można dodać, --spec=falseaby wykluczyć generowanie pliku specyfikacji. Pełne polecenia do generowania nowego komponentu będzie: ng g component comp-name --spec=false. Więcej informacji tutaj: github.com/angular/angular-cli/wiki/generate-component
Dziekan

11
można to wyłączyć, modyfikując w angular-cli.jsonnastępujący sposób:{ "defaults": { "component": { "spec": false } } }
Ali Sherafat

20

jeśli generujesz nowy projekt kątowy za pomocą „ng new”, możesz pominąć generowanie plików spec.ts. W tym celu należy zastosować opcję --skip-testy.

Nowa nazwa ng-app - testy -skip


1
Czy możesz ustawić tę opcję po wygenerowaniu projektu?
HughHughTeotl

2

Pliki .spec.ts służą do testów jednostkowych poszczególnych składników. Możesz uruchomić biegacza zadań Karmy ng test. Aby zobaczyć pokrycie kodu jednostkowych przypadków testowych dla poszczególnych uruchomionych komponentówng test --code-coverage


0

.spec.tsplik jest używany dla unit testingTwojej aplikacji.

Jeśli nie chcesz go wygenerować, użyj go --spec=falsepodczas tworzenia nowego Component. Lubię to

ng generate component --spec=false mycomponentName
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.