ng-bootstrap 模态在单元测试中失败

Question

我遇到了 NgbModal 未在测试工具中打开的问题。当我尝试在模态服务中打开模态时出现问题：

@Injectable({
  providedIn: 'root'
})
export class ModalService {
  constructor(private modalService: NgbModal) {}

  /**
   * Opens an extra large modal dialog
   * @param component The content component
   */
  openExtraLarge<T>(component: Type<T>): NgbModalRef {
    return this.modalService.open(component, { windowClass: 'dark-modal', size: 'xl', centered: true });
  }
}

我的测试工具：

describe('ModalService', () => {
  let service: ModalService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ModalService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should open a dialog directly in the test', () => {
    spyOn(service, 'openExtraLarge');

    const myModal = service.openExtraLarge(TestModalComponent);

    expect(service.openExtraLarge).toHaveBeenCalled();
    expect(myModal).not.toBeUndefined();
  });

});

我创建了一个 stackblitz 示例 here

我怀疑问题是服务中没有注入Component，但是测试无提示失败（Expected undefined not be undefined）。

我的问题的根源是什么？

Answer 1

问题是您拦截了原始调用并期望它仍然 return 一些值。

spyOn(service, 'openExtraLarge');

这意味着您完全改变了 openExtraLarge 方法的行为。而且return没什么(undefined)

如果你想要它 return 你应该告诉间谍什么 return，例如：

spyOn(service, 'openExtraLarge').and.returnValue('something');

或者您可以事件执行原始方法，但应正确配置您的测试模块：

@NgModule({
  declarations: [TestModalComponent],
  entryComponents: [TestModalComponent]
})
export class TestModule {}

...
TestBed.configureTestingModule({
  imports: [TestModule, NgbModalModule]
});

...

spyOn(service, 'openExtraLarge').and.callThrough();

Forked Stackblitz

ng-bootstrap 模态在单元测试中失败

ng-bootstrap modal fails in unit test

angular

ng-bootstrap