Fix failing tests for ie, and mark elements as ng-widget, ng-directive, and ng-binding

Author: mhevery

.gitignore

@@ -1,4 +1,5 @@
 build/
 angularjs.netrc
 jstd.log
-.DS_Store
+.DS_Store
+regression/temp.html

docs/filter:currency.html

@@ -0,0 +1,21 @@
+<h1>filter:currency</h1>
+
+<p>formats a number as a currency (ie $1,234.56)</p>
+
+<p>@format <em>expression</em> | currency</p>
+
+<p><example>
+<input type="text" name="amount" value="1234.56"/> <br/>
+{{amount | currency}}
+</example></p>
+
+<p><test>
+ it('should init with 1234.56', function(){
+   expect(bind('amount')).toEqual('$1,234.56');
+ });
+ it('should update', function(){
+   element(':input[name=amount]').value('-1234');
+   expect(bind('amount')).toEqual('-$1,234.00');
+   expect(bind('amount')).toHaveColor('red');
+ });
+</test></p>

docs/filter:currency.md

@@ -0,0 +1,20 @@
+# filter:currency
+formats a number as a currency (ie $1,234.56)
+
+@format _expression_ | currency
+
+<example>
+<input type="text" name="amount" value="1234.56"/> <br/>
+{{amount | currency}}
+</example>
+
+<test>
+ it('should init with 1234.56', function(){
+   expect(bind('amount')).toEqual('$1,234.56');
+ });
+ it('should update', function(){
+   element(':input[name=amount]').value('-1234');
+   expect(bind('amount')).toEqual('-$1,234.00');
+   expect(bind('amount')).toHaveColor('red');
+ });
+</test>

src/Compiler.js

@@ -112,9 +112,11 @@ Compiler.prototype = {
   templatize: function(element, elementIndex, priority){
     var self = this,
         widget,
+        fn,
         directiveFns = self.directives,
         descend = true,
         directives = true,
+        elementName = nodeName(element),
         template,
         selfApi = {
           compile: bind(self, self.compile),
@@ -138,12 +140,15 @@ Compiler.prototype = {
     eachAttribute(element, function(value, name){
       if (!widget) {
         if (widget = self.widgets('@' + name)) {
+          element.addClass('ng-attr-widget');
           widget = bind(selfApi, widget, value, element);
         }
       }
     });
     if (!widget) {
-      if (widget = self.widgets(nodeName(element))) {
+      if (widget = self.widgets(elementName)) {
+        if (elementName.indexOf(':') > 0)
+          element.addClass('ng-widget');
         widget = bind(selfApi, widget, element);
       }
     }
@@ -179,7 +184,11 @@ Compiler.prototype = {
         });
       });
       eachAttribute(element, function(value, name){
-        template.addInit((directiveFns[name]||noop).call(selfApi, value, element));
+        fn = directiveFns[name];
+        if (fn) {
+          element.addClass('ng-directive');
+          template.addInit((directiveFns[name]).call(selfApi, value, element));
+        }
       });
     }
     // Process non text child nodes

src/directives.js

@@ -22,7 +22,8 @@ angularDirective("ng:eval", function(expression){
   };
 });
 
-angularDirective("ng:bind", function(expression){
+angularDirective("ng:bind", function(expression, element){
+  element.addClass('ng-binding');
   return function(element) {
     var lastValue = noop, lastError = noop;
     this.$onEval(function() {
@@ -97,7 +98,8 @@ function compileBindTemplate(template){
   return fn;
 }
 
-angularDirective("ng:bind-template", function(expression){
+angularDirective("ng:bind-template", function(expression, element){
+  element.addClass('ng-binding');
   var templateFn = compileBindTemplate(expression);
   return function(element) {
     var lastValue;

src/scenario/dsl.js

@@ -86,17 +86,21 @@ angular.scenario.dsl('using', function() {
  *    binding(name) returns the value of a binding
  */
 angular.scenario.dsl('binding', function() {
+  function contains(text, value) {
+    return text && text.indexOf(value) >=0;
+  }
   return function(name) {
     return this.addFutureAction("select binding '" + name + "'", function($window, $document, done) {
-      var element;
-      try {
-        element = $document.elements('[ng\\:bind-template*="{{$1}}"]', name);
-      } catch(e) {
-        if (e.type !== 'selector')
-          throw e;
-        element = $document.elements('[ng\\:bind="$1"]', name);
+      var elements = $document.elements('.ng-binding');
+      for ( var i = 0; i < elements.length; i++) {
+        var element = new elements.init(elements[i]);
+        if (contains(element.attr('ng:bind'), name) >= 0 ||
+            contains(element.attr('ng:bind-template'), name) >= 0) {
+          done(null, element.text());
+          return;
+        }
       }
-      done(null, element.text());
+      throw "Could not find binding: " + name;
     });
   };
 });

test/CompilerSpec.js

@@ -46,6 +46,7 @@ describe('compiler', function(){
     var init = template(e).$init;
     expect(log).toEqual("found");
     init();
+    expect(e.hasClass('ng-directive')).toEqual(true);
     expect(log).toEqual("found:init");
   });
 
@@ -102,12 +103,13 @@ describe('compiler', function(){
       }
     });
     var scope = compile('before<span>middle</span>after');
-    expect(lowercase(scope.$element[0].innerHTML)).toEqual('before<span hello="middle">replaced</span>after');
+    expect(sortedHtml(scope.$element[0], true)).toEqual('<div>before<span class="ng-directive" hello="middle">replaced</span>after</div>');
     expect(log).toEqual("hello middle");
   });
 
   it('should replace widgets', function(){
     widgets['NG:BUTTON'] = function(element) {
+      expect(element.hasClass('ng-widget')).toEqual(true);
       element.replaceWith('<div>button</div>');
       return function(element) {
         log += 'init';
@@ -120,6 +122,8 @@ describe('compiler', function(){
 
   it('should use the replaced element after calling widget', function(){
     widgets['H1'] = function(element) {
+      // HTML elements which are augmented by acting as widgets, should not be marked as so
+      expect(element.hasClass('ng-widget')).toEqual(false);
       var span = angular.element('<span>{{1+2}}</span>');
       element.replaceWith(span);
       this.descend(true);

test/directivesSpec.js

@@ -35,6 +35,7 @@ describe("directives", function(){
       expect(element.text()).toEqual('');
       scope.a = 'misko';
       scope.$eval();
+      expect(element.hasClass('ng-binding')).toEqual(true);
       expect(element.text()).toEqual('misko');
     });
 
@@ -87,6 +88,7 @@ describe("directives", function(){
       var scope = compile('<div ng:bind-template="Hello {{name}}!"></div>');
       scope.$set('name', 'Misko');
       scope.$eval();
+      expect(element.hasClass('ng-binding')).toEqual(true);
       expect(element.text()).toEqual('Hello Misko!');
     });
 

test/scenario/dslSpec.js

@@ -260,15 +260,13 @@ describe("angular.scenario.dsl", function() {
 
     describe('Binding', function() {
       it('should select binding by name', function() {
-        if (msie) return; // TODO reenable!
-        doc.append('<span ng:bind="foo.bar">some value</span>');
+        doc.append('<span class="ng-binding" ng:bind="foo.bar">some value</span>');
         $root.dsl.binding('foo.bar');
         expect($root.futureResult).toEqual('some value');
       });
 
       it('should select binding in template by name', function() {
-        if (msie) return; // TODO reenable!
-        doc.append('<pre ng:bind-template="foo {{bar}} baz">foo some baz</pre>');
+        doc.append('<pre class="ng-binding" ng:bind-template="foo {{bar}} baz">foo some baz</pre>');
         $root.dsl.binding('bar');
         expect($root.futureResult).toEqual('foo some baz');
       });

test/testabilityPatch.js

@@ -81,7 +81,7 @@ extend(angular, {
 });
 
 
-function sortedHtml(element) {
+function sortedHtml(element, showNgClass) {
   var html = "";
   foreach(jqLite(element), function toString(node) {
     if (node.nodeName == "#text") {
@@ -93,8 +93,14 @@ function sortedHtml(element) {
       html += '<' + node.nodeName.toLowerCase();
       var attributes = node.attributes || [];
       var attrs = [];
-      if (node.className)
-        attrs.push(' class="' + node.className + '"');
+      var className = node.className || '';
+      if (!showNgClass) {
+        className = className.replace(/ng-[\w-]+\s*/g, '');
+      }
+      className = trim(className);
+      if (className) {
+        attrs.push(' class="' + className + '"');
+      }
       for(var i=0; i<attributes.length; i++) {
         var attr = attributes[i];
         if(attr.name.match(/^ng:/) ||