test(docs): convert example end to end doc tests from scenario runner to protractor

Thanks to jeffbcross, petebacondarwin, btford, jdeboer, tbosch for contributions!

Closes #6023

Author: juliemr

Gruntfile.js

@@ -87,9 +87,7 @@ module.exports = function(grunt) {
       jqlite: 'karma-jqlite.conf.js',
       jquery: 'karma-jquery.conf.js',
       docs: 'karma-docs.conf.js',
-      modules: 'karma-modules.conf.js',
-      //NOTE run grunt test:e2e instead and it will start a webserver for you
-      end2end: 'karma-e2e.conf.js'
+      modules: 'karma-modules.conf.js'
     },
 
 
@@ -288,15 +286,14 @@ module.exports = function(grunt) {
 
 
   //alias tasks
-  grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['jshint', 'package','test:unit','test:promises-aplus', 'tests:docs', 'test:e2e', 'webdriver', 'runprotractor:normal']);
+  grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['jshint', 'package','test:unit','test:promises-aplus', 'tests:docs', 'test:protractor']);
   grunt.registerTask('test:jqlite', 'Run the unit tests with Karma' , ['tests:jqlite']);
   grunt.registerTask('test:jquery', 'Run the jQuery unit tests with Karma', ['tests:jquery']);
   grunt.registerTask('test:modules', 'Run the Karma module tests with Karma', ['tests:modules']);
   grunt.registerTask('test:docs', 'Run the doc-page tests with Karma', ['package', 'tests:docs']);
   grunt.registerTask('test:unit', 'Run unit, jQuery and Karma module tests with Karma', ['tests:jqlite', 'tests:jquery', 'tests:modules']);
-  grunt.registerTask('test:e2e', 'Run the end to end tests with Karma and keep a test server running in the background', ['connect:testserver', 'tests:end2end']);
-  // This should eventually replace test:e2e
   grunt.registerTask('test:protractor', 'Run the end to end tests with Protractor and keep a test server running in the background', ['webdriver', 'connect:testserver', 'runprotractor:normal']);
+  grunt.registerTask('test:e2e', 'Alias for test:protractor', ['test:protractor']);
   grunt.registerTask('test:docgen', ['jasmine_node']);
   grunt.registerTask('test:promises-aplus',['build:promises-aplus-adapter','shell:promises-aplus-tests']);
 

docs/content/guide/dev_guide.services.injecting_controllers.ngdoc

@@ -53,18 +53,19 @@ function myController(scope, notifyService) {
 myController.$inject = ['$scope','notify'];
 </script>
 
-<div ng-controller="myController">
+<div id="simple" ng-controller="myController">
   <p>Let's try this simple notify service, injected into the controller...</p>
   <input ng-init="message='test'" ng-model="message" >
   <button ng-click="callNotify(message);">NOTIFY</button>
   <p>(you have to click 3 times to see an alert)</p>
 </div>
 </doc:source>
-<doc:scenario>
+<doc:protractor>
   it('should test service', function() {
-    expect(element(':input[ng\\:model="message"]').val()).toEqual('test');
+    expect(element(by.id('simple')).element(by.model('message')).getAttribute('value'))
+        .toEqual('test');
   });
-</doc:scenario>
+</doc:protractor>
 </doc:example>
 
 ## Implicit Dependency Injection
@@ -95,7 +96,7 @@ function myController($scope, notify) {
   };
 }
 </script>
-<div ng-controller="myController">
+<div id="implicit" ng-controller="myController">
   <p>Let's try the notify service, that is implicitly injected into the controller...</p>
   <input ng-init="message='test'" ng-model="message">
   <button ng-click="callNotify(message);">NOTIFY</button>

docs/content/guide/directive.ngdoc

@@ -84,10 +84,10 @@ Here are some equivalent examples of elements that match `ngBind`:
       <span x-ng-bind="name"></span> <br/>
     </div>
   </file>
-  <file name="scenario.js">
+  <file name="protractorTest.js">
     it('should show off bindings', function() {
-      expect(element('div[ng-controller="Ctrl1"] span[ng-bind]').text())
-        .toBe('Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)');
+      expect(element(by.css('div[ng-controller="Ctrl1"] span[ng-bind]')).getText())
+          .toBe('Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)');
     });
   </file>
 </example>

docs/content/guide/expression.ngdoc

@@ -37,11 +37,11 @@ JavaScript, use the {@link api/ng.$rootScope.Scope#methods_$eval `$eval()`} meth
 <doc:source>
  1+2={{1+2}}
 </doc:source>
-<doc:scenario>
+<doc:protractor>
  it('should calculate expression in binding', function() {
-   expect(binding('1+2')).toEqual('3');
+   expect(element(by.binding('1+2')).getText()).toEqual('1+2=3');
  });
-</doc:scenario>
+</doc:protractor>
 </doc:example>
 
 You can try evaluating different expressions here:
@@ -73,14 +73,14 @@ You can try evaluating different expressions here:
    </ul>
  </div>
 </doc:source>
-<doc:scenario>
+<doc:protractor>
  it('should allow user expression testing', function() {
-    element('.expressions :button').click();
-    var li = using('.expressions ul').repeater('li');
-    expect(li.count()).toBe(1);
-    expect(li.row(0)).toEqual(["3*10|currency", "$30.00"]);
+    element(by.css('.expressions button')).click();
+    var lis = element(by.css('.expressions ul')).element.all(by.repeater('expr in exprs'));
+    expect(lis.count()).toBe(1);
+    expect(lis.get(0).getText()).toEqual('[ X ] 3*10|currency => $30.00');
  });
-</doc:scenario>
+</doc:protractor>
 </doc:example>
 
 
@@ -99,7 +99,7 @@ prevent accidental access to the global state (a common source of subtle bugs).
      $scope.name = 'World';
 
      $scope.greet = function() {
-       ($window.mockWindow || $window).alert('Hello ' + $scope.name);
+       $window.alert('Hello ' + $scope.name);
      }
    }
  </script>
@@ -108,21 +108,17 @@ prevent accidental access to the global state (a common source of subtle bugs).
    <button ng-click="greet()">Greet</button>
  </div>
 </doc:source>
-<doc:scenario>
- it('should calculate expression in binding', function() {
-   var alertText;
-   this.addFutureAction('set mock', function($window, $document, done) {
-     $window.mockWindow = {
-       alert: function(text){ alertText = text; }
-     };
-     done();
-   });
-   element(':button:contains(Greet)').click();
-   expect(this.addFuture('alert text', function(done) {
-     done(null, alertText);
-   })).toBe('Hello World');
- });
-</doc:scenario>
+<doc:protractor>
+  it('should calculate expression in binding', function() {
+    element(by.css('[ng-click="greet()"]')).click();
+
+    var alertDialog = browser.switchTo().alert();
+
+    expect(alertDialog.getText()).toEqual('Hello World');
+
+    alertDialog.accept();
+  });
+</doc:protractor>
 </doc:example>
 
 ## Forgiving

karma-e2e.conf.js

@@ -29,7 +29,7 @@
     "karma-sauce-launcher": "0.2.0",
     "karma-script-launcher": "0.1.0",
     "karma-browserstack-launcher": "0.0.7",
-    "protractor": "~0.16.1",
+    "protractor": "~0.17.0",
     "yaml-js": "~0.0.8",
     "marked": "0.2.9",
     "rewire": "1.1.3",

package.json

@@ -10,7 +10,6 @@ if [ $JOB = "unit" ]; then
   grunt test:promises-aplus
   grunt test:unit --browsers SL_Chrome,SL_Safari,SL_Firefox,SL_IE_8,SL_IE_9,SL_IE_10,SL_IE_11 --reporters dots
 elif [ $JOB = "e2e" ]; then
-  grunt test:e2e --browsers SL_Chrome --reporters dots
   grunt test:protractor --sauceUser $SAUCE_USERNAME \
       --sauceKey $SAUCE_ACCESS_KEY \
       --capabilities.tunnel-identifier=$TRAVIS_JOB_NUMBER \

scripts/travis/build.sh

@@ -424,13 +424,17 @@
       <div compile="html"></div>
     </div>
    </doc:source>
-   <doc:scenario>
+   <doc:protractor>
      it('should auto compile', function() {
-       expect(element('div[compile]').text()).toBe('Hello Angular');
-       input('html').enter('{{name}}!');
-       expect(element('div[compile]').text()).toBe('Angular!');
+       var textarea = $('textarea');
+       var output = $('div[compile]');
+       // The initial state reads 'Hello Angular'.
+       expect(output.getText()).toBe('Hello Angular');
+       textarea.clear();
+       textarea.sendKeys('{{name}}!');
+       expect(output.getText()).toBe('Angular!');
      });
-   </doc:scenario>
+   </doc:protractor>
  </doc:example>
 
  *

src/ng/compile.js

@@ -41,46 +41,48 @@
         <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
         <a id="link-6" ng-href="{{value}}">link</a> (link, change location)
       </doc:source>
-      <doc:scenario>
+      <doc:protractor>
         it('should execute ng-click but not reload when href without value', function() {
-          element('#link-1').click();
-          expect(input('value').val()).toEqual('1');
-          expect(element('#link-1').attr('href')).toBe("");
+          element(by.id('link-1')).click();
+          expect(element(by.model('value')).getAttribute('value')).toEqual('1');
+          expect(element(by.id('link-1')).getAttribute('href')).toBe('');
         });
 
         it('should execute ng-click but not reload when href empty string', function() {
-          element('#link-2').click();
-          expect(input('value').val()).toEqual('2');
-          expect(element('#link-2').attr('href')).toBe("");
+          element(by.id('link-2')).click();
+          expect(element(by.model('value')).getAttribute('value')).toEqual('2');
+          expect(element(by.id('link-2')).getAttribute('href')).toBe('');
         });
 
         it('should execute ng-click and change url when ng-href specified', function() {
-          expect(element('#link-3').attr('href')).toBe("/123");
+          expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\/123$/);
 
-          element('#link-3').click();
-          expect(browser().window().path()).toEqual('/123');
+          element(by.id('link-3')).click();
+
+          expect(browser.driver.getCurrentUrl()).toMatch(/\/123$/);
         });
 
         it('should execute ng-click but not reload when href empty string and name specified', function() {
-          element('#link-4').click();
-          expect(input('value').val()).toEqual('4');
-          expect(element('#link-4').attr('href')).toBe('');
+          element(by.id('link-4')).click();
+          expect(element(by.model('value')).getAttribute('value')).toEqual('4');
+          expect(element(by.id('link-4')).getAttribute('href')).toBe('');
         });
 
         it('should execute ng-click but not reload when no href but name specified', function() {
-          element('#link-5').click();
-          expect(input('value').val()).toEqual('5');
-          expect(element('#link-5').attr('href')).toBe(undefined);
+          element(by.id('link-5')).click();
+          expect(element(by.model('value')).getAttribute('value')).toEqual('5');
+          expect(element(by.id('link-5')).getAttribute('href')).toBe(null);
         });
 
         it('should only change url when only ng-href', function() {
-          input('value').enter('6');
-          expect(element('#link-6').attr('href')).toBe('6');
+          element(by.model('value')).clear();
+          element(by.model('value')).sendKeys('6');
+          expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\/6$/);
 
-          element('#link-6').click();
-          expect(browser().location().url()).toEqual('/6');
+          element(by.id('link-6')).click();
+          expect(browser.getCurrentUrl()).toMatch(/\/6$/);
         });
-      </doc:scenario>
+      </doc:protractor>
     </doc:example>
  */
 
@@ -165,13 +167,13 @@
         Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
         <button ng-model="button" ng-disabled="checked">Button</button>
       </doc:source>
-      <doc:scenario>
+      <doc:protractor>
         it('should toggle button', function() {
-          expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
-          input('checked').check();
-          expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
+          expect(element(by.css('.doc-example-live button')).getAttribute('disabled')).toBeFalsy();
+          element(by.model('checked')).click();
+          expect(element(by.css('.doc-example-live button')).getAttribute('disabled')).toBeTruthy();
         });
-      </doc:scenario>
+      </doc:protractor>
     </doc:example>
  *
  * @element INPUT
@@ -200,13 +202,13 @@
         Check me to check both: <input type="checkbox" ng-model="master"><br/>
         <input id="checkSlave" type="checkbox" ng-checked="master">
       </doc:source>
-      <doc:scenario>
+      <doc:protractor>
         it('should check both checkBoxes', function() {
-          expect(element('.doc-example-live #checkSlave').prop('checked')).toBeFalsy();
-          input('master').check();
-          expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy();
+          expect(element(by.id('checkSlave')).getAttribute('checked')).toBeFalsy();
+          element(by.model('master')).click();
+          expect(element(by.id('checkSlave')).getAttribute('checked')).toBeTruthy();
         });
-      </doc:scenario>
+      </doc:protractor>
     </doc:example>
  *
  * @element INPUT
@@ -235,13 +237,13 @@
         Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
         <input type="text" ng-readonly="checked" value="I'm Angular"/>
       </doc:source>
-      <doc:scenario>
+      <doc:protractor>
         it('should toggle readonly attr', function() {
-          expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy();
-          input('checked').check();
-          expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
+          expect(element(by.css('.doc-example-live [type="text"]')).getAttribute('readonly')).toBeFalsy();
+          element(by.model('checked')).click();
+          expect(element(by.css('.doc-example-live [type="text"]')).getAttribute('readonly')).toBeTruthy();
         });
-      </doc:scenario>
+      </doc:protractor>
     </doc:example>
  *
  * @element INPUT
@@ -274,13 +276,13 @@
           <option id="greet" ng-selected="selected">Greetings!</option>
         </select>
       </doc:source>
-      <doc:scenario>
+      <doc:protractor>
         it('should select Greetings!', function() {
-          expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy();
-          input('selected').check();
-          expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy();
+          expect(element(by.id('greet')).getAttribute('selected')).toBeFalsy();
+          element(by.model('selected')).click();
+          expect(element(by.id('greet')).getAttribute('selected')).toBeTruthy();
         });
-      </doc:scenario>
+      </doc:protractor>
     </doc:example>
  *
  * @element OPTION
@@ -310,13 +312,13 @@
             <summary>Show/Hide me</summary>
          </details>
        </doc:source>
-       <doc:scenario>
+       <doc:protractor>
          it('should toggle open', function() {
-           expect(element('#details').prop('open')).toBeFalsy();
-           input('open').check();
-           expect(element('#details').prop('open')).toBeTruthy();
+           expect(element(by.id('details')).getAttribute('open')).toBeFalsy();
+           element(by.model('open')).click();
+           expect(element(by.id('details')).getAttribute('open')).toBeTruthy();
          });
-       </doc:scenario>
+       </doc:protractor>
      </doc:example>
  *
  * @element DETAILS