MatDialog Service Unit Test Angular 6 Error

Question

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

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.

Answer 1

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();     }); });