测试期间未调用 ngOnInit 内部的方法

Question

我正在尝试测试是否从 ngOnInit 调用服务方法。但是，我得到了一个奇怪的行为：尽管执行了 ngOnInit，但并未调用该方法。

import { Component } from '@angular/core';
import { SampleService } from './sample.service';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {
  todos:any;

  constructor(private service: SampleService){}

  ngOnInit(){
    this.todos = 'A';
    this.service.getAll().subscribe(
      res => {
        this.todos = res;
      }
    );
  }
}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ HttpClientModule ],
      declarations: [ SampleComponent ],
      providers: [ SampleService ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(SampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should load todos from the server', () => {
    let todos = [1,2,3];
    let service = TestBed.inject(SampleService);
    spyOn(service,'getAll').and.returnValue(of(todos));
    
    //component.ngOnInit();
    
    expect(component.todos).toEqual(todos);
  });
  
});

如果我测试此代码，测试将失败并返回消息“预期 'A' 等于 [ 1, 2, 3 ]”。因此'ngOnInit'被执行，但方法'getAll'没有被调用。

但是，如果我取消注释“component.ngOnInit()”，那么我手动调用 ngOnInit，测试就可以完美运行（它返回 SUCCESS 消息）。

你明白为什么会发生这种情况吗？为什么 getAll 没有被调用？

Answer 1

您正在尝试测试异步调用，但要同步执行。当

expect

被执行时，你的

of()

模拟还没有执行。这就是为什么你看不到结果。

您可以将测试函数“包装”到

fakeAsync

中，并将其与

tick

结合起来，后者有自己的技巧来模拟时间的流逝。

it('should load todos from the server', fakeAsync(() => {
  let todos = [1,2,3];
  let service = TestBed.inject(SampleService);
  spyOn(service,'getAll').and.returnValue(of(todos));
  
  // I don't recall by heart if you need to call ngOnInit or not. Give it a try I guess
  //component.ngOnInit(); 
  tick();
  expect(component.todos).toEqual(todos);
}));

有关该主题的更多信息，请参阅this。