Angular CLiによって生成される「spec.ts」ファイルは何のためのものですか?


211

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

回答:


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ła2017

18
awisemanが述べているように、スペックファイルは実際にアプリケーションのテスト用です。テストファイルを使用したくない場合は、単に削除するか無視してください。プロジェクトは、スペックファイルがなくても機能し続けます。
dennismuijs 2017

33
CLIで新しいコンポーネントを生成するとき--spec=falseに、スペックファイルの生成を除外するために追加できます。新しいコンポーネントを生成するための完全なコマンドは次のとおりng g component comp-name --spec=falseです。詳細はこちら:github.com/angular/angular-cli/wiki/generate-component
Dean

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ファイルは、個々のコンポーネントの単体テスト用です。Karmaタスクランナーはから実行できますng test。特定のコンポーネントの実行に対する単体テストケースのコードカバレッジを確認するためng test --code-coverage


0

.spec.tsファイルはunit testingあなたのアプリケーションのために使用されます。

生成しない場合は--spec=false、新しいを作成するときに使用してくださいComponent。このような

ng generate component --spec=false mycomponentName
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.