Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit 7c6d6eb

Browse files
kevinpschaafkevinpschaaf
committed
Add real tests.
1 parent 404ea03 commit 7c6d6eb

File tree

5 files changed

+713
-88
lines changed

5 files changed

+713
-88
lines changed

‎tests/html/core-list-basic.html

+279-19
Original file line numberDiff line numberDiff line change
@@ -16,45 +16,305 @@
1616
<script src="../../../polymer-test-tools/htmltest.js"></script>
1717
<link rel="import" href="../../core-list.html">
1818
<style>
19-
html, body {
19+
body {
2020
margin: 0;
21-
-webkit-tap-highlight-color: transparent;
22-
overflow: hidden;
21+
height: 100%;
2322
}
2423
core-list {
2524
display: block;
2625
height: 100%;
2726
margin: 0 auto;
2827
}
28+
input {
29+
width: 20px;
30+
}
31+
.item {
32+
height: 80px;
33+
background: lightblue;
34+
}
35+
.item.selected {
36+
background: orange;
37+
}
2938
</style>
3039
</head>
3140
<body fit>
3241

3342
<core-list id="list">
3443
<template>
3544
<div class="item {{ {selected: selected} | tokenList }}">
36-
<div class="subject">Row: {{index}}, Record ID: {{model.id}}</div>
37-
<input type="checkbox" checked="{{model.checked}}">
38-
<input type="number" value="{{model.value}}" class="narrow">
39-
<select selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
45+
<span id="index">{{index}}</span><br>
46+
<span id="id">{{model.id}}</span><br>
47+
<input id="checkbox" type="checkbox" checked="{{model.checked}}">
48+
<input id="input" type="number" _value="{{model.value}}" class="narrow">
49+
<select id="select" selectedIndex="{{model.type}}"><option>a</option><option>b</option><option>c</option></select>
4050
</div>
4151
</template>
4252
</core-list>
4353

4454
<script>
4555
document.addEventListener('polymer-ready', function() {
46-
// Test a property
47-
var el = document.querySelector('core-list');
48-
el.data = [
49-
{id:123, checked:true, value:99, type:1},
50-
{id:456, checked:false, value:88, type:2}
51-
];
52-
el.onMutation(el, function() {
53-
chai.assert(el.children.length == el.data.length + 1,
54-
'children.length should be 1 (template) + count of data elements');
55-
done();
56-
});
57-
56+
// Initial setup
57+
var list = document.querySelector('core-list');
58+
var physicalCount = Math.ceil(list.offsetHeight / list.height);
59+
var index = 0;
60+
// Helper to create random items
61+
var generateItem = function() {
62+
return {
63+
id: Math.floor(Math.random()*10000),
64+
checked: !!Math.floor(Math.random()*2),
65+
value: Math.floor(Math.random()*10000),
66+
type: Math.floor(Math.random()*3)
67+
};
68+
};
69+
// Helper to assert top item is rendered as expected
70+
var checkTopItem = function(positionDescription) {
71+
// Measure from top-right (to avoid template children)
72+
var item = document.elementFromPoint(list.clientWidth-50, 0);
73+
chai.assert(item &&
74+
item.templateInstance &&
75+
item.templateInstance.model &&
76+
item.templateInstance.model.index == index,
77+
'top item index should be ' + index + ' ' + positionDescription);
78+
chai.assert(item.templateInstance.model.model == list.data[index],
79+
'top item model should be data[' + index + '] ' + positionDescription);
80+
chai.assert(item.querySelector('#index').textContent == index,
81+
'top item index content should be ' + index + ' ' + positionDescription);
82+
chai.assert(item.querySelector('#id').textContent == list.data[index].id,
83+
'top item id content should be ' + list.data[index].id + ' ' + positionDescription);
84+
chai.assert(item.querySelector('#checkbox').checked == list.data[index].checked,
85+
'top item checkbox should be ' + list.data[index].checked + ' ' + positionDescription);
86+
chai.assert(item.querySelector('#input').value == list.data[index].value,
87+
'top item input should be ' + list.data[index].value + ' ' + positionDescription);
88+
chai.assert(item.querySelector('#select').selectedIndex == list.data[index].type,
89+
'top item select should be ' + list.data[index].type + ' ' + positionDescription);
90+
};
91+
var scrollItemsAndCheck = function(count, next) {
92+
index += count;
93+
list.scrollTop += count * list.height;
94+
waitFor(function() {
95+
checkTopItem('when scrolled to item ' + index);
96+
}, next);
97+
};
98+
asyncSeries([
99+
// Initialize list with two items
100+
function(next) {
101+
list.data = [
102+
generateItem(),
103+
generateItem()
104+
];
105+
waitFor(function() {
106+
chai.assert(list.children.length == 3, // (+1 for template)
107+
'children.length should be 3 (1 template + count of data elements');
108+
checkTopItem('after initialization');
109+
}, next);
110+
},
111+
// Select first item
112+
function(next) {
113+
var item = document.elementFromPoint(list.clientWidth-50, 0);
114+
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
115+
waitFor(function() {
116+
chai.assert(list.selection && list.selection.id == list.data[0].id,
117+
'first item should be selected; selected id was ' + list.selection && list.selection.id);
118+
}, next);
119+
},
120+
// Select second item
121+
function(next) {
122+
var item = document.elementFromPoint(list.clientWidth-50, list.height);
123+
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
124+
waitFor(function() {
125+
chai.assert(list.selection && list.selection.id == list.data[1].id,
126+
'second item should be selected; selection ' + list.selection && list.selection.id);
127+
}, next);
128+
},
129+
// Enable multiple-selection, and select the first item (for total of 2 selected)
130+
function(next) {
131+
list.multi = true;
132+
var item = document.elementFromPoint(list.clientWidth-50, 0);
133+
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
134+
waitFor(function() {
135+
chai.assert(list.selection && list.selection.length == 2,
136+
'selection length should be 2');
137+
// Note, selection is maintained in order, so last item selected is last in selection
138+
chai.assert(list.selection[0].id == list.data[1].id && list.selection[1].id == list.data[0].id,
139+
'first and second items should be selected; selected ids: ' +
140+
list.selection[0].id + ', ' + list.selection[1].id);
141+
}, next);
142+
},
143+
// Delete one item
144+
function(next) {
145+
list.data.length = 1;
146+
waitFor(function() {
147+
chai.assert(list.children.length == 3,
148+
'children.length should stay 3 (1 template, plus 2 originally created items)');
149+
chai.assert(list.children[2].getAttribute('hidden') !== null,
150+
'last element should be hidden');
151+
chai.assert(list.selection.length == 1,
152+
'selection length should be 1');
153+
chai.assert(list.selection[0].id == list.data[0].id,
154+
'first element should be selected');
155+
}, next);
156+
},
157+
// Deselect first item
158+
function(next) {
159+
var item = document.elementFromPoint(list.clientWidth-50, 0);
160+
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
161+
waitFor(function() {
162+
chai.assert(list.selection.length === 0,
163+
'selection length should be 0');
164+
}, next);
165+
},
166+
// Add many more than viewport
167+
function(next) {
168+
var more = physicalCount * 20;
169+
while (more--) {
170+
list.data.push(generateItem());
171+
}
172+
waitFor(function() {
173+
chai.assert(list.children.length == physicalCount + 1 + list.extraItems, // (+1 for template)
174+
'children.length should be ' + physicalCount + ' (1 template + max number of elements');
175+
}, next);
176+
},
177+
function(next) {
178+
// Scroll down
179+
scrollItemsAndCheck(physicalCount, function() {
180+
scrollItemsAndCheck(physicalCount, function() {
181+
scrollItemsAndCheck(physicalCount, function() {
182+
scrollItemsAndCheck(physicalCount, function() {
183+
scrollItemsAndCheck(physicalCount, function() {
184+
scrollItemsAndCheck(physicalCount, function() {
185+
scrollItemsAndCheck(physicalCount, function() {
186+
scrollItemsAndCheck(physicalCount, function() {
187+
scrollItemsAndCheck(physicalCount, function() {
188+
scrollItemsAndCheck(physicalCount, function() {
189+
scrollItemsAndCheck(physicalCount, function() {
190+
scrollItemsAndCheck(physicalCount, function() {
191+
next();
192+
});
193+
});
194+
});
195+
});
196+
});
197+
});
198+
});
199+
});
200+
});
201+
});
202+
});
203+
});
204+
},
205+
function(next) {
206+
// Scroll back up
207+
scrollItemsAndCheck(-physicalCount, function() {
208+
scrollItemsAndCheck(-physicalCount, function() {
209+
scrollItemsAndCheck(-physicalCount, function() {
210+
scrollItemsAndCheck(-physicalCount, function() {
211+
scrollItemsAndCheck(-physicalCount, function() {
212+
scrollItemsAndCheck(-physicalCount, function() {
213+
scrollItemsAndCheck(-physicalCount, function() {
214+
scrollItemsAndCheck(-physicalCount, function() {
215+
scrollItemsAndCheck(-physicalCount, function() {
216+
scrollItemsAndCheck(-physicalCount, function() {
217+
scrollItemsAndCheck(-physicalCount, function() {
218+
scrollItemsAndCheck(-physicalCount, function() {
219+
next();
220+
});
221+
});
222+
});
223+
});
224+
});
225+
});
226+
});
227+
});
228+
});
229+
});
230+
});
231+
});
232+
},
233+
// Scroll all the way to bottom
234+
function(next) {
235+
list.scrollTop = 99999999;
236+
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
237+
waitFor(function() {
238+
checkTopItem('at bottom of list');
239+
}, next);
240+
},
241+
// Select item
242+
function(next) {
243+
var item = document.elementFromPoint(list.clientWidth-50, 0);
244+
item.dispatchEvent(new MouseEvent('tap', {'view': window, 'bubbles': true}));
245+
waitFor(function() {
246+
chai.assert(list.selection.length === 1,
247+
'selection length should be 1');
248+
chai.assert(list.selection[0].id == list.data[index].id,
249+
'top item at bottom of list (index ' + index + ') should be selected');
250+
}, next);
251+
},
252+
// Delete one item from bottom
253+
function(next) {
254+
list.data.length = list.data.length - 1;
255+
var lastIndex = index;
256+
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
257+
waitFor(function() {
258+
checkTopItem('at bottom of list after deleting one item from end of list');
259+
chai.assert(list.selection.length === 1,
260+
'selection length should be 1');
261+
chai.assert(list.selection[0].id == list.data[lastIndex].id,
262+
'previously selected item (index ' + lastIndex + ') should stay selected');
263+
}, next);
264+
},
265+
// Delete from bottom
266+
function(next) {
267+
list.data.length = list.data.length - Math.floor(list.data.length/2);
268+
var lastIndex = index;
269+
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
270+
waitFor(function() {
271+
checkTopItem('at bottom of list after deleting half of items items from end of list');
272+
chai.assert(list.selection.length === 0,
273+
'selection length should be 0');
274+
}, next);
275+
},
276+
// Delete from top
277+
function(next) {
278+
list.data.splice(0, Math.floor(list.data.length/2));
279+
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
280+
waitFor(function() {
281+
checkTopItem('at bottom of list after deleting half of items items from top of list');
282+
}, next);
283+
},
284+
// Delete from top
285+
function(next) {
286+
list.data.splice(0, Math.floor(list.data.length/2));
287+
index = list.data.length - 1 - Math.floor(list.offsetHeight / list.height);
288+
waitFor(function() {
289+
checkTopItem('at bottom of list after deleting half of items items from top of list (again)');
290+
}, next);
291+
},
292+
// Webdriver-based: Tap on first item
293+
// function(next) {
294+
// requiresWebdriver(function() {
295+
//
296+
// // Method 1: click element directly by reference
297+
// var item = document.elementFromPoint(list.clientWidth-50, 0);
298+
// webdriverCommand(['clickElement', item], function(err) {
299+
// waitFor(function() {
300+
// chai.assert(list.selection && list.selection.id == list.data[0].id,
301+
// 'first item should be selected; selection was ' + (list.selection && list.selection.id));
302+
// }, next);
303+
// }, next);
304+
//
305+
// // Method 2: move mouse, then click mouse
306+
// webdriverCommand(['moveTo', null, list.offsetWidth-50, 0], function(err) {
307+
// webdriverCommand(['click', 0], function(err) {
308+
// waitFor(function() {
309+
// chai.assert(list.selection && list.selection.id == list.data[0].id,
310+
// 'first item should be selected; selection was ' + (list.selection && list.selection.id));
311+
// }, next);
312+
// }, next);
313+
// }, next);
314+
// }, function(){});
315+
//
316+
// },
317+
], done);
58318
});
59319

60320
</script>

0 commit comments

Comments
 (0)