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