Angular CLi生成的“ spec.ts”文件是什么?


210

我是Angular 2(和Angular一般...)的新手,并且发现它非常吸引人。我在用 Angular CLi生成和服务项目。它似乎运行良好-尽管对于我的小学习项目,它产生的产量超出了我的需要-但这是可以预期的。

我注意到它会产生 spec.ts为项目中的每个Angular元素(组件,服务,管道等)生成。我到处搜索,但没有找到这些文件的用途说明。

这些构建文件在使用时通常是隐藏的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 {
}

Answers:


265

规范文件是对源文件的单元测试。Angular应用程序的约定是每个.ts文件都有一个.spec.ts文件。使用命令时,它们通过Karma测试运行程序(https://karma-runner.github.io/)使用Jasmine javascript测试框架运行ng test

您可以将其用于进一步阅读:

https://angular.io/guide/testing


17
谢谢,我自己也在想这个。假设我不想运行任何测试,可以安全删除.spec文件吗?(还有测试文件夹和文件,例如e2e文件夹?)
Kokodoko

7
我也觉得这个问题需要更多答案。我们能否完全忽略这些文件并继续我们的工作?
MateuszMigała17年

18
正如awiseman所说,规格文件确实是用于测试您的应用程序的。如果您不想使用测试文件,则只需删除或忽略它们即可。没有spec文件,您的项目将继续运行。
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 } } }
Ali Sherafat

20

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

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


1
项目生成后可以设置此选项吗?
HughHughTeotl,

2

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


0

.spec.ts 文件用于 unit testing您的应用程序。

如果您不希望生成它,请--spec=false在创建new时使用Component。像这样

ng generate component --spec=false mycomponentName
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.