MdDialog unit test nativeElementnot updated

[ykhanbabaei]

I want to write a unit test for opening dialog. I use triggerEventHandler for click event and it works and open dialog in browser. But it seems DOM does not get updated even after calling detectChanges method.

describe( 'SupplierComponent', () => {  
let comp: SupplierComponent;
let fixture: ComponentFixture<SupplierComponent>;
let de:      DebugElement;
let el:      HTMLElement;


beforeEach( async(() => {
    TestBed.configureTestingModule({
        imports: [
          BrowserModule,
          FormsModule,
          HttpModule,
          ReactiveFormsModule,
          MaterialModule,
          CovalentDataTableModule,
          CovalentPagingModule
        ],
        declarations: [SupplierComponent, TableComponent, KeysPipe, EditSupplierComponent],
        providers: [SupplierService, HttpService]
      })
    TestBed.overrideModule(BrowserDynamicTestingModule, {
        set: {
          entryComponents: [EditSupplierComponent]
        }
      });
}
));

beforeEach(() => {
    fixture = TestBed.createComponent(SupplierComponent);
    comp = fixture.componentInstance; // BannerComponent test instance
    de = fixture.debugElement.query(By.css('button'));
    el = de.nativeElement;
    
    de.triggerEventHandler('click', null);
    fixture.detectChanges();
  });

it('', fakeAsync(() => {
    console.log(fixture.nativeElement);
    expect(true).toEqual(true);
}));
});

When I see nativeElement in browser console it has md-dialog-container, but fixture.nativeElement() does not have it.

 <div id="root0" _nghost-c0="" ng-version="4.2.2">
<md-card _ngcontent-c0="" style="margin:20px; height: 100%; min-height: 350px;" class="mat-card">
	...
</md-card>
</div>

and in browser:

<div id="root0" _nghost-c0="" ng-version="4.2.2">
<md-card _ngcontent-c0="" style="margin:20px; height: 100%; min-height: 350px;" class="mat-
  card">
	...
</md-card>
</div>

<div class="cdk-overlay-container"><div class="cdk-global-overlay-wrapper" style="justify-content: 
center; align-items: center;"> 
<div class="cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing">
</div>
<div id="cdk-overlay-0" class="cdk-overlay-pane" dir="ltr" style="position: static; pointer-events: 
auto; width: 352px; height: 440px;">
<div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
<md-dialog-container class="ng-tns-c8-1 ng-trigger ng-trigger-slideDialog mat-dialog-container" 
role="dialog" style="transform: translate3d(0px, 0px, 0px) scale(1); opacity: 1;">

....

</md-dialog-container><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor">
</div></div></div></div>