title: Angular unit test doesn't initialize ag-Grid
body: <p>I'm trying to unit test a component that contains an ag-Grid, but the <code>onGridReady</code> function never gets called, so all tests involving ag-Grid fail. How can I make onGridReady actually get called before my tests run?</p>
  
  <p>spec file:</p>
  
  <pre><code>describe('MyComponent', () =&gt; {
    let spectator: SpectatorHost&lt;MyComponent&gt;;
    let fixture: ComponentFixture&lt;MyComponent&gt;;
  
    const createHost = createHostFactory({
      component: MyComponent,
      entryComponents: [MyComponent],
      imports: [
        TranslateModule.forRoot(),
        AgGridModule.withComponents([]),
        MatTooltipModule,
        InlineSVGModule.forRoot(),
        MaterialModule,
        HMSharedModule,
      ],
      providers: [
        {
          provide: MatDialogRef,
          useValue: [],
        },
        {
          provide: MAT_DIALOG_DATA,
          useValue: [],
        },
        HttpClient,
        HttpHandler,
      ],
    });
  
    beforeEach(() =&gt; {
      spectator = createHost(`&lt;MyComponentSelector&gt;&lt;/MyComponentSelector&gt;`, {
        hostProps: {},
      });
      fixture = spectator.fixture;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(spectator.component).toBeTruthy();
    });
  
    it('should detect changes', () =&gt; {
      spectator.fixture.detectChanges();
  
    });
  
  </code></pre>
  
  <p>"should create" works, but "should detect changes" fails with this error:</p>
  
  <p><code>TypeError: Cannot read property 'setColumnDefs' of undefined</code></p>
  
  <p>in the html, here's my ag-grid:</p>
  
  <pre><code>          &lt;ag-grid-angular
              style="height: 157px"
              #agGrid1
              class="ag-grid ag-theme-balham"
              [rowSelection]="rowSelection"
              [columnDefs]="columnDefs1"
              [gridOptions]="gridOptions"
              (gridReady)="onGridReady($event)"
              (gridSizeChanged)="resizeColumns($event)"
              (cellValueChanged)="updateBottomGrid('agGrid1', false)"
              [singleClickEdit]="true"
            &gt;
            &lt;/ag-grid-angular&gt;
  </code></pre>
  
  <p>and here's the onGridReady:</p>
  
  <pre><code>  onGridReady(params: any): void {
      console.log('onGridReady called successfully');
      if (this.agGrid1) {
        this.agGrid1.api = params.api;
      }
    }
  </code></pre>
  
  <p>The console statement is never printed, so <code>onGridReady</code> is somehow never being called. How can I get it to be called before the unit test?</p>
  
  <p>Edit: Someone mentioned that I need to provide data for columnDefs, but I already have <code>initializeColumnDefs()</code> which defines all columns, and I have confirmed that this does get called during the unit test, so this is not the problem.</p>
  
  <p>Also, I don't think this is relevant, but this component is a MatDialog.</p>