Replace event.which with event.key and event.button

3 files changed, 75 insertions, 79 deletions

diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index be32d19d9..46659a032 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -70,10 +70,10 @@ describe('Carousel', () => {
         done()
       })
 
-      const keyDown = createEvent('keydown')
-      keyDown.which = 39
+      const keydown = createEvent('keydown')
+      keydown.key = 'ArrowRight'
 
-      carouselEl.dispatchEvent(keyDown)
+      carouselEl.dispatchEvent(keydown)
     })
 
     it('should go to previous item if left arrow key is pressed', done => {
@@ -100,10 +100,10 @@ describe('Carousel', () => {
         done()
       })
 
-      const keyDown = createEvent('keydown')
-      keyDown.which = 37
+      const keydown = createEvent('keydown')
+      keydown.key = 'ArrowLeft'
 
-      carouselEl.dispatchEvent(keyDown)
+      carouselEl.dispatchEvent(keydown)
     })
 
     it('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', done => {
@@ -130,10 +130,10 @@ describe('Carousel', () => {
         done()
       })
 
-      const keyDown = createEvent('keydown')
-      keyDown.which = 40
+      const keydown = createEvent('keydown')
+      keydown.key = 'ArrowDown'
 
-      carouselEl.dispatchEvent(keyDown)
+      carouselEl.dispatchEvent(keydown)
     })
 
     it('should ignore keyboard events within <input>s and <textarea>s', () => {
@@ -157,34 +157,34 @@ describe('Carousel', () => {
         keyboard: true
       })
 
-      const spyKeyDown = spyOn(carousel, '_keydown').and.callThrough()
+      const spyKeydown = spyOn(carousel, '_keydown').and.callThrough()
       const spyPrev = spyOn(carousel, 'prev')
       const spyNext = spyOn(carousel, 'next')
 
-      const keyDown = createEvent('keydown', { bubbles: true, cancelable: true })
-      keyDown.which = 39
-      Object.defineProperty(keyDown, 'target', {
+      const keydown = createEvent('keydown', { bubbles: true, cancelable: true })
+      keydown.key = 'ArrowRight'
+      Object.defineProperty(keydown, 'target', {
         value: input,
         writable: true,
         configurable: true
       })
 
-      input.dispatchEvent(keyDown)
+      input.dispatchEvent(keydown)
 
-      expect(spyKeyDown).toHaveBeenCalled()
+      expect(spyKeydown).toHaveBeenCalled()
       expect(spyPrev).not.toHaveBeenCalled()
       expect(spyNext).not.toHaveBeenCalled()
 
-      spyKeyDown.calls.reset()
+      spyKeydown.calls.reset()
       spyPrev.calls.reset()
       spyNext.calls.reset()
 
-      Object.defineProperty(keyDown, 'target', {
+      Object.defineProperty(keydown, 'target', {
         value: textarea
       })
-      textarea.dispatchEvent(keyDown)
+      textarea.dispatchEvent(keydown)
 
-      expect(spyKeyDown).toHaveBeenCalled()
+      expect(spyKeydown).toHaveBeenCalled()
       expect(spyPrev).not.toHaveBeenCalled()
       expect(spyNext).not.toHaveBeenCalled()
     })
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index e8a7e66ba..b2820f72e 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1068,10 +1068,10 @@ describe('Dropdown', () => {
       dropdownEl.addEventListener('shown.bs.dropdown', () => {
         expect(btnDropdown.classList.contains('show')).toEqual(true)
 
-        const keyUp = createEvent('keyup')
+        const keyup = createEvent('keyup')
 
-        keyUp.which = 9 // Tab
-        document.dispatchEvent(keyUp)
+        keyup.key = 'Tab'
+        document.dispatchEvent(keyup)
       })
 
       dropdownEl.addEventListener('hidden.bs.dropdown', () => {
@@ -1165,10 +1165,10 @@ describe('Dropdown', () => {
         expect(first.classList.contains('show')).toEqual(true, '"show" class added on click')
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(1, 'only one dropdown is shown')
 
-        const keyUp = createEvent('keyup')
-        keyUp.which = 9 // Tab
+        const keyup = createEvent('keyup')
+        keyup.key = 'Tab'
 
-        document.dispatchEvent(keyUp)
+        document.dispatchEvent(keyup)
       })
 
       dropdownTestMenu.addEventListener('hidden.bs.dropdown', () => {
@@ -1180,10 +1180,10 @@ describe('Dropdown', () => {
         expect(last.classList.contains('show')).toEqual(true, '"show" class added on click')
         expect(fixtureEl.querySelectorAll('.dropdown-menu.show').length).toEqual(1, 'only one dropdown is shown')
 
-        const keyUp = createEvent('keyup')
-        keyUp.which = 9 // Tab
+        const keyup = createEvent('keyup')
+        keyup.key = 'Tab'
 
-        document.dispatchEvent(keyUp)
+        document.dispatchEvent(keyup)
       })
 
       btnGroup.addEventListener('hidden.bs.dropdown', () => {
@@ -1217,10 +1217,10 @@ describe('Dropdown', () => {
       })
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
-        const keyDown = createEvent('keydown')
+        const keydown = createEvent('keydown')
 
-        keyDown.which = 27
-        triggerDropdown.dispatchEvent(keyDown)
+        keydown.key = 'Escape'
+        triggerDropdown.dispatchEvent(keydown)
       })
 
       triggerDropdown.click()
@@ -1245,15 +1245,15 @@ describe('Dropdown', () => {
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
         input.focus()
-        const keyDown = createEvent('keydown')
+        const keydown = createEvent('keydown')
 
-        keyDown.which = 38
-        input.dispatchEvent(keyDown)
+        keydown.key = 'ArrowUp'
+        input.dispatchEvent(keydown)
 
         expect(document.activeElement).toEqual(input, 'input still focused')
 
         textarea.focus()
-        textarea.dispatchEvent(keyDown)
+        textarea.dispatchEvent(keydown)
 
         expect(document.activeElement).toEqual(textarea, 'textarea still focused')
         done()
@@ -1278,11 +1278,11 @@ describe('Dropdown', () => {
       const dropdown = fixtureEl.querySelector('.dropdown')
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
-        const keyDown = createEvent('keydown')
-        keyDown.which = 40
+        const keydown = createEvent('keydown')
+        keydown.key = 'ArrowDown'
 
-        triggerDropdown.dispatchEvent(keyDown)
-        triggerDropdown.dispatchEvent(keyDown)
+        triggerDropdown.dispatchEvent(keydown)
+        triggerDropdown.dispatchEvent(keydown)
 
         expect(document.activeElement.classList.contains('disabled')).toEqual(false, '.disabled not focused')
         expect(document.activeElement.hasAttribute('disabled')).toEqual(false, ':disabled not focused')
@@ -1314,10 +1314,10 @@ describe('Dropdown', () => {
       const dropdown = fixtureEl.querySelector('.dropdown')
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
-        const keyDown = createEvent('keydown')
-        keyDown.which = 40
+        const keydown = createEvent('keydown')
+        keydown.key = 'ArrowDown'
 
-        triggerDropdown.dispatchEvent(keyDown)
+        triggerDropdown.dispatchEvent(keydown)
 
         expect(document.activeElement.classList.contains('d-none')).toEqual(false, '.d-none not focused')
         expect(document.activeElement.style.display === 'none').toEqual(false, '"display: none" not focused')
@@ -1346,19 +1346,19 @@ describe('Dropdown', () => {
       const item2 = fixtureEl.querySelector('#item2')
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
-        const keyDown40 = createEvent('keydown')
-        keyDown40.which = 40
+        const keydownArrowDown = createEvent('keydown')
+        keydownArrowDown.key = 'ArrowDown'
 
-        triggerDropdown.dispatchEvent(keyDown40)
+        triggerDropdown.dispatchEvent(keydownArrowDown)
         expect(document.activeElement).toEqual(item1, 'item1 is focused')
 
-        document.activeElement.dispatchEvent(keyDown40)
+        document.activeElement.dispatchEvent(keydownArrowDown)
         expect(document.activeElement).toEqual(item2, 'item2 is focused')
 
-        const keyDown38 = createEvent('keydown')
-        keyDown38.which = 38
+        const keydownArrowUp = createEvent('keydown')
+        keydownArrowUp.key = 'ArrowUp'
 
-        document.activeElement.dispatchEvent(keyDown38)
+        document.activeElement.dispatchEvent(keydownArrowUp)
         expect(document.activeElement).toEqual(item1, 'item1 is focused')
 
         done()
@@ -1438,59 +1438,55 @@ describe('Dropdown', () => {
       const input = fixtureEl.querySelector('input')
       const textarea = fixtureEl.querySelector('textarea')
 
-      // Space key
-      const keyDownSpace = createEvent('keydown')
-      keyDownSpace.which = 32
+      const keydownSpace = createEvent('keydown')
+      keydownSpace.key = 'Space'
 
-      // Key up
-      const keyDownUp = createEvent('keydown')
-      keyDownSpace.which = 38
+      const keydownArrowUp = createEvent('keydown')
+      keydownArrowUp.key = 'ArrowUp'
 
-      // Key down
-      const keyDown = createEvent('keydown')
-      keyDownSpace.which = 40
+      const keydownArrowDown = createEvent('keydown')
+      keydownArrowDown.key = 'ArrowDown'
 
-      // Key escape
-      const keyDownEscape = createEvent('keydown')
-      keyDownEscape.which = 27
+      const keydownEscape = createEvent('keydown')
+      keydownEscape.key = 'Escape'
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
-        // Space key
+        // Key Space
         input.focus()
-        input.dispatchEvent(keyDownSpace)
+        input.dispatchEvent(keydownSpace)
 
         expect(document.activeElement).toEqual(input, 'input still focused')
 
         textarea.focus()
-        textarea.dispatchEvent(keyDownSpace)
+        textarea.dispatchEvent(keydownSpace)
 
         expect(document.activeElement).toEqual(textarea, 'textarea still focused')
 
-        // Key up
+        // Key ArrowUp
         input.focus()
-        input.dispatchEvent(keyDownUp)
+        input.dispatchEvent(keydownArrowUp)
 
         expect(document.activeElement).toEqual(input, 'input still focused')
 
         textarea.focus()
-        textarea.dispatchEvent(keyDownUp)
+        textarea.dispatchEvent(keydownArrowUp)
 
         expect(document.activeElement).toEqual(textarea, 'textarea still focused')
 
-        // Key down
+        // Key ArrowDown
         input.focus()
-        input.dispatchEvent(keyDown)
+        input.dispatchEvent(keydownArrowDown)
 
         expect(document.activeElement).toEqual(input, 'input still focused')
 
         textarea.focus()
-        textarea.dispatchEvent(keyDown)
+        textarea.dispatchEvent(keydownArrowDown)
 
         expect(document.activeElement).toEqual(textarea, 'textarea still focused')
 
-        // Key escape
+        // Key Escape
         input.focus()
-        input.dispatchEvent(keyDownEscape)
+        input.dispatchEvent(keydownEscape)
 
         expect(triggerDropdown.classList.contains('show')).toEqual(false, 'dropdown menu is not shown')
         done()
@@ -1523,9 +1519,9 @@ describe('Dropdown', () => {
       // Key escape
       button.focus()
       // Key escape
-      const keyDownEscape = createEvent('keydown')
-      keyDownEscape.which = 27
-      button.dispatchEvent(keyDownEscape)
+      const keydownEscape = createEvent('keydown')
+      keydownEscape.key = 'Escape'
+      button.dispatchEvent(keydownEscape)
 
       setTimeout(() => {
         expect(dropdown.toggle).not.toHaveBeenCalled()
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 52676844f..a2077b594 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -450,7 +450,7 @@ describe('Modal', () => {
 
       modalEl.addEventListener('shown.bs.modal', () => {
         const keydownEscape = createEvent('keydown')
-        keydownEscape.which = 27
+        keydownEscape.key = 'Escape'
 
         modalEl.dispatchEvent(keydownEscape)
       })
@@ -479,7 +479,7 @@ describe('Modal', () => {
 
       modalEl.addEventListener('shown.bs.modal', () => {
         const keydownTab = createEvent('keydown')
-        keydownTab.which = 9
+        keydownTab.key = 'Tab'
 
         modalEl.dispatchEvent(keydownTab)
         setTimeout(expectDone, 30)
@@ -584,7 +584,7 @@ describe('Modal', () => {
 
       modalEl.addEventListener('shown.bs.modal', () => {
         const keydownEscape = createEvent('keydown')
-        keydownEscape.which = 27
+        keydownEscape.key = 'Escape'
 
         modalEl.dispatchEvent(keydownEscape)
         shownCallback()
@@ -611,7 +611,7 @@ describe('Modal', () => {
 
       modalEl.addEventListener('shown.bs.modal', () => {
         const keydownEscape = createEvent('keydown')
-        keydownEscape.which = 27
+        keydownEscape.key = 'Escape'
 
         modalEl.dispatchEvent(keydownEscape)
         shownCallback()