ec8da8f12c
Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com> Co-authored-by: Thijs Louisse <thijs.louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com> Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com> Co-authored-by: Erik Kroes <erik.kroes@ing.com> Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>
95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
/* eslint-env mocha */
|
|
/* eslint-disable no-unused-expressions */
|
|
import { expect, fixture, html } from '@open-wc/testing';
|
|
import sinon from 'sinon';
|
|
import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';
|
|
|
|
import '../lion-button.js';
|
|
|
|
describe('lion-button', () => {
|
|
it('behaves like native `button` in terms of a11y', async () => {
|
|
const lionButton = await fixture(`<lion-button>foo</lion-button>`);
|
|
expect(lionButton.getAttribute('role')).to.equal('button');
|
|
expect(lionButton.getAttribute('tabindex')).to.equal('0');
|
|
});
|
|
|
|
it('has no type by default on the native button', async () => {
|
|
const lionButton = await fixture(`<lion-button>foo</lion-button>`);
|
|
const nativeButton = lionButton.$$slot('_button');
|
|
expect(nativeButton.getAttribute('type')).to.be.null;
|
|
});
|
|
|
|
it('has type="submit" on the native button when set', async () => {
|
|
const lionButton = await fixture(`<lion-button type="submit">foo</lion-button>`);
|
|
const nativeButton = lionButton.$$slot('_button');
|
|
expect(nativeButton.getAttribute('type')).to.equal('submit');
|
|
});
|
|
|
|
it('hides the native button in the UI', async () => {
|
|
const lionButton = await fixture(`<lion-button>foo</lion-button>`);
|
|
const nativeButton = lionButton.$$slot('_button');
|
|
expect(nativeButton.getAttribute('tabindex')).to.equal('-1');
|
|
expect(window.getComputedStyle(nativeButton).visibility).to.equal('hidden');
|
|
});
|
|
|
|
it('can be disabled imperatively', async () => {
|
|
const lionButton = await fixture(`<lion-button disabled>foo</lion-button>`);
|
|
expect(lionButton.getAttribute('tabindex')).to.equal('-1');
|
|
|
|
lionButton.disabled = false;
|
|
await lionButton.updateComplete;
|
|
expect(lionButton.getAttribute('tabindex')).to.equal('0');
|
|
expect(lionButton.hasAttribute('disabled')).to.equal(false);
|
|
|
|
lionButton.disabled = true;
|
|
await lionButton.updateComplete;
|
|
expect(lionButton.getAttribute('tabindex')).to.equal('-1');
|
|
expect(lionButton.hasAttribute('disabled')).to.equal(true);
|
|
});
|
|
|
|
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');
|
|
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();
|
|
|
|
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'));
|
|
|
|
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'));
|
|
|
|
expect(formSubmitSpy.called).to.be.true;
|
|
});
|
|
});
|
|
});
|