Naming and e2e testing improvements

app/assets/app.css

@@ -49,7 +49,7 @@ md-list .md-button {
  padding-top: 5px;
 }
 
-#content .md-button.share {
+#content .md-button.contact {
  background-color: transparent;
  border: none;
  width: 48px;
@@ -64,7 +64,7 @@ md-list .md-button {
  margin-top: 10px;
 }
 
-#content .md-button.share > md-icon {
+#content .md-button.contact > md-icon {
  fill:black;
  width:36px;
  height:36px;
@@ -76,7 +76,7 @@ md-button.menuBtn > md-icon {
  height:24px;
 }
 
-#content .md-button.share:active > md-icon {
+#content .md-button.contact:active > md-icon {
  background-color: #dadada;
  border-radius: 75%;
  padding:4px;

app/index.html

@@ -40,7 +40,8 @@ <h1>Angular Material - Starter App</h1>
  <h2>{{ul.selected.name}}</h2>
  <p>{{ul.selected.content}}</p>
 
- <md-button class="share" md-no-ink ng-click="ul.share($event)" aria-label="Share">
+ <md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
+ <md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
  <md-icon md-svg-icon="share"></md-icon>
  </md-button>
  </md-content>

app/src/users/UserController.js

@@ -21,7 +21,7 @@
  self.users = [ ];
  self.selectUser = selectUser;
  self.toggleList = toggleUsersList;
- self.share = share;
+ self.showContactOptions = showContactOptions;
 
  // Load all registered users
 
@@ -60,14 +60,14 @@
  /**
  * Show the bottom sheet
  */
- function share($event) {
+ function showContactOptions($event) {
  var user = self.selected;
 
  $mdBottomSheet.show({
  parent: angular.element(document.getElementById('content')),
  templateUrl: '/src/users/view/contactSheet.html',
- controller: [ '$mdBottomSheet', UserSheetController],
- controllerAs: "vm",
+ controller: [ '$mdBottomSheet', ContactPanelController],
+ controllerAs: "cp",
  bindToController : true,
  targetEvent: $event
  }).then(function(clickedItem) {
@@ -77,15 +77,15 @@
  /**
  * Bottom Sheet controller for the Avatar Actions
  */
- function UserSheetController( $mdBottomSheet ) {
+ function ContactPanelController( $mdBottomSheet ) {
  this.user = user;
- this.items = [
+ this.actions = [
  { name: 'Phone' , icon: 'phone' , icon_url: 'assets/svg/phone.svg'},
  { name: 'Twitter' , icon: 'twitter' , icon_url: 'assets/svg/twitter.svg'},
  { name: 'Google+' , icon: 'google_plus' , icon_url: 'assets/svg/google_plus.svg'},
  { name: 'Hangout' , icon: 'hangouts' , icon_url: 'assets/svg/hangouts.svg'}
  ];
- this.performAction = function(action) {
+ this.contactUser = function(action) {
  $mdBottomSheet.hide(action);
  };
  }

app/src/users/view/contactSheet.html

@@ -1,12 +1,12 @@
 <md-bottom-sheet class="md-list md-has-header">
 
  <md-subheader>
- Contact <span class="name">{{ vm.user.name }}</span>:
+ Contact <span class="name">{{ cp.user.name }}</span>:
  </md-subheader>
 
  <md-list>
- <md-item ng-repeat="item in vm.items">
- <md-button ng-click="vm.performAction(item)" id="item_{{$index}}">
+ <md-item ng-repeat="item in cp.actions">
+ <md-button ng-click="cp.contactUser(item)" id="item_{{$index}}">
  <md-icon md-svg-icon="{{ item.icon_url }}"></md-icon>
  {{item.name}}
  </md-button>

e2e/pages/ContactUser.js

@@ -0,0 +1,17 @@
+var ContactUser = function() {
+
+ this.load = function() {
+ return browser.get("/#");
+ };
+
+ this.buttons = function() {
+ return element.all(by.css('[ng-click="cp.contactWith(item)"]'));
+ };
+
+ this.focusedAction = function() {
+ return browser.driver.switchTo().activeElement().getText();
+ }
+};
+
+module.exports = ContactUser;
+

e2e/pages/UserDetails.js

@@ -2,7 +2,7 @@ var UserDetails = function() {
  this.load = function() { browser.get('/#'); };
 
  this.contactUser = function() {
- element(by.css('button.share')).click();
+ return $('button.contact').click();
  };
 
 };

e2e/users/contactUsers.js → e2e/scenarios/users.js

@@ -2,19 +2,18 @@
 
 var UserList = require('../pages/UserList.js');
 var UserDetails = require('../pages/UserDetails.js');
-var Share = require('../pages/Share.js');
+var ContactUser = require('../pages/ContactUser.js');
 
 describe('my app', function() {
 
  var users = new UserList();
  var details = new UserDetails();
- var share = new Share();
+ var contact = new ContactUser();
 
  beforeEach(function() {
 
  users.loadAll();
  details.load();
- share.load();
 
  });
 
@@ -25,12 +24,16 @@ describe('my app', function() {
  describe('selecting a user', function() {
 
  beforeEach(function() {
- details.contactUser();
+ return details.contactUser().then(function() {
+ return contact.load();
+ });
  });
 
- it('should set focus on first Share option in Contact Share view', function() {
- share.actions().then(function(items) {
- expect(items[0].getAttribute('id')).toEqual(share.focusedItem().getAttribute('id'));
+ it('should set focus on first button in the bottomsheet view', function() {
+ contact.buttons().then(function(items) {
+ expect( items.length ).toEqual( 4 );
+
+ expect( contact.focusedAction() ).toEqual( 'PHONE' );
  });
  });
 

package.json

@@ -7,7 +7,7 @@
  "license": "MIT",
  "devDependencies": {
  "karma": "~0.10",
- "protractor": "^1.8.0",
+ "protractor": "^2.0.0",
  "http-server": "^0.6.1",
  "bower": "^1.3.1",
  "shelljs": "^0.2.6",