@lion/button
Advanced tools
Comparing version 0.7.6 to 0.7.7
@@ -6,2 +6,13 @@ # Change Log | ||
## [0.7.7](https://github.com/ing-bank/lion/compare/@lion/button@0.7.6...@lion/button@0.7.7) (2020-07-06) | ||
### Bug Fixes | ||
* **button:** add mouseupHandler also on 'this', remove iron test helpers ([9f9d49e](https://github.com/ing-bank/lion/commit/9f9d49ebcf0bcb8edfe5d0e0a9e1fe2a59488655)) | ||
## [0.7.6](https://github.com/ing-bank/lion/compare/@lion/button@0.7.5...@lion/button@0.7.6) (2020-06-24) | ||
@@ -8,0 +19,0 @@ |
{ | ||
"name": "@lion/button", | ||
"version": "0.7.6", | ||
"version": "0.7.7", | ||
"description": "A button that is easily styleable and accessible in all contexts", | ||
@@ -34,5 +34,2 @@ "license": "MIT", | ||
}, | ||
"devDependencies": { | ||
"@polymer/iron-test-helpers": "^3.0.1" | ||
}, | ||
"keywords": [ | ||
@@ -46,3 +43,3 @@ "button", | ||
}, | ||
"gitHead": "92df108799b1abd8a11b3b16886a50a5cd1ce249" | ||
"gitHead": "e04ae769ea9d7eab000c8bc0477716f40ef0ec22" | ||
} |
@@ -11,3 +11,3 @@ import { | ||
const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */ | ||
const isSpaceKeyboardClickEvent = e => e.keyCode === 32; /* space */ | ||
const isSpaceKeyboardClickEvent = e => e.keyCode === 32 || e.key === 32; /* space */ | ||
@@ -233,4 +233,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) { | ||
document.removeEventListener('mouseup', mouseupHandler); | ||
this.removeEventListener('mouseup', mouseupHandler); | ||
}; | ||
document.addEventListener('mouseup', mouseupHandler); | ||
this.addEventListener('mouseup', mouseupHandler); | ||
} | ||
@@ -237,0 +239,0 @@ |
import { browserDetection } from '@lion/core'; | ||
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing'; | ||
import { | ||
down, | ||
keyDownOn, | ||
keyUpOn, | ||
makeMouseEvent, | ||
pressEnter, | ||
pressSpace, | ||
up, | ||
} from '@polymer/iron-test-helpers/mock-interactions.js'; | ||
import sinon from 'sinon'; | ||
import '../lion-button.js'; | ||
function getTopElement(el) { | ||
const { left, top, width, height } = el.getBoundingClientRect(); | ||
// to support elementFromPoint() in polyfilled browsers we have to use document | ||
const crossBrowserRoot = | ||
el.shadowRoot && el.shadowRoot.elementFromPoint ? el.shadowRoot : document; | ||
return crossBrowserRoot.elementFromPoint(left + width / 2, top + height / 2); | ||
function getClickArea(el) { | ||
if (el.shadowRoot) { | ||
return el.shadowRoot.querySelector('.click-area'); | ||
} | ||
return undefined; | ||
} | ||
@@ -78,5 +68,4 @@ | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const topEl = getTopElement(el); | ||
el.dispatchEvent(new Event('mousedown')); | ||
down(topEl); | ||
expect(el.active).to.be.true; | ||
@@ -86,3 +75,3 @@ await el.updateComplete; | ||
up(topEl); | ||
el.dispatchEvent(new Event('mouseup')); | ||
expect(el.active).to.be.false; | ||
@@ -95,5 +84,4 @@ await el.updateComplete; | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const topEl = getTopElement(el); | ||
down(topEl); | ||
el.dispatchEvent(new Event('mousedown')); | ||
expect(el.active).to.be.true; | ||
@@ -103,3 +91,3 @@ await el.updateComplete; | ||
up(document.body); | ||
document.dispatchEvent(new Event('mouseup')); | ||
expect(el.active).to.be.false; | ||
@@ -112,5 +100,4 @@ await el.updateComplete; | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const topEl = getTopElement(el); | ||
keyDownOn(topEl, 32); | ||
el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 })); | ||
expect(el.active).to.be.true; | ||
@@ -120,3 +107,3 @@ await el.updateComplete; | ||
keyUpOn(topEl, 32); | ||
el.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 })); | ||
expect(el.active).to.be.false; | ||
@@ -129,5 +116,4 @@ await el.updateComplete; | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const topEl = getTopElement(el); | ||
keyDownOn(topEl, 32); | ||
el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 })); | ||
expect(el.active).to.be.true; | ||
@@ -137,3 +123,3 @@ await el.updateComplete; | ||
keyUpOn(document.body, 32); | ||
el.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 })); | ||
expect(el.active).to.be.false; | ||
@@ -146,5 +132,4 @@ await el.updateComplete; | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const topEl = getTopElement(el); | ||
keyDownOn(topEl, 13); | ||
el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 })); | ||
expect(el.active).to.be.true; | ||
@@ -154,3 +139,3 @@ await el.updateComplete; | ||
keyUpOn(topEl, 13); | ||
el.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 })); | ||
expect(el.active).to.be.false; | ||
@@ -163,5 +148,4 @@ await el.updateComplete; | ||
const el = await fixture(`<lion-button>foo</lion-button>`); | ||
const topEl = getTopElement(el); | ||
keyDownOn(topEl, 13); | ||
el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 })); | ||
expect(el.active).to.be.true; | ||
@@ -171,3 +155,3 @@ await el.updateComplete; | ||
keyUpOn(document.body, 13); | ||
document.body.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 })); | ||
expect(el.active).to.be.false; | ||
@@ -262,3 +246,3 @@ await el.updateComplete; | ||
const button = form.querySelector('lion-button'); | ||
getTopElement(button).click(); | ||
getClickArea(button).click(); | ||
@@ -276,6 +260,7 @@ expect(formSubmitSpy.callCount).to.equal(1); | ||
pressSpace(form.querySelector('lion-button')); | ||
form | ||
.querySelector('lion-button') | ||
.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 })); | ||
await aTimeout(); | ||
await aTimeout(); | ||
expect(formSubmitSpy.callCount).to.equal(1); | ||
@@ -292,3 +277,5 @@ }); | ||
pressEnter(form.querySelector('lion-button')); | ||
form | ||
.querySelector('lion-button') | ||
.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 })); | ||
await aTimeout(); | ||
@@ -334,3 +321,5 @@ await aTimeout(); | ||
pressEnter(form.querySelector('input[name="foo2"]')); | ||
form | ||
.querySelector('input[name="foo2"]') | ||
.dispatchEvent(new KeyboardEvent('keyup', { key: 13 })); | ||
await aTimeout(); | ||
@@ -353,3 +342,3 @@ await aTimeout(); | ||
const button = form.querySelector('lion-button'); | ||
getTopElement(button).click(); | ||
getClickArea(button).click(); | ||
@@ -367,3 +356,5 @@ expect(formButtonClickedSpy.callCount).to.equal(1); | ||
pressSpace(form.querySelector('lion-button')); | ||
form | ||
.querySelector('lion-button') | ||
.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 })); | ||
await aTimeout(); | ||
@@ -383,3 +374,5 @@ await aTimeout(); | ||
pressEnter(form.querySelector('lion-button')); | ||
form | ||
.querySelector('lion-button') | ||
.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 })); | ||
await aTimeout(); | ||
@@ -402,3 +395,5 @@ await aTimeout(); | ||
pressEnter(form.querySelector('input[name="foo2"]')); | ||
form | ||
.querySelector('input[name="foo2"]') | ||
.dispatchEvent(new KeyboardEvent('keyup', { key: 13 })); | ||
await aTimeout(); | ||
@@ -417,3 +412,3 @@ await aTimeout(); | ||
getTopElement(el).click(); | ||
getClickArea(el).click(); | ||
@@ -430,3 +425,7 @@ // trying to wait for other possible redispatched events | ||
setTimeout(() => { | ||
makeMouseEvent('click', { x: 11, y: 11 }, getTopElement(el)); | ||
if (getClickArea(el)) { | ||
getClickArea(el).click(); | ||
} else { | ||
el.click(); | ||
} | ||
}); | ||
@@ -433,0 +432,0 @@ return oneEvent(el, 'click'); |
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
60375
0
624