table fixes and tests

This commit is contained in:
David Greenspan
2012-08-01 18:34:32 -07:00
parent 9bcebc0fd2
commit 46238fd473
3 changed files with 103 additions and 85 deletions

View File

@@ -31,95 +31,13 @@ var legacyLabels = {
Tinytest.add("liveui - tables", function(test) {
var R = ReactiveVar(0);
var table = OnscreenDiv(Meteor.ui.render(function() {
var buf = [];
buf.push("<table>");
for(var i=0; i<R.get(); i++)
buf.push("<tr><td>"+(i+1)+"</td></tr>");
buf.push("</table>");
return buf.join('');
}));
R.set(1);
Meteor.flush();
test.equal(table.html(), "<table><tbody><tr><td>1</td></tr></tbody></table>");
R.set(10);
test.equal(table.html(), "<table><tbody><tr><td>1</td></tr></tbody></table>");
Meteor.flush();
test.equal(table.html(), "<table><tbody>"+
"<tr><td>1</td></tr>"+
"<tr><td>2</td></tr>"+
"<tr><td>3</td></tr>"+
"<tr><td>4</td></tr>"+
"<tr><td>5</td></tr>"+
"<tr><td>6</td></tr>"+
"<tr><td>7</td></tr>"+
"<tr><td>8</td></tr>"+
"<tr><td>9</td></tr>"+
"<tr><td>10</td></tr>"+
"</tbody></table>");
R.set(0);
Meteor.flush();
test.equal(table.html(), "<table></table>");
table.kill();
Meteor.flush();
test.equal(R.numListeners(), 0);
var div = OnscreenDiv();
div.node().appendChild(document.createElement("TABLE"));
div.node().firstChild.appendChild(Meteor.ui.render(function() {
var buf = [];
for(var i=0; i<R.get(); i++)
buf.push("<tr><td>"+(i+1)+"</td></tr>");
return buf.join('');
}));
test.equal(div.html(), "<table><!----></table>");
R.set(3);
Meteor.flush();
test.equal(div.html(), "<table><tbody>"+
"<tr><td>1</td></tr>"+
"<tr><td>2</td></tr>"+
"<tr><td>3</td></tr>"+
"</tbody></table>");
test.equal(div.node().firstChild.rows.length, 3);
R.set(0);
Meteor.flush();
test.equal(div.html(), "<table><!----></table>");
div.kill();
Meteor.flush();
test.equal(R.numListeners(), 0);
div = OnscreenDiv();
div.node().appendChild(DomUtils.htmlToFragment("<table><tr></tr></table>"));
R.set(3);
div.node().getElementsByTagName("tr")[0].appendChild(Meteor.ui.render(
function() {
var buf = [];
for(var i=0; i<R.get(); i++)
buf.push("<td>"+(i+1)+"</td>");
return buf.join('');
}));
test.equal(div.html(),
"<table><tbody><tr><td>1</td><td>2</td><td>3</td>"+
"</tr></tbody></table>");
R.set(1);
Meteor.flush();
test.equal(div.html(),
"<table><tbody><tr><td>1</td></tr></tbody></table>");
div.kill();
Meteor.flush();
test.equal(R.numListeners(), 0);
var R = ReactiveVar("");
// Test tables with patching
R.set("");
div = OnscreenDiv(Meteor.ui.render(function() {
var div = OnscreenDiv(Meteor.ui.render(function() {
return '<table id="my-awesome-table">'+R.get()+'</table>';
}));
}, {preserve: legacyLabels}));
Meteor.flush();
R.set("<tr><td>Hello</td></tr>");
Meteor.flush();

View File

@@ -308,6 +308,20 @@ Spark.isolate = function (htmlFunc) {
var frag = Spark.render(function () {
return Spark.isolate(htmlFunc);
});
var tempRange = new LiveRange(Spark._ANNOTATION_ISOLATE, frag, null,
true /* inner */);
tempRange.operate(function (start, end) {
// Wrap contents of frag, *inside* the ISOLATE annotation,
// as appropriate for insertion into `range`. We want the
// wrapping inside the range so that if you have a <table>
// containing an isolate, and the isolate returns a <tr>
// sometimes and a <thead> other times, the wrapping will
// change as appropriate.
DomUtils.wrapFragmentForContainer(frag, range.containerNode());
});
tempRange.destroy();
var oldContents = range.replace_contents(frag); // XXX should patch
Spark.finalize(oldContents);
notifyWatchers(range);

View File

@@ -478,3 +478,89 @@ Tinytest.add("spark - data context", function (test) {
"</div>");
});
});
Tinytest.add("spark - tables", function (test) {
var R = ReactiveVar(0);
var table = OnscreenDiv(Meteor.render(function() {
var buf = [];
buf.push("<table>");
for(var i=0; i<R.get(); i++)
buf.push("<tr><td>"+(i+1)+"</td></tr>");
buf.push("</table>");
return buf.join('');
}));
R.set(1);
Meteor.flush();
test.equal(table.html(), "<table><tbody><tr><td>1</td></tr></tbody></table>");
R.set(10);
test.equal(table.html(), "<table><tbody><tr><td>1</td></tr></tbody></table>");
Meteor.flush();
test.equal(table.html(), "<table><tbody>"+
"<tr><td>1</td></tr>"+
"<tr><td>2</td></tr>"+
"<tr><td>3</td></tr>"+
"<tr><td>4</td></tr>"+
"<tr><td>5</td></tr>"+
"<tr><td>6</td></tr>"+
"<tr><td>7</td></tr>"+
"<tr><td>8</td></tr>"+
"<tr><td>9</td></tr>"+
"<tr><td>10</td></tr>"+
"</tbody></table>");
R.set(0);
Meteor.flush();
test.equal(table.html(), "<table></table>");
table.kill();
Meteor.flush();
test.equal(R.numListeners(), 0);
var div = OnscreenDiv();
div.node().appendChild(document.createElement("TABLE"));
div.node().firstChild.appendChild(Meteor.render(function() {
var buf = [];
for(var i=0; i<R.get(); i++)
buf.push("<tr><td>"+(i+1)+"</td></tr>");
return buf.join('');
}));
test.equal(div.html(), "<table><!----></table>");
R.set(3);
Meteor.flush();
test.equal(div.html(), "<table><tbody>"+
"<tr><td>1</td></tr>"+
"<tr><td>2</td></tr>"+
"<tr><td>3</td></tr>"+
"</tbody></table>");
test.equal(div.node().firstChild.rows.length, 3);
R.set(0);
Meteor.flush();
test.equal(div.html(), "<table><!----></table>");
div.kill();
Meteor.flush();
test.equal(R.numListeners(), 0);
div = OnscreenDiv();
div.node().appendChild(DomUtils.htmlToFragment("<table><tr></tr></table>"));
R.set(3);
div.node().getElementsByTagName("tr")[0].appendChild(Meteor.render(
function() {
var buf = [];
for(var i=0; i<R.get(); i++)
buf.push("<td>"+(i+1)+"</td>");
return buf.join('');
}));
test.equal(div.html(),
"<table><tbody><tr><td>1</td><td>2</td><td>3</td>"+
"</tr></tbody></table>");
R.set(1);
Meteor.flush();
test.equal(div.html(),
"<table><tbody><tr><td>1</td></tr></tbody></table>");
div.kill();
Meteor.flush();
test.equal(R.numListeners(), 0);
});