add modify-value test by @matthewwolfe, fix value bug when value is an emoty string, increase version to 2.0.3, fixes #40

johanneswilm · johanneswilm · commit 6531b9550e76 · 2016-04-19T19:25:35.000-04:00
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 <mail@johanneswilm.org>"
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>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "diff-dom",`
`3`	`3`	`"main": "diffDOM.js",`
`4`		`- "version": "2.0.2",`
	`4`	`+ "version": "2.0.3",`
`5`	`5`	`"homepage": "https://github.com/fiduswriter/diffDOM",`
`6`	`6`	`"authors": [`
`7`	`7`	`"Johannes Wilm <[email protected]>"`
Original file line number	Diff line number	Diff line change
`@@ -647,13 +647,13 @@`
`647`	`647`	`);`
`648`	`648`	`}`
`649`	`649`	`if (this.valueDiffing) {`
`650`		`- if (node.value) {`
	`650`	`+ if (node.value !== undefined) {`
`651`	`651`	`objNode.value = node.value;`
`652`	`652`	`}`
`653`		`- if (node.checked) {`
	`653`	`+ if (node.checked !== undefined) {`
`654`	`654`	`objNode.checked = node.checked;`
`655`	`655`	`}`
`656`		`- if (node.selected) {`
	`656`	`+ if (node.selected !== undefined) {`
`657`	`657`	`objNode.selected = node.selected;`
`658`	`658`	`}`
`659`	`659`	`}`
`@@ -942,12 +942,7 @@`
`942`	`942`	`return true;`
`943`	`943`	`}`
`944`	`944`	`diffs.forEach(function(diff) {`
`945`		`- // console.log(JSON.stringify(diff));`
`946`		`- // console.log(JSON.stringify(tree));`
`947`		`- // console.log(this.objToNode(tree).outerHTML);`
`948`	`945`	`dobj.applyVirtualDiff(tree, diff);`
`949`		`- // console.log(JSON.stringify(tree));`
`950`		`- // console.log(this.objToNode(tree).outerHTML);`
`951`	`946`	`});`
`952`	`947`	`return true;`
`953`	`948`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "diff-dom",`
`3`		`- "version": "2.0.2",`
	`3`	`+ "version": "2.0.3",`
`4`	`4`	`"description": "A diff for DOM elements, as client-side JavaScript code. Gets all modifications, insertions and removals between two DOM fragments.",`
`5`	`5`	`"main": "diffDOM.js",`
`6`	`6`	`"directories": {`