Angular 4 茉莉花間諜功能

Question

我有一個相對簡單的組件，但無法設法讓間諜成功注冊呼叫。 這些電話肯定會按預期進行，因為我已經破解了我自己的間諜版本，但是 jasmine Spy 似乎沒有按預期工作。 我希望這與異步性有關，因為我絕對不明白這一切在測試框架中是如何工作的，並且只是將示例拼湊在一起。

在下面的示例中，當前測試通過，但最終的日志輸出顯示間諜未檢測到任何調用。

如果從代碼中看不出來，這個組件由一個簡單的登錄頁面組成。 有兩個輸入字段（email 和密碼）和一個登錄按鈕，觸發組件的 login() 函數，使用 email 字段中的值觸發（這里模擬）用戶服務的登錄函數（密碼當前未使用）

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');
}));