From 294542fcf3d9b3a2f410df1111067992acd9065e Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Fri, 31 Mar 2017 18:03:58 -0700 Subject: [PATCH 1/3] test(select): make rtl test async --- src/lib/select/select.spec.ts | 62 +++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index ce39310ce301..f4d075dc2f13 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', () => { From 154f7cec99e01ec62f96eec83d8a061b8fda5e01 Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Fri, 31 Mar 2017 18:17:31 -0700 Subject: [PATCH 2/3] testing ie" --- src/lib/select/select.spec.ts | 2 ++ src/lib/select/select.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index f4d075dc2f13..67359d1c401c 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1011,6 +1011,7 @@ describe('MdSelect', () => { it('should align the trigger and the selected option on the x-axis in rtl', async(() => { dir.value = 'rtl'; + console.log('beginning of rtl test') fixture.whenStable().then(() => { fixture.detectChanges(); @@ -1025,6 +1026,7 @@ describe('MdSelect', () => { // Each option is 32px wider than the trigger, so it must be adjusted 16px // to ensure the text overlaps correctly. + console.log('about to expect') expect(firstOptionRight.toFixed(2)) .toEqual((triggerRight + 16).toFixed(2), `Expected trigger to align with the selected option on the x-axis in RTL.`); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 91b1b9a47558..4b356d4c3c54 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -507,6 +507,7 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal private _setSelectionByValue(value: any | any[]): void { const isArray = Array.isArray(value); + console.log('is multiple: ', this.multiple) if (this.multiple && value && !isArray) { throw new MdSelectNonArrayValueError(); } From 7cbbb63fb124fe6439c0d733e7c9dcdf6c5f4ca7 Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Fri, 31 Mar 2017 18:24:40 -0700 Subject: [PATCH 3/3] add changes from other pr --- src/lib/select/select.spec.ts | 14 ++++++-------- src/lib/select/select.ts | 1 - 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 67359d1c401c..54c4b16795f0 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1011,7 +1011,6 @@ describe('MdSelect', () => { it('should align the trigger and the selected option on the x-axis in rtl', async(() => { dir.value = 'rtl'; - console.log('beginning of rtl test') fixture.whenStable().then(() => { fixture.detectChanges(); @@ -1026,7 +1025,6 @@ describe('MdSelect', () => { // Each option is 32px wider than the trigger, so it must be adjusted 16px // to ensure the text overlaps correctly. - console.log('about to expect') expect(firstOptionRight.toFixed(2)) .toEqual((triggerRight + 16).toFixed(2), `Expected trigger to align with the selected option on the x-axis in RTL.`); @@ -1464,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(); @@ -1630,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(); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 4b356d4c3c54..91b1b9a47558 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -507,7 +507,6 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal private _setSelectionByValue(value: any | any[]): void { const isArray = Array.isArray(value); - console.log('is multiple: ', this.multiple) if (this.multiple && value && !isArray) { throw new MdSelectNonArrayValueError(); }