javascript - 为什么 Angular Bootstrap 模态的茉莉花测试失败?
问题描述
我对 Angular 很陌生,所以这可能是一个愚蠢的问题,但我找不到如何解决我在 stackoverflow 上的问题(可能是因为我的知识水平),所以让我发布这个问题,如果有人我将非常感激可以帮我解决。
我正在使用 Angular Bootstrap 模态(https://ng-bootstrap.github.io/#/components/modal/examples),但始终出现仅测试的错误消息;
错误:未找到 notifyModalContent 的组件工厂。加进去了
@NgModule.entryComponents
吗。。
(对话框弹出 ng serve 没有问题)
我检查了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";
}
}
我删除了一些通用部分,例如异步、ComponentFicture、数据服务导入等。
解决方案
这是我倾向于设置模态测试的方式。希望能帮助到你。
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();
});
});
推荐阅读
- android - 如何获取 NMEA 消息 **RMC 或 **GGA 或 **GSA Android
- python-3.x - ValueError:字典更新序列元素 #0 的长度为 1;2 是必需的(Flask json.dumps)
- python - pandas.read_table 在 Jupyter 笔记本中工作,但在 vi 编辑器中不起作用
- r - 使用 While 和 For 循环在 R 中分配新变量
- logging - 如何使用同一 pod 中的另一个容器从容器中读取标准输出
- html - 如何根据浏览器大小调整图像大小?
- java - 无法使用 Selenium 启动 Chrome 浏览器
- asp.net-mvc - 如何在 ASP.NET MVC 中使用前进和后退功能从数据库中检索视频
- python - 如何获得具有指定条件的数据框的总和?
- node.js - 将版本化的 API 路由动态加载到 express.Router