fixture.detectChanges() not binding populated array to the html element

[garima singh]

Need to test the table in the dialog,able to validate the mock data in this.lines array(array which populates data in the table) but fixture.detectChanges() breaks the testing and leads to  Error:Cannot read property 'data' of undefined.

noop.detectChanges(),working fine to validate data in ts file and prints this.lines correctly,but do not bind the data to Html table element

component.ts

ngOnInit() {

    this.fileList = this.thisDialogRef.componentInstance.data; //fixture.detectChanges() causes Error:Cannot read property 'data' of undefined

    this.populateUpdateFormFields();  //method which gives this.lines Array

  }

component.spects.ts

@Component({

  template: ''

})

class NoopComponent { }

const TEST_DIRECTIVES = [

 componentName, NoopComponent

];

@NgModule({

  imports: [ReactiveFormsModule, MatIconModule, FormsModule, MatFormFieldModule, MatCheckboxModule, MatToolbarModule,

    MatChipsModule, MatDialogModule, MatDatepickerModule, MatInputModule, CommonModule, HttpClientTestingModule,

    MaterialModule, MatDatepickerModule, MatNativeDateModule, BrowserAnimationsModule],

  exports: TEST_DIRECTIVES,

  declarations: TEST_DIRECTIVES,

  entryComponents: [

    componentName

  ],

  providers: [AssetService, CommonServicesService, SideNavService]

})

class DialogTestModule { }

describe('Component', () => {

  let component: Component;

  let fixture: ComponentFixture<componentName>;

  let dialog: MatDialog;

  let overlayContainerElement: HTMLElement;

  let noop: ComponentFixture<NoopComponent>;

  // data = new Dialog()

  const data = { dialogData: 'Dialog Message' };

  beforeEach(async(() => {

    TestBed.configureTestingModule({

      imports: [DialogTestModule],

      providers: [

        { provide: MatDialogRef, useValue: {} },

        { provide: MAT_DIALOG_DATA, useValue: {} },

        {

          provide: OverlayContainer, useFactory: () => {

            overlayContainerElement = document.createElement('div');

            return { getContainerElement: () => overlayContainerElement };

          }

        }

      ],

    })

      .compileComponents();

    dialog = TestBed.get(MatDialog);

    noop = TestBed.createComponent(NoopComponent);

  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(componentName);

    component = fixture.componentInstance;

    // fixture.detectChanges();

  });

  it('should create', () => {

    expect(component).toBeTruthy();

  });

  it('shows information without details', fakeAsync(() => {

    // fixture.detectChanges();

    // component.ngOnInit();

    const element = fixture.nativeElement;

    const dialogConfig = new MatDialogConfig();

    const config = {

      data: {

        accountId: '99999',

        assetId: 'f8a4129d-f225-4a1b-b819-2e6d8cfeef28',

        jsonData: '["ba", "bb", "cc"]',

      }

    };

    const updateDataDialog = dialog.open(componentName, {

      width: '49vw',

      panelClass: 'myClass'

    });

    updateDataDialog.componentInstance.data = config.data;

    // fixture.detectChanges();

    component.fileList = config.data;

    // component.ngOnInit();

    // fixture.detectChanges();  //not working

    noop.detectChanges();      //working fine,but do not bind the data to Html table element

    const addItemDebugElement = fixture.debugElement.query(By.css('.assetTable'));

    expect(addItemDebugElement).toBeTruthy();

    const trs = fixture.nativeElement.querySelectorAll('tr');

    expect(trs).toBeTruthy();

    expect(trs.length).toBe(1);

  }));

});

component.html

 <table class="table table-striped table-bordered tableFixed" id="assetTableId">

            <tbody id="tableBody">

              <tr *ngFor=" let line of lines; let i = index">

                <td *ngFor=" let record of line; let j = index" class="info" contentEditable="true">{{record}}</td>

              </tr>

            </tbody>

          </table>