From 00e0272da61618537fbee163e41fd064eca05e3c Mon Sep 17 00:00:00 2001 From: Olzhas Askar Date: Sat, 19 Oct 2019 00:14:45 +0200 Subject: [PATCH 1/3] test: add bubbling tests --- src/__tests__/events.js | 118 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/src/__tests__/events.js b/src/__tests__/events.js index 3d11c12e..47f11e97 100644 --- a/src/__tests__/events.js +++ b/src/__tests__/events.js @@ -137,6 +137,90 @@ const eventTypes = [ }, ] +const bubblingEvents = [ + {name: 'copy', bubbles: true}, + {name: 'cut', bubbles: true}, + {name: 'paste', bubbles: true}, + {name: 'compositionEnd', bubbles: true}, + {name: 'compositionStart', bubbles: true}, + {name: 'compositionUpdate', bubbles: true}, + {name: 'keyDown', bubbles: true}, + {name: 'keyPress', bubbles: true}, + {name: 'keyUp', bubbles: true}, + {name: 'focus', bubbles: false}, + {name: 'blur', bubbles: false}, + {name: 'focusIn', bubbles: true}, + {name: 'focusOut', bubbles: true}, + {name: 'change', bubbles: true}, + {name: 'input', bubbles: true}, + {name: 'invalid', bubbles: false}, + {name: 'submit', bubbles: true}, + {name: 'reset', bubbles: true}, + {name: 'click', bubbles: true}, + {name: 'contextMenu', bubbles: true}, + {name: 'dblClick', bubbles: true}, + {name: 'drag', bubbles: true}, + {name: 'dragEnd', bubbles: true}, + {name: 'dragEnter', bubbles: true}, + {name: 'dragExit', bubbles: true}, + {name: 'dragLeave', bubbles: true}, + {name: 'dragOver', bubbles: true}, + {name: 'dragStart', bubbles: true}, + {name: 'drop', bubbles: true}, + {name: 'mouseDown', bubbles: true}, + {name: 'mouseEnter', bubbles: false}, + {name: 'mouseLeave', bubbles: false}, + {name: 'mouseMove', bubbles: true}, + {name: 'mouseOut', bubbles: true}, + {name: 'mouseOver', bubbles: true}, + {name: 'mouseUp', bubbles: true}, + {name: 'select', bubbles: true}, + {name: 'touchCancel', bubbles: true}, + {name: 'touchEnd', bubbles: true}, + {name: 'touchMove', bubbles: true}, + {name: 'touchStart', bubbles: true}, + {name: 'scroll', bubbles: false}, + {name: 'wheel', bubbles: true}, + {name: 'abort', bubbles: false}, + {name: 'canPlay', bubbles: false}, + {name: 'canPlayThrough', bubbles: false}, + {name: 'durationChange', bubbles: false}, + {name: 'emptied', bubbles: false}, + {name: 'encrypted', bubbles: false}, + {name: 'ended', bubbles: false}, + {name: 'loadedData', bubbles: false}, + {name: 'loadedMetadata', bubbles: false}, + {name: 'loadStart', bubbles: false}, + {name: 'pause', bubbles: false}, + {name: 'play', bubbles: false}, + {name: 'playing', bubbles: false}, + {name: 'progress', bubbles: false}, + {name: 'rateChange', bubbles: false}, + {name: 'seeked', bubbles: false}, + {name: 'seeking', bubbles: false}, + {name: 'stalled', bubbles: false}, + {name: 'suspend', bubbles: false}, + {name: 'timeUpdate', bubbles: false}, + {name: 'volumeChange', bubbles: false}, + {name: 'waiting', bubbles: false}, + {name: 'load', bubbles: false}, + {name: 'error', bubbles: false}, + {name: 'animationStart', bubbles: true}, + {name: 'animationEnd', bubbles: true}, + {name: 'animationIteration', bubbles: true}, + {name: 'transitionEnd', bubbles: true}, + {name: 'pointerOver', bubbles: true}, + {name: 'pointerEnter', bubbles: false}, + {name: 'pointerDown', bubbles: true}, + {name: 'pointerMove', bubbles: true}, + {name: 'pointerUp', bubbles: true}, + {name: 'pointerCancel', bubbles: true}, + {name: 'pointerOut', bubbles: true}, + {name: 'pointerLeave', bubbles: false}, + {name: 'gotPointerCapture', bubbles: false}, + {name: 'lostPointerCapture', bubbles: false}, +] + eventTypes.forEach(({type, events, elementType}) => { describe(`${type} Events`, () => { events.forEach(eventName => { @@ -151,6 +235,40 @@ eventTypes.forEach(({type, events, elementType}) => { }) }) +describe(`Bubbling Events`, () => { + bubblingEvents + .filter(e => e.bubbles) + .forEach(event => + it(`bubbles ${event.name}`, () => { + const node = document.createElement('div') + const spy = jest.fn() + node.addEventListener(event.name.toLowerCase(), spy) + + const innerNode = document.createElement('div') + node.appendChild(innerNode) + + fireEvent[event.name](innerNode) + expect(spy).toHaveBeenCalledTimes(1) + }), + ) + + bubblingEvents + .filter(e => !e.bubbles) + .forEach(event => + it(`doesn't bubble ${event.name}`, () => { + const node = document.createElement('div') + const spy = jest.fn() + node.addEventListener(event.name.toLowerCase(), spy) + + const innerNode = document.createElement('div') + node.appendChild(innerNode) + + fireEvent[event.name](innerNode) + expect(spy).not.toHaveBeenCalled() + }), + ) +}) + describe(`Aliased Events`, () => { it(`fires doubleClick`, () => { const node = document.createElement('div') From 64a870cb55c31379cc14d7bee5a6363da7b539f2 Mon Sep 17 00:00:00 2001 From: Olzhas Askar Date: Sat, 19 Oct 2019 00:21:36 +0200 Subject: [PATCH 2/3] chore: fix a typo --- src/__tests__/events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/events.js b/src/__tests__/events.js index 47f11e97..42d91a13 100644 --- a/src/__tests__/events.js +++ b/src/__tests__/events.js @@ -333,7 +333,7 @@ test('fires shortcut events on Window', () => { window.addEventListener('click', clickSpy) fireEvent.click(window) expect(clickSpy).toHaveBeenCalledTimes(1) - window.removeEventListener('message', clickSpy) + window.removeEventListener('click', clickSpy) }) test('throws a useful error message when firing events on non-existent nodes', () => { From dfc877215d045297e812e39b32983a466ee983d1 Mon Sep 17 00:00:00 2001 From: Olzhas Askar Date: Wed, 23 Oct 2019 21:03:32 +0200 Subject: [PATCH 3/3] chore: split events --- src/__tests__/events.js | 213 ++++++++++++++++++++-------------------- 1 file changed, 106 insertions(+), 107 deletions(-) diff --git a/src/__tests__/events.js b/src/__tests__/events.js index 42d91a13..98de9fff 100644 --- a/src/__tests__/events.js +++ b/src/__tests__/events.js @@ -138,87 +138,90 @@ const eventTypes = [ ] const bubblingEvents = [ - {name: 'copy', bubbles: true}, - {name: 'cut', bubbles: true}, - {name: 'paste', bubbles: true}, - {name: 'compositionEnd', bubbles: true}, - {name: 'compositionStart', bubbles: true}, - {name: 'compositionUpdate', bubbles: true}, - {name: 'keyDown', bubbles: true}, - {name: 'keyPress', bubbles: true}, - {name: 'keyUp', bubbles: true}, - {name: 'focus', bubbles: false}, - {name: 'blur', bubbles: false}, - {name: 'focusIn', bubbles: true}, - {name: 'focusOut', bubbles: true}, - {name: 'change', bubbles: true}, - {name: 'input', bubbles: true}, - {name: 'invalid', bubbles: false}, - {name: 'submit', bubbles: true}, - {name: 'reset', bubbles: true}, - {name: 'click', bubbles: true}, - {name: 'contextMenu', bubbles: true}, - {name: 'dblClick', bubbles: true}, - {name: 'drag', bubbles: true}, - {name: 'dragEnd', bubbles: true}, - {name: 'dragEnter', bubbles: true}, - {name: 'dragExit', bubbles: true}, - {name: 'dragLeave', bubbles: true}, - {name: 'dragOver', bubbles: true}, - {name: 'dragStart', bubbles: true}, - {name: 'drop', bubbles: true}, - {name: 'mouseDown', bubbles: true}, - {name: 'mouseEnter', bubbles: false}, - {name: 'mouseLeave', bubbles: false}, - {name: 'mouseMove', bubbles: true}, - {name: 'mouseOut', bubbles: true}, - {name: 'mouseOver', bubbles: true}, - {name: 'mouseUp', bubbles: true}, - {name: 'select', bubbles: true}, - {name: 'touchCancel', bubbles: true}, - {name: 'touchEnd', bubbles: true}, - {name: 'touchMove', bubbles: true}, - {name: 'touchStart', bubbles: true}, - {name: 'scroll', bubbles: false}, - {name: 'wheel', bubbles: true}, - {name: 'abort', bubbles: false}, - {name: 'canPlay', bubbles: false}, - {name: 'canPlayThrough', bubbles: false}, - {name: 'durationChange', bubbles: false}, - {name: 'emptied', bubbles: false}, - {name: 'encrypted', bubbles: false}, - {name: 'ended', bubbles: false}, - {name: 'loadedData', bubbles: false}, - {name: 'loadedMetadata', bubbles: false}, - {name: 'loadStart', bubbles: false}, - {name: 'pause', bubbles: false}, - {name: 'play', bubbles: false}, - {name: 'playing', bubbles: false}, - {name: 'progress', bubbles: false}, - {name: 'rateChange', bubbles: false}, - {name: 'seeked', bubbles: false}, - {name: 'seeking', bubbles: false}, - {name: 'stalled', bubbles: false}, - {name: 'suspend', bubbles: false}, - {name: 'timeUpdate', bubbles: false}, - {name: 'volumeChange', bubbles: false}, - {name: 'waiting', bubbles: false}, - {name: 'load', bubbles: false}, - {name: 'error', bubbles: false}, - {name: 'animationStart', bubbles: true}, - {name: 'animationEnd', bubbles: true}, - {name: 'animationIteration', bubbles: true}, - {name: 'transitionEnd', bubbles: true}, - {name: 'pointerOver', bubbles: true}, - {name: 'pointerEnter', bubbles: false}, - {name: 'pointerDown', bubbles: true}, - {name: 'pointerMove', bubbles: true}, - {name: 'pointerUp', bubbles: true}, - {name: 'pointerCancel', bubbles: true}, - {name: 'pointerOut', bubbles: true}, - {name: 'pointerLeave', bubbles: false}, - {name: 'gotPointerCapture', bubbles: false}, - {name: 'lostPointerCapture', bubbles: false}, + 'copy', + 'cut', + 'paste', + 'compositionEnd', + 'compositionStart', + 'compositionUpdate', + 'keyDown', + 'keyPress', + 'keyUp', + 'focusIn', + 'focusOut', + 'change', + 'input', + 'submit', + 'reset', + 'click', + 'contextMenu', + 'dblClick', + 'drag', + 'dragEnd', + 'dragEnter', + 'dragExit', + 'dragLeave', + 'dragOver', + 'dragStart', + 'drop', + 'mouseDown', + 'mouseMove', + 'mouseOut', + 'mouseOver', + 'mouseUp', + 'select', + 'touchCancel', + 'touchEnd', + 'touchMove', + 'touchStart', + 'wheel', + 'animationStart', + 'animationEnd', + 'animationIteration', + 'transitionEnd', + 'pointerOver', + 'pointerDown', + 'pointerMove', + 'pointerUp', + 'pointerCancel', + 'pointerOut', +] + +const nonBubblingEvents = [ + 'focus', + 'blur', + 'invalid', + 'mouseEnter', + 'mouseLeave', + 'scroll', + 'abort', + 'canPlay', + 'canPlayThrough', + 'durationChange', + 'emptied', + 'encrypted', + 'ended', + 'loadedData', + 'loadedMetadata', + 'loadStart', + 'pause', + 'play', + 'playing', + 'progress', + 'rateChange', + 'seeked', + 'seeking', + 'stalled', + 'suspend', + 'timeUpdate', + 'volumeChange', + 'waiting', + 'load', + 'error', + 'pointerEnter', + 'pointerLeave', + 'gotPointerCapture', + 'lostPointerCapture', ] eventTypes.forEach(({type, events, elementType}) => { @@ -236,37 +239,33 @@ eventTypes.forEach(({type, events, elementType}) => { }) describe(`Bubbling Events`, () => { - bubblingEvents - .filter(e => e.bubbles) - .forEach(event => - it(`bubbles ${event.name}`, () => { - const node = document.createElement('div') - const spy = jest.fn() - node.addEventListener(event.name.toLowerCase(), spy) + bubblingEvents.forEach(event => + it(`bubbles ${event}`, () => { + const node = document.createElement('div') + const spy = jest.fn() + node.addEventListener(event.toLowerCase(), spy) - const innerNode = document.createElement('div') - node.appendChild(innerNode) + const innerNode = document.createElement('div') + node.appendChild(innerNode) - fireEvent[event.name](innerNode) - expect(spy).toHaveBeenCalledTimes(1) - }), - ) + fireEvent[event](innerNode) + expect(spy).toHaveBeenCalledTimes(1) + }), + ) - bubblingEvents - .filter(e => !e.bubbles) - .forEach(event => - it(`doesn't bubble ${event.name}`, () => { - const node = document.createElement('div') - const spy = jest.fn() - node.addEventListener(event.name.toLowerCase(), spy) + nonBubblingEvents.forEach(event => + it(`doesn't bubble ${event}`, () => { + const node = document.createElement('div') + const spy = jest.fn() + node.addEventListener(event.toLowerCase(), spy) - const innerNode = document.createElement('div') - node.appendChild(innerNode) + const innerNode = document.createElement('div') + node.appendChild(innerNode) - fireEvent[event.name](innerNode) - expect(spy).not.toHaveBeenCalled() - }), - ) + fireEvent[event](innerNode) + expect(spy).not.toHaveBeenCalled() + }), + ) }) describe(`Aliased Events`, () => {