2023-06-13 19:43:21 +00:00
|
|
|
import '../../../dist/shoelace.js';
|
2021-06-03 12:42:51 +00:00
|
|
|
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
|
|
|
import sinon from 'sinon';
|
2023-12-08 17:30:31 +00:00
|
|
|
import type SlTooltip from './tooltip.js';
|
2021-06-03 12:42:51 +00:00
|
|
|
|
|
|
|
describe('<sl-tooltip>', () => {
|
|
|
|
it('should be visible with the open attribute', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
2021-06-03 12:42:51 +00:00
|
|
|
<sl-tooltip content="This is a tooltip" open>
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2021-06-03 12:42:51 +00:00
|
|
|
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.false;
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should not be visible without the open attribute', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
2021-06-03 12:42:51 +00:00
|
|
|
<sl-tooltip content="This is a tooltip">
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2021-06-03 12:42:51 +00:00
|
|
|
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.true;
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should emit sl-show and sl-after-show when calling show()', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
2021-06-03 12:42:51 +00:00
|
|
|
<sl-tooltip content="This is a tooltip">
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
2021-08-10 21:11:07 +00:00
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2021-06-03 12:42:51 +00:00
|
|
|
const showHandler = sinon.spy();
|
|
|
|
const afterShowHandler = sinon.spy();
|
|
|
|
|
|
|
|
el.addEventListener('sl-show', showHandler);
|
|
|
|
el.addEventListener('sl-after-show', afterShowHandler);
|
2022-01-17 04:44:10 +00:00
|
|
|
el.show();
|
2021-06-03 12:42:51 +00:00
|
|
|
|
|
|
|
await waitUntil(() => showHandler.calledOnce);
|
|
|
|
await waitUntil(() => afterShowHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(showHandler).to.have.been.calledOnce;
|
|
|
|
expect(afterShowHandler).to.have.been.calledOnce;
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.false;
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
2021-06-03 12:42:51 +00:00
|
|
|
<sl-tooltip content="This is a tooltip" open>
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
2021-08-10 21:11:07 +00:00
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2021-06-03 12:42:51 +00:00
|
|
|
const hideHandler = sinon.spy();
|
|
|
|
const afterHideHandler = sinon.spy();
|
|
|
|
|
|
|
|
el.addEventListener('sl-hide', hideHandler);
|
|
|
|
el.addEventListener('sl-after-hide', afterHideHandler);
|
2022-01-17 04:44:10 +00:00
|
|
|
el.hide();
|
2021-06-03 12:42:51 +00:00
|
|
|
|
|
|
|
await waitUntil(() => hideHandler.calledOnce);
|
|
|
|
await waitUntil(() => afterHideHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(hideHandler).to.have.been.calledOnce;
|
|
|
|
expect(afterHideHandler).to.have.been.calledOnce;
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.true;
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should emit sl-show and sl-after-show when setting open = true', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
2021-06-03 12:42:51 +00:00
|
|
|
<sl-tooltip content="This is a tooltip">
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
2021-08-10 21:11:07 +00:00
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2021-06-03 12:42:51 +00:00
|
|
|
const showHandler = sinon.spy();
|
|
|
|
const afterShowHandler = sinon.spy();
|
|
|
|
|
|
|
|
el.addEventListener('sl-show', showHandler);
|
|
|
|
el.addEventListener('sl-after-show', afterShowHandler);
|
|
|
|
el.open = true;
|
|
|
|
|
|
|
|
await waitUntil(() => showHandler.calledOnce);
|
|
|
|
await waitUntil(() => afterShowHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(showHandler).to.have.been.calledOnce;
|
|
|
|
expect(afterShowHandler).to.have.been.calledOnce;
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.false;
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
2021-06-03 12:42:51 +00:00
|
|
|
<sl-tooltip content="This is a tooltip" open>
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
2021-08-10 21:11:07 +00:00
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2021-06-03 12:42:51 +00:00
|
|
|
const hideHandler = sinon.spy();
|
|
|
|
const afterHideHandler = sinon.spy();
|
|
|
|
|
|
|
|
el.addEventListener('sl-hide', hideHandler);
|
|
|
|
el.addEventListener('sl-after-hide', afterHideHandler);
|
|
|
|
el.open = false;
|
|
|
|
|
|
|
|
await waitUntil(() => hideHandler.calledOnce);
|
|
|
|
await waitUntil(() => afterHideHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(hideHandler).to.have.been.calledOnce;
|
|
|
|
expect(afterHideHandler).to.have.been.calledOnce;
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.true;
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|
2022-06-02 12:10:46 +00:00
|
|
|
|
|
|
|
it('should hide the tooltip when tooltip is visible and disabled becomes true', async () => {
|
|
|
|
const el = await fixture<SlTooltip>(html`
|
|
|
|
<sl-tooltip content="This is a tooltip" open>
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2022-06-02 12:10:46 +00:00
|
|
|
const hideHandler = sinon.spy();
|
|
|
|
const afterHideHandler = sinon.spy();
|
|
|
|
|
|
|
|
el.addEventListener('sl-hide', hideHandler);
|
|
|
|
el.addEventListener('sl-after-hide', afterHideHandler);
|
|
|
|
el.disabled = true;
|
|
|
|
|
|
|
|
await waitUntil(() => hideHandler.calledOnce);
|
|
|
|
await waitUntil(() => afterHideHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(hideHandler).to.have.been.calledOnce;
|
|
|
|
expect(afterHideHandler).to.have.been.calledOnce;
|
2022-08-09 20:00:56 +00:00
|
|
|
expect(body.hidden).to.be.true;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show when open initially', async () => {
|
|
|
|
const el = await fixture<SlTooltip>(html`
|
|
|
|
<sl-tooltip content="This is a tooltip" open>
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
|
|
|
`);
|
2022-11-17 14:35:44 +00:00
|
|
|
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
|
2022-08-09 20:00:56 +00:00
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(body.hidden).to.be.false;
|
2022-06-02 12:10:46 +00:00
|
|
|
});
|
2022-08-17 12:50:07 +00:00
|
|
|
|
2023-12-01 15:02:46 +00:00
|
|
|
it('should not accept user selection on the tooltip', async () => {
|
2022-08-17 12:50:07 +00:00
|
|
|
const el = await fixture<SlTooltip>(html`
|
|
|
|
<sl-tooltip content="This is a tooltip" open>
|
|
|
|
<sl-button>Hover Me</sl-button>
|
|
|
|
</sl-tooltip>
|
|
|
|
`);
|
2023-12-01 15:02:46 +00:00
|
|
|
const tooltipBody = el.shadowRoot!.querySelector('.tooltip__body')!;
|
|
|
|
const userSelect = getComputedStyle(tooltipBody).userSelect || getComputedStyle(tooltipBody).webkitUserSelect;
|
2022-08-17 12:50:07 +00:00
|
|
|
|
2023-12-01 15:02:46 +00:00
|
|
|
expect(userSelect).to.equal('none');
|
2022-08-17 12:50:07 +00:00
|
|
|
});
|
2021-06-03 12:42:51 +00:00
|
|
|
});
|