Question

我需要根据属性值测试是否正确初始化了字段。在ngOnInit中的预订下调用的方法中的条件下，使用此属性。我正在使用间谍返回此规范的布尔值作为模拟值。问题在于，调用和spyOn操作之间存在延迟，即使间谍更改了属性的值，似乎也不够快。

component.ts

//Value I want to test
value;

//This is the property I need to check
get isThisTrue() {
    return this.externalService.isTrue();
}

ngOnInit() {
this.otherService.getSomething().subscribe(res => {
  this.method();
   })
}

method() {
  if(this.isThisTrue) {
   this.value = 1;
  } else {
     this.value = 2;
}

component.spec.ts

//That is my failing test.
it('should be 2', inject([ExternalService], (service) => {
  spyOn(service, 'isTrue').and.returnValue(false);
  component.ngOnInit();
  fixture.detectChanges();
  expect(value).toBe(2);
}))

ps .：如果我强制组件内部的结果为假，则测试通过。

Answer 1

我遇到了类似的问题，即在组件的ngOnInit中未使用spyOn方法返回的数据。

我的问题是该组件是在beforeEach（）方法中创建的

beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); 
});

因此，它的ngOnInit（）也在spy方法返回模拟数据之前立即被调用。

我将代码从beforeEach（）方法移到了函数createComponent（）

function createComponent(){
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
 }

，并在使用spyOn返回模拟数据后，从测试规范中调用了此函数。

it('should create component with 2 rows', async () => {
    const expectedData: string[] = ['row 1', 'row 2'];
    myServiceSpy.getData.and.returnValue(expectedData));

    createComponent();

    expect(component).toBeTruthy();
    fixture.whenStable().then(() => {
        expect(myServiceSpy.getData).toHaveBeenCalled();
        expect(component.data.length).toEqual(2);
    });
});

Now, the component is getting the mock data as expected

如何监视Angular测试规范中ngOnInit内部订阅中调用的方法？

1 个答案: