时间戳

首页 > 解决方案 > 错误：: 找不到用于隐藏 () 的对象

angular - 错误：: 找不到用于隐藏 () 的对象

问题描述

我正在使用 Angular 11，并且我已经为开放和封闭模型编写了测试用例。我收到以下错误：如何通过规范文件传递 templateRef 参数。

<spyOn>: 找不到用于隐藏 () 的对象

HTML：

<button class='btn btn-primary' id="button" (click)="openModal(template)">Add</button>

<button type="button" id="cancel-btn" data-dismiss="modal" class="btn btn-primary"
                (click)="onDeleteCancel()">

零件：

 valModalRef: BsModalRef;

constructor(private modalService: BsModalService)

openModal(template: TemplateRef<any>) {
      const CONFIGFORSMALLMODAL: ModalOptions = { class: CommonConst.MODEL_MD, animated: true, keyboard: false, backdrop: true, ignoreBackdropClick: true };
        this.valModalRef = this.modalService.show(template, CONFIGFORSMALLMODAL);
  }

onDeleteCancel() {
  this.valModalRef.hide();
}

规格：


beforeEach(async(() => {
    window.jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
    setTimeout(function () {
      TestBed.configureTestingModule({
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        imports: [ModalModule.forRoot(), HttpClientTestingModule, ReactiveFormsModule],
        declarations: [HomeComponent, DataPoolsComponent],
        providers: [PoolManagerService, CommonService, FormBuilder]
      }).overrideModule(BrowserDynamicTestingModule, {
        set: {
          entryComponents: [HomeComponent],
        }
      }).compileComponents();
    }, 500);
  }));

beforeEach(() => {
    fixture = TestBed.createComponent(DataPoolsComponent);
    component = fixture.componentInstance;
    poolService = TestBed.get(PoolManagerService);
    commonService = TestBed.get(CommonService);
    formBuilder = TestBed.get(FormBuilder);
    fixture.detectChanges();
  });
it('onDeleteCancel', () => {
    spyOn(component.valModalRef, 'hide').and.callThrough();
    spyOn(component, 'onDeleteCancel').and.callThrough();
    const openBtn = fixture.nativeElement.querySelector('#button');
    openBtn.click();
    fixture.detectChanges();
    const cancelBtn = fixture.nativeElement.querySelector('#cancel-btn');
    cancelBtn.click();
    expect(component.valModalRef.hide).toHaveBeenCalled();
    expect(component.valModalRef).toHaveBeenCalled();
  });

标签： angularkarma-jasmine

解决方案

由于缺少代码，我必须做出很多假设，但我只能假设您忘记在您的测试中模拟 modalRef，您将其注入到您的组件中。

因此，如果您的组件在构造函数中有以下内容：

constructor(private valModalRef: BsModalRef) {}

您需要在测试中执行以下操作：

let mockModalRef: BsModalRef;

beforeEach(() => {
  const modalRefSpy = jasmine.createSpyObj('valModalRef', ['hide']);

  TestBed.configureTestingModule({
    declarations: [ComponentName],
    providers: [{ provide: BsModalRef: useValue: modalRefSpy }]
  });

  mockModalRef = TestBed.inject(BsModalRef) as jasmine.SpyObj<BsModalRef>;
});

然后你可以在你的测试中使用这个间谍：

 it('onDeleteCancel', async () => {
    const openBtn = fixture.nativeElement.querySelector('#button');
    openBtn.click();
    await fixture.whenStable();
    const cancelBtn = fixture.nativeElement.querySelector('#cancel-btn');
    cancelBtn.click();
    expect(mockModalRef.hide).toHaveBeenCalled();
  });

推荐阅读