js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix tooltip tests

Browse Source
This commit is contained in:
Cory LaViska
2025-01-02 16:33:30 -05:00
parent 7e87ca02b4
commit db7edaa243
1 changed files with 72 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/tooltip/tooltip.test.ts
View File

@@ -9,36 +9,45 @@ describe('<wa-tooltip>', () => {
describe(`with "${fixture.type}" rendering`, () => {
it('should be visible with the open attribute', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip open for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip open for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
expect(body.hidden).to.be.false;
});
it('should not be visible without the open attribute', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
expect(body.hidden).to.be.true;
});
it('should emit wa-show and wa-after-show when calling show()', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
el.addEventListener('wa-show', showHandler);
el.addEventListener('wa-after-show', afterShowHandler);
el.show();
tooltip.addEventListener('wa-show', showHandler);
tooltip.addEventListener('wa-after-show', afterShowHandler);
tooltip.show();
await waitUntil(() => showHandler.calledOnce);
await waitUntil(() => afterShowHandler.calledOnce);
@@ -50,18 +59,21 @@ describe('<wa-tooltip>', () => {
it('should emit wa-hide and wa-after-hide when calling hide()', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
el.addEventListener('wa-hide', hideHandler);
el.addEventListener('wa-after-hide', afterHideHandler);
tooltip.addEventListener('wa-hide', hideHandler);
tooltip.addEventListener('wa-after-hide', afterHideHandler);
await el.updateComplete;
el.hide();
await tooltip.updateComplete;
tooltip.hide();
await waitUntil(() => hideHandler.calledOnce);
await waitUntil(() => afterHideHandler.calledOnce);
@@ -73,16 +85,19 @@ describe('<wa-tooltip>', () => {
it('should emit wa-show and wa-after-show when setting open = true', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button">This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
el.addEventListener('wa-show', showHandler);
el.addEventListener('wa-after-show', afterShowHandler);
el.open = true;
tooltip.addEventListener('wa-show', showHandler);
tooltip.addEventListener('wa-after-show', afterShowHandler);
tooltip.open = true;
await waitUntil(() => showHandler.calledOnce);
await waitUntil(() => afterShowHandler.calledOnce);
@@ -94,16 +109,19 @@ describe('<wa-tooltip>', () => {
it('should emit wa-hide and wa-after-hide when setting open = false', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
el.addEventListener('wa-hide', hideHandler);
el.addEventListener('wa-after-hide', afterHideHandler);
el.open = false;
tooltip.addEventListener('wa-hide', hideHandler);
tooltip.addEventListener('wa-after-hide', afterHideHandler);
tooltip.open = false;
await waitUntil(() => hideHandler.calledOnce);
await waitUntil(() => afterHideHandler.calledOnce);
@@ -115,18 +133,21 @@ describe('<wa-tooltip>', () => {
it('should hide the tooltip when tooltip is visible and disabled becomes true', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
el.addEventListener('wa-hide', hideHandler);
el.addEventListener('wa-after-hide', afterHideHandler);
tooltip.addEventListener('wa-hide', hideHandler);
tooltip.addEventListener('wa-after-hide', afterHideHandler);
await el.updateComplete;
el.disabled = true;
await tooltip.updateComplete;
tooltip.disabled = true;
await waitUntil(() => hideHandler.calledOnce);
await waitUntil(() => afterHideHandler.calledOnce);
@@ -138,22 +159,27 @@ describe('<wa-tooltip>', () => {
it('should show when open initially', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
await el.updateComplete;
const tooltip = el.querySelector('wa-tooltip')!;
const body = tooltip.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
await tooltip.updateComplete;
expect(body.hidden).to.be.false;
});
it('should not accept user selection on the tooltip', async () => {
const el = await fixture<WaTooltip>(html`
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
<div>
<wa-tooltip for="wa-button" open>This is a tooltip</wa-tooltip>
<wa-button id="wa-button">Hover Me</wa-button>
</div>
`);
const tooltipBody = el.shadowRoot!.querySelector('.body')!;
const tooltip = el.querySelector('wa-tooltip')!;
const tooltipBody = tooltip.shadowRoot!.querySelector('.body')!;
const userSelect = getComputedStyle(tooltipBody).userSelect || getComputedStyle(tooltipBody).webkitUserSelect;
expect(userSelect).to.equal('none');