test(sidenav): refactor flaky tests in Edge

Refactors some tests to (hopefully) be less flaky in Edge. In two of them I've replaced calls to `getComputedStyle` to a check against a class in the DOM. On other one I've introduced a delay to allow the browser more time to recalculate the element dimensions.

Author: crisbeto

src/material/sidenav/drawer.spec.ts

@@ -41,40 +41,34 @@ describe('MatDrawer', () => {
   describe('methods', () => {
     it('should be able to open', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicTestApp);
-
       fixture.detectChanges();
 
       const testComponent: BasicTestApp = fixture.debugElement.componentInstance;
-      const drawer = fixture.debugElement.query(By.directive(MatDrawer));
-      const drawerBackdropElement = fixture.debugElement.query(By.css('.mat-drawer-backdrop'));
+      const container = fixture.debugElement.query(By.css('mat-drawer-container')).nativeElement;
 
-      drawerBackdropElement.nativeElement.style.transition = 'none';
       fixture.debugElement.query(By.css('.open')).nativeElement.click();
       fixture.detectChanges();
 
       expect(testComponent.openCount).toBe(0);
       expect(testComponent.openStartCount).toBe(0);
+      expect(container.classList).not.toContain('mat-drawer-opened');
 
       tick();
       expect(testComponent.openStartCount).toBe(1);
       fixture.detectChanges();
 
       expect(testComponent.openCount).toBe(1);
       expect(testComponent.openStartCount).toBe(1);
-      expect(getComputedStyle(drawer.nativeElement).visibility).toBe('visible');
-      expect(getComputedStyle(drawerBackdropElement.nativeElement).visibility).toBe('visible');
+      expect(container.classList).toContain('mat-drawer-opened');
     }));
 
     it('should be able to close', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicTestApp);
-
       fixture.detectChanges();
 
       const testComponent: BasicTestApp = fixture.debugElement.componentInstance;
-      const drawer = fixture.debugElement.query(By.directive(MatDrawer));
-      const drawerBackdropElement = fixture.debugElement.query(By.css('.mat-drawer-backdrop'));
+      const container = fixture.debugElement.query(By.css('mat-drawer-container')).nativeElement;
 
-      drawerBackdropElement.nativeElement.style.transition = 'none';
       fixture.debugElement.query(By.css('.open')).nativeElement.click();
       fixture.detectChanges();
       flush();
@@ -85,15 +79,15 @@ describe('MatDrawer', () => {
 
       expect(testComponent.closeCount).toBe(0);
       expect(testComponent.closeStartCount).toBe(0);
+      expect(container.classList).toContain('mat-drawer-opened');
 
       flush();
       expect(testComponent.closeStartCount).toBe(1);
       fixture.detectChanges();
 
       expect(testComponent.closeCount).toBe(1);
       expect(testComponent.closeStartCount).toBe(1);
-      expect(getComputedStyle(drawer.nativeElement).visibility).toBe('hidden');
-      expect(getComputedStyle(drawerBackdropElement.nativeElement).visibility).toBe('hidden');
+      expect(container.classList).not.toContain('mat-drawer-opened');
     }));
 
     it('should resolve the open method promise with the new state of the drawer', fakeAsync(() => {
@@ -642,7 +636,7 @@ describe('MatDrawerContainer', () => {
     expect(parseInt(contentElement.style.marginRight)).toBe(margin);
   }));
 
-  it('should not animate when the sidenav is open on load ', fakeAsync(() => {
+  it('should not animate when the sidenav is open on load', fakeAsync(() => {
     TestBed
       .resetTestingModule()
       .configureTestingModule({
@@ -661,29 +655,32 @@ describe('MatDrawerContainer', () => {
     expect(container.classList).not.toContain('mat-drawer-transition');
   }));
 
-  it('should recalculate the margin if a drawer changes size while open in autosize mode',
-    fakeAsync(() => {
-      const fixture = TestBed.createComponent(AutosizeDrawer);
+  it('should recalculate the margin if drawer changes size while open in autosize mode', done => {
+    const fixture = TestBed.createComponent(AutosizeDrawer);
 
-      fixture.detectChanges();
-      fixture.componentInstance.drawer.open();
-      fixture.detectChanges();
-      tick();
-      fixture.detectChanges();
+    fixture.detectChanges();
+    fixture.componentInstance.drawer.open();
+    fixture.detectChanges();
 
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
       const contentEl = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
       const initialMargin = parseInt(contentEl.style.marginLeft);
 
       expect(initialMargin).toBeGreaterThan(0);
 
       fixture.componentInstance.fillerWidth = 200;
       fixture.detectChanges();
-      tick(10);
-      fixture.detectChanges();
 
-      expect(parseInt(contentEl.style.marginLeft)).toBeGreaterThan(initialMargin);
-      discardPeriodicTasks();
-    }));
+      // Note that these 15ms are very slow for a unit test, but that how much the autosize
+      // is debounced and we need to give the browser some time to recalculate the styles.
+      setTimeout(() => {
+        fixture.detectChanges();
+        expect(parseInt(contentEl.style.marginLeft)).toBeGreaterThan(initialMargin);
+        done();
+      }, 15);
+    });
+  });
 
   it('should not set a style property if it would be zero', fakeAsync(() => {
       const fixture = TestBed.createComponent(AutosizeDrawer);
@@ -945,10 +942,10 @@ class DrawerContainerStateChangesTestApp {
 
 @Component({
   template: `
-    <mat-drawer-container autosize>
+    <mat-drawer-container autosize style="min-height: 200px;">
       <mat-drawer mode="push" [position]="drawer1Position">
         Text
-        <div [style.width.px]="fillerWidth"></div>
+        <div [style.width.px]="fillerWidth" style="height: 200px; background: red;"></div>
       </mat-drawer>
     </mat-drawer-container>`,
 })