ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: align select-rich and input-datepicker with latest overlays

Browse source
This commit is contained in:
Thomas Allmer 2019-09-25 11:45:29 +02:00 committed by Thijs Louisse
parent eb768c061d
commit 4529efb6a6
6 changed files with 44 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/input-datepicker/package.json
View file

@ -48,7 +48,6 @@
"@lion/button": "^0.3.16",
"@open-wc/demoing-storybook": "^0.2.0",
"@open-wc/testing": "^2.3.4",
"@polymer/iron-test-helpers": "^3.0.1",
"sinon": "^7.2.2"
}
}

8
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -138,7 +138,7 @@ export class LionInputDatepicker extends LionInputDate {
}
get _calendarOverlayElement() {
return this._overlayCtrl._container.firstElementChild;
return this._overlayCtrl.contentNode;
}
get _calendarElement() {
@ -202,7 +202,7 @@ export class LionInputDatepicker extends LionInputDate {
_calendarOverlayTemplate() {
return html`
<lion-calendar-overlay-frame>
<lion-calendar-overlay-frame @dialog-close=${() => this._overlayCtrl.hide()}>
<span slot="heading">${this.calendarHeading}</span>
${this._calendarTemplate()}
</lion-calendar-overlay-frame>
@ -255,9 +255,9 @@ export class LionInputDatepicker extends LionInputDate {
render(this._invokerTemplate(), renderParent);
const invokerNode = renderParent.firstElementChild;
// TODO: ModalDialogController should be replaced by a more flexible
// TODO: ModalDialogController could be replaced by a more flexible
// overlay, allowing the overlay to switch on smaller screens, for instance from dropdown to
// bottom sheet (working name for this controller: ResponsiveOverlayController)
// bottom sheet via DynamicOverlayController
this._overlayCtrl = overlays.add(
new ModalDialogController({
contentTemplate: () => this._calendarOverlayTemplate(),

2
packages/input-datepicker/test-helpers/DatepickerInputObject.js
View file

@ -40,7 +40,7 @@ export class DatepickerInputObject {
}
get overlayEl() {
return this.el._overlayCtrl._container && this.el._overlayCtrl._container.firstElementChild;
return this.el._overlayCtrl.contentNode;
}
get overlayHeadingEl() {

21
packages/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -8,8 +8,6 @@ import {
minMaxDateValidator,
isDateDisabledValidator,
} from '@lion/validate';
import { keyCodes } from '@lion/overlays/src/utils/key-codes.js';
import { keyUpOn } from '@polymer/iron-test-helpers/mock-interactions.js';
import { LionCalendar } from '@lion/calendar';
import { isSameDate } from '@lion/calendar/src/utils/isSameDate.js';
import { DatepickerInputObject } from '../test-helpers.js';
@ -92,9 +90,22 @@ describe('<lion-input-datepicker>', () => {
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true);
// Mimic user input: should fire the 'selected-date-changed' event
// Make sure focus is inside the calendar/overlay
keyUpOn(elObj.calendarEl, keyCodes.escape);
elObj.overlayController.contentNode.dispatchEvent(
new KeyboardEvent('keyup', { key: 'Escape' }),
);
expect(elObj.overlayController.isShown).to.equal(false);
});
it('closes the calendar via close button', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true);
elObj.overlayCloseButtonEl.click();
expect(elObj.overlayController.isShown).to.equal(false);
});

12
packages/select-rich/test/lion-select-rich-interaction.test.js
View file

@ -280,7 +280,9 @@ describe('lion-select-rich interactions', () => {
describe('Disabled', () => {
it('cannot be focused if disabled', async () => {
const el = await fixture(html`
<lion-select-rich disabled></lion-select-rich>
<lion-select-rich disabled>
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el._invokerNode.tabIndex).to.equal(-1);
});
@ -312,7 +314,9 @@ describe('lion-select-rich interactions', () => {
it('cannot be opened via click if disabled', async () => {
const el = await fixture(html`
<lion-select-rich disabled> </lion-select-rich>
<lion-select-rich disabled>
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
el._invokerNode.click();
expect(el.opened).to.be.false;
@ -320,7 +324,9 @@ describe('lion-select-rich interactions', () => {
it('reflects disabled attribute to invoker', async () => {
const el = await fixture(html`
<lion-select-rich disabled> </lion-select-rich>
<lion-select-rich disabled>
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el._invokerNode.hasAttribute('disabled')).to.be.true;
el.removeAttribute('disabled');

18
packages/select-rich/test/lion-select-rich.test.js
View file

@ -8,7 +8,9 @@ import '../lion-select-rich.js';
describe('lion-select-rich', () => {
it('does not have a tabindex', async () => {
const el = await fixture(html`
<lion-select-rich></lion-select-rich>
<lion-select-rich>
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el.hasAttribute('tabindex')).to.be.false;
});
@ -16,7 +18,9 @@ describe('lion-select-rich', () => {
describe('Invoker', () => {
it('generates an lion-select-invoker if no invoker is provided', async () => {
const el = await fixture(html`
<lion-select-rich></lion-select-rich>
<lion-select-rich>
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el._invokerNode).to.exist;
@ -43,7 +47,9 @@ describe('lion-select-rich', () => {
describe('overlay', () => {
it('should be closed by default', async () => {
const el = await fixture(html`
<lion-select-rich></lion-select-rich>
<lion-select-rich>
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el.opened).to.be.false;
});
@ -117,7 +123,9 @@ describe('lion-select-rich', () => {
describe('interaction-mode', () => {
it('allows to specify an interaction-mode which determines other behaviors', async () => {
const el = await fixture(html`
<lion-select-rich interaction-mode="mac"></lion-select-rich>
<lion-select-rich interaction-mode="mac">
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el.interactionMode).to.equal('mac');
});
@ -279,6 +287,8 @@ describe('lion-select-rich', () => {
expect(el._invokerNode.getAttribute('aria-expanded')).to.equal('false');
el.opened = true;
await el.updateComplete;
await el.updateComplete; // need 2 awaits as overlay.show is an async function
expect(el._invokerNode.getAttribute('aria-expanded')).to.equal('true');
});
});