feat(compiler): Add support for setting attributes to Component host element

Fixes #1008 Fixes #1009 Closes #1052
2015-03-23 14:13:32 +01:00
parent f995b07876
commit 58dd75a1c8
5 changed files with 256 additions and 116 deletions
@@ -1,6 +1,7 @@
 import {describe, ddescribe, it, iit, xit, xdescribe, expect, beforeEach, SpyObject, proxy, el} from 'angular2/test_lib';
 import {isBlank, isPresent, IMPLEMENTS} from 'angular2/src/facade/lang';
 import {ListWrapper, MapWrapper, List, StringMapWrapper} from 'angular2/src/facade/collection';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {ProtoElementInjector, PreBuiltObjects, DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
 import {Parent, Ancestor} from 'angular2/src/core/annotations/visibility';
 import {EventEmitter, PropertySetter} from 'angular2/src/core/annotations/di';
@@ -76,13 +77,34 @@ class NeedsEventEmitter {

 class NeedsPropertySetter {
  propSetter;
-  constructor(@PropertySetter('title') propSetter: Function) {
+  roleSetter;
+  classSetter;
+  styleSetter;
+  unitSetter;
+  constructor(@PropertySetter('title') propSetter: Function, @PropertySetter('attr.role') roleSetter: Function,
+    @PropertySetter('class.active') classSetter: Function, @PropertySetter('style.width') styleSetter: Function,
+    @PropertySetter('style.height.px') unitSetter: Function) {
    this.propSetter = propSetter;
+    this.roleSetter = roleSetter;
+    this.classSetter = classSetter;
+    this.styleSetter = styleSetter;
+    this.unitSetter = unitSetter;
  }
-
  setProp(value) {
    this.propSetter(value);
  }
+  setRole(value) {
+    this.roleSetter(value);
+  }
+  setClass(value) {
+    this.classSetter(value);
+  }
+  setStyle(value) {
+    this.styleSetter(value);
+  }
+  setStyleWithUnit(value) {
+    this.unitSetter(value);
+  }
 }

 class A_Needs_B {
@@ -529,9 +551,18 @@ export function main() {

        var preBuildObject = new PreBuiltObjects(null, ngElement, null, null);
        var inj = injector([NeedsPropertySetter], null, null, preBuildObject);
-        inj.get(NeedsPropertySetter).setProp('foobar');
+        var component = inj.get(NeedsPropertySetter);
+        component.setProp('foobar');
+        component.setRole('button');
+        component.setClass(true);
+        component.setStyle('40px')
+        component.setStyleWithUnit(50);

        expect(div.title).toEqual('foobar');
+        expect(DOM.getAttribute(div, 'role')).toEqual('button');
+        expect(DOM.hasClass(div, 'active')).toEqual(true);
+        expect(DOM.getStyle(div, 'width')).toEqual('40px');
+        expect(DOM.getStyle(div, 'height')).toEqual('50px');
      });
    });

@@ -0,0 +1,78 @@
+import {describe, ddescribe, it, iit, xit, xdescribe, expect, beforeEach, el} from 'angular2/test_lib';
+import {setterFactory} from 'angular2/src/core/compiler/property_setter_factory';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+export function main() {
+  var div;
+  beforeEach( () => {
+  	div = el('<div></div>');
+  });
+  describe('property setter factory', () => {
+  	
+    it('should return a setter for a property', () => {
+      var setterFn = setterFactory('title');
+      setterFn(div, 'Hello');
+      expect(div.title).toEqual('Hello');
+
+      var otherSetterFn = setterFactory('title');
+      expect(setterFn).toBe(otherSetterFn);
+    });
+
+    it('should return a setter for an attribute', () => {
+      var setterFn = setterFactory('attr.role');
+      setterFn(div, 'button');
+      expect(DOM.getAttribute(div, 'role')).toEqual('button');
+      setterFn(div, null);
+      expect(DOM.getAttribute(div, 'role')).toEqual(null);
+      expect(() => {
+        setterFn(div, 4);
+      }).toThrowError("Invalid role attribute, only string values are allowed, got '4'");
+
+      var otherSetterFn = setterFactory('attr.role');
+      expect(setterFn).toBe(otherSetterFn);
+    });
+
+    it('should return a setter for a class', () => {
+      var setterFn = setterFactory('class.active');
+      setterFn(div, true);
+      expect(DOM.hasClass(div, 'active')).toEqual(true);
+      setterFn(div, false);
+      expect(DOM.hasClass(div, 'active')).toEqual(false);
+
+      var otherSetterFn = setterFactory('class.active');
+      expect(setterFn).toBe(otherSetterFn);
+    });
+
+    it('should return a setter for a style', () => {
+      var setterFn = setterFactory('style.width');
+      setterFn(div, '40px');
+      expect(DOM.getStyle(div, 'width')).toEqual('40px');
+      setterFn(div, null);
+      expect(DOM.getStyle(div, 'width')).toEqual('');
+
+      var otherSetterFn = setterFactory('style.width');
+      expect(setterFn).toBe(otherSetterFn);
+    });
+
+    it('should return a setter for a style with a unit', () => {
+      var setterFn = setterFactory('style.height.px');
+      setterFn(div, 40);
+      expect(DOM.getStyle(div, 'height')).toEqual('40px');
+      setterFn(div, null);
+      expect(DOM.getStyle(div, 'height')).toEqual('');
+
+      var otherSetterFn = setterFactory('style.height.px');
+      expect(setterFn).toBe(otherSetterFn);
+    });
+
+    it('should return a setter for innerHtml', () => {
+      var setterFn = setterFactory('innerHtml');
+      setterFn(div, '<span></span>');
+      expect(DOM.getInnerHTML(div)).toEqual('<span></span>');
+
+      var otherSetterFn = setterFactory('innerHtml');
+      expect(setterFn).toBe(otherSetterFn);
+    });
+
+  });
+}