Angular 中的单元测试 - 属性 值未更新

Question

我有一个简单的功能，可以在点击事件时显示和隐藏下拉菜单。这是HTML代码

<div (click)="toggleDropdown()" id="game-category">Show/Hide menu</div>
<div class="relative">
   <app-category *ngIf="isShown" [filtersList]="categories">
   </app-category>
</div>

该函数设置一个与组件的 属性 值相反的值。

isShown = false; 

toggleDropdown(): void {
     this.isShown = !this.isShown;
}

一切正常，但是当我 运行 测试时，我得到了一个错误。这是测试代码：

describe('CreateGameComponent', () => {

   let component: CreateGameComponent;
   let fixture: ComponentFixture<CreateGameComponent>;

    beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        CommonModule,
      ],
      declarations: [CreateGameComponent],
      providers: [RequestService, SessionService, AdminService],
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(CreateGameComponent);
        component = fixture.componentInstance;
        component.isShown = false;
        fixture.detectChanges();
      });
   });

   it('should create', () => {
      expect(component).toBeTruthy();
   });

   it('should check if toggleDropdownwas called', fakeAsync(() => {
      spyOn(component, 'toggleDropdown');
      let button =
      fixture.debugElement.nativeElement.querySelector('#game-category');
      button.click();
      tick();
      fixture.detectChanges();

      expect(component.toggleDropdown).toHaveBeenCalled();
      expect(component.isShown).toBe(true, 'isShown has not changed');
   }));
      
      
 })

触发点击事件后 isShown 属性 没有改变它的值。 任何帮助表示赞赏。谢谢！

Answer 1

当你做spyOn(component, 'toggleDropdown');时，它模拟方法，它的内容变为空，不再执行。你必须添加spyOn(component, 'toggleDropdown').and.callThrough()，所以该方法实际上被调用了。