Skip to content

Commit 5bca55b

Browse files
kevinpschaafkevinpschaaf
committed
Add tests. Reset selection on items/multi change. Remove async.
1 parent 1b21397 commit 5bca55b

File tree

4 files changed

+237
-14
lines changed

4 files changed

+237
-14
lines changed

‎src/lib/template/array-selector.html‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@
7373
* An array containing items from which selection will be made.
7474
*/
7575
items: {
76-
type: Array
76+
type: Array,
77+
observer: '_resetSelection'
7778
},
7879

7980
/**
@@ -99,15 +100,11 @@
99100
*/
100101
multi: {
101102
type: Boolean,
102-
value: false
103+
observer: '_resetSelection'
103104
}
104105
},
105106

106-
observers: [
107-
'_itemsChanged(items, multi)'
108-
],
109-
110-
_itemsChanged: function(items, multi) {
107+
_resetSelection: function() {
111108
// Unbind previous selection
112109
if (Array.isArray(this.selected)) {
113110
for (var i=0; i<this.selected.length; i++) {
@@ -117,7 +114,7 @@
117114
this.unlinkPaths('selected');
118115
}
119116
// Initialize selection
120-
if (multi) {
117+
if (this.multi) {
121118
this.selected = [];
122119
} else {
123120
this.selected = null;
@@ -163,12 +160,8 @@
163160
}
164161
} else {
165162
this.push('selected', item);
166-
// this.linkPaths('selected.' + sidx, 'items.' + skey);
167-
// skey = Polymer.Collection.get(this.selected).add(item);
168-
this.async(function() {
169-
skey = scol.getKey(item);
170-
this.linkPaths('selected.' + skey, 'items.' + key);
171-
});
163+
skey = scol.getKey(item);
164+
this.linkPaths('selected.' + skey, 'items.' + key);
172165
}
173166
} else {
174167
if (this.toggle && item == this.selected) {

‎test/runner.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
'unit/bind.html',
3636
'unit/bind.html?dom=shadow',
3737
'unit/notify-path.html',
38+
'unit/array-selector.html',
3839
'unit/events.html',
3940
'unit/gestures.html',
4041
'unit/utils.html',

‎test/unit/array-selector-elements.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script>
2+
Polymer({
3+
is: 'observe-el',
4+
observers: [
5+
'singleChanged(singleSelected.*)',
6+
'multiChanged(multiSelected.*)'
7+
],
8+
singleChanged: function() {},
9+
multiChanged: function() {}
10+
});
11+
</script>

‎test/unit/array-selector.html‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
15+
<script src="../../../web-component-tester/browser.js"></script>
16+
<link rel="import" href="../../polymer.html">
17+
<link rel="import" href="array-selector-elements.html">
18+
<body>
19+
20+
<array-selector id="singleConfigured"
21+
items='[{"name": "one"},{"name": "two"},{"name": "three"}]'>
22+
</array-selector>
23+
24+
<array-selector id="multiConfigured" multi
25+
items='[{"name": "one"},{"name": "two"},{"name": "three"}]'>
26+
</array-selector>
27+
28+
<template is="dom-bind" id="bind">
29+
<observe-el id="observer" single-selected="{{singleSelected}}" multi-selected="{{multiSelected}}"></observe-el>
30+
<array-selector id="singleBound" items="{{items}}" selected="{{singleSelected}}"></array-selector>
31+
<array-selector id="multiBound" items="{{items}}" selected="{{multiSelected}}" multi></array-selector>
32+
</template>
33+
34+
<script>
35+
suite('basic', function() {
36+
37+
test('single selection', function() {
38+
var el = singleConfigured;
39+
// Nothing selected
40+
assert.strictEqual(el.selected, null);
41+
// Select 0
42+
el.select(el.items[0]);
43+
assert.strictEqual(el.selected, el.items[0]);
44+
// Re-select 0
45+
el.select(el.items[0]);
46+
assert.strictEqual(el.selected, el.items[0]);
47+
// Select 2
48+
el.select(el.items[2]);
49+
assert.strictEqual(el.selected, el.items[2]);
50+
// Toggle 2
51+
el.toggle = true;
52+
el.select(el.items[2]);
53+
assert.strictEqual(el.selected, null);
54+
// Toggle 2
55+
el.toggle = true;
56+
el.select(el.items[2]);
57+
assert.strictEqual(el.selected, el.items[2]);
58+
});
59+
60+
test('multiple selection', function() {
61+
var el = multiConfigured;
62+
// Nothing selected
63+
assert.sameMembers(el.selected, []);
64+
// Select 0
65+
el.select(el.items[0]);
66+
assert.sameMembers(el.selected, [el.items[0]]);
67+
// Re-select 0
68+
el.select(el.items[0]);
69+
assert.sameMembers(el.selected, [el.items[0]]);
70+
// Select 2
71+
el.select(el.items[2]);
72+
assert.sameMembers(el.selected, [el.items[0], el.items[2]]);
73+
// Toggle 2
74+
el.toggle = true;
75+
el.select(el.items[2]);
76+
assert.sameMembers(el.selected, [el.items[0]]);
77+
// Toggle 2
78+
el.toggle = true;
79+
el.select(el.items[2]);
80+
assert.sameMembers(el.selected, [el.items[0], el.items[2]]);
81+
});
82+
83+
test('bound defaults', function() {
84+
assert.equal(bind.$.observer.singleSelected, null);
85+
assert.sameMembers(bind.$.observer.multiSelected, []);
86+
bind.items = [
87+
{name: 'one'},
88+
{name: 'two'},
89+
{name: 'three'}
90+
];
91+
assert.equal(bind.$.observer.singleSelected, null);
92+
assert.sameMembers(bind.$.observer.multiSelected, []);
93+
});
94+
95+
test('single selection notification', function() {
96+
bind.items = [
97+
{name: 'one'},
98+
{name: 'two'},
99+
{name: 'three'}
100+
];
101+
var called = false;
102+
observer.singleChanged = function(info) {
103+
called = true;
104+
assert.equal(info.path, 'singleSelected');
105+
assert.equal(info.value, bind.items[2]);
106+
assert.equal(bind.$.observer.singleSelected, bind.items[2]);
107+
};
108+
singleBound.select(bind.items[2]);
109+
assert.equal(called, true);
110+
observer.singleChanged = function(info) {};
111+
});
112+
113+
test('single selection sub-property change', function() {
114+
var called = false;
115+
observer.singleChanged = function(info) {
116+
called = true;
117+
assert.equal(info.path, 'singleSelected.name');
118+
assert.equal(info.value, 'test');
119+
assert.equal(bind.$.observer.singleSelected.name, 'test');
120+
};
121+
bind.set(['items', 2, 'name'], 'test');
122+
assert.equal(called, true);
123+
observer.singleChanged = function(info) {};
124+
});
125+
126+
test('single selection sub-property change after unshift', function() {
127+
var called = false;
128+
observer.singleChanged = function(info) {
129+
called = true;
130+
assert.equal(info.path, 'singleSelected.name');
131+
assert.equal(info.value, 'test2');
132+
assert.equal(bind.$.observer.singleSelected.name, 'test2');
133+
};
134+
bind.unshift('items', {name: 'zero'});
135+
bind.set(['items', 3, 'name'], 'test2');
136+
assert.equal(called, true);
137+
observer.singleChanged = function(info) {};
138+
});
139+
140+
test('multi selection notification', function() {
141+
bind.items = [
142+
{name: 'one'},
143+
{name: 'two'},
144+
{name: 'three'}
145+
];
146+
var called = false;
147+
observer.multiChanged = function(info) {
148+
if (info.path == 'multiSelected.length') {
149+
assert.equal(info.value, 1);
150+
} else {
151+
called = true;
152+
assert.equal(info.path, 'multiSelected.splices');
153+
assert.equal(info.value.keySplices.length, 1);
154+
assert.equal(info.value.keySplices[0].added.length, 1);
155+
assert.equal(info.value.keySplices[0].added[0], 0);
156+
assert.equal(info.value.keySplices[0].removed.length, 0);
157+
assert.sameMembers(bind.$.observer.multiSelected, [bind.items[2]]);
158+
}
159+
};
160+
multiBound.select(bind.items[2]);
161+
called = false;
162+
observer.multiChanged = function(info) {
163+
called = true;
164+
if (info.path == 'multiSelected.length') {
165+
assert.equal(info.value, 2);
166+
} else {
167+
assert.equal(info.path, 'multiSelected.splices');
168+
assert.equal(info.value.keySplices.length, 1);
169+
assert.equal(info.value.keySplices[0].added.length, 1);
170+
assert.equal(info.value.keySplices[0].added[0], 1);
171+
assert.equal(info.value.keySplices[0].removed.length, 0);
172+
assert.sameMembers(bind.$.observer.multiSelected, [bind.items[2], bind.items[0]]);
173+
}
174+
};
175+
multiBound.select(bind.items[0]);
176+
assert.equal(called, true);
177+
observer.multiChanged = function(info) {};
178+
});
179+
180+
test('multi selection sub-property change', function() {
181+
var called = false;
182+
observer.multiChanged = function(info) {
183+
called = true;
184+
assert.equal(info.path, 'multiSelected.0.name');
185+
assert.equal(info.value, 'test');
186+
assert.equal(bind.$.observer.multiSelected[0].name, 'test');
187+
};
188+
bind.set(['items', 2, 'name'], 'test');
189+
observer.multiChanged = function(info) {
190+
called = true;
191+
assert.equal(info.path, 'multiSelected.1.name');
192+
assert.equal(info.value, 'test2');
193+
assert.equal(bind.$.observer.multiSelected[1].name, 'test2');
194+
};
195+
bind.set(['items', 0, 'name'], 'test2');
196+
assert.equal(called, true);
197+
observer.multiChanged = function(info) {};
198+
});
199+
200+
201+
test('multi selection sub-property change after unshift', function() {
202+
var called = false;
203+
observer.multiChanged = function(info) {
204+
called = true;
205+
assert.equal(info.path, 'multiSelected.1.name');
206+
assert.equal(info.value, 'test3');
207+
assert.equal(bind.$.observer.multiSelected[1].name, 'test3');
208+
};
209+
bind.unshift('items', {name: 'zero'});
210+
bind.set(['items', 1, 'name'], 'test3');
211+
assert.equal(called, true);
212+
});
213+
214+
});
215+
</script>
216+
217+
</body>
218+
</html>

0 commit comments

Comments
 (0)