Почему тест Жасмин не проходит для Angular Bootstrap Modal? - PullRequest
Новая
       18

Почему тест Жасмин не проходит для Angular Bootstrap Modal?

0 голосов
/ 11 июня 2019

Я очень плохо знаком с Angular, так что это может быть глупым вопросом, но я не смог найти способ решить мою проблему с помощью stackoverflow (возможно, из-за моего уровня знаний), поэтому позвольте мне опубликовать этот вопрос, и я бы очень хотел признателен, если кто-то может помочь мне решить эту проблему.

Я использую Angular Bootstrap Modal (https://ng -bootstrap.github.io / # / components / modal / examples ), но продолжаю получать сообщение об ошибке только для теста;

Ошибка: не найдена фабрика компонентов для notifyModalContent. Вы добавили его в @NgModule.entryComponents?.

(диалоговое окно появляется без проблем)

Я проверил app.module.ts содержит declarations: myModalContent, imports: NgbModule(or NgbModule.forRoot()), entryComponents: [notifyModalContent]. Также я добавил { provide: NgbActiveModal, useClass: NgbActiveModal } в overrideComponent в product.component.spec.ts, но все равно не работает.

app.module.ts 

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

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

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

product.component.spec.ts 

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


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

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

product.component.ts 

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

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

  constructor(
    private modalService: NgbModal
  ) {}

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

}

Я удалил некоторые общие части, такие как async, ComponentFicture, импорт службы данных и т. Д.

1 Ответ

0 голосов
/ 11 июня 2019

Так я обычно выставляю свои модальные тесты.Надеюсь, это поможет. 

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

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

});
...