Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

@lion/button

Package Overview
Dependencies
Maintainers
1
Versions
169
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lion/button - npm Package Compare versions

Comparing version 0.7.6 to 0.7.7

11

CHANGELOG.md

@@ -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 @@

7

package.json
{
"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"
}

4

src/LionButton.js

@@ -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 @@

87

test/lion-button.test.js
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');

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc