fix: failure to set attribute by DOM properties (#1923)

* fix: failure to set attribute by DOM properties

* v2.0.10

* test: for attributes

* fix: require to setAttribute for svg nodes

* fix: test for render boolean prop

* chore: comment for svg prop

packages/driver-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "driver-dom",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "DOM driver for Rax",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

packages/driver-dom/src/__tests__/attributes.js

@@ -0,0 +1,105 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from '../';
+
+describe('attributes', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    (document.body || document.documentElement).appendChild(container);
+  });
+
+  describe('string properties', () => {
+    it('render string prop with simple numbers', () => {
+      render((
+        <div width={30} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('width')).toBe('30');
+    });
+
+    it('render string prop with true value', () => {
+      render((
+        <a href={true} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('href')).toBe('true');
+    });
+
+    it('render string prop with object value', () => {
+      render((
+        <input type="checkbox" data={{foo: 'bar'}} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('data')).toBe('[object Object]');
+    });
+  });
+
+  describe('boolean properties', () => {
+    it('render boolean prop with true value', () => {
+      render((
+        <div hidden={true} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('hidden')).toBe('');
+    });
+
+    it('render boolean prop with false value', () => {
+      render((
+        <div hidden={false} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('hidden')).toBe(null);
+    });
+
+    it('render boolean prop with self value', () => {
+      render((
+        <div hidden={'hidden'} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.getAttribute('hidden')).toBe('');
+    });
+  });
+
+  describe('properties must set with property', () => {
+    it('render boolean prop with true', () => {
+      render((
+        <input type="checkbox" checked={true} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.checked).toBe(true);
+    });
+
+    it('render boolean prop with false', () => {
+      render((
+        <input type="checkbox" checked={false} />
+      ), container, {
+        driver: DriverDOM
+      });
+
+      let node = container.children[0];
+      expect(node.checked).toBe(false);
+    });
+  });
+});

packages/driver-dom/src/__tests__/svg.js

@@ -30,4 +30,22 @@ describe('svg', () => {
     let tspanNode = textNode.children[0];
     expect(tspanNode.namespaceURI).toEqual('http://www.w3.org/2000/svg');
   });
+
+  it('should set transform as attribute', () => {
+    render((
+      <svg height="90" width="200">
+        <text transform="scale(1 0.5)" test={true}>
+          <tspan x="10" y="45">First line.</tspan>
+        </text>
+        Sorry, your browser does not support inline SVG.
+      </svg>
+    ), container, {
+      driver: DriverDOM
+    });
+
+    let svgNode = container.children[0];
+    let textNode = svgNode.children[0];
+
+    expect(textNode.getAttribute('transform')).toEqual('scale(1 0.5)');
+  });
 });

packages/driver-dom/src/index.js

@@ -298,7 +298,7 @@ export function createElement(type, props, component, __shouldConvertUnitlessToR
       } else if (isEventProp(prop)) {
         addEventListener(node, prop.slice(2).toLowerCase(), value, component);
       } else {
-        setAttribute(node, prop, value);
+        setAttribute(node, prop, value, isSVGMode);
       }
     }
   }
@@ -368,15 +368,16 @@ export function removeAttribute(node, propKey) {
   node[REMOVE_ATTRIBUTE](propKey);
 }
 
-export function setAttribute(node, propKey, propValue) {
+export function setAttribute(node, propKey, propValue, isSvg) {
   // For reduce innerHTML operation to improve performance.
   if (propKey === DANGEROUSLY_SET_INNER_HTML && node[INNER_HTML] !== propValue[HTML]) {
     return node[INNER_HTML] = propValue[HTML];
   }
 
   if (propKey === CLASS_NAME) propKey = CLASS;
 
-  if (propKey in node) {
+  // Prop for svg can only be set by attribute
+  if (!isSvg && propKey in node) {
     try {
       // Some node property is readonly when in strict mode
       node[propKey] = propValue;