@@ -11,4 +11,53 @@ describe('task-lists element', function() {
1111assert . equal ( 'TASK-LISTS' , el . nodeName )
1212} )
1313} )
14+
15+ describe ( 'selecting checkboxes' , function ( ) {
16+ beforeEach ( function ( ) {
17+ const container = document . createElement ( 'div' )
18+ container . innerHTML = `
19+ <task-lists>
20+ <ul class="contains-task-list">
21+ <li class="task-list-item">
22+ <input type="checkbox" class="task-list-item-checkbox"> Hubot
23+ </li>
24+ <li class="task-list-item">
25+ <input type="checkbox" class="task-list-item-checkbox"> Bender
26+ </li>
27+ </ul>
28+
29+ <ul class="contains-task-list">
30+ <li class="task-list-item">
31+ <input type="checkbox" class="task-list-item-checkbox"> BB-8
32+ </li>
33+ <li class="task-list-item">
34+ <input id="wall-e" type="checkbox" class="task-list-item-checkbox"> WALL-E
35+ </li>
36+ </ul>
37+ </task-lists>`
38+ document . body . append ( container )
39+ } )
40+
41+ afterEach ( function ( ) {
42+ document . body . innerHTML = ''
43+ } )
44+
45+ it ( 'emits check event with position' , function ( ) {
46+ let called = false
47+
48+ const list = document . querySelector ( 'task-lists' )
49+ list . addEventListener ( 'task-lists:check' , function ( event ) {
50+ called = true
51+ const { position, checked} = event . detail
52+ assert . deepEqual ( position , [ 1 , 1 ] )
53+ assert ( checked )
54+ } )
55+
56+ const checkbox = document . querySelector ( '#wall-e' )
57+ checkbox . checked = true
58+ checkbox . dispatchEvent ( new CustomEvent ( 'change' , { bubbles :true } ) )
59+
60+ assert ( called )
61+ } )
62+ } )
1463} )