Add test for shiftKey label range

Author: muan

test/test.js

@@ -41,6 +41,25 @@ describe('check-all', function () {
   })
 
   it('checks range', function () {
+    const checkAll = document.querySelector('[data-check-all]')
+    const count = document.querySelector('[data-check-all-count]')
+    const checkboxes = document.querySelectorAll('[data-check-all-item]')
+    checkboxes[1].dispatchEvent(new MouseEvent('click'))
+    assert.equal(count.textContent, '1')
+    assert.equal(document.querySelectorAll('[data-check-all-item]:checked').length, 1)
+    assert(checkAll.indeterminate)
+
+    checkboxes[3].dispatchEvent(new MouseEvent('mousedown', {shiftKey: true, bubbles: true}))
+    checkboxes[3].dispatchEvent(new MouseEvent('click', {shiftKey: true, bubbles: true}))
+    assert.equal(count.textContent, '3')
+    assert.notOk(checkboxes[0].checked)
+    assert(checkboxes[1].checked)
+    assert(checkboxes[2].checked)
+    assert(checkboxes[3].checked)
+    assert(checkAll.indeterminate)
+  })
+
+  it('checks range with label click', function () {
     const checkAll = document.querySelector('[data-check-all]')
     const count = document.querySelector('[data-check-all-count]')
     const checkboxes = document.querySelectorAll('[data-check-all-item]')
@@ -49,11 +68,9 @@ describe('check-all', function () {
     assert.equal(document.querySelectorAll('[data-check-all-item]:checked').length, 1)
     assert(checkAll.indeterminate)
 
-    const event = document.createEvent('Events')
-    event.initEvent('mousedown', true, true)
-    event.shiftKey = true
-    checkboxes[3].dispatchEvent(event)
-    checkboxes[3].click()
+    const label = checkboxes[3].closest('label')
+    label.dispatchEvent(new MouseEvent('mousedown', {shiftKey: true, bubbles: true}))
+    label.dispatchEvent(new MouseEvent('click', {shiftKey: true, bubbles: true}))
     assert.equal(count.textContent, '3')
     assert.notOk(checkboxes[0].checked)
     assert(checkboxes[1].checked)