Merge pull request #67 from mindplay-dk/more-tests

Debug attribute removals and add tests

src/dom.js

@@ -1,37 +1,40 @@
 import { SVG } from './reconciler'
 
-function updateProperty (dom, name, value, newValue) {
-  if (name === 'style') {
-    for (let k in value) if (!newValue[k]) dom[name][k] = ''
-    for (let k in newValue) dom[name][k] = newValue[k]
-  } else if (name[0] === 'o' && name[1] === 'n') {
-    name = name.slice(2).toLowerCase()
-    if (value) dom.removeEventListener(name, value)
-    dom.addEventListener(name, newValue)
-  } else if (name in dom && !(dom instanceof SVGElement)) {
-    dom[name] = newValue == null ? '' : newValue
-  } else if (newValue == null || newValue === false) {
-    dom.removeAttribute(name)
-  } else {
-    dom.setAttribute(name, newValue)
-  }
-}
+export function updateElement (dom, oldProps, newProps) {
+  const names = Object.keys({...oldProps, ...newProps})
+
+  for (let name of names) {
+    if (name === "children") {
+      continue
+    }
 
-export function updateElement (dom, props, newProps) {
-  Object.keys(newProps)
-    .filter(isNew(props, newProps))
-    .forEach(key => updateProperty(dom, key, props[key], newProps[key]))
+    const oldValue = oldProps[name]
+    const newValue = newProps[name]
+
+    if (name === 'style') {
+      for (let k in oldValue) if (!newValue[k]) dom[name][k] = ''
+      for (let k in newValue) dom[name][k] = newValue[k]
+    } else if (name[0] === 'o' && name[1] === 'n') {
+      name = name.slice(2).toLowerCase()
+      if (oldValue) dom.removeEventListener(name, oldValue)
+      dom.addEventListener(name, newValue)
+    } else if (name in dom && !(dom instanceof SVGElement)) {
+      dom[name] = newValue == null ? '' : newValue
+    } else if (newValue == null || newValue === false) {
+      dom.removeAttribute(name)
+    } else {
+      dom.setAttribute(name, newValue)
+    }
+  }
 }
 
 export function createElement (fiber) {
   const dom =
     fiber.type === 'text'
-      ? document.createTextNode('')
+      ? document.createTextNode(fiber.value)
       : fiber.tag === SVG
         ? document.createElementNS('http://www.w3.org/2000/svg', fiber.type)
         : document.createElement(fiber.type)
-  updateElement(dom, [], fiber.props)
+  updateElement(dom, {}, fiber.props)
   return dom
 }
-
-const isNew = (o, n) => k => k !== 'children' && o[k] !== n[k]

test/render.test.jsx

@@ -60,6 +60,52 @@ test('render range of HTML elements', async () => {
 
   expect(toString(elements)).toBe("<ul><li>1</li><li>2</li><li>3</li></ul>")
 })
+test('render/update object properties and DOM attributes', async () => {
+  let lastChildren = []
+
+  await testUpdates([
+    {
+      content: (
+        <ul>
+          <li class="foo"/>
+          <li className="bar"/>
+          <li data-something="baz" data-remove-me tabIndex={123}/>
+        </ul>
+      ),
+      test: elements => {
+        expect(elements[0].tagName).toBe("UL")
+        expect(elements[0].children.length).toBe(3)
+        expect(elements[0].children[0].getAttribute("class")).toBe("foo")
+        expect(elements[0].children[1].className).toBe("bar")
+        expect(elements[0].children[2].getAttribute("data-something")).toBe("baz")
+        expect(elements[0].children[2].hasAttribute("data-remove-me")).toBe(true)
+        expect(elements[0].children[2].tabIndex).toBe(123)
+
+        lastChildren = [...elements[0].children]
+      }
+    },
+    {
+      content: (
+        <ul>
+          <li class="foo2"/>
+          <li className="bar2"/>
+          <li data-something="baz2" tabIndex={99}/>
+        </ul>
+      ),
+      test: elements => {
+        expect(elements[0].tagName).toBe("UL")
+        expect(elements[0].children.length).toBe(3)
+        expect(elements[0].children[0].getAttribute("class")).toBe("foo2")
+        expect(elements[0].children[1].className).toBe("bar2")
+        expect(elements[0].children[2].getAttribute("data-something")).toBe("baz2")
+        expect(elements[0].children[2].hasAttribute("data-remove-me")).toBe(false)
+        expect(elements[0].children[2].tabIndex).toBe(99)
+
+        lastChildren.forEach((lastChild, index) => expect(elements[0].children[index]).toBe(lastChild))
+      }
+    }
+  ])
+})
 
 test('attach DOM event handler', async () => {
   let clicked = false