diff --git a/packages/input-datepicker/package.json b/packages/input-datepicker/package.json index 86ebbf093..343138d36 100644 --- a/packages/input-datepicker/package.json +++ b/packages/input-datepicker/package.json @@ -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" } } diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js index e987f9c86..2ce4d3c0a 100644 --- a/packages/input-datepicker/src/LionInputDatepicker.js +++ b/packages/input-datepicker/src/LionInputDatepicker.js @@ -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` - + this._overlayCtrl.hide()}> ${this.calendarHeading} ${this._calendarTemplate()} @@ -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(), diff --git a/packages/input-datepicker/test-helpers/DatepickerInputObject.js b/packages/input-datepicker/test-helpers/DatepickerInputObject.js index 93f8a9d1a..ff8cc4275 100644 --- a/packages/input-datepicker/test-helpers/DatepickerInputObject.js +++ b/packages/input-datepicker/test-helpers/DatepickerInputObject.js @@ -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() { diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js index 646a0eb2b..440a5593f 100644 --- a/packages/input-datepicker/test/lion-input-datepicker.test.js +++ b/packages/input-datepicker/test/lion-input-datepicker.test.js @@ -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('', () => { 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` + + `); + 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); }); diff --git a/packages/select-rich/test/lion-select-rich-interaction.test.js b/packages/select-rich/test/lion-select-rich-interaction.test.js index 29abb7b37..c39026e76 100644 --- a/packages/select-rich/test/lion-select-rich-interaction.test.js +++ b/packages/select-rich/test/lion-select-rich-interaction.test.js @@ -280,7 +280,9 @@ describe('lion-select-rich interactions', () => { describe('Disabled', () => { it('cannot be focused if disabled', async () => { const el = await fixture(html` - + + + `); 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` - + + + `); 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` - + + + `); expect(el._invokerNode.hasAttribute('disabled')).to.be.true; el.removeAttribute('disabled'); diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index d1c70d369..072150b0e 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -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` - + + + `); 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` - + + + `); 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` - + + + `); 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` - + + + `); 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'); }); });