Styjun

I am trying to write a test case for the component but I am getting the error as Cannot read property 'data' of undefined. I am using angular 6. Please look at deleteDomain() method.I am trying to write a test case for the component but I am getting the error as Cannot read property 'data' of undefined. I am using angular 6. Please look at deleteDomain() method.

Here My code for the component

 export class GridRendererComponent implements ICellRendererAngularComp 
 public params: any;
 // Icons
 faEdit = faEdit;
 faTrashAlt = faTrashAlt;

 constructor(private router: Router, public dialog: MatDialog) 

 agInit(params: any): void 
 this.params = params;
 
 deleteDomain() 
 this.dialog.open(ConfirmDialogComponent, 
 panelClass: '_small-dialog',
 disableClose: true,
 position: top: '50px' ,
 data: 
 title: 'Delete Domain',
 description: `Are you sure do you want to delete domain Contract ID: $
 this.params.data.contactId
 ?`
 
 );
 
 

Here is the below code for a spec which I tried

 import async, ComponentFixture, TestBed from '@angular/core/testing';

 import GridRendererComponent from './grid-renderer.component';
 import RouterTestingModule from '@angular/router/testing';
 import FeaturesModule from '../../features.module';
 import Routes, Router from '@angular/router';
 import BrowserAnimationsModule from '@angular/platform-browser/animations'; 
 import MatDialog, MatDialogRef, MAT_DIALOG_DATA from '@angular/material';
 import NAccessRequestComponent from '../../n-access-request/n-access-request.component';

 const routes: Routes = [
 path: 'n-access-request', component: NAccessRequestComponent ,
 ];

 describe('GridRendererComponent', () => 
 let gridRendererComponent: GridRendererComponent;
 let dialog : MatDialog;
 let router: Router;

 beforeEach(() => 
 TestBed.configureTestingModule(
 imports: [
 RouterTestingModule.withRoutes(routes),
 FeaturesModule,
 BrowserAnimationsModule
 ],
 declarations: [ ]
 )

 .compileComponents();
 router = TestBed.get(Router);
 router.initialNavigation();
 );

 beforeEach(() => 
 const fixture = TestBed.createComponent(GridRendererComponent);
 gridRendererComponent = fixture.componentInstance;
 fixture.detectChanges();
 );

 it('should create', () => 
 expect(gridRendererComponent).toBeTruthy();
 );

 it('agInit', () => 
 let params = 
 "column" : "status"
 ;
 gridRendererComponent.agInit(params);
 expect(gridRendererComponent.params).not.toBe(null);
 );


 it('approveRequest', () =>
 let params = 
 "data" : 
 "contactId" : '5',
 
 ;
 spyOn(gridRendererComponent.dialog, 'open').and.returnValue(true);
 gridRendererComponent.deleteDomain();
 expect(gridRendererComponent.dialog.open).toHaveBeenCalled();
 expect(gridRendererComponent.params.data.contactId).not.toBe(null);
 );

 );

I have found few mistakes you have made, again question itself has lack of information.

First: Define your components inside the declaration closure. I've found you have 2 components to be added, GridRendererComponent and ConfirmDialogComponent.

You don't need to initiate router navigation at very first.

// router = TestBed.get(Router);
// router.initialNavigation();

Change your spyOn method to following,

spyOn(gridRendererComponent.dialog, 'open');

Since you are spying on the method it'll never call, so you don't need to define data object here.
Hence remove last assertion as well.

// expect(gridRendererComponent.params.data.contactId).not.toBe(null);