fix(ElementBinderBuilder): properly bind CSS classes with "-" in their names

Fixes #1057 Closes #1059
2015-03-23 20:13:02 +01:00
parent e706f3477b
commit edc3709451
2 changed files with 28 additions and 5 deletions
@@ -349,6 +349,28 @@ export function main() {
      expect(view.nodes[0].className).toEqual('foo ng-binding');
    });

+    it('should properly bind to class containing "-" using the class. syntax', () => {
+      var propertyBindings = MapWrapper.createFromStringMap({
+        'class.foo-bar': 'prop1'
+      });
+      var pipeline = createPipeline({propertyBindings: propertyBindings});
+      var results = pipeline.process(el('<input class="foo" viewroot prop-binding>'));
+      var pv = results[0].inheritedProtoView;
+
+      expect(pv.elementBinders[0].hasElementPropertyBindings).toBe(true);
+
+      instantiateView(pv);
+
+      evalContext.prop1 = true;
+      changeDetector.detectChanges();
+      expect(view.nodes[0].className).toEqual('foo ng-binding foo-bar');
+
+      evalContext.prop1 = false;
+      changeDetector.detectChanges();
+      expect(view.nodes[0].className).toEqual('foo ng-binding');
+    });
+
+
    it('should bind style with a dot', () => {
      var propertyBindings = MapWrapper.createFromStringMap({
        'style.color': 'prop1',