Для чого потрібні файли "spec.ts", створені Angular CLi?


210

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

Я помітив, що він створює spec.tsдля кожного кутового елемента в проекті (компонент, служба, труба тощо). Я шукав навколо, але не знайшов пояснення, для чого ці файли.

Це файли збірки, які зазвичай приховані під час використання 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 {
}

Відповіді:


265

Файли специфікації є одиничними тестами для вихідних файлів. Угода для кутових додатків полягає у тому, щоб мати .spec.ts файл для кожного .ts-файлу. Вони виконуються за допомогою тестової рамки JavaScript Жасмін через тестовий біг Karma ( https://karma-runner.github.io/ ) при використанні ng testкоманди.

Ви можете використовувати це для подальшого читання:

https://angular.io/guide/testing


17
Спасибі, я сам це цікавив. Припустимо, я не хочу запускати тести, чи можу я безпечно видалити .spec файли? (а також тестові папки та файли, такі як папка e2e?)
Кокодоко

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 } } }
Алі Шерафат

20

якщо ви генеруєте новий кутовий проект, використовуючи "ng new", ви можете пропустити створення файлів spec.ts. Для цього слід застосувати опцію --skip-тести.

нове ng-app-name --skip-тести


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.