我正尝试测试当用户单击按钮时是否建立了我的角度引导程序模态,但是我收到此错误:错误:找不到NgbModalBackdrop的组件工厂。您是否将其添加到@ NgModule.entryComponents 中,并且 it 表达式中的所有测试都失败了。
我正在使用@ ng-bootstrap / ng-bootstrap中的NgbModal,NgbModalRef,NgbActiveModal
我的规格文件的代码是:
describe('RulesComponent', () => {
let component: RulesComponent
let fixture: ComponentFixture<RulesComponent>
let modalComponent: ModalComponent
let activeModal: NgbActiveModal
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
RulesComponent,
ModalComponent
],
imports: [
ReactiveFormsModule,
NgSelectModule,
HttpClientTestingModule,
],
providers: [
PlatformGraphQLService,
RuleDisplayService,
Apollo,
DataService,
NgbModal
]
})
.overrideModule(BrowserDynamicTestingModule, {
set: {
entryComponents: [
ModalComponent,
]
}
}).compileComponents().then(() => {
const modalService: NgbModal = TestBed.get(NgbModal)
const modalRef: NgbModalRef = modalService.open(ModalComponent)
modalComponent = modalRef.componentInstance
activeModal = modalComponent.activeModal
})
fixture = TestBed.createComponent(RulesComponent)
component = fixture.componentInstance
fixture.detectChanges()
}))
it('should create', () => {
expect(component).toBeTruthy()
})
it('should invoke the openModal method when user clicks on edit button', async(() => {
spyOn(component, 'openModal')
/**
* add an empty rule so one row is added at least
* for the edit button to appear and test it
*/
component.rules = {
getAllRules: [
{
id: '',
conditions: '',
consequent: ''
}
]
}
fixture.detectChanges()
const button = fixture.debugElement.query(By.css('button.edit-rule'))
fixture.detectChanges()
button.triggerEventHandler('click', 'openModal')
fixture.whenStable().then(() => {
expect(component.openModal).toHaveBeenCalled()
})
}))
it('should initiate the modal component', () => {
spyOn(component, 'openModal')
expect(activeModal).toBeDefined()
})
})