Angular CLi生成的"spec.ts"文件是什么？

Question

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

Answer 1

规范文件是源文件的单元测试.Angular应用程序的约定是为每个.ts文件提供.spec.ts文件.当您使用该ng test命令时,它们通过Karma任务运行程序使用Jasmine javascript测试框架运行.

你可以用它来进一步阅读:

https://angular.io/guide/testing

Answer 2

如果使用"ng new"生成新的角度项目,则可以跳过生成spec.ts文件.为此,您应该应用--skip-tests选项.

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

Answer 3

.spec.ts 文件用于各个组件的单元测试。您可以通过运行 Karma 任务运行程序ng test。为了查看特定组件运行的单元测试用例的代码覆盖率ng test --code-coverage