angular - 在 BsModalRef 中模拟 modal.content.onClose.subscribe
问题描述
我有一个通用的 ModalConfirm (ngx-bootstrap) 组件,如下所示:
export class ModalConfirmComponent {
public active = false;
public body: string | undefined | null;
public title: string | undefined | null;
public onClose = new Subject<boolean>();
public constructor(private bsModalRef: BsModalRef) {}
public showConfirmationModal(title: string, body: string): void {
this.title = title;
this.body = body;
this.active = true;
}
public onConfirm(): void {
this.active = false;
this.onClose.next(true);
this.bsModalRef.hide();
}
public onCancel(): void {
this.active = false;
this.onClose.next(false);
this.bsModalRef.hide();
}
public hideConfirmationModal(): void {
this.active = false;
this.onClose.next(undefined);
this.bsModalRef.hide();
}
}
它从服务中调用,如下所示:
addElementWithConfirmation(
course: ICourse | undefined | null,
courseContents: ICourseContent[] | undefined | null,
selectedCourseContentUid: string | undefined | null,
selectedCourseContentElementUid: string,
selectedCourseModule: number | undefined | null,
showAddElementMenu: boolean,
courseContentElementMethod: CourseContentElementsMap,
confirmElementReplacementModalBody: string
): void {
if (
course &&
courseContents &&
selectedCourseContentUid &&
!UtilService.isNullOrUndefined(selectedCourseModule)
) {
if (
this.canCourseContentElementBeAdded(
courseContentElementMethod,
courseContents,
selectedCourseContentUid
)
) {
const modal = this.modalService.show(ModalConfirmComponent);
if (modal && modal.content) {
modal.content.showConfirmationModal(
CONFIRM_MODAL_TITLE,
confirmElementReplacementModalBody
);
modal.content.onClose.subscribe((result) => {
if (result) {
this.hideAddElementMenu(showAddElementMenu);
courseContents = ADD_COURSE_CONTENT_ELEMENT_MAP[courseContentElementMethod](
(courseContents as unknown) as ICourseContent[],
selectedCourseContentElementUid,
selectedCourseContentUid
);
} else {
this.hideAddElementMenu(showAddElementMenu);
}
});
}
}
}
我现在面临的问题是围绕测试,modal.content.onClose.subscribe((result) => {
目前所有内容都是无法访问的代码。我该如何解决?我的测试如下:
describe('addElementWithConfirmation()', () => {
it('should add element', () => {
spyOn(service, 'canCourseContentElementBeAdded').and.callThrough();
let newCourseContents: ICourseContent[] = JSON.parse(JSON.stringify(courseContents));
service.addElementWithConfirmation(
course,
newCourseContents,
newCourseContents[0].uid,
`${CourseContentElementType.AUDIO}-${UtilService.generateRandomString(10)}`,
0,
true,
CourseContentElementsMap.ADD_COURSE_CONTENT_ELEMENT_AUDIO,
'test'
);
expect(service.canCourseContentElementBeAdded).toHaveBeenCalled();
});
我知道最好的办法是模拟 BsModalRef 如下,但我不知道如何模拟modal.content.onClose.subscribe
? 例如,这是一个内容为空的示例:
spyOn(mockModalService, 'show').and.returnValue({
id: 1,
content: null,
hide: () => {},
setClass: () => {},
onHide: new EventEmitter(),
onHidden: new EventEmitter(),
});
解决这个问题的最佳方法是什么?
解决方案
为了覆盖modal.content.onClose.subscribe((result) => {
代码部分,我将为onClose
函数创建一个间谍并返回一个模拟的 Observable。棘手的部分是,它this.modalService.show
返回了一个实例,这个实例需要被模拟,并且应该返回一个模拟对象,其中包含content.onClose
.
因此需要类似的东西:
const onCloseSpy = jasmine.createSpy().and.returnValue(of({})); // Here the rxjs of operator needes to return the onClose result object istead of the empty {} object. Please change add the object based on your needs.
const contentMock = {onClose: onCloseSpy};
spyOn(mockModalService, 'show').and.returnValue({
id: 1,
content: contentMock,
hide: () => {},
setClass: () => {},
onHide: new EventEmitter(),
onHidden: new EventEmitter(),
});
我无法测试上面的代码,但我希望它有助于理解这个想法,并且通过细微的调整它会起作用。
推荐阅读
- outlook-addin - 如何仅将 Outlook 插件部署到我们自己的员工
- firebase - 我应该将firebase id令牌存储在某处吗?
- c++ - Supermario 项目 C++ 和 Qt 的 HUD
- javascript - 如何使用复选框来装饰文本?
- reactjs - 一个 React 组件可以按 2 个类渲染吗?
- sql-server - 字符串或二进制数据将被截断:TRY_CAST 未捕获错误
- python - 如何使用 lxml 清理 HTML 字符串以在 python 中解析它?
- algorithm - 如何使这个最长递增子序列程序返回这个子序列
- iis - IIS web.config url 重写
- spring-batch - SpringBatch:即使使用 NeverRetryPolicy,ChunkStep 也会在编写器中重试异常