Skip to content
Permalink
Browse files

Added diffs to static and visual markup side-by-side tests

  • Loading branch information...
rdworth committed Feb 21, 2009
1 parent 1141b61 commit bf43ab6d30846b1ac856ae5c033019f50fe3a152
Showing with 381 additions and 154 deletions.
  1. +159 −0 external/jsdiff/jsdiff.js
  2. +20 −64 tests/index.html
  3. +63 −0 tests/slider.html
  4. +1 −5 tests/static/draggable/default.html
  5. +1 −3 tests/static/droppable/default.html
  6. +1 −3 tests/static/slider/default.html
  7. +1 −3 tests/static/slider/default_vertical.html
  8. +1 −3 tests/static/slider/slider_horizontal.html
  9. +1 −5 tests/static/slider/slider_horizontal_range.html
  10. +1 −4 tests/static/slider/slider_horizontal_range_max.html
  11. +1 −4 tests/static/slider/slider_horizontal_range_min.html
  12. +1 −3 tests/static/slider/slider_vertical.html
  13. +1 −5 tests/static/slider/slider_vertical_range.html
  14. +1 −4 tests/static/slider/slider_vertical_range_max.html
  15. +1 −4 tests/static/slider/slider_vertical_range_min.html
  16. +1 −5 tests/static/sortable/default.html
  17. +3 −3 tests/static/tabs/default.html
  18. +8 −0 tests/tests.css
  19. +56 −0 tests/tests.js
  20. +3 −1 tests/visual/dialog/default.html
  21. +4 −4 tests/visual/draggable/default.html
  22. +4 −4 tests/visual/droppable/default.html
  23. +5 −1 tests/visual/resizable/default.html
  24. +0 −1 tests/visual/selectable/default.html
  25. +2 −2 tests/visual/slider/default.html
  26. +23 −0 tests/visual/slider/default_vertical.html
  27. +2 −2 tests/visual/slider/slider_horizontal.html
  28. +2 −2 tests/visual/slider/slider_horizontal_range.html
  29. +2 −2 tests/visual/slider/slider_horizontal_range_max.html
  30. +2 −2 tests/visual/slider/slider_horizontal_range_min.html
  31. +2 −2 tests/visual/slider/slider_vertical.html
  32. +2 −2 tests/visual/slider/slider_vertical_range.html
  33. +2 −2 tests/visual/slider/slider_vertical_range_max.html
  34. +2 −2 tests/visual/slider/slider_vertical_range_min.html
  35. +2 −7 tests/visual/sortable/default.html
@@ -0,0 +1,159 @@
/*
* Javascript Diff Algorithm
* By John Resig (http://ejohn.org/)
* Modified by Chu Alan "sprite"
*
* More Info:
* http://ejohn.org/projects/javascript-diff-algorithm/
*/

function escape(s) {
var n = s;
n = n.replace(/&/g, "&");
n = n.replace(/</g, "&lt;");
n = n.replace(/>/g, "&gt;");
n = n.replace(/"/g, "&quot;");

return n;
}

function diffString( o, n ) {
o = o.replace(/\s+$/, '');
n = n.replace(/\s+$/, '');

var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
var str = "";

var oSpace = o.match(/\s+/g);
if (oSpace == null) {
oSpace = ["\n"];
} else {
oSpace.push("\n");
}
var nSpace = n.match(/\s+/g);
if (nSpace == null) {
nSpace = ["\n"];
} else {
nSpace.push("\n");
}

if (out.n.length == 0) {
for (var i = 0; i < out.o.length; i++) {
str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
}
} else {
if (out.n[0].text == null) {
for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
}
}

for ( var i = 0; i < out.n.length; i++ ) {
if (out.n[i].text == null) {
str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
} else {
var pre = "";

for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
}
str += " " + out.n[i].text + nSpace[i] + pre;
}
}
}

return str;
}

function randomColor() {
return "rgb(" + (Math.random() * 100) + "%, " +
(Math.random() * 100) + "%, " +
(Math.random() * 100) + "%)";
}
function diffString2( o, n ) {
o = o.replace(/\s+$/, '');
n = n.replace(/\s+$/, '');

var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );

var oSpace = o.match(/\s+/g);
if (oSpace == null) {
oSpace = ["\n"];
} else {
oSpace.push("\n");
}
var nSpace = n.match(/\s+/g);
if (nSpace == null) {
nSpace = ["\n"];
} else {
nSpace.push("\n");
}

var os = "";
var colors = new Array();
for (var i = 0; i < out.o.length; i++) {
colors[i] = randomColor();

if (out.o[i].text != null) {
os += '<span style="background-color: ' +colors[i]+ '">' +
escape(out.o[i].text) + oSpace[i] + "</span>";
} else {
os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
}
}

var ns = "";
for (var i = 0; i < out.n.length; i++) {
if (out.n[i].text != null) {
ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' +
escape(out.n[i].text) + nSpace[i] + "</span>";
} else {
ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
}
}

return { o : os , n : ns };
}

function diff( o, n ) {
var ns = new Object();
var os = new Object();

for ( var i = 0; i < n.length; i++ ) {
if ( ns[ n[i] ] == null )
ns[ n[i] ] = { rows: new Array(), o: null };
ns[ n[i] ].rows.push( i );
}

for ( var i = 0; i < o.length; i++ ) {
if ( os[ o[i] ] == null )
os[ o[i] ] = { rows: new Array(), n: null };
os[ o[i] ].rows.push( i );
}

for ( var i in ns ) {
if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
}
}

for ( var i = 0; i < n.length - 1; i++ ) {
if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null &&
n[i+1] == o[ n[i].row + 1 ] ) {
n[i+1] = { text: n[i+1], row: n[i].row + 1 };
o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
}
}

for ( var i = n.length - 1; i > 0; i-- ) {
if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null &&
n[i-1] == o[ n[i].row - 1 ] ) {
n[i-1] = { text: n[i-1], row: n[i].row - 1 };
o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
}
}

return { o: o, n: n };
}

@@ -4,16 +4,10 @@
<title>jQuery UI Tests</title>
<link rel="stylesheet" href="../themes/base/ui.all.css" type="text/css" />
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.draggable.js"></script>
<style type="text/css">
body { font-size: 62.5%; }
dd.plugin { margin-top: 0.3em; margin-bottom: 1em; }
iframe { border: 0; width: 200px; 150px; }
td { border: 1px solid silver; padding: 10px; }
</style>
<script type="text/javascript" src="../external/jsdiff/jsdiff.js"></script>
<link rel="stylesheet" href="tests.css" type="text/css" />
<script type="text/javascript" src="tests.js"></script>
</head>

<body>

<table id="matrix">
@@ -22,75 +16,37 @@
<th>Interaction</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</th>
<th>Static</th>
<th>Visual</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="test-draggable-default"><th>Draggable</th><td></td><td></td></tr>
<tr class="test-droppable-default"><th>Droppable</th><td></td><td></td></tr>
<tr class="test-resizable-default"><th>Resizable</th><td></td><td></td></tr>
<tr class="test-selectabe-default"><th>Selectable</th><td></td><td></td></tr>
<tr class="test-sortable-default"><th>Sortable</th><td></td><td></td></tr>
<tr class="test-draggable-default"><th>Draggable</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-droppable-default"><th>Droppable</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-resizable-default"><th>Resizable</th><td></td><td></td><td></td><td></td><td></td></tr>
<!--tr class="test-selectable-default"><th>Selectable</th><td></td><td></td><td></td><td></td><td></td></tr-->
<tr class="test-sortable-default"><th>Sortable</th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
<thead>
<tr>
<th>Widget</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</th>
<th>Static</th>
<th>Visual</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="test-accordion-default"><th>Accordion</th><td></td><td></td></tr>
<tr class="test-datepicker-default"><th>Datepicker</th><td></td><td></td></tr>
<tr class="test-dialog-default"><th>Dialog</th><td></td><td></td></tr>
<tr class="test-progressbar-default"><th>Progressbar</th><td></td><td></td></tr>
<tr class="test-slider-default"><th>slider</th><td></td><td></td></tr>
<tr class="test-tabs-default"><th>Tabs</th><td></td><td></td></tr>
<tr class="test-accordion-default"><th>Accordion</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-datepicker-default"><th>Datepicker</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-dialog-default"><th>Dialog</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-progressbar-default"><th>Progressbar</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-default"><th>slider</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-tabs-default"><th>Tabs</th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>

<dl id="plugins">

</dl>

<script type="text/javascript">
var matrix = $("#matrix");
matrix.children("tbody").children("tr").each(function() {
var tr = $(this), th = tr.find("th"), pluginName = th.text().toLowerCase(), staticTd = th.next(), visualTd = staticTd.next();
var staticUrl = 'static/' + pluginName + '/default.html';
var visualUrl = 'visual/' + pluginName + '/default.html';
$.get(staticUrl, function(data) {
data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
data = data.replace(/\s*<\/?!doctype.*>\s*/ig,""); //Remove doctype
var staticHtml = $("<div></div>").html(data).html();
staticTd.html(staticHtml);
});
visualTd.append('<iframe src="' + visualUrl + '"></iframe>');
var iframe = visualTd.find("iframe");
iframe.load(function() {
//alert($("body", this.contentDocument).html());
$(this).after($("body", this.contentDocument).html()).remove();
(pluginName == 'dialog') && $("#dialog").parents(".ui-dialog").css({
position: "relative",
top: null, left: null
});
});
});
</script>

</body>
</html>
@@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tests</title>
<link rel="stylesheet" href="../themes/base/ui.all.css" type="text/css" />
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../external/jsdiff/jsdiff.js"></script>
<link rel="stylesheet" href="tests.css" type="text/css" />
<script type="text/javascript" src="tests.js"></script>
</head>
<body>

<table id="matrix">
<thead>
<tr>
<th>Default Slider Tests</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</th>
<th>Static</th>
<th>Visual</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="test-slider-default"><th>Default</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-default-vertical"><th>Vertical</th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
<thead>
<tr>
<th>Horizontal Slider Tests</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</th>
<th>Static</th>
<th>Visual</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="test-slider-slider-horizontal"><th>Horizontal</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-slider-horizontal-range"><th>Horizontal range</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-slider-horizontal-range-max"><th>Horizontal range max</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-slider-horizontal-range-min"><th>Horizontal range min</th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
<thead>
<tr>
<th>Vertical Slider Tests</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</th>
<th>Static</th>
<th>Visual</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="test-slider-slider-vertical"><th>Vertical</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-slider-vertical-range"><th>Vertical range</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-slider-vertical-range-max"><th>Vertical range max</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr class="test-slider-slider-vertical-range-min"><th>Vertical range min</th><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>

</body>
</html>
@@ -10,11 +10,7 @@
</head>
<body>

<div class="ui-draggable">
<p>
Draggable
</p>
</div>
<div class="ui-draggable"><p>Draggable</p></div>

</body>
</html>
@@ -10,9 +10,7 @@
</head>
<body>

<div class="ui-droppable">
Droppable
</div>
<div class="ui-droppable"><p>Droppable</p></div>

</body>
</html>
@@ -10,9 +10,7 @@
</head>
<body>

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a>
</div>
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>

</body>
</html>
@@ -10,9 +10,7 @@
</head>
<body>

<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 0%;"></a>
</div>
<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><a style="bottom: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>

</body>
</html>
@@ -10,9 +10,7 @@
</head>
<body>

<div id="slider-horizontal" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 50%;"></a>
</div>
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>

</body>
</html>

0 comments on commit bf43ab6

Please sign in to comment.
You can’t perform that action at this time.