Angular Test Bed

以下なドキュメント機械翻訳控えを投入。

Angular Test Bed

Angular Test Bed

Angular Test Bed（ATB）は、Angular Frameworkに依存する動作を簡単にテストするための高レベルのAngular Onlyテストフレームワークです。

私たちはまだJasmineでテストを書いてKarmaを使って実行しますが、コンポーネントの作成、インジェクションの処理、非同期動作のテスト、アプリケーションとのやりとりをやや簡単に行うことができます。

この講義はATBの紹介であり、このセクションの残りの部分でも引き続き使用します。

Learning objectives

ATBとはどのようなものですか？
いつATB対プレーンバニラジャスミンテストを使用するか。

Configuring

プレーンバニラジャスミンでテストしたコンポーネントをATBを使用するコンポーネントに変換することにより、ATBの使用方法を説明します。

/* tslint:disable:no-unused-variable */
import {TestBed, ComponentFixture} from '@angular/core/testing';
import {LoginComponent} from './login.component';
import {AuthService} from "./auth.service";

describe('Component: Login', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [AuthService]
    });
  });
});

テストスイートのbeforeEach関数では、TestBedクラスを使用してテストモジュールを設定します。

これは、コンポーネントをインスタンス化したり、依存性注入などを実行するために使用できるテストAngular Moduleを作成します。

通常のNgModuleを設定するのとまったく同じ方法で設定します。この場合、宣言のLoginComponentとプロバイダのAuthServiceを渡します。

Fixtures and DI

ATBがセットアップされたら、それを使ってコンポーネントをインスタンス化し、依存関係を解決することができます：

/* tslint:disable:no-unused-variable */
import {TestBed, ComponentFixture} from '@angular/core/testing';
import {LoginComponent} from './login.component';
import {AuthService} from "./auth.service";

describe('Component: Login', () => {

  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;  // 1.
  let authService: AuthService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [AuthService]
    });

    // create component and test fixture
    fixture = TestBed.createComponent(LoginComponent);  // 2.

    // get test component from the fixture
    component = fixture.componentInstance;  // 3.

    // UserService provided to the TestBed
    authService = TestBed.get(AuthService);  // 4.

  });
});

フィクスチャは、コンポーネントとそのテンプレートのラッパーです。
TestBedを通じてコンポーネントフィクスチャのインスタンスを作成し、コンポーネントコンストラクタにAuthServiceを注入します。
実際のコンポーネントは、フィクスチャーのcomponentInstanceから見つけることができます。
get関数を使ってTestBedインジェクタを使って依存関係を解決することができます。

注 LoginComponentには独自の子インジェクタがないため、注入されるAuthServiceは上記のTestBedと同じものです。

Test specs

今度はTestBedを設定し、以前と同じテスト仕様で実行できるコンポーネントとサービスを抽出しました：

it('canLogin returns false when the user is not authenticated', () => {
  spyOn(authService, 'isAuthenticated').and.returnValue(false);
  expect(component.needsLogin()).toBeTruthy();
  expect(authService.isAuthenticated).toHaveBeenCalled();
});

it('canLogin returns false when the user is not authenticated', () => {
  spyOn(authService, 'isAuthenticated').and.returnValue(true);
  expect(component.needsLogin()).toBeFalsy();
  expect(authService.isAuthenticated).toHaveBeenCalled();
});

When to use ATB

このセクションの残りの部分では引き続きATBを使用します：

ディレクティブやコンポーネントのテンプレートとの相互作用をテストすることができます。
これにより、変更検出を簡単にテストすることができます。
これにより、Angulars DIフレームワークのテストと使用が可能になり、
アプリケーションで使用するNgModule設定を使用してテストすることができます。
クリック＆入力フィールドを使用してユーザーの操作をテストすることができます

Summary

ATBは、本物のAngularアプリケーションのコンテキストで実行されているかのようにコードの一部をテストすることができます。

今後の講義では、ATBを使用して変更の検出とプロパティのバインドをテストする方法がより有用になります。

Listing

http://plnkr.co/edit/jqw3ddMQU7zPQg9KBXJE?p=preview

Listing 1. login.component.spec.ts

/* tslint:disable:no-unused-variable */
import {TestBed, ComponentFixture} from '@angular/core/testing';
import {LoginComponent} from './login.component';
import {AuthService} from "./auth.service";

describe('Component: Login', () => {

  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let authService: AuthService;

  beforeEach(() => {

    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [AuthService]
    });

    // create component and test fixture
    fixture = TestBed.createComponent(LoginComponent);

    // get test component from the fixture
    component = fixture.componentInstance;

    // UserService provided to the TestBed
    authService = TestBed.get(AuthService);

  });

  it('canLogin returns false when the user is not authenticated', () => {
    spyOn(authService, 'isAuthenticated').and.returnValue(false);
    expect(component.needsLogin()).toBeTruthy();
    expect(authService.isAuthenticated).toHaveBeenCalled();
  });

  it('canLogin returns false when the user is not authenticated', () => {
    spyOn(authService, 'isAuthenticated').and.returnValue(true);
    expect(component.needsLogin()).toBeFalsy();
    expect(authService.isAuthenticated).toHaveBeenCalled();
  });
});