330 lines
11 KiB
JavaScript
330 lines
11 KiB
JavaScript
import { expect, fixture, html, aTimeout, oneEvent } from '@open-wc/testing';
|
|
import sinon from 'sinon';
|
|
import {
|
|
makeMouseEvent,
|
|
pressEnter,
|
|
pressSpace,
|
|
down,
|
|
up,
|
|
keyDownOn,
|
|
keyUpOn,
|
|
} from '@polymer/iron-test-helpers/mock-interactions.js';
|
|
import { LionButton } from '../src/LionButton.js';
|
|
|
|
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);
|
|
}
|
|
|
|
let originalIsIE11Method;
|
|
function mockIsIE11() {
|
|
originalIsIE11Method = LionButton.__isIE11;
|
|
LionButton.__isIE11 = () => true;
|
|
}
|
|
|
|
function restoreMockIsIE11() {
|
|
LionButton.__isIE11 = originalIsIE11Method;
|
|
}
|
|
|
|
describe('lion-button', () => {
|
|
it('behaves like native `button` in terms of a11y', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(el.getAttribute('role')).to.equal('button');
|
|
expect(el.getAttribute('tabindex')).to.equal('0');
|
|
});
|
|
|
|
it('has .type="submit" and type="submit" by default', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(el.type).to.equal('submit');
|
|
expect(el.getAttribute('type')).to.be.equal('submit');
|
|
expect(el._nativeButtonNode.type).to.equal('submit');
|
|
expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('submit');
|
|
});
|
|
|
|
it('sync type down to the native button', async () => {
|
|
const el = await fixture(`<lion-button type="button">foo</lion-button>`);
|
|
expect(el.type).to.equal('button');
|
|
expect(el.getAttribute('type')).to.be.equal('button');
|
|
expect(el._nativeButtonNode.type).to.equal('button');
|
|
expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('button');
|
|
});
|
|
|
|
it('hides the native button in the UI', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
|
|
expect(window.getComputedStyle(el._nativeButtonNode).visibility).to.equal('hidden');
|
|
});
|
|
|
|
it('can be disabled imperatively', async () => {
|
|
const el = await fixture(`<lion-button disabled>foo</lion-button>`);
|
|
expect(el.getAttribute('tabindex')).to.equal('-1');
|
|
|
|
el.disabled = false;
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('tabindex')).to.equal('0');
|
|
expect(el.hasAttribute('disabled')).to.equal(false);
|
|
|
|
el.disabled = true;
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('tabindex')).to.equal('-1');
|
|
expect(el.hasAttribute('disabled')).to.equal(true);
|
|
});
|
|
|
|
describe('active', () => {
|
|
it('updates "active" attribute on host when mousedown/mouseup on button', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
const topEl = getTopElement(el);
|
|
|
|
down(topEl);
|
|
expect(el.active).to.be.true;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.true;
|
|
|
|
up(topEl);
|
|
expect(el.active).to.be.false;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.false;
|
|
});
|
|
|
|
it('updates "active" attribute on host when mousedown on button and mouseup anywhere else', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
const topEl = getTopElement(el);
|
|
|
|
down(topEl);
|
|
expect(el.active).to.be.true;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.true;
|
|
|
|
up(document.body);
|
|
expect(el.active).to.be.false;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.false;
|
|
});
|
|
|
|
it('updates "active" attribute on host when space keydown/keyup on button', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
const topEl = getTopElement(el);
|
|
|
|
keyDownOn(topEl, 32);
|
|
expect(el.active).to.be.true;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.true;
|
|
|
|
keyUpOn(topEl, 32);
|
|
expect(el.active).to.be.false;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.false;
|
|
});
|
|
|
|
it('updates "active" attribute on host when space keydown on button and space keyup anywhere else', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
const topEl = getTopElement(el);
|
|
|
|
keyDownOn(topEl, 32);
|
|
expect(el.active).to.be.true;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.true;
|
|
|
|
keyUpOn(document.body, 32);
|
|
expect(el.active).to.be.false;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.false;
|
|
});
|
|
|
|
it('updates "active" attribute on host when enter keydown/keyup on button', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
const topEl = getTopElement(el);
|
|
|
|
keyDownOn(topEl, 13);
|
|
expect(el.active).to.be.true;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.true;
|
|
|
|
keyUpOn(topEl, 13);
|
|
expect(el.active).to.be.false;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.false;
|
|
});
|
|
|
|
it('updates "active" attribute on host when enter keydown on button and space keyup anywhere else', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
const topEl = getTopElement(el);
|
|
|
|
keyDownOn(topEl, 13);
|
|
expect(el.active).to.be.true;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.true;
|
|
|
|
keyUpOn(document.body, 13);
|
|
expect(el.active).to.be.false;
|
|
await el.updateComplete;
|
|
expect(el.hasAttribute('active')).to.be.false;
|
|
});
|
|
});
|
|
|
|
describe('a11y', () => {
|
|
it('has a role="button" by default', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(el.getAttribute('role')).to.equal('button');
|
|
el.role = 'foo';
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('role')).to.equal('foo');
|
|
});
|
|
|
|
it('does not override user provided role', async () => {
|
|
const el = await fixture(`<lion-button role="foo">foo</lion-button>`);
|
|
expect(el.getAttribute('role')).to.equal('foo');
|
|
});
|
|
|
|
it('has a tabindex="0" by default', async () => {
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(el.getAttribute('tabindex')).to.equal('0');
|
|
});
|
|
|
|
it('has a tabindex="-1" when disabled', async () => {
|
|
const el = await fixture(`<lion-button disabled>foo</lion-button>`);
|
|
expect(el.getAttribute('tabindex')).to.equal('-1');
|
|
el.disabled = false;
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('tabindex')).to.equal('0');
|
|
el.disabled = true;
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('tabindex')).to.equal('-1');
|
|
});
|
|
|
|
it('does not override user provided tabindex', async () => {
|
|
const el = await fixture(`<lion-button tabindex="5">foo</lion-button>`);
|
|
expect(el.getAttribute('tabindex')).to.equal('5');
|
|
});
|
|
|
|
it('disabled does not override user provided tabindex', async () => {
|
|
const el = await fixture(`<lion-button tabindex="5" disabled>foo</lion-button>`);
|
|
expect(el.getAttribute('tabindex')).to.equal('-1');
|
|
el.disabled = false;
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('tabindex')).to.equal('5');
|
|
});
|
|
|
|
it('has an aria-labelledby and wrapper element in IE11', async () => {
|
|
mockIsIE11();
|
|
const el = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(el.hasAttribute('aria-labelledby')).to.be.true;
|
|
const wrapperId = el.getAttribute('aria-labelledby');
|
|
expect(el.shadowRoot.querySelector(`#${wrapperId}`)).to.exist;
|
|
expect(el.shadowRoot.querySelector(`#${wrapperId}`)).dom.to.equal(
|
|
`<div id="${wrapperId}"><slot></slot></div>`,
|
|
);
|
|
restoreMockIsIE11();
|
|
});
|
|
});
|
|
|
|
describe('form integration', () => {
|
|
it('behaves like native `button` when clicked', async () => {
|
|
const formSubmitSpy = sinon.spy(e => e.preventDefault());
|
|
const form = await fixture(html`
|
|
<form @submit="${formSubmitSpy}">
|
|
<lion-button type="submit">foo</lion-button>
|
|
</form>
|
|
`);
|
|
|
|
const button = form.querySelector('lion-button');
|
|
getTopElement(button).click();
|
|
|
|
expect(formSubmitSpy.called).to.be.true;
|
|
});
|
|
|
|
it('behaves like native `button` when interected with keyboard space', async () => {
|
|
const formSubmitSpy = sinon.spy(e => e.preventDefault());
|
|
const form = await fixture(html`
|
|
<form @submit="${formSubmitSpy}">
|
|
<lion-button type="submit">foo</lion-button>
|
|
</form>
|
|
`);
|
|
|
|
pressSpace(form.querySelector('lion-button'));
|
|
await aTimeout();
|
|
await aTimeout();
|
|
|
|
expect(formSubmitSpy.called).to.be.true;
|
|
});
|
|
|
|
it('behaves like native `button` when interected with keyboard enter', async () => {
|
|
const formSubmitSpy = sinon.spy(e => e.preventDefault());
|
|
const form = await fixture(html`
|
|
<form @submit="${formSubmitSpy}">
|
|
<lion-button type="submit">foo</lion-button>
|
|
</form>
|
|
`);
|
|
|
|
pressEnter(form.querySelector('lion-button'));
|
|
await aTimeout();
|
|
await aTimeout();
|
|
|
|
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}">foo</lion-button>
|
|
`,
|
|
);
|
|
|
|
getTopElement(el).click();
|
|
|
|
// trying to wait for other possible redispatched events
|
|
await aTimeout();
|
|
await aTimeout();
|
|
|
|
expect(clickSpy.callCount).to.equal(1);
|
|
});
|
|
|
|
describe('native button behavior', async () => {
|
|
async function prepareClickEvent(el) {
|
|
setTimeout(() => {
|
|
makeMouseEvent('click', { x: 11, y: 11 }, getTopElement(el));
|
|
});
|
|
return oneEvent(el, 'click');
|
|
}
|
|
|
|
let nativeButtonEvent;
|
|
let lionButtonEvent;
|
|
|
|
before(async () => {
|
|
const nativeButtonEl = await fixture('<button>foo</button>');
|
|
const lionButtonEl = await fixture('<lion-button>foo</lion-button>');
|
|
nativeButtonEvent = await prepareClickEvent(nativeButtonEl);
|
|
lionButtonEvent = await prepareClickEvent(lionButtonEl);
|
|
});
|
|
|
|
const sameProperties = [
|
|
'constructor',
|
|
'composed',
|
|
'bubbles',
|
|
'cancelable',
|
|
'clientX',
|
|
'clientY',
|
|
];
|
|
|
|
sameProperties.forEach(property => {
|
|
it(`has same value of the property "${property}" as in native button event`, () => {
|
|
expect(lionButtonEvent[property]).to.equal(nativeButtonEvent[property]);
|
|
});
|
|
});
|
|
|
|
it('has host in the target property', async () => {
|
|
const el = await fixture('<lion-button>foo</lion-button>');
|
|
const event = await prepareClickEvent(el);
|
|
expect(event.target).to.equal(el);
|
|
});
|
|
});
|
|
});
|
|
});
|