title: Angular testing Cannot read property 'data' of undefined
body: <p>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 <code>deleteDomain()</code> 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 <code>deleteDomain()</code> method.</p>
  
  <p>Here My code for the component</p>
  
  <pre class="lang-js prettyprint-override"><code>    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
              }?`
            }
          });
        }
       }
  </code></pre>
  
  <p>Here is the below code for a spec which I tried</p>
  
  <pre class="lang-js prettyprint-override"><code>     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', () =&gt; {
        let gridRendererComponent: GridRendererComponent;
        let dialog : MatDialog;
        let router: Router;
  
        beforeEach(() =&gt; {
          TestBed.configureTestingModule({
            imports: [
              RouterTestingModule.withRoutes(routes),
              FeaturesModule,
              BrowserAnimationsModule
            ],
            declarations: [ ]
          })
  
          .compileComponents();
          router = TestBed.get(Router);
          router.initialNavigation();
        });
  
        beforeEach(() =&gt; {
          const fixture = TestBed.createComponent(GridRendererComponent);
          gridRendererComponent = fixture.componentInstance;
          fixture.detectChanges();
        });
  
        it('should create', () =&gt; {
          expect(gridRendererComponent).toBeTruthy();
        });
  
        it('agInit', () =&gt; {
          let params = {
                "column" : "status"
                 };
          gridRendererComponent.agInit(params);
          expect(gridRendererComponent.params).not.toBe(null);
        });
  
  
        it('approveRequest', () =&gt;{
          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);
        });
  
      });
  </code></pre>