diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index ce39310ce301..54c4b16795f0 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -988,37 +988,49 @@ describe('MdSelect', () => { select.style.marginRight = '30px'; }); - it('should align the trigger and the selected option on the x-axis in ltr', () => { - trigger.click(); - fixture.detectChanges(); + it('should align the trigger and the selected option on the x-axis in ltr', async(() => { + fixture.whenStable().then(() => { + fixture.detectChanges(); - const triggerLeft = trigger.getBoundingClientRect().left; - const firstOptionLeft = - document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().left; + trigger.click(); + fixture.detectChanges(); - // Each option is 32px wider than the trigger, so it must be adjusted 16px - // to ensure the text overlaps correctly. - expect(firstOptionLeft.toFixed(2)) - .toEqual((triggerLeft - 16).toFixed(2), - `Expected trigger to align with the selected option on the x-axis in LTR.`); - }); + fixture.whenStable().then(() => { + fixture.detectChanges(); - it('should align the trigger and the selected option on the x-axis in rtl', () => { - dir.value = 'rtl'; + const triggerLeft = trigger.getBoundingClientRect().left; + const firstOptionLeft = document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().left; - trigger.click(); - fixture.detectChanges(); + // Each option is 32px wider than the trigger, so it must be adjusted 16px + // to ensure the text overlaps correctly. + expect(firstOptionLeft.toFixed(2)) + .toEqual((triggerLeft - 16).toFixed(2), `Expected trigger to align with the selected option on the x-axis in LTR.`); + }); + }); + })); - const triggerRight = trigger.getBoundingClientRect().right; - const firstOptionRight = - document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right; + it('should align the trigger and the selected option on the x-axis in rtl', async(() => { + dir.value = 'rtl'; + fixture.whenStable().then(() => { + fixture.detectChanges(); - // Each option is 32px wider than the trigger, so it must be adjusted 16px - // to ensure the text overlaps correctly. - expect(firstOptionRight.toFixed(2)) - .toEqual((triggerRight + 16).toFixed(2), - `Expected trigger to align with the selected option on the x-axis in RTL.`); - }); + trigger.click(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + const triggerRight = trigger.getBoundingClientRect().right; + const firstOptionRight = + document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right; + + // Each option is 32px wider than the trigger, so it must be adjusted 16px + // to ensure the text overlaps correctly. + expect(firstOptionRight.toFixed(2)) + .toEqual((triggerRight + 16).toFixed(2), + `Expected trigger to align with the selected option on the x-axis in RTL.`); + }); + }); + })); }); describe('x-axis positioning in multi select mode', () => { @@ -1450,13 +1462,13 @@ describe('MdSelect', () => { let testInstance: MultiSelect; let trigger: HTMLElement; - beforeEach(() => { + beforeEach(async(() => { fixture = TestBed.createComponent(MultiSelect); testInstance = fixture.componentInstance; fixture.detectChanges(); trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - }); + })); it('should be able to select multiple values', () => { trigger.click(); @@ -1616,17 +1628,17 @@ describe('MdSelect', () => { expect(trigger.textContent).toContain('Tacos, Pizza, Steak'); }); - it('should throw an exception when trying to set a non-array value', () => { + it('should throw an exception when trying to set a non-array value', async(() => { expect(() => { testInstance.control.setValue('not-an-array'); }).toThrowError(wrappedErrorMessage(new MdSelectNonArrayValueError())); - }); + })); - it('should throw an exception when trying to change multiple mode after init', () => { + it('should throw an exception when trying to change multiple mode after init', async(() => { expect(() => { testInstance.select.multiple = false; }).toThrowError(wrappedErrorMessage(new MdSelectDynamicMultipleError())); - }); + })); it('should pass the `multiple` value to all of the option instances', async(() => { trigger.click();