component-and-service-sample.spec.ts

sample1.spec.ts

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

// コンポーネントの定義
@Component({
  selector: 'parent-component',
  template: '<p>parent component working.</p>'
})
class ParentComponent {
  name = 'parent component';
}

// テスト
describe('コンポーネントを初期化するだけのテスト', () => {
  // コンポーネントの雛形
  let fixture: ComponentFixture<ParentComponent>;
  // コンポーネント
  let comp: ParentComponent;

  // 事前にコンポーネントを作成する
  beforeEach(async(() => {
    // テスト環境の @NgModule の設定
    TestBed.configureTestingModule({
      declarations: [ParentComponent]
    });
    // コンポーネントを作成して変数にセット
    TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(ParentComponent);
      comp = fixture.componentInstance;
    });
  }));

  // テストの実行
  it('プロパティの初期値が正常に取得できる', () => {
    // プロパティのチェック
    expect(comp.name).toBe('parent component');
  });
});

sample2.spec.ts

import {Component} from '@angular/core';
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {By} from '@angular/platform-browser';

// コンポーネントの定義
@Component({
  selector: 'parent-component',
  template: '<button (click)="onClick()">btn</button>'
})
class ParentComponent {
  name = 'parent component';
  onClick() {
    this.name = 'clicked';
  }
}

// テスト
describe('コンポーネントのクリックイベント実行テスト', () => {
  // コンポーネントの雛形
  let fixture: ComponentFixture<ParentComponent>;
  // コンポーネント
  let comp: ParentComponent;

  // 事前にコンポーネントを作成する
  beforeEach(async(() => {
    // テスト環境の @NgModule の設定
    TestBed.configureTestingModule({
      declarations: [ParentComponent]
    });
    // コンポーネントを作成して変数にセット
    TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(ParentComponent);
      comp = fixture.componentInstance;
    });
  }));

  // テストの実行
  it('クリックイベントを実行してメソッドが実行されている', fakeAsync(() => {
    // onClick メソッドを監視
    spyOn(comp, 'onClick');
    // ボタンを取得してクリックイベントを送信
    const btn = fixture.debugElement.query(By.css('button'));
    btn.triggerEventHandler('click', null);
    // fakeAsync 環境で非同期イベント待ちをシミュレート
    tick();
    // 更新を検知
    fixture.detectChanges();
    // onClick メソッドが実行されたことの確認
    expect(comp.onClick).toHaveBeenCalled();
  }));
});

sample3.spec.ts

import {Component} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';

// コンポーネントの定義
@Component({
  selector: 'parent-component',
  template: '<p>parent component working.</p> <child-component></child-component>'
})
class ParentComponent {
  name = 'parent component';
}

// 子コンポーネントの定義
@Component({
  selector: 'child-component',
  template: '<p>child component working</p>'
})
class ChildComponent {
  name = 'child component';
}

// テスト
describe('親子コンポーネントを作成できることをテストする', () => {
  // コンポーネントの雛形
  let fixture: ComponentFixture<ParentComponent>;
  // コンポーネント
  let comp: ParentComponent;

  // 事前にコンポーネントを作成する
  beforeEach(async(() => {
    // テスト環境の @NgModule の設定
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent] // ChildComponent をコンポーネントとして利用できるように追加
    });
    // コンポーネントを作成して変数にセット
    TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(ParentComponent);
      comp = fixture.componentInstance;
    });
  }));

  // テストの実行
  it('子コンポーネントを取得してプロパティが取得できることをテストする', () => {
    // CSS で子コンポーネントの HTML 要素取得
    const el = fixture.debugElement.query(By.css('child-component'));
    // HTML 要素からコンポーネントを取得
    const child = el.componentInstance;
    // プロパティのチェック
    expect(comp.name).toBe('parent component');
    expect(child.name).toBe('child component');
  });
});

sample4.spec.ts

import {Component, Injectable} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';

// サービスの定義
@Injectable()
class TestService {
  name = 'test service';
}

// コンポーネントの定義
@Component({
  selector: 'parent-component',
  template: '<p>parent component working.</p> <child-component></child-component>'
})
class ParentComponent {
  name = 'parent component';
}

// 子コンポーネントの定義
@Component({
  selector: 'child-component',
  template: '<p>child component working</p>'
})
class ChildComponent {
  name = 'child component';
  constructor(public testService: TestService) { }
}

// テスト
describe('コンポーネントとサービスの初期化のテスト', () => {
  // コンポーネントの雛形
  let fixture: ComponentFixture<ParentComponent>;
  // コンポーネント
  let comp: ParentComponent;

  // 事前にコンポーネントを作成する
  beforeEach(async(() => {
    // テスト環境の @NgModule の設定
    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponent],
      providers: [TestService], // TestService が DI されるように設定
    });
    // コンポーネントを作成して変数にセット
    TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(ParentComponent);
      comp = fixture.componentInstance;
    });
  }));

  // テストの実行
  it('コンポーネント初期化時にサービスも DI で初期化されていることのテスト', () => {
    // CSS で子コンポーネントの HTML 要素取得
    const el = fixture.debugElement.query(By.css('child-component'));
    // HTML 要素からコンポーネントを取得
    const child = el.componentInstance;
    // プロパティのチェック
    expect(comp.name).toBe('parent component');
    expect(child.name).toBe('child component');
    // 初期化時に DI されているサービスのプロパティチェック
    expect(child.testService.name).toBe('test service');
  });
});