angular - Jasmine 测试具有私有(private)属性的 Angular 组件

Question

我有这个代码。我将 myData 保存在 ngOnInit 中。当我通过单击按钮测试 myMethod 时，this.myData 在 myMethod 中是 undefined。

@Component({
   templateUrl: ''
})

export class MyComponent implements OnInit {
   myData: MyClass;
   constructor() {}
   ngOnInit() {
      this.myData = // some code
   }

   myMethod() {
    this.myData is undefined here
   }
}

我的规范文件是:

describe('MyComponent', () => {

 // set up stubs 
 beforeEach(async(() => {
 TestBed.configureTestingModule({
  declarations: [  MyComponent ],
  providers:    [
  ],
  imports: [
   FormContainer
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents();

  fixture = TestBed.createComponent(MyComponent);
  comp = fixture.debugElement.componentInstance;
 }));

  it('should call myMethod', fakeAsync(() => {
    element.querySelectorAll('button')[0].click();
    fixture.detectChanges();
    fixture.whenStable().then(async() => {
      fixture.detectChanges();
    });
  }));
});

Answer 1

这是因为您在按钮存在之前查询它。只需将您的 fixture.detectChanges() 移动到您的 element.querySelectorAll() 之前，它应该可以工作。参见 Angular Docs有关原因的详细信息。

it('should call myMethod', fakeAsync(() => {
    spyOn(comp, 'myMethod').and.callThrough();
    fixture.detectChanges(); // <--- Move to here from below ...
    element.querySelectorAll('button')[0].click();
    // fixture.detectChanges();  <-- Move this ...
    expect(comp.myMethod).toHaveBeenCalled();
    // fixture.whenStable().then(async(() => {
    //   fixture.detectChanges();
    // }));
}));

工作 StackBlitz .查看控制台，因为我修改了 myMethod() 如下:

myMethod() {
  console.log(this.myData); // is no longer undefined here
}

希望对您有所帮助。

更新

我修改了 StackBlitz 以使其更加清晰。以下是 StackBlitz 中的新测试:

it('comp.myData should be undefined if element.query is first', () => {
    element.querySelectorAll('button')[0].click();
    expect(comp.myData).toBeUndefined(); // <-- Note this is UNDEFINED at this point
    fixture.detectChanges(); // <--- This is in the wrong place ...
});

it('comp.myData should be defined if fixture.detectChanges() is first', () => {
    fixture.detectChanges(); // <--- Now this is in the before the query.
    element.querySelectorAll('button')[0].click();
    expect(comp.myData).toEqual({data: 'test'}); // <-- Note this is now defined
});

如果您查看 console.log，您将看到以下内容:

Console was cleared
undefined

{data: "test"}

第一个未定义来自第一个测试，当时 fixture.detectChanges() 在错误的位置。第二个 {data: "test"} 来自现在定义的第二个测试。

希望对您有所帮助。