@lion/button
Advanced tools
Comparing version 0.1.33 to 0.1.34
@@ -6,2 +6,16 @@ # Change Log | ||
## [0.1.34](https://github.com/ing-bank/lion/compare/@lion/button@0.1.33...@lion/button@0.1.34) (2019-07-12) | ||
### Bug Fixes | ||
* **button:** make redispatch method protected ([b7eb537](https://github.com/ing-bank/lion/commit/b7eb537)) | ||
* **button:** put host element into click event target (fix [#89](https://github.com/ing-bank/lion/issues/89)) ([59e456e](https://github.com/ing-bank/lion/commit/59e456e)) | ||
* **button:** redispatch click event with all original properties ([b71177f](https://github.com/ing-bank/lion/commit/b71177f)) | ||
* **button:** remove unnecessary instance method bind ([4a8c6eb](https://github.com/ing-bank/lion/commit/4a8c6eb)) | ||
## [0.1.33](https://github.com/ing-bank/lion/compare/@lion/button@0.1.32...@lion/button@0.1.33) (2019-07-09) | ||
@@ -8,0 +22,0 @@ |
{ | ||
"name": "@lion/button", | ||
"version": "0.1.33", | ||
"version": "0.1.34", | ||
"description": "A button that is easily stylable and accessible in all contexts", | ||
@@ -46,3 +46,3 @@ "author": "ing-bank", | ||
}, | ||
"gitHead": "a598a47dabccc92e68f12411b7b613a8e5132762" | ||
"gitHead": "9412d6a44f05a57e7c001647c104c8c81083a954" | ||
} |
@@ -143,3 +143,2 @@ import { css, html, DelegateMixin, SlotMixin } from '@lion/core'; | ||
this.tabindex = 0; | ||
this.__keydownDelegationHandler = this.__keydownDelegationHandler.bind(this); | ||
} | ||
@@ -157,7 +156,27 @@ | ||
_redispatchClickEvent(oldEvent) { | ||
// replacing `MouseEvent` with `oldEvent.constructor` breaks IE | ||
const newEvent = new MouseEvent(oldEvent.type, oldEvent); | ||
this.__enforceHostEventTarget(newEvent); | ||
this.$$slot('_button').dispatchEvent(newEvent); | ||
} | ||
/** | ||
* Prevent click on the fake element and cause click on the native button. | ||
*/ | ||
__clickDelegationHandler(e) { | ||
e.stopPropagation(); // prevent click on the fake element and cause click on the native button | ||
this.$$slot('_button').click(); | ||
e.stopPropagation(); | ||
this._redispatchClickEvent(e); | ||
} | ||
__enforceHostEventTarget(event) { | ||
try { | ||
// this is for IE11 (and works in others), because `Object.defineProperty` does not give any effect there | ||
event.__defineGetter__('target', () => this); // eslint-disable-line no-restricted-properties | ||
} catch (error) { | ||
// in case `__defineGetter__` is removed from the platform | ||
Object.defineProperty(event, 'target', { writable: false, value: this }); | ||
} | ||
} | ||
__setupDelegation() { | ||
@@ -186,3 +205,3 @@ this.addEventListener('keydown', this.__keydownDelegationHandler); | ||
this.shadowRoot.querySelector('.btn').removeAttribute('active'); | ||
this.$$slot('_button').click(); | ||
this.shadowRoot.querySelector('.click-area').click(); | ||
} | ||
@@ -189,0 +208,0 @@ } |
@@ -1,7 +0,18 @@ | ||
import { expect, fixture, html, aTimeout } from '@open-wc/testing'; | ||
import { expect, fixture, html, aTimeout, oneEvent } from '@open-wc/testing'; | ||
import sinon from 'sinon'; | ||
import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js'; | ||
import { | ||
makeMouseEvent, | ||
pressEnter, | ||
pressSpace, | ||
} from '@polymer/iron-test-helpers/mock-interactions.js'; | ||
import '../lion-button.js'; | ||
function getTopElement(el) { | ||
const { left, top } = el.getBoundingClientRect(); | ||
// to support elementFromPoint() in polyfilled browsers we have to use document | ||
const crossBrowserRoot = el.shadowRoot.elementFromPoint ? el.shadowRoot : document; | ||
return crossBrowserRoot.elementFromPoint(left, top); | ||
} | ||
describe('lion-button', () => { | ||
@@ -102,7 +113,3 @@ it('behaves like native `button` in terms of a11y', async () => { | ||
const button = form.querySelector('lion-button'); | ||
const { left, top } = button.getBoundingClientRect(); | ||
// to support elementFromPoint() in polyfilled browsers we have to use document | ||
const crossBrowserRoot = button.shadowRoot.elementFromPoint ? button.shadowRoot : document; | ||
const shadowClickAreaElement = crossBrowserRoot.elementFromPoint(left, top); | ||
shadowClickAreaElement.click(); | ||
getTopElement(button).click(); | ||
@@ -142,2 +149,61 @@ expect(formSubmitSpy.called).to.be.true; | ||
}); | ||
describe('click event', () => { | ||
it('is fired once', async () => { | ||
const clickSpy = sinon.spy(); | ||
const el = await fixture( | ||
html` | ||
<lion-button @click="${clickSpy}"></lion-button> | ||
`, | ||
); | ||
getTopElement(el).click(); | ||
// trying to wait for other possible redispatched events | ||
await aTimeout(); | ||
await aTimeout(); | ||
expect(clickSpy.callCount).to.equal(1); | ||
}); | ||
describe('event after redispatching', async () => { | ||
async function prepareClickEvent(el, host) { | ||
setTimeout(() => { | ||
if (host) { | ||
// click on host like in native button | ||
makeMouseEvent('click', { x: 11, y: 11 }, el); | ||
} else { | ||
// click on click-area which is then redispatched | ||
makeMouseEvent('click', { x: 11, y: 11 }, getTopElement(el)); | ||
} | ||
}); | ||
return oneEvent(el, 'click'); | ||
} | ||
let hostEvent; | ||
let redispatchedEvent; | ||
before(async () => { | ||
const el = await fixture('<lion-button></lion-button>'); | ||
hostEvent = await prepareClickEvent(el, true); | ||
redispatchedEvent = await prepareClickEvent(el, false); | ||
}); | ||
const sameProperties = [ | ||
'constructor', | ||
'composed', | ||
'bubbles', | ||
'cancelable', | ||
'clientX', | ||
'clientY', | ||
'target', | ||
]; | ||
sameProperties.forEach(property => { | ||
it(`has same value of the property "${property}"`, async () => { | ||
expect(redispatchedEvent[property]).to.equal(hostEvent[property]); | ||
}); | ||
}); | ||
}); | ||
}); | ||
}); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
24997
409