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();
  });

});

我已经创建了一个here的堆叠闪电战示例

我怀疑问题与以下事实有关：组件未注入服务，但测试无提示失败（预期未定义为未定义）。

我的问题可能出在哪里？

Answer 1

问题是您拦截了原始呼叫，并希望它仍会返回一些值。

spyOn(service, 'openExtraLarge');

这意味着您完全更改了openExtraLarge方法的行为。它什么也不返回（undefined）

如果您希望它返回某些内容，则应告诉间谍返回的内容，例如：

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 modal在单元测试中失败

1 个答案: