From 24424cf8399636ef913cf026b290bff428fe4bb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E6=BE=9C?= <chenjun1011@gmail.com>
Date: Mon, 13 Jul 2020 16:54:59 +0800
Subject: [PATCH] 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              |   2 +-
 .../driver-dom/src/__tests__/attributes.js    | 105 ++++++++++++++++++
 packages/driver-dom/src/__tests__/svg.js      |  18 +++
 packages/driver-dom/src/index.js              |   7 +-
 4 files changed, 128 insertions(+), 4 deletions(-)
 create mode 100644 packages/driver-dom/src/__tests__/attributes.js

diff --git a/packages/driver-dom/package.json b/packages/driver-dom/package.json
index 3172ba1b1e..dca467025d 100644
--- a/packages/driver-dom/package.json
+++ b/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",
diff --git a/packages/driver-dom/src/__tests__/attributes.js b/packages/driver-dom/src/__tests__/attributes.js
new file mode 100644
index 0000000000..107886e90c
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/packages/driver-dom/src/__tests__/svg.js b/packages/driver-dom/src/__tests__/svg.js
index 72cb867a7b..869c6d5ba5 100644
--- a/packages/driver-dom/src/__tests__/svg.js
+++ b/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)');
+  });
 });
diff --git a/packages/driver-dom/src/index.js b/packages/driver-dom/src/index.js
index 78536b7b49..cbbc909119 100644
--- a/packages/driver-dom/src/index.js
+++ b/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,7 +368,7 @@ 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];
@@ -376,7 +376,8 @@ export function setAttribute(node, propKey, propValue) {
 
   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;