角度スパイが認識されていない機能が呼び出されています

Question

私の機能モジュールの1つをテストしようとしていますが、苦労しています。スパイはメソッドが呼び出されたとは思わないので、私の最後のテストは失敗します。 this.translate.use(this.currentLanguage.i18n)コールを購読ブロックの外に移動しても、

これは、特徴成分である：

export class LanguagesComponent implements OnDestroy, OnInit { 

    public languages = [ 
    { 
     id: '0', 
     name: this.translate.stream('LANGUAGES.SWEDISH'), 
     i18n: 'sv', 
     flag: { 
     src: './assets/img/sv.svg' 
     } 
    }, 
    { 
     id: '1', 
     name: this.translate.stream('LANGUAGES.ENGLISH'), 
     i18n: 'en', 
     flag: { 
     src: './assets/img/en.svg' 
     } 
    } 
    ]; 

    public currentLanguage: any; 

    private storageSubscription: Subscription; 

    constructor(
    private cs: ClientStorage, 
    private notifications: NotificationsApi, 
    private router: Router, 
    private translate: TranslateService 
) {} 

    ngOnInit() { 

    const storedLanguage: any = this.cs.getItem(AppConstants.currentLanguage); 

    this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', storedLanguage); 

    // Listen for when the language changes from other places than this component 
    this.storageSubscription = this.cs.logger$ 
     .filter(data => data && data.key === AppConstants.currentLanguage) 
     .subscribe((currentLanguage: any) => { 

     if (currentLanguage) { 

      this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', currentLanguage.value); 

      // Set the current language to use 
      this.translate.use(this.currentLanguage.i18n); 
     } 
     } 
    ); 
    } 

    ngOnDestroy() { 
    this.storageSubscription.unsubscribe(); 
    } 

    selectLanguage(language: any): void { 

    this.cs.setItem(AppConstants.currentLanguage, language.i18n); 

    this.router.navigate(['dashboard']); 

    this.notifications.newNotification({message: this.translate.instant('NOTIFICATIONS.LANGUAGES.CHANGED'), theme: 'success'}); 
    } 
} 

そしてこれらは、これまでのところ、私のテストです：あなたのテストで

describe('[UNIT] LanguagesComponent',() => { 

    let component: LanguagesComponent; 
    let fixture: ComponentFixture<LanguagesComponent>; 
    let translate: Location; 

    beforeEach(() => { 

    TestBed.configureTestingModule({ 
     imports: [ 
     ModuleImports 
     ], 
     providers: [ 
     TranslateService 
     ], 
     schemas: [NO_ERRORS_SCHEMA], 
     declarations: [LanguagesComponent, DummyComponent] 
    }); 

    fixture = TestBed.createComponent(LanguagesComponent); 
    component = fixture.componentInstance; 
    translate = TestBed.get(TranslateService); 

    // Make sure ngOnInit runs 
    fixture.detectChanges(); 
    }); 

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

    it('should have a current language when the component has loaded',() => { 
    expect(component.currentLanguage).toBeTruthy(); 
    }); 

    it('should have the needed properties in the current language',() => { 

    const currentLanguage = component.currentLanguage; 

    expect(currentLanguage.id).toBeTruthy(); 
    expect(currentLanguage.name).toBeTruthy(); 
    expect(currentLanguage.i18n).toBeTruthy(); 
    expect(currentLanguage.flag.src).toBeTruthy(); 
    }); 

    it('should call the use method of TranslateService with the current language i18n property',() => { 

    const spy = spyOn(translate, 'use').and.callThrough(); 

    expect(spy).toHaveBeenCalledWith(component.currentLanguage.i18n); 
    }); 
}); 

Answer 1

あなたはスパイを作成し、あなたがimmidietlyコールを検証しようとしています。電話はありません。

これには2つの解決策があります。 1）fixture.detectの変更がbeforeEachに移る前にあなたのspyOnを移動してください 2）スパイを作成した後、適切なメソッドを呼び出して/トリガーして、予期した呼び出しをトリガーします。この場合、fixture.detectChangesを呼び出す必要があります。

注 - その他の問題ではテストを実行しませんでしたが、基本的な問題は、スパイ作成とスパイ使用の間の呼び出しがないことです。