Для чего нужны файлы «spec.ts», созданные Angular CLi?


213

Я новичок в Angular 2 (и Angular в целом ...), и я нахожу это очень интересным. Я использую Angular CLi для создания и обслуживания проектов. Кажется, это работает хорошо - хотя для моих маленьких учебных проектов, это производит больше, чем мне нужно - но этого следовало ожидать.

Я заметил, что он генерируется spec.tsдля каждого элемента Angular в проекте (Component, Service, Pipe и т. Д.). Я искал вокруг, но не нашел объяснения того, для чего эти файлы.

Это файлы сборки, которые обычно скрыты при использовании tsc? Мне было интересно, потому что я хотел изменить имя плохо названного, которое Componentя создал, и обнаружил, что имя также упоминается в этих 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<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 {
}

Ответы:


267

Spec-файлы - это модульные тесты для ваших исходных файлов. Для приложений Angular принято иметь файл .spec.ts для каждого файла .ts. Они запускаются с использованием инфраструктуры тестирования Jasmine javascript через программу запуска Karma ( https://karma-runner.github.io/ ) при использовании ng testкоманды.

Вы можете использовать это для дальнейшего чтения:

https://angular.io/guide/testing


17
Спасибо, мне было интересно это самому. Предположим, я не хочу запускать какие-либо тесты. Могу ли я безопасно удалить файлы .spec? (а также тестовые папки и файлы, такие как папка e2e?)
Kokodoko

7
Я также чувствую, что этот вопрос требует немного больше ответов. Можем ли мы просто полностью игнорировать эти файлы и просто заняться нашей работой?
Матеуш Мигала

18
Как утверждает awiseman, файлы спецификаций действительно предназначены для тестирования вашего приложения. Если вы не хотите использовать тестовые файлы, вы можете просто удалить или проигнорировать их. Ваш проект продолжит функционировать без файлов спецификации.
dennismuijs

33
когда вы генерируете новый компонент с помощью CLI, вы можете добавить его, --spec=falseчтобы исключить создание файла спецификации. Полная команда для создания нового компонента будет: ng g component comp-name --spec=false. Более подробная информация здесь: github.com/angular/angular-cli/wiki/generate-component
декан

11
это можно отключить, изменив angular-cli.jsonследующим образом:{ "defaults": { "component": { "spec": false } } }
Али Sherafat

20

если вы генерируете новый угловой проект, используя «ng new», вы можете пропустить генерацию файлов spec.ts. Для этого вы должны применить опцию --skip-tests.

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


1
Можете ли вы установить эту опцию после создания проекта?
HughHughTeotl

2

Файлы .spec.ts предназначены для модульных тестов отдельных компонентов. Вы можете запустить бегущего по карме ng test. Чтобы увидеть покрытие кода модульных тестов для конкретных компонентов, выполнитеng test --code-coverage


0

.spec.tsфайл используется для unit testingвашего приложения.

Если вы не получили его, просто используйте --spec=falseпри создании нового Component. Как это

ng generate component --spec=false mycomponentName
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.