javascript - Why jasmine test fails for Angular Bootstrap Modal? - Stack Overflow

admin管理员组

文章数量:1396130

I'm very new to Angular so this could be a stupid question but I couldn't find how to solve my problem on stackoverflow (maybe because of my knowledge level), so let me post this question and I would very much appreciate if someone can help me solve it.

I'm using Angular Bootstrap Modal () but keep having an error message for ONLY test;

Error: No ponent factory found for notifyModalContent. Did you add it to @NgModule.entryComponents?.

(Dialog pops up with ng serve without problem)

I checked app.module.ts contains declarations: myModalContent, imports: NgbModule(or NgbModule.forRoot()), entryComponents: [notifyModalContent]. Also I added { provide: NgbActiveModal, useClass: NgbActiveModal } in overrideComponent in productponent.spec.ts but still doesn't work.

app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ProductComponent } from './product/productponent';
import { myModalContent } from './my-dialog/my-dialogponent';

@NgModule({
  declarations: [
    ProductComponent,
    myModalContent,
  ],
  imports: [
    NgbModule,
  ],
  entryComponents: [myModalContent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

productponent.spec.ts

import { ProductComponent } from './productponent';
import { myModalContent } from '../my-dialog/my-dialogponent';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';


describe('ProductComponent', () => {
  let ponent: ProductComponent;
  let fixture: ComponentFixture<ProductComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductComponent, myModalContent ],
    })
        .overrideComponent(ProductComponent, {
          set: {
            providers: [
              { provide: DataService, useClass: MockDataService },
              { provide: NgbActiveModal, useClass: NgbActiveModal }
            ]
          }
        })
    pileComponents();
  }));

productponent.ts

import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { myModalContent } from "../my-dialog/my-dialogponent";

@Component({
  selector: "app-product",
  templateUrl: "./productponent.html",
  styleUrls: ["./productponent.scss"]
})
export class ProductComponent implements OnInit {

  constructor(
    private modalService: NgbModal
  ) {}

    errorDialog() {
    const modalRef = this.modalService.open(MyModalContent, {
      centered: true
    });
    modalRefponentInstance.name = "Open dialog";
  }

}

I removed some of general parts such as async, ComponentFicture, dataservice import etc.

I'm very new to Angular so this could be a stupid question but I couldn't find how to solve my problem on stackoverflow (maybe because of my knowledge level), so let me post this question and I would very much appreciate if someone can help me solve it.

I'm using Angular Bootstrap Modal (https://ng-bootstrap.github.io/#/ponents/modal/examples) but keep having an error message for ONLY test;

Error: No ponent factory found for notifyModalContent. Did you add it to @NgModule.entryComponents?.

(Dialog pops up with ng serve without problem)

I checked app.module.ts contains declarations: myModalContent, imports: NgbModule(or NgbModule.forRoot()), entryComponents: [notifyModalContent]. Also I added { provide: NgbActiveModal, useClass: NgbActiveModal } in overrideComponent in product.ponent.spec.ts but still doesn't work.

app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ProductComponent } from './product/product.ponent';
import { myModalContent } from './my-dialog/my-dialog.ponent';

@NgModule({
  declarations: [
    ProductComponent,
    myModalContent,
  ],
  imports: [
    NgbModule,
  ],
  entryComponents: [myModalContent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

product.ponent.spec.ts

import { ProductComponent } from './product.ponent';
import { myModalContent } from '../my-dialog/my-dialog.ponent';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';


describe('ProductComponent', () => {
  let ponent: ProductComponent;
  let fixture: ComponentFixture<ProductComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductComponent, myModalContent ],
    })
        .overrideComponent(ProductComponent, {
          set: {
            providers: [
              { provide: DataService, useClass: MockDataService },
              { provide: NgbActiveModal, useClass: NgbActiveModal }
            ]
          }
        })
    .pileComponents();
  }));

product.ponent.ts

import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { myModalContent } from "../my-dialog/my-dialog.ponent";

@Component({
  selector: "app-product",
  templateUrl: "./product.ponent.html",
  styleUrls: ["./product.ponent.scss"]
})
export class ProductComponent implements OnInit {

  constructor(
    private modalService: NgbModal
  ) {}

    errorDialog() {
    const modalRef = this.modalService.open(MyModalContent, {
      centered: true
    });
    modalRef.ponentInstance.name = "Open dialog";
  }

}

I removed some of general parts such as async, ComponentFicture, dataservice import etc.

• javascript
• angular
• typescript
• angular-bootstrap

Share Improve this question Follow edited Jun 11, 2019 at 13:24 user11423100 asked Jun 11, 2019 at 7:32 user11423100user11423100 6111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

This is the way I tend to set out my modal tests. Hope it helps.

import { ProductComponent } from './product.ponent';
import { myModalContent } from '../my-dialog/my-dialog.ponent';
import { NgbActiveModal, NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';

describe('ProductComponent', () => {
  let ponent: ProductComponent;
  let fixture: ComponentFixture<ProductComponent>;    

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ProductComponent,
        myModalContent
      ],
      imports: [
        NgbModule,
      ],
      providers: [
        { provide: DataService, useClass: MockDataService },
        NgbActiveModal,
        NgbModal
      ]
    })
      .pileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductComponent);
    ponent = fixture.ponentInstance;
    fixture.detectChanges();
  });

});

本文标签： javascriptWhy jasmine test fails for Angular Bootstrap ModalStack Overflow