fix(e2e tests): use prop() instead of attr() and quote attributes

Because of changes in jQuery, we need to use element().prop() instead of element().attr() to retrieve className and other element properties.

Additionally all attribute selectors (e.g. input[name=value]) must have value quoted if it contains dots (".").

docs/content/cookbook/advancedform.ngdoc

@@ -90,7 +90,7 @@ master.$equals(form)}}">Save</button>
     expect(element(':button:contains(Cancel)').attr('disabled')).toBeFalsy();
     element(':button:contains(Cancel)').click();
     expect(element(':button:contains(Cancel)').attr('disabled')).toBeTruthy();
-    expect(element(':input[name=form.name]').val()).toEqual('John Smith');
+    expect(element(':input[name="form.name"]').val()).toEqual('John Smith');
   });
 </doc:scenario>
 </doc:example>

docs/content/cookbook/form.ngdoc

@@ -68,18 +68,18 @@ ng:validate="regexp:zip"/><br/><br/>
   });
 
   it('should validate zip', function(){
-    expect(using('.example').element(':input[name=user.address.zip]').attr('className'))
+    expect(using('.example').element(':input[name="user.address.zip"]').prop('className'))
       .not().toMatch(/ng-validation-error/);
     using('.example').input('user.address.zip').enter('abc');
-    expect(using('.example').element(':input[name=user.address.zip]').attr('className'))
+    expect(using('.example').element(':input[name="user.address.zip"]').prop('className'))
       .toMatch(/ng-validation-error/);
   });
 
   it('should validate state', function(){
-    expect(using('.example').element(':input[name=user.address.state]').attr('className'))
+    expect(using('.example').element(':input[name="user.address.state"]').prop('className'))
       .not().toMatch(/ng-validation-error/);
     using('.example').input('user.address.state').enter('XXX');
-    expect(using('.example').element(':input[name=user.address.state]').attr('className'))
+    expect(using('.example').element(':input[name="user.address.state"]').prop('className'))
       .toMatch(/ng-validation-error/);
   });
  </doc:scenario>

src/Angular.js

@@ -613,8 +613,8 @@ function isLeafNode (node) {
  *  </doc:source>
  *  <doc:scenario>
    it('should print that initialy the form object is NOT equal to master', function() {
-     expect(element('.doc-example-live input[name=master.salutation]').val()).toBe('Hello');
-     expect(element('.doc-example-live input[name=master.name]').val()).toBe('world');
+     expect(element('.doc-example-live input[name="master.salutation"]').val()).toBe('Hello');
+     expect(element('.doc-example-live input[name="master.name"]').val()).toBe('world');
      expect(element('.doc-example-live span').css('display')).toBe('inline');
    });
 
@@ -705,8 +705,8 @@ function copy(source, destination){
  *  </doc:source>
  *  <doc:scenario>
      it('should print that initialy greeting is equal to the hardcoded value object', function() {
-       expect(element('.doc-example-live input[name=greeting.salutation]').val()).toBe('Hello');
-       expect(element('.doc-example-live input[name=greeting.name]').val()).toBe('world');
+       expect(element('.doc-example-live input[name="greeting.salutation"]').val()).toBe('Hello');
+       expect(element('.doc-example-live input[name="greeting.name"]').val()).toBe('world');
        expect(element('.doc-example-live span').css('display')).toBe('none');
      });
 

src/directives.js

@@ -588,17 +588,17 @@ function ngClass(selector) {
      </doc:source>
      <doc:scenario>
        it('should check ng:class', function(){
-         expect(element('.doc-example-live span').attr('className')).not().
+         expect(element('.doc-example-live span').prop('className')).not().
            toMatch(/ng-input-indicator-wait/);
 
          using('.doc-example-live').element(':button:first').click();
 
-         expect(element('.doc-example-live span').attr('className')).
+         expect(element('.doc-example-live span').prop('className')).
            toMatch(/ng-input-indicator-wait/);
 
          using('.doc-example-live').element(':button:last').click();
 
-         expect(element('.doc-example-live span').attr('className')).not().
+         expect(element('.doc-example-live span').prop('className')).not().
            toMatch(/ng-input-indicator-wait/);
        });
      </doc:scenario>
@@ -637,9 +637,9 @@ angularDirective("ng:class", ngClass(function(){return true;}));
      </doc:source>
      <doc:scenario>
        it('should check ng:class-odd and ng:class-even', function(){
-         expect(element('.doc-example-live li:first span').attr('className')).
+         expect(element('.doc-example-live li:first span').prop('className')).
            toMatch(/ng-format-negative/);
-         expect(element('.doc-example-live li:last span').attr('className')).
+         expect(element('.doc-example-live li:last span').prop('className')).
            toMatch(/ng-input-indicator-wait/);
        });
      </doc:scenario>
@@ -678,9 +678,9 @@ angularDirective("ng:class-odd", ngClass(function(i){return i % 2 === 0;}));
      </doc:source>
      <doc:scenario>
        it('should check ng:class-odd and ng:class-even', function(){
-         expect(element('.doc-example-live li:first span').attr('className')).
+         expect(element('.doc-example-live li:first span').prop('className')).
            toMatch(/ng-format-negative/);
-         expect(element('.doc-example-live li:last span').attr('className')).
+         expect(element('.doc-example-live li:last span').prop('className')).
            toMatch(/ng-input-indicator-wait/);
        });
      </doc:scenario>
@@ -796,7 +796,7 @@ angularDirective("ng:hide", function(expression, element){
        it('should check ng:style', function(){
          expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
          element('.doc-example-live :button[value=set]').click();
-         expect(element('.doc-example-live span').css('color')).toBe('red');
+         expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)');
          element('.doc-example-live :button[value=clear]').click();
          expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
        });

src/filters.js

@@ -61,7 +61,7 @@
          input('amount').enter('-1234');
          expect(binding('amount | currency')).toBe('($1,234.00)');
          expect(binding('amount | currency:"USD$"')).toBe('(USD$1,234.00)');
-         expect(element('.doc-example-live .ng-binding').attr('className')).
+         expect(element('.doc-example-live .ng-binding').prop('className')).
            toMatch(/ng-format-negative/);
        });
      </doc:scenario>

src/markups.js

@@ -266,9 +266,9 @@ angularTextMarkup('option', function(text, textNode, parentElement){
       </doc:source>
       <doc:scenario>
         it('should toggle button', function() {
-          expect(element('.doc-example-live :button').attr('disabled')).toBeFalsy();
+          expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
           input('checked').check();
-          expect(element('.doc-example-live :button').attr('disabled')).toBeTruthy();
+          expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
         });
       </doc:scenario>
     </doc:example>
@@ -296,9 +296,9 @@ angularTextMarkup('option', function(text, textNode, parentElement){
       </doc:source>
       <doc:scenario>
         it('should check both checkBoxes', function() {
-          expect(element('.doc-example-live #checkSlave').attr('checked')).toBeFalsy();
+          expect(element('.doc-example-live #checkSlave').prop('checked')).toBeFalsy();
           input('master').check();
-          expect(element('.doc-example-live #checkSlave').attr('checked')).toBeTruthy();
+          expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy();
         });
       </doc:scenario>
     </doc:example>
@@ -332,9 +332,9 @@ angularTextMarkup('option', function(text, textNode, parentElement){
        </doc:source>
        <doc:scenario>
          it('should toggle multiple', function() {
-           expect(element('.doc-example-live #select').attr('multiple')).toBeFalsy();
+           expect(element('.doc-example-live #select').prop('multiple')).toBeFalsy();
            input('checked').check();
-           expect(element('.doc-example-live #select').attr('multiple')).toBeTruthy();
+           expect(element('.doc-example-live #select').prop('multiple')).toBeTruthy();
          });
        </doc:scenario>
      </doc:example>
@@ -362,9 +362,9 @@ angularTextMarkup('option', function(text, textNode, parentElement){
       </doc:source>
       <doc:scenario>
         it('should toggle readonly attr', function() {
-          expect(element('.doc-example-live :text').attr('readonly')).toBeFalsy();
+          expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy();
           input('checked').check();
-          expect(element('.doc-example-live :text').attr('readonly')).toBeTruthy();
+          expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
         });
       </doc:scenario>
     </doc:example>
@@ -395,9 +395,9 @@ angularTextMarkup('option', function(text, textNode, parentElement){
      </doc:source>
      <doc:scenario>
        it('should select Greetings!', function() {
-         expect(element('.doc-example-live #greet').attr('selected')).toBeFalsy();
+         expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy();
          input('checked').check();
-         expect(element('.doc-example-live #greet').attr('selected')).toBeTruthy();
+         expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy();
        });
      </doc:scenario>
    </doc:example>

src/validators.js

@@ -61,10 +61,10 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate non ssn', function(){
          var textBox = element('.doc-example-live :input');
-         expect(textBox.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(textBox.prop('className')).not().toMatch(/ng-validation-error/);
          expect(textBox.val()).toEqual('123-45-6789');
          input('ssn').enter('123-45-67890');
-         expect(textBox.attr('className')).toMatch(/ng-validation-error/);
+         expect(textBox.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -102,17 +102,17 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate number', function(){
          var n1 = element('.doc-example-live :input[name=n1]');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('n1').enter('1.x');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
          var n2 = element('.doc-example-live :input[name=n2]');
-         expect(n2.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n2.prop('className')).not().toMatch(/ng-validation-error/);
          input('n2').enter('9');
-         expect(n2.attr('className')).toMatch(/ng-validation-error/);
+         expect(n2.prop('className')).toMatch(/ng-validation-error/);
          var n3 = element('.doc-example-live :input[name=n3]');
-         expect(n3.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n3.prop('className')).not().toMatch(/ng-validation-error/);
          input('n3').enter('201');
-         expect(n3.attr('className')).toMatch(/ng-validation-error/);
+         expect(n3.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -156,17 +156,17 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate integer', function(){
          var n1 = element('.doc-example-live :input[name=n1]');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('n1').enter('1.1');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
          var n2 = element('.doc-example-live :input[name=n2]');
-         expect(n2.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n2.prop('className')).not().toMatch(/ng-validation-error/);
          input('n2').enter('10.1');
-         expect(n2.attr('className')).toMatch(/ng-validation-error/);
+         expect(n2.prop('className')).toMatch(/ng-validation-error/);
          var n3 = element('.doc-example-live :input[name=n3]');
-         expect(n3.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n3.prop('className')).not().toMatch(/ng-validation-error/);
          input('n3').enter('100.1');
-         expect(n3.attr('className')).toMatch(/ng-validation-error/);
+         expect(n3.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -200,9 +200,9 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate date', function(){
          var n1 = element('.doc-example-live :input');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('text').enter('123/123/123');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -238,9 +238,9 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate email', function(){
          var n1 = element('.doc-example-live :input');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('text').enter('a@b.c');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -272,9 +272,9 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate phone', function(){
          var n1 = element('.doc-example-live :input');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('text').enter('+12345678');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -310,9 +310,9 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate url', function(){
          var n1 = element('.doc-example-live :input');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('text').enter('abc://server/path');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -345,9 +345,9 @@ extend(angularValidator, {
       <doc:scenario>
         it('should invalidate json', function(){
          var n1 = element('.doc-example-live :input');
-         expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).not().toMatch(/ng-validation-error/);
          input('json').enter('{name}');
-         expect(n1.attr('className')).toMatch(/ng-validation-error/);
+         expect(n1.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>
@@ -417,13 +417,13 @@ extend(angularValidator, {
       <doc:scenario>
         it('should change color in delayed way', function(){
          var textBox = element('.doc-example-live :input');
-         expect(textBox.attr('className')).not().toMatch(/ng-input-indicator-wait/);
-         expect(textBox.attr('className')).not().toMatch(/ng-validation-error/);
+         expect(textBox.prop('className')).not().toMatch(/ng-input-indicator-wait/);
+         expect(textBox.prop('className')).not().toMatch(/ng-validation-error/);
          input('text').enter('X');
-         expect(textBox.attr('className')).toMatch(/ng-input-indicator-wait/);
+         expect(textBox.prop('className')).toMatch(/ng-input-indicator-wait/);
          sleep(.6);
-         expect(textBox.attr('className')).not().toMatch(/ng-input-indicator-wait/);
-         expect(textBox.attr('className')).toMatch(/ng-validation-error/);
+         expect(textBox.prop('className')).not().toMatch(/ng-input-indicator-wait/);
+         expect(textBox.prop('className')).toMatch(/ng-validation-error/);
         });
       </doc:scenario>
     </doc:example>

src/widgets.js

@@ -244,11 +244,11 @@ function compileFormatter(expr) {
       </doc:source>
       <doc:scenario>
          it('should check ng:validate', function(){
-           expect(element('.doc-example-live :input:last').attr('className')).
+           expect(element('.doc-example-live :input:last').prop('className')).
              toMatch(/ng-validation-error/);
 
            input('value').enter('123');
-           expect(element('.doc-example-live :input:last').attr('className')).
+           expect(element('.doc-example-live :input:last').prop('className')).
              not().toMatch(/ng-validation-error/);
          });
       </doc:scenario>
@@ -276,9 +276,11 @@ function compileFormatter(expr) {
       </doc:source>
       <doc:scenario>
        it('should check ng:required', function(){
-         expect(element('.doc-example-live :input').attr('className')).toMatch(/ng-validation-error/);
+         expect(element('.doc-example-live :input').prop('className')).
+           toMatch(/ng-validation-error/);
          input('value').enter('123');
-         expect(element('.doc-example-live :input').attr('className')).not().toMatch(/ng-validation-error/);
+         expect(element('.doc-example-live :input').prop('className')).
+           not().toMatch(/ng-validation-error/);
        });
       </doc:scenario>
     </doc:example>