モックサービスを使用しないAngular2ユニットテスト

Question

私はログイン/アウトボタンを表示/非表示する非常に単純なコンポーネントをテストしています。

これは私がAuthServiceサービスを嘲笑しているので、AngularFire2に依存しています。

問題は私が実際にAuthServiceの代わりに私のモックサービス（Mock AuthService）が提供されていないように見えることです。

should show the Facebook login buttonのテストでは、service.isAnonymousは未定義であると予想されます。実際のサービスでは、それはです。しかし模擬サービスではtrueです。このテストは失敗します。

また、メソッドservice.test(false);をコールしようとしています。モックサービスではこのメソッドが存在し、publicです。しかし、エラーが表示されます。'test'プロパティが 'AuthService'タイプに存在しません。

これは私のモックサービスが提供されていないことを示しています。

あなたは、私は私のテスト仕様でモックサービス（1がコメントアウトされます）を提供するための2つの方法で試してみましたがどのように見ることができます：完全性については

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

import { FacebookLoginComponent } from './facebook-login.component'; 
import { AuthService } from '../shared/auth.service'; 
import { MockAuthService } from '../shared/testing/auth.service'; 

describe('FacebookLoginComponent',() => { 
    let authService: AuthService; 
    let component: FacebookLoginComponent; 
    let fixture: ComponentFixture<FacebookLoginComponent>; 
    let debugElement: DebugElement; 
    let htmlElement: HTMLElement; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ FacebookLoginComponent ], 
     // providers: [{ provide: AuthService, useValue: MockAuthService }] 
    }) 
     .compileComponents(); 

    TestBed.overrideComponent(FacebookLoginComponent, { 
     set: { 
     providers: [{ provide: AuthService, useClass: MockAuthService }] 
     } 
    }) 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(FacebookLoginComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

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

    it('should show the Facebook login button', inject([ AuthService ], (service: AuthService) => { 
    expect(service.isAnonymous).toBeUndefined(); 

    debugElement = fixture.debugElement.query(By.css('button')); 
    htmlElement = debugElement.nativeElement; 

    service.test(false); 

    expect(htmlElement.textContent).toBe('Facebook Login'); 
    })); 

    it('should show the Logout button',() => { 
    debugElement = fixture.debugElement.query(By.css('button')); 
    htmlElement = debugElement.nativeElement; 

    expect(htmlElement.textContent).toBe('Logout'); 
    }); 
}); 

を。ここに私のモックサービス、MockAuthServiceは次のとおりです。

import { Injectable } from '@angular/core'; 

@Injectable() 
export class MockAuthService { 
    public authState: { isAnonymous: boolean, uid: string }; 

    constructor() { 
    this.authState = { isAnonymous: true, uid: '0HjUd9owxPZ5kibvUCN6S2DgB4x1' }; 
    } 

    // public get currentUser(): firebase.User { 
    // return this.authState ? this.authState : undefined; 
    // } 

    // public get currentUserObservable(): Observable<firebase.User> { 
    // return this.afAuth.authState; 
    // } 

    public get currentUid(): string { 
    return this.authState ? this.authState.uid : undefined; 
    } 

    public get isAnonymous(): boolean { 
    return this.authState ? this.authState.isAnonymous : false; 
    } 

    public get isAuthenticated(): boolean { 
    return !!this.authState; 
    } 

    // public logout(): void { 
    // this.afAuth.auth.signOut(); 
    // } 

    public test(isAnonymous: boolean) { 
    this.authState.isAnonymous = isAnonymous; 
    } 
} 

私が代わりにモックを提供する方法についての損失でいます。

更新：

は、これまでのところ、私は私の模擬テストの仕様を更新してきた答えとコメントに基づいて。しかし、私はまだ同じ問題を抱えています。

エラーが発生しました'test'というプロパティが 'AuthService'タイプに存在しません。

これは実際のauthServiceサービスの模擬品をまだ置き換えていないことを示しています。さらに

、私が追加：

public test(test: boolean): boolean { 
    return test; 
} 

をテストが失敗した実際のサービスに。上記のエラーのためではなく、テストの期待が満たされないためです。

これは私の更新スペックです：

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

import { FacebookLoginComponent } from './facebook-login.component'; 
import { AuthService } from '../shared/auth.service'; 
import { MockAuthService } from '../shared/testing/auth.service'; 

describe('FacebookLoginComponent',() => { 
    let authService: AuthService; 
    let component: FacebookLoginComponent; 
    let fixture: ComponentFixture<FacebookLoginComponent>; 
    let debugElement: DebugElement; 
    let htmlElement: HTMLElement; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ FacebookLoginComponent ], 
     providers: [{ provide: AuthService, useClass: MockAuthService }] 
    }).compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(FacebookLoginComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

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

    it('should show the Facebook Login button', inject([ AuthService ], (service: AuthService) => { 
    debugElement = fixture.debugElement.query(By.css('button')); 
    htmlElement = debugElement.nativeElement; 

    expect(htmlElement.textContent).toBe('Facebook Login'); 
    })); 

    it('should show the Logout button', inject([ AuthService ], (service: AuthService) => { 
    expect(service.isAnonymous).toBe(true); 

    debugElement = fixture.debugElement.query(By.css('button')); 
    htmlElement = debugElement.nativeElement; 

    service.test(false); 

    fixture.detectChanges(); 

    expect(htmlElement.textContent).toBe('Logout'); 
    })); 
}); 

Answer 1

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ FacebookLoginComponent ], 
     // providers: [{ provide: AuthService, useValue: MockAuthService }] 
    }) 
     .compileComponents(); 

    TestBed.overrideComponent(FacebookLoginComponent, { 
     set: { 
     providers: [{ provide: AuthService, useClass: MockAuthService }] 
     } 
    }) 
    })); 

二つの問題があります。 TestBedの設定時に提供できるので、コンポーネントのプロバイダをオーバーライドする必要はありません。

初期設定が機能しなかったため、コンポーネントのオーバーライドを開始したと仮定します。 useClassの代わりにuseValueを使用したため、動作しませんでした。

// providers: [{ provide: AuthService, useValue: MockAuthService }] 

これは、実行する必要があります。

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ FacebookLoginComponent ], 
     providers: [{ provide: AuthService, useClass: MockAuthService }] 
    }).compileComponents(); 
    })); 

EDIT：inject機能を使用する場合は

、あなたがタイプとしてMockAuthService使用する必要があります。 TypeScriptは不平を言ってはならない。

inject([ AuthService ], (service: MockAuthService) => { /* ... */ });