test(select): various test inconsistencies (#3861)

* test(select): various test inconsistencies

* Fixes a select test that occasionally fails to capture the error inside the expect, causing it to get logged without actually being thrown. This seems to be a Zone-related issue since wrapping a few calls in `async` makes it behave correctly.
* Fixes an RTL test that fails if it is made async. This incorporates the changes from #3866 and #3163 and fixes the underlying issue. It appears that the test was failing, because IE does a slight twitch on the select panel since it goes from a pixel-based `min-width` to one with `calc` and percentages to just percentages. I've set the default width to 100% which is the same as the pixel-based one, which appears to make IE happy.

* chore: verify that changing the min-width causes failures

* chore: revert min-width change

* chore: remove a few unnecessary expressions

Author: crisbeto

src/lib/select/select.scss

@@ -125,9 +125,9 @@ $mat-select-trigger-font-size: 16px !default;
   padding-top: 0;
   padding-bottom: 0;
   max-height: $mat-select-panel-max-height;
+  min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
 
   @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
-

src/lib/select/select.spec.ts

@@ -988,37 +988,43 @@ describe('MdSelect', () => {
         select.style.marginRight = '30px';
       });
 
-      it('should align the trigger and the selected option on the x-axis in ltr', () => {
+      it('should align the trigger and the selected option on the x-axis in ltr', async(() => {
         trigger.click();
         fixture.detectChanges();
 
-        const triggerLeft = trigger.getBoundingClientRect().left;
-        const firstOptionLeft =
-            document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().left;
-
-        // 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(() => {
+          const triggerLeft = trigger.getBoundingClientRect().left;
+          const firstOptionLeft = document.querySelector('.cdk-overlay-pane md-option')
+              .getBoundingClientRect().left;
+
+          // 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.`);
+        });
+      }));
 
-      it('should align the trigger and the selected option on the x-axis in rtl', () => {
+      it('should align the trigger and the selected option on the x-axis in rtl', async(() => {
         dir.value = 'rtl';
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
 
-        trigger.click();
-        fixture.detectChanges();
-
-        const triggerRight = trigger.getBoundingClientRect().right;
-        const firstOptionRight =
-            document.querySelector('.cdk-overlay-pane md-option').getBoundingClientRect().right;
+          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(firstOptionRight.toFixed(2))
-            .toEqual((triggerRight + 16).toFixed(2),
-                `Expected trigger to align with the selected option on the x-axis in RTL.`);
-      });
+          fixture.whenStable().then(() => {
+            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 +1456,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 +1622,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();