Angular 7中LoginComponent的loginUser方法测试失败求助

问题场景 #

在Angular 7项目中编写LoginComponent的测试用例时，组件内的loginUser()方法会在FormGroup有效时调用LoginService的authenticate()方法，但测试流程进入loginUser()后，并未触发authenticate()的subscribe回调，测试报错：Expected undefined to be equal {fake-data-object}。

相关代码 #

LoginComponent.ts #

res: any;
constructor(private loginService: LoginService) {}

loginUser() {
    // 原代码直接使用formGroup，需修正为组件内的表单实例引用
    if(this.form.valid) {
        this.loginService.authenticate(this.form.value.username, this.form.value.password).subscribe((response) => {
            this.res = response;
        });
    }
}

LoginService.ts #

constructor(private http: HttpClient){}
authenticate(username: string, password: string): Observable<any> {
    // http请求，返回用户登录数据
}

LoginComponent.spec.ts #

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  let loginServiceSpy = jasmine.createSpyObj('LoginService', ['authenticate']);

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [/* 所需模块，如ReactiveFormsModule */],
      declarations: [ LoginComponent ],
      providers: [ { provide: LoginService, useValue: loginServiceSpy } ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    // 初始化组件内的FormGroup实例
    component.form = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
    fixture.detectChanges();
  });

  it('should login user with valid credentials', fakeAsync(() => {
    const fakeData = { id: 1, username: 'test' };
    loginServiceSpy.authenticate.and.returnValue(of(fakeData));

    const formData = {
      "username": "username",
      "password": "password"
    };

    component.form.setValue(formData);
    expect(component.form.valid).toBe(true);
    
    component.loginUser();
    // 推进时间触发Observable回调执行
    tick();
    // 触发变更检测更新组件属性
    fixture.detectChanges();

    expect(component.res).toEqual(fakeData);
    // 验证authenticate方法是否被正确调用
    expect(loginServiceSpy.authenticate).toHaveBeenCalledWith('username', 'password');
  }));
});

问题原因及解决步骤 #

1. 表单引用错误：原组件代码直接使用formGroup，但测试中操作的是component.form，需修正为this.form，同时要通过this.form.value正确获取表单字段值。
2. 异步逻辑未同步处理：即使使用of()创建同步Observable，Angular测试环境中需要用fakeAsync和tick()手动推进时间，确保subscribe回调执行完成。
3. 未触发变更检测：调用loginUser()后，需执行fixture.detectChanges()，让测试框架检测到组件属性的更新。

内容的提问来源于stack exchange，提问作者Shubham Arya