Reame written + automation done

Author: himanshukela

.remove_spaces.py.swp

@@ -1 +1,56 @@
-Readme
+---------------------------DOM Comparator------------------------------- 
+
+## Synopsis
+DOM-comparator is a JavaScript library that observes changes to the DOM(Document Object Model) which are just lightweight JavaScript objects. 
+It tells how the document is different now from how it was, in a very fast manner. 
+So given two nodes as input say nodeA(original) and nodeB(Modified), this API shows the minimal number of steps required to transform nodeA 
+to nodeB. The steps are given in nice Jquery format(human readable). 
+
+Supported Operations :
+1. insertNode
+2. deleteNode
+3. rearrange 
+4. textChange
+5. css 
+6. removeCss 
+7. attr
+8. removeAtrr
+
+
+## Motivation
+* Naive approach for DOM-Comparision is to replace new node directly with the old one, but this makes the dynamic content in old dom to become static. 
+* Considering DOM as a tree, tranforming a tree to another is a complex problem and takes O(n^4) computations. This library implements algorithm which have complexity of O(n^2) in worst case, with some assumptions: 
+	1. The elements in a DOM are not too similar and can be assigned as unique keys. 
+	2. DOM size is not too big (<=1000 elements).
+In practice, these assumptions are very negligible for almost all practical use cases.
+
+## Installation
+* To install all the dependencies run "npm install" 
+* Then run "bower install" for 'jasmine', 'jquery' and 'underscore' library dependencies. 
+* Install grunt which is a Javascript Task Runner 
+  	"npm install -g grunt-cli"
+	
+## To run Tests
+
+* For testing Jasmine is used which is behavior-driven development framework for testing JavaScript code. 
+* Tests are written in test/unit folder. Each file in DOM/src have different test cases files and final cases can be seen in dom-comparator.spec.js file . 
+* For running tests, run "grunt ; testem server" (from home folder... (DOM/)) 
+* To see the final outputs open "http://localhost:7357/" in browser, open console and see final_results array. 
+
+## Example 
+To see example, run the testem server and go to the url mentioned above. Put nodeA in first textarea and nodB in second and press compare button. The result will be seen in the third textarea box in the Jquery format. 
+
+
+
+## API Reference
+
+Depending on the size of the project, if it is small and simple enough the reference docs can be added to the README. For medium size to larger projects it is important to at least provide a link to where the API reference docs live.
+
+
+## Contributors
+
+Let people know how they can dive into the project, include important links to things like issue trackers, irc, twitter accounts if applicable.
+
+## License
+
+A short snippet describing the license (MIT, Apache, etc.)

README.md

@@ -7,23 +7,15 @@
 
 
 
-
-<ul>
-
-
-<li>2</li>
-
-<li>Jai ho</li>
-<li>4</li>
-
-<li>5</li>
-
-<li>HImanshu</li>
+<div style="display: block;">
+<ul class="navigation vwo_1405423029796" style="cursor: auto; display: block;">
+<li><a href="/about">Our Team</a></li>
+<li><a href="/careers">Careers</a></li>
+<li><a href="/labs">Labs</a></li>
+<li class="trigger-contact"><a href="/contact" class="">Contact Us</a></li>
 </ul>
-<li>1</li>
-
-
-
+<div class="clear" style="color: red;">CHANGED TEXT</div>
+</div>
 
 
 

remove_spaces.py

@@ -27,15 +27,74 @@ VWO.DOMComparator = function (params) {
   // Wrapping method changed ... since matching with the end "div " gives choas ... 
   // See test case 41 as reference .... 
 
+
+  var outA = stripNodes($(this.elA).outerHTML()) ; 
+  var outB = stripNodes($(this.elB).outerHTML()) ; 
+
   this.nodeA = VWO.DOMNodePool.create({
-    el: $("<him id='DOMComparisonResult'>" + $(this.elA).outerHTML() + "</him>").get(0)
+    el: $("<him id='DOMComparisonResult'>" + outA + "</him>").get(0)
   });
   this.nodeB = VWO.DOMNodePool.create({
-    el: $("<him id='DOMComparisonResult'>" + $(this.elB).outerHTML() + "</him>").get(0)
+    el: $("<him id='DOMComparisonResult'>" + outB + "</him>").get(0)
   });
-  this.elAClone = $("<him id='DOMComparisonResult'>" + $(this.elA).outerHTML() + "</him>").get(0) ; 
+  this.elAClone = $("<him id='DOMComparisonResult'>" + outA + "</him>").get(0) ; 
 };
 
+  function stripNodes(node)
+  {
+	  var ans = node.replace(/(\r\n|\n|\r)/gm,"");
+	  var out = '', l = ans.length, i = 0 ;
+		  while(i < l)
+		  {
+			  if(ans[i] == '"')
+			  {
+				  out += ans[i]; 
+				  while(1)
+				  {
+					  i = i + 1 ; 
+					  if(ans[i] == '"')
+					  {
+						  out += ans[i] ; 
+						  break ; 
+					  }
+					  if((i+1) < l && ans[i+1] == "'")
+					  {
+						  out += ans[i] ;
+						  out += '\\' ; 
+						  continue ; 
+					  }
+					  if(ans[i] == ' ')
+					  {
+						  if(ans[i+1].isAlpha)
+						  {
+							  out += ans[i] ; 
+							  continue ; 
+						  }
+						  else
+							  continue ; 
+					  }
+
+					  out += ans[i] ; 
+				  }
+			  }
+		
+			  else
+			  {
+				if((i+1) < l && ans[i+1] == "'")
+				{
+					out += ans[i] ; 
+					out += '\\' ; 
+				}
+				else
+					out += ans[i] ; 
+			  }
+			i = i + 1 ; 
+		  }
+
+		  return out ; 
+  }; 
+
+
 VWO.DOMComparator.create = function (params) {
   return new VWO.DOMComparator(params);
 };
@@ -60,6 +119,8 @@ VWO.DOMComparator.prototype = {
    * the second tree, additional properties 'matchScore' and
    * 'matchDifference' are also set.
    */
+
+
   analyzeMatches: function () {
     var matches = VWO.DOMMatchFinder.create({
       nodeA: this.nodeA,
@@ -451,6 +512,7 @@ VWO.DOMComparator.prototype = {
         // a text node could also be removed
         selectorPath: null,
         content: {
+          html: node.outerHTML(),
           parentSelectorPath: parentSelectorPath,
           indexInParent: indexInParent,
           existsInDOM: false

src/.dom-comparator.js.swp

@@ -48,22 +48,33 @@
   $(".compare").click(function() {
     VWO.DOMNodePool.clear();
 
+  /*  
     window.dom1 = VWO.DOMNodePool.create({
       el: $($('.txt1').val()).get(null)
     });
     window.dom2 = VWO.DOMNodePool.create({
       el: $($('.txt2').val()).get(null)
     });
+   */
+
+    window.el1 = $($('.txt1').val()).get(null) ; 
+    window.el2 = $($('.txt2').val()).get(null) ; 
 
     localStorage.setItem('txt1Val', $('.txt1').val());
     localStorage.setItem('txt2Val', $('.txt2').val());
 
-    var comp = VWO.DOMComparator.create({
-      nodeA: dom1,
-      nodeB: dom2
+    var domComparator = VWO.DOMComparator.create({
+      elA: el1 ,
+      elB: el2
     });
 
-    comp.compare();
+    var ret = domComparator.compare();
+    //alert(JSON.stringify(ret));
+    document.getElementById('output').value = JSON.stringify(ret) ; 
+
+    var res = domComparator.verifyComparison()
+    alert(res) ;
+
   });
 });
 </script>
@@ -106,5 +117,10 @@ <h1 class="entry-title"><a href="http://fleonlabs.com/2012/06/hello-world/" titl
 <button class="compare">Compare</button>
 
 
+<textarea id="output">
+</textarea>
+
+
+
 </body>
 </html>

src/dom-comparator.js

@@ -693,7 +693,7 @@ describe('module: DOMNode-Comparator', function () {
 
 	//  Not working ... 	
 		describe('method: Compare', function () {
-			xit('case DE_1:compares the dom trees and outputs the final result', function () {
+			it('case DE_1:compares the dom trees and outputs the final result', function () {
 
 
 		var el1 = $('<div><a>1</a><a>2</a><a>3</a><a>5</a></div>').get(0) ; 
@@ -705,38 +705,39 @@ describe('module: DOMNode-Comparator', function () {
 		}) ; 
 
 		var ret = domComparator.compare() ; 
-		//expect(ret).toEqual() ;   
+	//	expect(ret).toEqual() ;   
 		expect(domComparator.verifyComparison()).toEqual(true) ; 
 
 		});
 	});
 
 
 		describe('method: Compare', function () {
-			xit('case SOlve:compares the dom trees and outputs the final result', function () {
+			it('case SOlve:compares the dom trees and outputs the final result', function () {
 
 
-		var el1 = $('<nav style="display: block;"><ul class="navigation vwo_1405423029796" style="cursor: auto; display: block;"><li><a href="/about">Our Team</a></li><li><a href="/labs">Labs</a></li><li><a href="/careers">Careers</a></li><li class="trigger-contact"><a href="/contact" class="">Contact Us</a></li></ul><div class="clr"></div></nav>').get(null) ; 
-		var el2 = $('<nav style="display: block;"><ul class="navigation vwo_1405423029796" style="cursor: auto; display: block;"><li><a href="/about">Our Team</a></li><li><a href="/careers">Careers</a></li><li>HImanshu</li><li class="trigger-contact"><a href="/contact" class="">Contact Us</a></li><li><a href="/labs">Labs</a></li></ul><div class="cl"></div></nav>').get(null) ; 
+		var el1 = $('<div style="display: block;"><ul class="navigation vwo_1405423029796" style="cursor: auto; display: block;"><li><a href="/about">Our Team</a></li><li><a href="/labs">Labs</a></li><li><a href="/careers">Careers</a></li><li class="trigger-contact"><a href="/contact" class="">Contact Us</a></li></ul><div class="clr">ORIGINAL TEXT</div></div>').get(null) ; 
 
+		var el2 = $('<div style="display: block;"><ul class="navigation vwo_1405423029796" style="cursor: auto; display: block;"><li><a href="/about">Our Team</a></li><li><a href="/careers">Careers</a></li><li><a href="/labs">Labs</a></li><li class="trigger-contact"><a href="/contact" class="">Contact Us</a></li></ul><div class="clear" style="color: red;">CHANGED TEXT</div></div>').get(null) ; 
+		
 		var domComparator = VWO.DOMComparator.create({
 		elA : el1, 
 		elB : el2 
 		}) ; 
 
 		var ret = domComparator.compare() ; 
-	//	expect(ret).toEqual() ;   
+		//expect(ret).toEqual() ;   
 		expect(domComparator.verifyComparison()).toEqual(true) ; 
 
 		});
 	});
 
 
 		describe('method: Compare', function () {
-			it('case :compares the dom trees and outputs the final result', function () {
+			xit('case :compares the dom trees and outputs the final result', function () {
 
 
-		var el1 = $('<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>').get(0) ; 
+		var el1 = $('<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>').get(null) ; 
 		var el2 = $('<ul><li>2</li><li>Jai ho</li><li>4</li><li>5</li><li>HImanshu</li></ul><li>1</li>').get(null) ; 
 
 		var domComparator = VWO.DOMComparator.create({