具有私有属性的茉莉花测试角组件

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"} 来自现在定义的第二个测试。

我希望这会有所帮助。