角度4のジャスミンスパイ機能

Question

私は比較的単純なコンポーネントを持っていますが、スパイを呼び出すことはできません。 自分のスパイのバージョンをハッキングしたので、期待通りにコールが行われていますが、ジャスミンスパイは期待どおりに動作していないようです。 私はそれが非同期性と関係することを期待しています。なぜなら、テストフレームワーク内のすべての動作がどういう仕組みで、どうやら一緒になってビットの例を形成していることを理解していないからです。

以下の例では、現在のテストはパスしていますが、最終的なログ出力では、スパイがコールを検出していないことが示されています。

コードから明らかでない場合、このコンポーネントは単純なログインページで構成されています。 2つの入力フィールド（電子メールとパスワード）とログインボタンがあり、コンポーネントのlogin（）関数がトリガーされ、電子メールフィールドの値を使用して（ここでは模擬された）ユーザーサービスのログイン機能が起動されます（パスワードは現在使用されていません）

import { DebugElement } from '@angular/core'; 
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { MaterialModule } from '@angular/material'; 
import { FormsModule } from '@angular/forms'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 

import { MessengerService } from '../messenger/messenger.service'; 
import { UserService } from '../user/user.service'; 

import { LoginComponent } from './login.component'; 

describe('Login Component',() => { 
    let comp: LoginComponent; 
    let fixture: ComponentFixture<LoginComponent>; 
    let mockMessengerService: any = { 
    }; 
    let mockUserService: any = { 
     login: (username: string) => { 
      console.log('in function'); 
      calledWith = username; 
      return; 
     }, 
    }; 
    let calledWith: string; 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      imports: [ 
       NoopAnimationsModule, 
       RouterTestingModule, 
       FormsModule, 
       MaterialModule, 
      ], 
      declarations: [ 
       LoginComponent, 
      ], 
      providers: [ 
       { 
        provide: MessengerService, 
        useValue: mockMessengerService, 
       }, 
       { 
        provide: UserService, 
        useValue: mockUserService, 
       }, 
      ], 
     }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 
     calledWith = undefined; 
     fixture = TestBed.createComponent(LoginComponent); 
     comp = fixture.componentInstance; 
    }); 

    it('should call user.login with email as parameter', async(() => { 
     fixture.detectChanges(); 
     fixture.whenStable().then(() => { 
      const emailDe: DebugElement = fixture.debugElement.query(By.css('#email')); 
      const emailEl: HTMLInputElement = emailDe.nativeElement; 

      let loginSpy = spyOn(mockUserService, 'login'); 

      emailEl.value = 'test@test.com'; 
      emailEl.dispatchEvent(new Event('input')); 
      fixture.detectChanges(); 

      comp.login(); 
      expect(calledWith).toBe('test@test.com'); 
      console.log('spyCalled: ' + loginSpy.calls.any()); 
     }); 
    })); 
}); 

私は現在、単純な情報を見逃していて、私よりも経験豊富な人には分かりやすいと思っていますが、それが起こらない場合は、問題を示す例

Answer 1

私はそれがうまくいっています。問題を抱えているのは、擬似プロトタイプの代わりに注入されたプロバイダーの機能を盗んでいたはずです（あるいは、これらの行に沿ったものです。私は理解し...）

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
      NoopAnimationsModule,   
      RouterTestingModule,    
      FormsModule, 
      MatCardModule, 
      MatButtonModule,     
      MatInputModule, 
     ],   
     declarations: [ 
      LoginComponent, 
     ], 
     providers: [ 
      {   
       provide: MessengerService,  
       useValue: mockMessengerService, 
      },  
      {   
       provide: UserService,   
       useValue: mockUserService,  
      },  
     ], 
    }) 
    .compileComponents(); 

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

    debugElement = fixture.debugElement; 
    loginService = debugElement.injector.get(UserService); 
    loginSpy = spyOn(loginService, 'login'); 
}));