Merge branch 'master' of github.com:angular/material2

Author: drager

e2e/components/menu/menu-page.ts

@@ -0,0 +1,57 @@
+import ElementFinder = protractor.ElementFinder;
+
+export class MenuPage {
+
+  constructor() {
+    browser.get('/menu');
+  }
+
+  menu() { return element(by.css('.md-menu')); }
+
+  trigger() { return element(by.id('trigger')); }
+
+  triggerTwo() { return element(by.id('trigger-two')); }
+
+  body() { return element(by.tagName('body')); }
+
+  items(index: number) {
+    return element.all(by.css('[md-menu-item]')).get(index);
+  }
+
+  textArea() { return element(by.id('text')); }
+
+  beforeTrigger() { return element(by.id('before-t')); }
+
+  aboveTrigger() { return element(by.id('above-t')); }
+
+  combinedTrigger() { return element(by.id('combined-t')); }
+
+  beforeMenu() { return element(by.css('.md-menu.before')); }
+
+  aboveMenu() { return element(by.css('.md-menu.above')); }
+
+  combinedMenu() { return element(by.css('.md-menu.combined')); }
+
+  expectMenuPresent(expected: boolean) {
+    return browser.isElementPresent(by.css('.md-menu')).then((isPresent) => {
+      expect(isPresent).toBe(expected);
+    });
+  }
+
+  expectMenuLocation(el: ElementFinder, {x,y}: {x: number, y: number}) {
+    el.getLocation().then((loc) => {
+      expect(loc.x).toEqual(x);
+      expect(loc.y).toEqual(y);
+    });
+  }
+
+  expectMenuAlignedWith(el: ElementFinder, id: string) {
+    element(by.id(id)).getLocation().then((loc) => {
+      this.expectMenuLocation(el, {x: loc.x, y: loc.y});
+    });
+  }
+
+  getResultText() {
+    return this.textArea().getText();
+  }
+}

e2e/components/menu/menu.e2e.ts

@@ -0,0 +1,113 @@
+import { MenuPage } from './menu-page';
+
+describe('menu', () => {
+  let page: MenuPage;
+
+  beforeEach(function() {
+    page = new MenuPage();
+  });
+
+  it('should open menu when the trigger is clicked', () => {
+    page.expectMenuPresent(false);
+    page.trigger().click();
+
+    page.expectMenuPresent(true);
+    expect(page.menu().getText()).toEqual("One\nTwo\nThree");
+  });
+
+  it('should close menu when area outside menu is clicked', () => {
+    page.trigger().click();
+    page.body().click();
+    page.expectMenuPresent(false);
+  });
+
+  it('should close menu when menu item is clicked', () => {
+    page.trigger().click();
+    page.items(0).click();
+    page.expectMenuPresent(false);
+  });
+
+  it('should run click handlers on regular menu items', () => {
+    page.trigger().click();
+    page.items(0).click();
+    expect(page.getResultText()).toEqual('one');
+
+    page.trigger().click();
+    page.items(1).click();
+    expect(page.getResultText()).toEqual('two');
+  });
+
+  it('should run not run click handlers on disabled menu items', () => {
+    page.trigger().click();
+    page.items(2).click();
+    expect(page.getResultText()).toEqual('');
+  });
+
+  it('should support multiple triggers opening the same menu', () => {
+    page.triggerTwo().click();
+    expect(page.menu().getText()).toEqual("One\nTwo\nThree");
+    page.expectMenuAlignedWith(page.menu(), 'trigger-two');
+
+    page.body().click();
+    page.expectMenuPresent(false);
+
+    page.trigger().click();
+    expect(page.menu().getText()).toEqual("One\nTwo\nThree");
+    page.expectMenuAlignedWith(page.menu(), 'trigger');
+
+    page.body().click();
+    page.expectMenuPresent(false);
+  });
+
+  it('should mirror classes on host to menu template in overlay', () => {
+    page.trigger().click();
+    page.menu().getAttribute('class').then((classes) => {
+      expect(classes).toEqual('md-menu custom');
+    });
+  });
+
+  describe('position - ', () => {
+
+    it('should default menu alignment to "after below" when not set', () => {
+      page.trigger().click();
+
+      // menu.x should equal trigger.x, menu.y should equal trigger.y
+      page.expectMenuAlignedWith(page.menu(), 'trigger');
+    });
+
+    it('should align overlay end to origin end when x-position is "before"', () => {
+      page.beforeTrigger().click();
+      page.beforeTrigger().getLocation().then((trigger) => {
+
+        // the menu's right corner must be attached to the trigger's right corner.
+        // menu = 112px wide. trigger = 60px wide.  112 - 60 =  52px of menu to the left of trigger.
+        // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x (left corner)
+        // menu.y should equal trigger.y because only x position has changed.
+        page.expectMenuLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y});
+      });
+    });
+
+    it('should align overlay bottom to origin bottom when y-position is "above"', () => {
+      page.aboveTrigger().click();
+      page.aboveTrigger().getLocation().then((trigger) => {
+
+        // the menu's bottom corner must be attached to the trigger's bottom corner.
+        // menu.x should equal trigger.x because only y position has changed.
+        // menu = 64px high. trigger = 20px high. 64 - 20 = 44px of menu extending up past trigger.
+        // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y (top corner)
+        page.expectMenuLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44});
+      });
+    });
+
+    it('should align menu to top left of trigger when "below" and "above"', () => {
+      page.combinedTrigger().click();
+      page.combinedTrigger().getLocation().then((trigger) => {
+
+        // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x
+        // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y
+        page.expectMenuLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44});
+      });
+    });
+
+  });
+});

package.json

@@ -35,7 +35,7 @@
     "@angular/platform-browser": "2.0.0-rc.4",
     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
     "@angular/router": "v3.0.0-alpha.8",
-    "@angular/forms": "^0.1.0",
+    "@angular/forms": "^0.2.0",
     "core-js": "^2.4.0",
     "hammerjs": "^2.0.8",
     "rxjs": "5.0.0-beta.6",

src/components/checkbox/checkbox.scss

@@ -218,12 +218,13 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
 }
 
 md-checkbox {
-  &, label {
-    cursor: pointer;
-  }
+  cursor: pointer;
 }
 
 .md-checkbox-layout {
+  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox
+  // (e.g. pointer by default, regular when disabled), instead of the browser default.
+  cursor: inherit;
   align-items: baseline;
   display: inline-flex;
 }

src/components/checkbox/package.json

@@ -22,6 +22,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular2-material/core": "2.0.0-alpha.6-2",
-    "@angular/forms": "^0.1.0"
+    "@angular/forms": "^0.2.0"
   }
 }

src/components/dialog/dialog.spec.ts

@@ -13,7 +13,8 @@ import {
   ChangeDetectorRef,
 } from '@angular/core';
 import {MdDialog} from './dialog';
-import {OVERLAY_PROVIDERS, OVERLAY_CONTAINER_TOKEN} from '@angular2-material/core/overlay/overlay';
+import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay';
+import {OverlayContainer} from '@angular2-material/core/overlay/overlay-container';
 import {MdDialogConfig} from './dialog-config';
 import {MdDialogRef} from './dialog-ref';
 
@@ -31,10 +32,14 @@ describe('MdDialog', () => {
     addProviders([
       OVERLAY_PROVIDERS,
       MdDialog,
-      {provide: OVERLAY_CONTAINER_TOKEN, useFactory: () => {
-        overlayContainerElement = document.createElement('div');
-        return overlayContainerElement;
-      }}
+      {provide: OverlayContainer, useFactory: () => {
+        return {
+          getContainerElement: () => {
+            overlayContainerElement = document.createElement('div');
+            return overlayContainerElement;
+          }
+        };
+      }},
     ]);
   });
 

src/components/input/input.spec.ts

@@ -35,21 +35,25 @@ describe('MdInput', function () {
       });
   }));
 
+
+  // TODO(kara): update when core/testing adds fix
   it('support ngModel', async(() => {
     builder.createAsync(MdInputBaseTestController)
       .then(fixture => {
         fixture.detectChanges();
         let instance = fixture.componentInstance;
-        let component = fixture.debugElement.query(By.directive(MdInput)).componentInstance;
         let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
         instance.model = 'hello';
         fixture.detectChanges();
-        expect(el.value).toEqual('hello');
+        fixture.whenStable().then(() => {
 
-        component.value = 'world';
-        fixture.detectChanges();
-        expect(el.value).toEqual('world');
+          // this workaround is temp, see https://github.com/angular/angular/issues/10148
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(el.value).toBe('hello');
+          });
+        });
       });
   }));
 
@@ -80,7 +84,9 @@ describe('MdInput', function () {
 
       instance.model = 'hello';
       fixture.detectChanges();
-      expect(inputInstance.characterCount).toEqual(5);
+      fixture.whenStable().then(() => {
+        expect(inputInstance.characterCount).toEqual(5);
+      });
     });
   }));
 

src/components/input/package.json

@@ -24,6 +24,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular2-material/core": "2.0.0-alpha.6-2",
-    "@angular/forms": "^0.1.0"
+    "@angular/forms": "^0.2.0"
   }
 }