MatDialog服务单元测试Angular 6错误 [英] MatDialog Service Unit Test Angular 6 Error
问题描述
我正在使用模态服务来打开,确认和关闭对话框,并且正在制作其单元测试文件,但是我在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-dialog可能很棘手.我倾向于使用间谍对象从对话框打开中返回(下面的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错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!