1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="common.js"></script>
<link rel="import" href="../vaadin-grid.html">
</head>
<body>
<div id="gridwrapper"></div>
<script>
describe.feature('rendering light DOM', function() {
it('light dom table header gets rendered in the grid', function() {
var row = qLocal(".v-grid-header .v-grid-row");
var cells = row.childNodes;
assert.isTrue(cells[0].innerHTML == 'Name');
assert.isTrue(cells[1].innerHTML == 'Value');
});
it('light dom table body gets rendered in the grid', function() {
var row = qLocal(".v-grid-body .v-grid-row");
var cells = row.childNodes;
assert.isTrue(cells[0].innerHTML == 'Grid');
assert.isTrue(cells[1].innerHTML == '10000');
});
function removeGrid() {
if (grid) {
grid.style.visibility = "hidden";
document.body.appendChild(grid);
grid = null;
}
}
// makes grid.then in afterEach to never finish...
it.skip('DOM: headers & footers', function(done) {
// removeGrid();
wrapper.innerHTML = "<v-grid><table>" +
"<thead hidden><tr class='red'><td colspan='2'></td></tr><tr class='pink'><th></th><th></th></tr></thead>" +
"<tfoot><tr class='foot1'><td colspan='2'></td></tr><tr class='foot2'><td></td><td></td></tr></tfoot>" +
"</table></v-grid>";
grid = wrapper.querySelector("v-grid");
waitUntil(function() {
return qLocal(".v-grid-body");
}, function() {
assert.equal(0, qaLocal("thead tr").length);
assert.equal(1, qaLocal("tfoot tr.foot1").length);
assert.equal(1, qaLocal("tfoot tr.foot2").length);
assert.equal(1, qaLocal("tfoot td[colspan='2']").length);
qLight("thead").setAttribute('hidden', false)
waitUntil(function() {
return qaLocal("thead tr").length > 0;
}, function() {
assert.equal(1, qaLocal("thead tr.red").length);
assert.equal(1, qaLocal("thead tr.pink").length);
assert.equal(1, qaLocal("thead th[colspan='2']").length);
done();
}, done);
}, done);
});
it('DOM: mutation', function(done) {
waitUntil(function() {
return qLocal(".v-grid-body");
}, function() {
var nrows = qaLocal("tbody tr").length;
var nheads = qaLocal("thead tr").length;
qLight("thead").innerHTML += qLight("table thead").innerHTML;
qLight("tbody").innerHTML += qLight("table tbody").innerHTML;
assert.equal("Name", qLocal("th").textContent);
qLight("th").textContent = "foo";
waitUntil(function() {
return qLocal("tbody tr") && qaLocal("tbody tr").length == nrows * 2;
}, function() {
assert.equal(qaLocal("tbody tr").length, nrows * 2);
assert.equal(qaLocal("thead tr").length, nheads * 2);
assert.equal("foo", qLocal("th").textContent);
done();
}, done);
}, done);
});
it('should have a sort-order', function(done) {
var ths = light().querySelectorAll("th");
ths[0].setAttribute("sort-direction", "asc");
ths[1].setAttribute("sort-direction", "desc");
grid.then(function(){
var sortOrder = grid.sortOrder;
expect(grid.sortOrder[0]).to.eql({column: 0, direction: "asc"});
expect(grid.sortOrder[1]).to.eql({column: 1, direction: "desc"});
}).then(done);
});
it('should apply header-text from a th element', function(done) {
light().querySelector("th").setAttribute("header-text", "foo");
grid.then(function(){
expect(grid.columns[0].headerHtml).to.eql("foo");
}).then(done);
});
it('should apply header-text from a col element', function(done) {
var col = document.createElement("col");
col.setAttribute("header-text", "foo");
light().querySelector("table").prependChild(col);
grid.then(function(){
expect(grid.columns[0].headerHtml).to.eql("foo");
}).then(done);
});
});
</script>
</body>
</html>
|
