mardi 29 janvier 2019

Error: No component factory found for NgbModalBackdrop

I'am trying to test if my angular bootstrap modal gets built when the user clicks on a button but I am receiving this error: Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents, and all the test in the it expression fails.

I'm using NgbModal, NgbModalRef, NgbActiveModal from @ng-bootstrap/ng-bootstrap

My spec file is code is:

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

Aucun commentaire:

Enregistrer un commentaire