1. ホーム
  2. アンギュラー

[解決済み】Angular CLIが生成する「spec.ts」ファイルは何のためにあるのか?

2022-04-06 11:57:56

質問

私はAngular 2(と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 {
}

解決方法は?

specファイルは、ソースファイルに対するユニットテストです。 Angularアプリケーションの規約では、各.tsファイルに対して.spec.tsファイルを用意することになっています。 これらは、Karmaテストランナーを通して、Jasmine javascriptテストフレームワークを使用して実行されます ( https://karma-runner.github.io/ を使用した場合) ng test コマンドを使用します。

続きを読むに使うことができます。

https://angular.io/guide/testing