Question

我有一个相对简单的组件，但无法设法让间谍成功注册调用。这些电话肯定正如预期的那样发生，因为我已经攻击了我自己的间谍版本，但茉莉花间谍似乎没有像预期的那样工作。我希望它与异步性有关，因为我绝对不明白这一切在测试框架中是如何工作的，而且只是拼凑了一些形式的例子。

在下面的示例中，当前测试正在通过，但最终日志输出显示间谍未检测到任何调用。

如果代码中不明显，则此组件包含一个简单的登录页面。有两个输入字段（电子邮件和密码）和一个登录按钮，它触发组件的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');
}));

角4茉莉间谍功能

1 个答案: