Question

在尝试运行此测试用例时，我一直遇到此恒定错误，在此情况下，我触发了一个模态单击，该调用应将方法称为“启用”。模态由其属性指令调用时构造，这就是为什么第二次单击时我使用文档选项而不是debugElement的原因。

这是组件的html

<div *ngIf="id" class="mt-3">
    <button  *ngIf="status" class="egbx-btn egbx-btn-danger" nz-button nzType="danger" egbxModal 
        nzTitle="{{ 'BTN_DISABLE.Mensajes.TITLE' | translate }}" 
        nzContent="{{ 'BTN_DISABLE.Mensajes.CONTENT' | translate }}" 
        (handleOK) ="disabled()"> 
        {{ 'BTN_DISABLE.Label' | translate }}
    </button>
    <button *ngIf="!status" class="egbx-btn egbx-btn-success"nz-button nzType="primary" egbxModal 
        nzTitle="{{ 'BTN_ENABLE.Mensajes.TITLE' | translate }}" 
        nzContent="{{ 'BTN_ENABLE.Mensajes.CONTENT' | translate }}" 
        (handleOK) ="enabled()"> 
        {{ 'BTN_ENABLE.Label' | translate }}
    </button>
</div>

这是组件

@Component({
  selector: 'updater-state',
  templateUrl: './updater-state.component.html'
})
export class UpdaterStateComponent implements OnInit {

  @Input() id: Guid;
  @Input() status: boolean;
  @Output() hanldeChangeStatus = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  disabled() {
    this.hanldeChangeStatus.emit(false);
  }

  enabled() {
    this.hanldeChangeStatus.emit(true);
  }
}

这是测试用例，其中fixture = TestBed.createComponent(UpdaterStateComponent);和component = fixture.componentInstance;

it('Enabled_toHaveBeenCalled', fakeAsync(() => {
    let mockStatus: boolean = false;
    component.status = mockStatus;
    fixture.detectChanges();

    spyOn(component, 'enabled').and.callThrough();

    const button = fixture.debugElement.query(By.css('.egbx-btn-success'));
    button.triggerEventHandler('click', null);
    tick(30000);

    const modalOkButton = document.querySelector('.ant-btn-primary') as HTMLButtonElement;
    modalOkButton.click();
    tick(20000);

    fixture.detectChanges();
    expect(component.enabled).toHaveBeenCalled();
}));

我只是基于禁用功能运行了一个先前的测试用例，只是切换了状态和函数调用，并且没有问题。

茉莉花测试用例错误：已启用预期的间谍功能

0 个答案: