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

chore(overlays): cleanup some tests and demos

Browse source
This commit is contained in:
Joren Broekema 2019-06-27 15:42:09 +02:00
parent c01cfe9ebb
commit 1e9ec400dd
7 changed files with 11 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/overlays/src/LocalOverlayController.js
View file

@ -141,6 +141,8 @@ export class LocalOverlayController {
} }
this.contentNode.id = this.contentId; this.contentNode.id = this.contentId;
this.contentNode.style.display = 'inline-block'; this.contentNode.style.display = 'inline-block';
/* To display on top of elements with no z-index that are appear later in the DOM */
this.contentNode.style.zIndex = 1;
this.invokerNode.setAttribute('aria-expanded', true); this.invokerNode.setAttribute('aria-expanded', true);
if (this.trapsKeyboardFocus) this._setupTrapsKeyboardFocus(); if (this.trapsKeyboardFocus) this._setupTrapsKeyboardFocus();

0
packages/overlays/src/LocalOverlayMixin.js Normal file
View file

8
packages/overlays/stories/local-overlay-placement.stories.js
View file

@ -119,9 +119,9 @@ storiesOf('Local Overlay System|Local Overlay Placement', module)
${popupController.invoker} ${popupController.content} ${popupController.invoker} ${popupController.content}
</div> </div>
`; `;
}) });
/* TODO: Add this when we have a feature in place that adds scrollbars / overflow when no space is available */ /* TODO: Add this when we have a feature in place that adds scrollbars / overflow when no space is available */
.add('Space not available', () => { /* .add('Space not available', () => {
const popupController = overlays.add( const popupController = overlays.add(
new LocalOverlayController({ new LocalOverlayController({
hidesOnEsc: true, hidesOnEsc: true,
@ -153,4 +153,4 @@ storiesOf('Local Overlay System|Local Overlay Placement', module)
${popupController.invoker} ${popupController.content} ${popupController.invoker} ${popupController.content}
</div> </div>
`; `;
}); }); */

2
packages/popup/stories/index.stories.js
View file

@ -40,8 +40,6 @@ const popupDemoStyle = css`
background-color: black; background-color: black;
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
/* To display on top of elements with no z-index that are appear later in the DOM */
z-index: 1;
} }
@media (max-width: 480px) { @media (max-width: 480px) {

8
packages/popup/test/lion-popup.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, html, aTimeout } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-popup.js'; import '../lion-popup.js';
@ -25,7 +25,7 @@ describe('lion-popup', () => {
const eventOnClick = new Event('click'); const eventOnClick = new Event('click');
invoker.dispatchEvent(eventOnClick); invoker.dispatchEvent(eventOnClick);
await el.updateComplete; await el.updateComplete;
await aTimeout();
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block'); expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
invoker.dispatchEvent(eventOnClick); invoker.dispatchEvent(eventOnClick);
await el.updateComplete; await el.updateComplete;
@ -55,9 +55,9 @@ describe('lion-popup', () => {
`); `);
await el._controller.show(); await el._controller.show();
expect(el._controller._popper.options.placement).to.equal('top'); expect(el._controller._popper.options.placement).to.equal('top');
el.placementConfig = { placement: 'left' }; el.placementConfig = { placement: 'left' };
// placementConfig setter calls updateConfig method which recreates popper instance and this process is async.. await el._controller.show();
await aTimeout();
expect(el._controller._popper.options.placement).to.equal('left'); expect(el._controller._popper.options.placement).to.equal('left');
}); });
}); });

2
packages/tooltip/stories/index.stories.js
View file

@ -40,8 +40,6 @@ const tooltipDemoStyle = css`
background-color: black; background-color: black;
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
/* To display on top of elements with no z-index that are appear later in the DOM */
z-index: 1;
} }
@media (max-width: 480px) { @media (max-width: 480px) {

5
packages/tooltip/test/lion-tooltip.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, html, aTimeout } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-tooltip.js'; import '../lion-tooltip.js';
@ -25,7 +25,6 @@ describe('lion-tooltip', () => {
const eventMouseEnter = new Event('mouseenter'); const eventMouseEnter = new Event('mouseenter');
invoker.dispatchEvent(eventMouseEnter); invoker.dispatchEvent(eventMouseEnter);
await el.updateComplete; await el.updateComplete;
await aTimeout();
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block'); expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
const eventMouseLeave = new Event('mouseleave'); const eventMouseLeave = new Event('mouseleave');
invoker.dispatchEvent(eventMouseLeave); invoker.dispatchEvent(eventMouseLeave);
@ -62,12 +61,10 @@ describe('lion-tooltip', () => {
const eventFocusIn = new Event('focusin'); const eventFocusIn = new Event('focusin');
invoker.dispatchEvent(eventFocusIn); invoker.dispatchEvent(eventFocusIn);
await el.updateComplete; await el.updateComplete;
await aTimeout();
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block'); expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
const eventFocusOut = new Event('focusout'); const eventFocusOut = new Event('focusout');
invoker.dispatchEvent(eventFocusOut); invoker.dispatchEvent(eventFocusOut);
await el.updateComplete; await el.updateComplete;
await aTimeout();
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none'); expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none');
}); });