MatDialog Service Unit Test Angular 6 Error(MatDialog 服务单元测试 Angular 6 错误)
问题描述
我有模式服务来打开、确认和关闭对话框,我正在制作它的单元测试文件,但我在 Angular 上遇到错误,这是代码.
I'm having modal service to open, confirm and close dialog and i am making its unit test file but i got and error on Angular and this is the code.
modal.service.ts
@Injectable()
export class ModalService {
constructor(private dialog: MatDialog) { }
public open<modalType>(modalComponent: ComponentType<modalType>): Observable<any> {
let dialogRef: MatDialogRef<any>;
dialogRef = this.dialog.open(modalComponent, {
maxWidth: '100vw'
});
console.log(dialogRef)
dialogRef.componentInstance.body = body;
return dialogRef.afterClosed().pipe(map(result => console.log('test'); );
}
}
modal.service.spec.ts
modal.service.spec.ts
export class TestComponent {}
describe('ModalService', () => {
let modalService: ModalService;
const mockDialogRef = {
open: jasmine.createSpy('open')
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ MatDialogModule ],
providers: [
ModalService,
MatDialogRef,
{ provide: MatDialog, useClass: MatDialogStub }
]
}).compileComponents();
modalService = TestBed.get(ModalService);
}));
it('open modal', () => {
modalService.open(DummyComponent, '300px');
expect(modalService.open).toHaveBeenCalled();
});
});
所以使用该代码的错误是
So with that code the error is
TypeError: Cannot read property 'componentInstance' of undefined
你能帮助我如何使这个成功吗?非常感谢您的帮助.
Can you help me how to make this successful? Help is much appreciated.
推荐答案
测试 mat-dialogs
可能很棘手.我倾向于使用 spy 对象从打开的对话框中返回(dialogRefSpyObj
下面),这样我可以更轻松地跟踪和控制测试.在您的情况下,它可能类似于以下内容:
Testing mat-dialogs
can be tricky. I tend to use a spy object for the return from a dialog open (dialogRefSpyObj
below) so I can more easily track and control tests. In your case it might look something like the following:
describe('ModalService', () => {
let modalService: ModalService;
let dialogSpy: jasmine.Spy;
let dialogRefSpyObj = jasmine.createSpyObj({ afterClosed : of({}), close: null });
dialogRefSpyObj.componentInstance = { body: '' }; // attach componentInstance to the spy object...
beforeEach(() => {
TestBed.configureTestingModule({
imports: [MatDialogModule],
providers: [ModalService]
});
modalService = TestBed.get(ModalService);
});
beforeEach(() => {
dialogSpy = spyOn(TestBed.get(MatDialog), 'open').and.returnValue(dialogRefSpyObj);
});
it('open modal ', () => {
modalService.open(TestComponent, '300px');
expect(dialogSpy).toHaveBeenCalled();
// You can also do things with this like:
expect(dialogSpy).toHaveBeenCalledWith(TestComponent, { maxWidth: '100vw' });
// and ...
expect(dialogRefSpyObj.afterClosed).toHaveBeenCalled();
});
});
这篇关于MatDialog 服务单元测试 Angular 6 错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:MatDialog 服务单元测试 Angular 6 错误


- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01