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

【问题标题】：Unit testing in Angular - property value not updatingAngular中的单元测试-属性值未更新
【发布时间】：2022-01-10 18:01:23
【问题描述】：

我有一个简单的功能，可以在点击事件时显示和隐藏下拉菜单。这是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属性没有改变它的值。任何帮助表示赞赏。谢谢！

【问题讨论】：

标签： angular unit-testing jasmine angular-unit-test

【解决方案1】：

当您执行spyOn(component, 'toggleDropdown'); 时，它会模拟该方法，其内容变为空，不再执行。必须加上spyOn(component, 'toggleDropdown').and.callThrough()，所以才真正调用方法。

【讨论】：