add modify-value test by @matthewwolfe, fix value bug when value is a…

…n emoty string, increase version to 2.0.3, fixes #40
fiduswriter · Apr 19, 2016 · 6531b95 · 6531b95
1 parent 6bb9b28
commit 6531b95
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "diff-dom",
   "main": "diffDOM.js",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "homepage": "https://github.com/fiduswriter/diffDOM",
   "authors": [
     "Johannes Wilm <[email protected]>"

diff --git a/diffDOM.js b/diffDOM.js
@@ -647,13 +647,13 @@
                     );
                 }
                 if (this.valueDiffing) {
-                    if (node.value) {
+                    if (node.value !== undefined) {
                         objNode.value = node.value;
                     }
-                    if (node.checked) {
+                    if (node.checked !== undefined) {
                         objNode.checked = node.checked;
                     }
-                    if (node.selected) {
+                    if (node.selected !== undefined) {
                         objNode.selected = node.selected;
                     }
                 }
@@ -942,12 +942,7 @@
                 return true;
             }
             diffs.forEach(function(diff) {
-                //                              console.log(JSON.stringify(diff));
-                //                              console.log(JSON.stringify(tree));
-                //                              console.log(this.objToNode(tree).outerHTML);
                 dobj.applyVirtualDiff(tree, diff);
-                //                                console.log(JSON.stringify(tree));
-                //                                console.log(this.objToNode(tree).outerHTML);
             });
             return true;
         },

diff --git a/index.html b/index.html
@@ -17,6 +17,8 @@ <h2>Tests</h2>
 
 <p>There is also a <a href="tests/random-unlimited.html">version of the random tests that reloads if no errors have been found</a>, mainly useful for finding errors.</p>
 
+<p>The <a href="tests/modify-value.html">input value modification test</a>, contributed by user matthewwolfe, tests diffing changes to input fields.</p>
+
 <p>The <a href="tests/site-integration.html">site integration test</a>, contributed by user unbug, allows for testing for speed on a 170kb site real-world-like site where it is integrated with jQuery.</p>
 
 <h2>Demo</h2>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "diff-dom",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A diff for DOM elements, as client-side JavaScript code. Gets all modifications, insertions and removals between two DOM fragments.",
   "main": "diffDOM.js",
   "directories": {

diff --git a/tests/modify-value.html b/tests/modify-value.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<script src="../diffDOM.js">
+</script>
+<script>
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    // ------------- Testing the issue -------------------- //
+    // ---------------------------------------------------- //
+
+    var dd = new diffDOM();
+
+    // create two sets of identical html
+    var element1 = document.createElement('form');
+
+    var input = document.createElement('input');
+    input.setAttribute('type', 'text');
+    input.setAttribute('value', 'testing');
+
+    var submit = document.createElement('input');
+    submit.setAttribute('type', 'submit');
+
+    var instructions = document.createElement('div');
+    instructions.innerHTML = '<p>1. Change the text<br>2. Click "submit" once<br>\
+        3. Check if the input field value stays the same<br>4. Click "submit" a\
+        second time<br>5. Check if input field is empty.</p>';
+
+    document.body.appendChild(instructions);
+
+    element1.appendChild(input);
+    element1.appendChild(submit);
+
+    document.body.appendChild(element1);
+
+    // element2 will remain virtual, and we will diff element1 with element2
+    // to determine if we actually need to update the DOM or not.
+    var element2 = element1.cloneNode(true);
+
+    // event listener for when the input value changes
+    element1.addEventListener('input', function(e){
+        // update the virtual element, then diff and see if there needs to be updates
+        element2.firstChild.setAttribute('value', e.target.value);
+
+        var diff = dd.diff(element1, element2);
+        dd.apply(element1, diff);
+
+        console.log(diff);
+    });
+
+    // event listener for pressing the submit button
+    element1.addEventListener('submit', function(e){
+        e.preventDefault();
+
+         // update the virtual element, then diff and see if there needs to be updates
+        element2.firstChild.setAttribute('value', '');
+
+        var diff = dd.diff(element1, element2);
+        dd.apply(element1, diff);
+
+        console.log(diff);
+    });
+
+});
+</script>
+</head>
+<body>
+</body>
+</html>