wip debugging

Author: jelbourn

src/lib/autocomplete/autocomplete.spec.ts

@@ -1135,17 +1135,19 @@ describe('MdAutocomplete', () => {
       inputReference = fixture.debugElement.query(By.css('.mat-input-flex')).nativeElement;
     });
 
-    it('should use below positioning by default', () => {
+    it('should use below positioning by default', async(() => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
-      const inputBottom = inputReference.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
-      const panelTop = panel.getBoundingClientRect().top;
+      fixture.whenStable().then(() => {
+        const inputBottom = inputReference.getBoundingClientRect().bottom;
+        const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
+        const panelTop = panel.getBoundingClientRect().top;
 
-      expect(Math.floor(inputBottom))
-          .toEqual(Math.floor(panelTop), `Expected panel top to match input bottom by default.`);
-    });
+        expect(Math.floor(inputBottom))
+            .toEqual(Math.floor(panelTop), `Expected panel top to match input bottom by default.`);
+      });
+    }));
 
     it('should reposition the panel on scroll', () => {
       const spacer = document.createElement('div');
@@ -1161,7 +1163,7 @@ describe('MdAutocomplete', () => {
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
+      const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom)).toEqual(Math.floor(panelTop),
@@ -1170,21 +1172,23 @@ describe('MdAutocomplete', () => {
       document.body.removeChild(spacer);
     });
 
-    it('should fall back to above position if panel cannot fit below', () => {
+    it('should fall back to above position if panel cannot fit below', async(() => {
       // Push the autocomplete trigger down so it won't have room to open "below"
       inputReference.style.top = '600px';
       inputReference.style.position = 'relative';
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
-      const inputTop = inputReference.getBoundingClientRect().top;
-      const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
-      const panelBottom = panel.getBoundingClientRect().bottom;
+      fixture.whenStable().then(() => {
+        const inputTop = inputReference.getBoundingClientRect().top;
+        const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+        const panelBottom = panel.getBoundingClientRect().bottom;
 
-      expect(Math.floor(inputTop))
-          .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
-    });
+        expect(Math.floor(inputTop))
+            .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
+      });
+    }));
 
     it('should align panel properly when filtering in "above" position', async(() => {
       // Push the autocomplete trigger down so it won't have room to open "below"

src/lib/menu/menu.spec.ts

@@ -32,7 +32,7 @@ import {
 } from '@angular/cdk/testing';
 
 
-fdescribe('MdMenu', () => {
+describe('MdMenu', () => {
   let overlayContainerElement: HTMLElement;
   let dir: Direction;
 
@@ -364,8 +364,8 @@ fdescribe('MdMenu', () => {
      * subject.openMenu();
      */
     class OverlapSubject<T extends TestableMenu> {
-      private readonly fixture: ComponentFixture<T>;
-      private readonly trigger: any;
+      readonly fixture: ComponentFixture<T>;
+      readonly trigger: any;
 
       constructor(ctor: {new(): T; }, inputs: {[key: string]: any} = {}) {
         this.fixture = TestBed.createComponent(ctor);
@@ -383,6 +383,7 @@ fdescribe('MdMenu', () => {
         return extendObject(this.trigger.style, style);
       }
 
+
       get overlayRect() {
         return this.overlayPane.getBoundingClientRect();
       }
@@ -444,11 +445,11 @@ fdescribe('MdMenu', () => {
 
       it('repositions the origin to be below, so the menu opens from the trigger', () => {
         subject.openMenu();
+        subject.fixture.detectChanges();
 
         expect(subject.menuPanel!.classList).toContain('mat-menu-below');
         expect(subject.menuPanel!.classList).not.toContain('mat-menu-above');
       });
-
     });
   });
 
@@ -805,7 +806,7 @@ fdescribe('MdMenu', () => {
       fixture.detectChanges();
 
       const triggerRect = overlay.querySelector('#level-one-trigger')!.getBoundingClientRect();
-      const panelRect = overlay.querySelectorAll('.mat-menu-panel')[1].getBoundingClientRect();
+      const panelRect = overlay.querySelectorAll('.cdk-overlay-pane')[1].getBoundingClientRect();
 
       expect(Math.round(triggerRect.right)).toBe(Math.round(panelRect.left));
       expect(Math.round(triggerRect.top)).toBe(Math.round(panelRect.top) + MENU_PANEL_TOP_PADDING);
@@ -823,7 +824,7 @@ fdescribe('MdMenu', () => {
       fixture.detectChanges();
 
       const triggerRect = overlay.querySelector('#level-one-trigger')!.getBoundingClientRect();
-      const panelRect = overlay.querySelectorAll('.mat-menu-panel')[1].getBoundingClientRect();
+      const panelRect = overlay.querySelectorAll('.cdk-overlay-pane')[1].getBoundingClientRect();
 
       expect(Math.round(triggerRect.left)).toBe(Math.round(panelRect.right));
       expect(Math.round(triggerRect.top)).toBe(Math.round(panelRect.top) + MENU_PANEL_TOP_PADDING);
@@ -842,32 +843,28 @@ fdescribe('MdMenu', () => {
       fixture.detectChanges();
 
       const triggerRect = overlay.querySelector('#level-one-trigger')!.getBoundingClientRect();
-      const panelRect = overlay.querySelectorAll('.mat-menu-panel')[1].getBoundingClientRect();
+      const panelRect = overlay.querySelectorAll('.cdk-overlay-pane')[1].getBoundingClientRect();
 
       expect(Math.round(triggerRect.left)).toBe(Math.round(panelRect.right));
       expect(Math.round(triggerRect.top)).toBe(Math.round(panelRect.top) + MENU_PANEL_TOP_PADDING);
     });
 
-    fit('should fall back to aligning to the right edge of the trigger in rtl', fakeAsync(() => {
+    it('should fall back to aligning to the right edge of the trigger in rtl', fakeAsync(() => {
       dir = 'rtl';
       compileTestComponent();
       instance.rootTriggerEl.nativeElement.style.position = 'fixed';
       instance.rootTriggerEl.nativeElement.style.left = '10px';
       instance.rootTriggerEl.nativeElement.style.top = '50%';
       instance.rootTrigger.openMenu();
       fixture.detectChanges();
-      tick(1000);
+      tick(500);
 
       instance.levelOneTrigger.openMenu();
       fixture.detectChanges();
-      tick(1000);
-
-
-      fixture.detectChanges();
-      tick(1000);
+      tick(500);
 
       const triggerRect = overlay.querySelector('#level-one-trigger')!.getBoundingClientRect();
-      const panelRect = overlay.querySelectorAll('.mat-menu-panel')[1].getBoundingClientRect();
+      const panelRect = overlay.querySelectorAll('.cdk-overlay-pane')[1].getBoundingClientRect();
 
       expect(Math.round(triggerRect.right)).toBe(Math.round(panelRect.left));
       expect(Math.round(triggerRect.top)).toBe(Math.round(panelRect.top) + MENU_PANEL_TOP_PADDING);

src/lib/select/select.spec.ts

@@ -41,7 +41,7 @@ import {
 import {extendObject} from '../core/util/object-extend';
 
 
-describe('MdSelect', () => {
+fdescribe('MdSelect', () => {
   let overlayContainerElement: HTMLElement;
   let dir: {value: 'ltr'|'rtl'};
   let scrolledSubject = new Subject();
@@ -103,9 +103,7 @@ describe('MdSelect', () => {
           }};
         }}
       ]
-    });
-
-    TestBed.compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(inject([ViewportRuler], (_ruler: ViewportRuler) => {
@@ -1631,7 +1629,7 @@ describe('MdSelect', () => {
             `Expected trigger label to align along x-axis, accounting for the padding in rtl.`);
       }));
 
-      it('should not adjust if all options are within a group, except the selected one',
+      fit('should not adjust if all options are within a group, except the selected one',
         fakeAsync(() => {
           groupFixture.componentInstance.control.setValue('mime-11');
           groupFixture.detectChanges();