Zenn
😎

Angularのspecファイルを再生成するSTEP BY STEP

に公開
Angular
Test
tech

Angularでは、 ng コマンドで作成したコンポーネントやサービス、Pipeには（特に設定しない限り）テスト設定用にspecファイルが自動生成されます。 ただ、長くランニングしてるプロジェクトだと、テストが通らないというのはまぁいいとはして、無理やり通すためにspecファイルを削除してしまっているというのがあったりなかったり。私が持ってる昔からのプロジェクトでもあったりなかったり。

生成AIで初期ファイルは自動生成したいと思ったので、再生成するためのガイドラインを（主に私が生成AIに情報を食わせるために）まとめておきます。

STEP BY STEP

1. specファイルがないコンポーネントやサービス、Pipeを探して一覧にする

specファイルは、テスト対象に関連してファイル名がついています。以下の通りです。

ファイルタイプ テスト対象ファイル specファイル
コンポーネント example.component.ts example.component.spec.ts
Ionicのページコンポーネント example.page.ts example.page.spec.ts
サービス example.service.ts example.service.spec.ts
Pipe example.pipe.ts example.pipe.spec.ts
ディレクティブ example.directive.ts example.directive.spec.ts

specファイルは、テスト対象ファイルと同階層にあるはずです。まずは再帰的にすべてのテスト対象ファイルを確認し、同階層にspecファイルがないものを一覧化します。

2. specファイルをつくる

コンポーネント

コンポーネントは、AngularコンポーネントもIonicのページコンポーネントもルールは同じです。ExampleComponentの場合は以下になります。

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ExampleComponent } from './example.component';

describe('ExampleComponent', () => {
  let component: ExampleComponent;
  let fixture: ComponentFixture<ExampleComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ExampleComponent],
    });
    fixture = TestBed.createComponent(ExampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

ExamplePageの場合は、 ExampleComponent が ExamplePage となるだけですね。簡単です。Angular CLIで使うテンプレートは以下にあります。

https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/component/files/name%40dasherize%40if-flat/name%40dasherize.type%40dasherize.spec.ts.template

サービス

ExampleServiceの場合は以下になります。

import { TestBed } from '@angular/core/testing';

import { ExampleService } from './example.service';

describe('ExampleService', () => {
  let service: ExampleService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ExampleService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Angular CLIで使うテンプレートは以下です。

https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/service/files/name%40dasherize.type%40dasherize.spec.ts.template

Pipe

ExamplePipeの場合は以下になります。

import { ExamplePipe } from './example.pipe';

describe('ExamplePipe', () => {
  it('create an instance', () => {
    const pipe = new ExamplePipe();
    expect(pipe).toBeTruthy();
  });
});

Angular CLIで使うテンプレートは以下です。

https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/pipe/files/__name%40dasherize____typeSeparator__pipe.spec.ts.template

ディレクティブ

ExampleDirectiveの場合は以下になります。

import { ExampleDirective } from './example.directive';

describe('ExampleDirective', () => {
  it('should create an instance', () => {
    const directive = new ExamplePipe();
    expect(directive).toBeTruthy();
  });
});

Angular CLIで使うテンプレートは以下です。

https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/directive/files/name%40dasherize.type%40dasherize.spec.ts.template

3. プロジェクトの仕様にあわせる

私が知ってる中では、ほとんどのプロジェクトでは依存関係やテスト用モックをまとめて別で定義しておいて、 configureTestingModule する時に渡します。例えば、私の場合は、 test.config.ts をつくって、以下のような全体のテストで適用したい設定を書いています。

export const testConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
  ...

そして、それを configureTestingModule で以下のように設定します。

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: testConfig.providers,
  });
  ...

プロジェクトの基本ルールがある場合は、他のspecファイルを確認してその仕様にあわせる必要があります。

まとめ

おわかりだと思いますが、小さいプロンプトウインドウにこの本文を入力して使い捨てにする気が起きなかったので書いた記事です。皆さんもぜひAIコーディングに使う汎用的な指示は記事化してみんなで共有しましょう！

それではまた。

Discussion