依存ユニットテスト：角2

Question

私は自分のアプリケーションの単体テストを作成しようとしています。私の主な目標は、コンポーネントまたはサービスの基本スペックファイルを作成して、そのコンポーネントが依存するすべてのサービスまたはコンポーネントがインポートされているかどうかを確認することです（これは私が考える最も基本的な仕様ファイルです）。私はインターネット上で検索しようとしたが有用な何かを考え出すことができませんでした。 ご協力いただければ幸いです。

Answer 1

Angular-Cliをご覧ください。 Angular 2アプリケーションの作成に役立ちます。コンポーネントを生成すると、ng g component my-new-componentは、そのコンポーネントのファイルを自動的に作成します（.spec）。 Angular-Cliはまた、のテスト環境を指定してHEREと設定します。

これはどれくらい助けているのかわかりませんが、あなたを助けるには十分かもしれません。

だから私はNAV-バーコンポーネント

何とか-NAV-bar.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-blah-nav-bar', 
    templateUrl: './app/blah-nav-bar/blah-nav-bar.component.html', 
    styleUrls: ['./app/blah-nav-bar/blah-nav-bar.component.css'] 
}) 
export class BlahNavBarComponent implements OnInit { 

    constructor(private router: Router) { } 

    ngOnInit() { 
    } 

} 

そして、生成されたspecファイルはこの

何とか-NAVのように見えてい-bar.component.spec.ts

import { By }   from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { async, inject } from '@angular/core/testing'; 
import { BlahNavBarComponent } from './blah-nav-bar.component'; 

describe('Component: BlahNavBar',() => { 
    it('should create an instance',() => { 
    let component = new BlahNavBarComponent(); 
    expect(component).toBeTruthy(); 
    }); 
}); 

私はspecファイルをコメントアウトので、私はこれについてはあまり知らないが、多分私が公式にこれを見つけたあなたは

UPDATE

を始めるために何かを刺激するのに十分です角度2のサイトも同様です。ここにAngular 2 Testingホームページへのリンクがあります。それは説明しますTesting a Component with a Dependency

したがって、コンポーネントの注入サービスをテストする場合。

アプリ/ .specこの

アプリ/ welcome.component.spec.ts

import { WelcomeComponent } from './welcome.component'; 
import { UserService }  from './model'; 

beforeEach(() => { 
    // stub UserService for test purposes 
    userServiceStub = { 
    isLoggedIn: true, 
    user: { 
     name: 'Test User' 
    } 
    }; 

    TestBed.configureTestingModule({ 
    declarations: [WelcomeComponent], 
    providers: [{ 
     provide: UserService, 
     useValue: userServiceStub 
    }] 
    }); 

    fixture = TestBed.createComponent(WelcomeComponent); 
    comp = fixture.componentInstance; 

    // UserService from the root injector 
    userService = TestBed.get(UserService); 

    // get the "welcome" element by CSS selector (e.g., by class name) 
    de = fixture.debugElement.query(By.css('.welcome')); 
    el = de.nativeElement; 


}); 


// The Tests 
it('should welcome the user',() => { 
    fixture.detectChanges(); 
    const content = el.textContent; 
    expect(content).toContain('Welcome', '"Welcome ..."'); 
    expect(content).toContain('Test User', 'expected name'); 
}); 

it('should welcome "Bubba"',() => { 
    userService.user.name = 'Bubba'; // welcome message hasn't been shown yet 
    fixture.detectChanges(); 
    expect(el.textContent).toContain('Bubba'); 
}); 

it('should request login if not logged in',() => { 
    userService.isLoggedIn = false; // welcome message hasn't been shown yet 
    fixture.detectChanges(); 
    const content = el.textContent; 
    expect(content).not.toContain('Welcome', 'not welcomed'); 
    expect(content).toMatch(/log in/i, '"log in"'); 
}); 

ようになり

import { Component, OnInit } from '@angular/core'; 
import { UserService }  from './model'; 

@Component({ 
    selector: 'app-welcome', 
    template: '<h3 class="welcome"><i>{{welcome}}</i></h3>' 
}) 
export class WelcomeComponent implements OnInit { 
    welcome = '-- not initialized yet --'; 
    constructor(private userService: UserService) { } 

    ngOnInit(): void { 
    this.welcome = this.userService.isLoggedIn ? 
     'Welcome, ' + this.userService.user.name : 
     'Please log in.'; 
    } 
} 

welcome.component.ts