![](/img/trans.png)
[英]Jasmine unit test to check the scope of an Angular Bootstrap modal
[英]Why jasmine test fails for Angular Bootstrap Modal?
我对Angular很新,所以这可能是一个愚蠢的问题,但我找不到如何在stackoverflow上解决我的问题(也许是因为我的知识水平),所以让我发布这个问题,如果有人我会非常感激可以帮我解决它。
我正在使用Angular Bootstrap Modal( https://ng-bootstrap.github.io/#/components/modal/examples )但仍然只有一个错误消息进行ONLY测试;
错误:找不到notifyModalContent的组件工厂。 你有没有把它添加到
@NgModule.entryComponents
?
(对话框弹出ng服务没有问题)
我检查了app.module.ts
包含declarations: myModalContent
, imports: NgbModule(or NgbModule.forRoot())
, entryComponents: [notifyModalContent]
。 另外,我在product.component.spec.ts
中的overrideComponent中添加了{ provide: NgbActiveModal, useClass: NgbActiveModal }
,但仍然不起作用。
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,dataservice import等。
这是我倾向于设置我的模态测试的方式。 希望能帮助到你。
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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.