quickdiff.test.js

function innerHTML(a) {
  return a.innerHTML.toLowerCase().replace(/\n|\r/g, '');
}

test("scanDiff", function () {
  var a = $("<div id=\"start\"><div>a</div><div>b</div><div><span>c</span></div></div>");
  equal(a.quickdiff("diff", a).type, "identical", "equal DOMs");
  
  var b = $("<div id=\"start\"><div>a</div><div>ba</div><div><span>c</span></div></div>");
  var res = a.quickdiff("diff", b);
  equal(res.type, "replace", "patch type");
  equal(res.source.length, res.replace.length, "single element change");
  equal(res.source[0].data, "b", "original element");
  equal(res.replace[0].data, "ba", "changed element");
  
  b = $("<div id=\"start\"><div>a</div><div>b</div><div><span>c</span></div><div>d</div></div>");
  res = a.quickdiff("diff", b);
  equal(res.type, "insert", "insert patch type");
  equal(res.source.node.id, "start", "insert parent id");
  equal(res.source.index, 2, "insert index");
  equal(res.source.node.childNodes[res.source.index].innerHTML.toLowerCase(), "<span>c</span>", "insert index element");
  equal(innerHTML(res.replace[0]), "d", "insert new element");
  
  b = $("<div id=\"start\"><div>0</div><div>a</div><div>b</div><div><span>c</span></div></div>");
  res = a.quickdiff("diff", b);
  equal(res.type, "insert", "insert0 patch type");
  equal(res.source.node.id, "start", "insert0 parent id");
  equal(res.source.index, -1, "insert0 index");
  equal(innerHTML(res.replace[0]), "0", "insert0 new element");
  
  var b = $("<div id=\"start\"><div>a</div><div>b</div></div>");
  res = a.quickdiff("diff", b);
  equal(res.type, "replace", "deletion patch type");
  equal(res.source.length, 1, "deletion single element");
  equal(res.replace.length, 0, "deletion no replacement elements");
  equal(innerHTML(res.source[0]), "<span>c</span>", "deletion target");
});

test("scanPatch", function() {
  var origDiv = "<div id=\"start\"><div>a</div><div>b</div><div><span>c</span></div></div>";
  
  var a = $(origDiv);
  a.quickdiff("patch", a);
  equal(innerHTML(a[0]), "<div>a</div><div>b</div><div><span>c</span></div>", "identical doms");
  
  a = $(origDiv);
  var b = $("<div id=\"start\"><div>a</div><div>ba</div><div><span>c</span></div></div>");
  a.quickdiff("patch", b);
  equal(innerHTML(a[0]), "<div>a</div><div>ba</div><div><span>c</span></div>", "single element change");
  
  a = $(origDiv);
  var b = $("<div id=\"start\"><div>a</div><div>b</div><div><span>c</span></div><div>d</div></div>");
  a.quickdiff("patch", b);
  equal(innerHTML(a[0]), "<div>a</div><div>b</div><div><span>c</span></div><div>d</div>", "single element insert end");
  
  a = $(origDiv);
  var b = $("<div id=\"start\"><div>0</div><div>a</div><div>b</div><div><span>c</span></div></div>");
  a.quickdiff("patch", b);
  equal(innerHTML(a[0]), "<div>0</div><div>a</div><div>b</div><div><span>c</span></div>", "single element insert start");
  
  a = $(origDiv);
  var b = $("<div id=\"start\"><div>a</div><div>b</div></div>");
  a.quickdiff("patch", b);
  equal(innerHTML(a[0]), "<div>a</div><div>b</div>", "element deletion");
});

test("filters", function () {
  var origDiv = "<div id=\"start\"><div id=\"test\">a</div><div>b</div><div><span>c</span></div></div>";
  
  $.fn.quickdiff("filter", "spanEqual",
    function (node) { return node.nodeName === "SPAN"; },
    function (a, b) { return false; } );
    
  var a = $(origDiv);
  var b = $("<div id=\"start\"><div id=\"test\">a</div><div>b</div><div><span>change</span></div></div>");
  equal(a.quickdiff("diff", b, ["spanEqual"]).type, "identical", "spans treated as equal");
  
  $.fn.quickdiff("filter", "divEqual",
    function (node) { return node.nodeName === "DIV" && node.id === "test"; },
    function (a, b) { return $(a).text() !== $(b).text(); } );
    
  var a = $(origDiv);
  var b = $("<div id=\"start\"><div id=\"test\"><span>a</span></div><div>b</div><div><span>c</span></div></div>");
  equal(a.quickdiff("diff", b, ["divEqual"]).type, "identical", "div#test compared by textual content");
  
  var a = $(origDiv);
  var b = $("<div id=\"start\"><div id=\"test\"><span>a</span></div><div>b</div><div><span>change</span></div></div>");
  equal(a.quickdiff("diff", b, ["divEqual", "spanEqual"]).type, "identical", "filter combination");
});

function genDiv(content) {
  return "<div>"+content+"</div>";
}

function testTransition(a, b) {
  var sa = "", sb = "", i, len, da, db;
  for (i = 0, len = a.length; i < len; i++) {
    sa = sa+genDiv(a[i]);
  }
  for (i = 0, len = b.length; i < len; i++) {
    sb = sb+genDiv(b[i]);
  }
  da = $(genDiv(genDiv(sa)));
  db = $(genDiv(genDiv(sb)));
  
  da.quickdiff("patch", db);
  equal(innerHTML(da[0]), genDiv(sb), "" + a + "->" + b);
}

test ("cases", function () {
  
  var letters = "ab", gen = [""], space = 4, i, j, k, arr;
  
  // Build strings
  for (i = 0; i < space; i++) {
    for (j = 0, len = gen.length; j < len; j++) {
      for (k = 0; k < letters.length; k++) {
        gen.push(gen[j]+letters[k]);
      }
    }
  }

  // strip duplicates
  arr = {};
  for ( i=0; i < gen.length; i++ )
      arr[gen[i]] = gen[i];
  gen = [];
  for ( key in arr )
    gen.push(arr[key]);

  // generate tuples
  var tuples = [];
  for (i = 0, len = gen.length; i < len; i++)
    for (j = 0, len = gen.length; j < len; j++)
      tuples.push([gen[i], gen[j]]);
  
  // test the tuple transitions
  for ( i in tuples ) {
    testTransition(tuples[i][0], tuples[i][1]);
  }
});