Merge pull request #143 from kayhadrin/improve-radio-box-binders
Improve checked/unchecked binders for radio box
Showing
2 changed files
with
118 additions
and
21 deletions
1 | describe('Routines', function() { | 1 | describe('Routines', function() { |
2 | var el, input; | 2 | var el, input, trueRadioInput, falseRadioInput, checkboxInput; |
3 | |||
4 | var createInputElement = function(type, value) { | ||
5 | var elem = document.createElement('input'); | ||
6 | elem.setAttribute('type', type); | ||
7 | if (value !== undefined){ | ||
8 | elem.setAttribute('value', value); | ||
9 | } | ||
10 | document.body.appendChild(elem); | ||
11 | return elem; | ||
12 | }; | ||
3 | 13 | ||
4 | beforeEach(function() { | 14 | beforeEach(function() { |
5 | rivets.configure({ | 15 | rivets.configure({ |
... | @@ -12,8 +22,27 @@ describe('Routines', function() { | ... | @@ -12,8 +22,27 @@ describe('Routines', function() { |
12 | }); | 22 | }); |
13 | 23 | ||
14 | el = document.createElement('div'); | 24 | el = document.createElement('div'); |
15 | input = document.createElement('input'); | 25 | document.body.appendChild(el); |
16 | input.setAttribute('type', 'text'); | 26 | |
27 | input = createInputElement('text'); | ||
28 | |||
29 | // to test the radio input scenario when its value is "true" | ||
30 | trueRadioInput = createInputElement('radio', 'true'); | ||
31 | |||
32 | // to test the radio input scenario when its value is "false" | ||
33 | falseRadioInput = createInputElement('radio', 'false'); | ||
34 | |||
35 | // to test the checkbox input scenario | ||
36 | checkboxInput = createInputElement('checkbox'); | ||
37 | |||
38 | }); | ||
39 | |||
40 | afterEach(function(){ | ||
41 | el.parentNode.removeChild(el); | ||
42 | input.parentNode.removeChild(input); | ||
43 | trueRadioInput.parentNode.removeChild(trueRadioInput); | ||
44 | falseRadioInput.parentNode.removeChild(falseRadioInput); | ||
45 | checkboxInput.parentNode.removeChild(checkboxInput); | ||
17 | }); | 46 | }); |
18 | 47 | ||
19 | describe('text', function() { | 48 | describe('text', function() { |
... | @@ -126,33 +155,101 @@ describe('Routines', function() { | ... | @@ -126,33 +155,101 @@ describe('Routines', function() { |
126 | }); | 155 | }); |
127 | 156 | ||
128 | describe('checked', function() { | 157 | describe('checked', function() { |
129 | describe('with a truthy value', function() { | 158 | describe('with a checkbox input', function() { |
130 | it('checks the element', function() { | 159 | describe('and a truthy value', function() { |
131 | rivets.binders.checked.routine(el, true); | 160 | it('checks the checkbox input', function() { |
132 | expect(el.checked).toBe(true); | 161 | rivets.binders.checked.routine(checkboxInput, true); |
162 | expect(checkboxInput.checked).toBe(true); | ||
163 | }); | ||
164 | }); | ||
165 | |||
166 | describe('with a falsey value', function() { | ||
167 | it('unchecks the checkbox input', function() { | ||
168 | rivets.binders.checked.routine(checkboxInput, false); | ||
169 | expect(checkboxInput.checked).toBe(false); | ||
170 | }); | ||
133 | }); | 171 | }); |
134 | }); | 172 | }); |
135 | 173 | ||
136 | describe('with a falsey value', function() { | 174 | describe('with a radio input with value="true"', function() { |
137 | it('unchecks the element', function() { | 175 | describe('and a truthy value', function() { |
138 | rivets.binders.checked.routine(el, false); | 176 | it('checks the radio input', function() { |
139 | expect(el.checked).toBe(false); | 177 | rivets.binders.checked.routine(trueRadioInput, true); |
178 | expect(trueRadioInput.checked).toBe(true); | ||
179 | }); | ||
180 | }); | ||
181 | |||
182 | describe('with a falsey value', function() { | ||
183 | it('unchecks the radio input', function() { | ||
184 | rivets.binders.checked.routine(trueRadioInput, false); | ||
185 | expect(trueRadioInput.checked).toBe(false); | ||
186 | }); | ||
187 | }); | ||
188 | }); | ||
189 | |||
190 | describe('with a radio input with value="false"', function() { | ||
191 | describe('and a truthy value', function() { | ||
192 | it('checks the radio input', function() { | ||
193 | rivets.binders.checked.routine(falseRadioInput, true); | ||
194 | expect(falseRadioInput.checked).toBe(false); | ||
195 | }); | ||
196 | }); | ||
197 | |||
198 | describe('with a falsey value', function() { | ||
199 | it('unchecks the radio input', function() { | ||
200 | rivets.binders.checked.routine(falseRadioInput, false); | ||
201 | expect(falseRadioInput.checked).toBe(true); | ||
202 | }); | ||
140 | }); | 203 | }); |
141 | }); | 204 | }); |
142 | }); | 205 | }); |
143 | 206 | ||
144 | describe('unchecked', function() { | 207 | describe('unchecked', function() { |
145 | describe('with a truthy value', function() { | 208 | describe('and a truthy value', function() { |
146 | it('unchecks the element', function() { | 209 | describe('and a truthy value', function() { |
147 | rivets.binders.unchecked.routine(el, true); | 210 | it('checks the checkbox input', function() { |
148 | expect(el.checked).toBe(false); | 211 | rivets.binders.unchecked.routine(checkboxInput, true); |
212 | expect(checkboxInput.checked).toBe(false); | ||
213 | }); | ||
214 | }); | ||
215 | |||
216 | describe('with a falsey value', function() { | ||
217 | it('unchecks the checkbox input', function() { | ||
218 | rivets.binders.unchecked.routine(checkboxInput, false); | ||
219 | expect(checkboxInput.checked).toBe(true); | ||
220 | }); | ||
149 | }); | 221 | }); |
150 | }); | 222 | }); |
151 | 223 | ||
152 | describe('with a falsey value', function() { | 224 | describe('with a radio input with value="true"', function() { |
153 | it('checks the element', function() { | 225 | describe('and a truthy value', function() { |
154 | rivets.binders.unchecked.routine(el, false); | 226 | it('checks the radio input', function() { |
155 | expect(el.checked).toBe(true); | 227 | rivets.binders.unchecked.routine(trueRadioInput, true); |
228 | expect(trueRadioInput.checked).toBe(false); | ||
229 | }); | ||
230 | }); | ||
231 | |||
232 | describe('with a falsey value', function() { | ||
233 | it('unchecks the radio input', function() { | ||
234 | rivets.binders.unchecked.routine(trueRadioInput, false); | ||
235 | expect(trueRadioInput.checked).toBe(true); | ||
236 | }); | ||
237 | }); | ||
238 | }); | ||
239 | |||
240 | describe('with a radio input with value="false"', function() { | ||
241 | describe('and a truthy value', function() { | ||
242 | it('checks the radio input', function() { | ||
243 | rivets.binders.unchecked.routine(falseRadioInput, true); | ||
244 | expect(falseRadioInput.checked).toBe(true); | ||
245 | }); | ||
246 | }); | ||
247 | |||
248 | describe('with a falsey value', function() { | ||
249 | it('unchecks the radio input', function() { | ||
250 | rivets.binders.unchecked.routine(falseRadioInput, false); | ||
251 | expect(falseRadioInput.checked).toBe(false); | ||
252 | }); | ||
156 | }); | 253 | }); |
157 | }); | 254 | }); |
158 | }); | 255 | }); | ... | ... |
... | @@ -274,7 +274,7 @@ Rivets.binders = | ... | @@ -274,7 +274,7 @@ Rivets.binders = |
274 | unbindEvent el, 'change', @currentListener | 274 | unbindEvent el, 'change', @currentListener |
275 | routine: (el, value) -> | 275 | routine: (el, value) -> |
276 | if el.type is 'radio' | 276 | if el.type is 'radio' |
277 | el.checked = el.value is value | 277 | el.checked = el.value?.toString() is value?.toString() |
278 | else | 278 | else |
279 | el.checked = !!value | 279 | el.checked = !!value |
280 | 280 | ||
... | @@ -286,7 +286,7 @@ Rivets.binders = | ... | @@ -286,7 +286,7 @@ Rivets.binders = |
286 | unbindEvent el, 'change', @currentListener | 286 | unbindEvent el, 'change', @currentListener |
287 | routine: (el, value) -> | 287 | routine: (el, value) -> |
288 | if el.type is 'radio' | 288 | if el.type is 'radio' |
289 | el.checked = el.value isnt value | 289 | el.checked = el.value?.toString() isnt value?.toString() |
290 | else | 290 | else |
291 | el.checked = !value | 291 | el.checked = !value |
292 | 292 | ... | ... |
-
Please register or sign in to post a comment