Skip to content

Custom tooltip assertion on disabled elements && GREATLY improve assertion times #643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Miexil wants to merge 2 commits into
base: master
Choose a base branch
from
+121 −31
Open

Custom tooltip assertion on disabled elements && GREATLY improve assertion times #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8115c0
Updated: custom tooltip assertion on disabled elements - and GREATLY …
Miexil Feb 16, 2026
6faa41c
Fixed: PR comments
Miexil Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions addon-test-support/custom-assertions/tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,27 @@
import { triggerEvent, waitFor } from '@ember/test-helpers';
import * as QUnit from 'qunit';
import { isEmpty } from '@ember/utils';
import sinon from 'sinon';
import { ANIMATION_DURATION, RENDERING_DELAY } from '@upfluence/oss-components/modifiers/enable-tooltip';

export type Placement = 'top' | 'bottom' | 'left' | 'right' | undefined;

async function triggerEventOnElement(selector: string, trigger?: string) {
await triggerEvent(selector, trigger || 'mouseover');
await waitFor('.upf-tooltip');
async function triggerEventOnElement(selector: string, trigger: string = 'mouseover') {
const element = document.querySelector(selector) as HTMLElement;
const clock = sinon.useFakeTimers();

try {
if (element?.hasAttribute('disabled')) {
element.dispatchEvent(new MouseEvent(trigger, { bubbles: true }));
} else {
await triggerEvent(selector, trigger);
}

clock.tick(RENDERING_DELAY + ANIMATION_DURATION);
await waitFor('.upf-tooltip');
} finally {
clock.restore();
}
}

export interface TooltipAssertions {
Expand Down Expand Up @@ -38,12 +53,15 @@ const assertion = (selector: string) => {
});
},

doesNotExist: async (trigger?: string, message?: string) => {
doesNotExist: async (trigger: string = 'mouseover', message?: string) => {
let result: boolean = false;
let actual: Element | null = null;
const clock = sinon.useFakeTimers();

await triggerEvent(selector, trigger || 'mouseover');
await waitFor('.upf-tooltip', { timeout: 350 })
await triggerEvent(selector, trigger);
clock.tick(RENDERING_DELAY + ANIMATION_DURATION);
clock.restore();
await waitFor('.upf-tooltip', { timeout: 50 })
.catch((err) => {
if (err.message === 'waitFor timed out waiting for selector ".upf-tooltip"') {
result = true;
Expand Down
4 changes: 2 additions & 2 deletions addon/modifiers/enable-tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ type EnableTooltipState = {
isRendered: boolean;
};

const ANIMATION_DURATION = 250;
const RENDERING_DELAY = 300;
export const ANIMATION_DURATION = 250;
export const RENDERING_DELAY = 300;
const DEFAULT_CONFIGURATION = {
placement: 'bottom' as Placement,
trigger: 'hover focus',
Expand Down
118 changes: 95 additions & 23 deletions tests/integration/components/modifiers/enable-tooltip-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ module('Integration | Component | modifiers/enable-tooltip', function (hooks) {
async function renderTooltip() {
await render(hbs`
<div class="test-container" style="height: 20px; width: 40px"
{{enable-tooltip title=this.title subtitle=this.subtitle placement=this.placement icon=this.icon trigger=this.trigger html=this.html}}>
{{enable-tooltip title=this.title subtitle=this.subtitle placement=this.placement icon=this.icon trigger=this.trigger html=this.html}}>
</div>
`);
}
Expand Down Expand Up @@ -74,34 +74,34 @@ module('Integration | Component | modifiers/enable-tooltip', function (hooks) {
});
test('When content has no overflow, it does not display tooltip on hover', async function (assert) {
await render(hbs`
<div class="test-container" style="height: 20px; width: 40px"
{{enable-tooltip title=this.title
subtitle=this.subtitle
placement=this.placement
icon=this.icon
trigger=this.trigger
html=this.html
displayOnlyOnOverflow=this.displayOnlyOnOverflow }}>
abc
</div>
`);
<div class="test-container" style="height: 20px; width: 40px"
{{enable-tooltip title=this.title
subtitle=this.subtitle
placement=this.placement
icon=this.icon
trigger=this.trigger
html=this.html
displayOnlyOnOverflow=this.displayOnlyOnOverflow }}>
abc
</div>
`);

await assert.tooltip('.test-container').doesNotExist();
});

test('When content has overflow, it displays tooltip on hover', async function (assert) {
await render(hbs`
<div class="test-container" style="height: 20px; width: 40px"
{{enable-tooltip title=this.title
subtitle=this.subtitle
placement=this.placement
icon=this.icon
trigger=this.trigger
html=this.html
displayOnlyOnOverflow=this.displayOnlyOnOverflow }}>
abcdefghijklmnopqrstuvwxyz
</div>
`);
<div class="test-container" style="height: 20px; width: 40px"
{{enable-tooltip title=this.title
subtitle=this.subtitle
placement=this.placement
icon=this.icon
trigger=this.trigger
html=this.html
displayOnlyOnOverflow=this.displayOnlyOnOverflow }}>
abcdefghijklmnopqrstuvwxyz
</div>
`);

await assert.tooltip('.test-container').exists();
});
Expand Down Expand Up @@ -145,4 +145,76 @@ module('Integration | Component | modifiers/enable-tooltip', function (hooks) {
await assert.tooltip('.test-container').isNotHtmlSafe();
});
});

module('works on disabled elements', () => {
async function renderDisabledButton() {
await render(hbs`
<button class="test-button" disabled
{{enable-tooltip title=this.title subtitle=this.subtitle placement=this.placement icon=this.icon trigger=this.trigger html=this.html}}>
Disabled button
</button>
`);
}

test('it renders the tooltip on disabled button and using the custom assertion can verify its existence', async function (assert) {
await renderDisabledButton();

await assert.tooltip('.test-button').exists();
});

test('it renders the tooltip on disabled button and using the custom assertion can verify its title', async function (assert) {
await renderDisabledButton();

await assert.tooltip('.test-button').hasTitle(this.title);
});

test('it renders the tooltip on disabled button and using the custom assertion can verify its subtitle', async function (assert) {
this.subtitle = 'subtitle';
await renderDisabledButton();

await assert.tooltip('.test-button').hasSubtitle(this.subtitle);
});

test('it renders the tooltip on disabled button and using the custom assertion can verify its icon', async function (assert) {
this.icon = 'far fa-wine-glass-alt';
await renderDisabledButton();

await assert.tooltip('.test-button').hasIcon(this.icon);
});

test('it renders the tooltip on disabled button and using the custom assertion can verify its placement', async function (assert) {
this.placement = 'top';
await renderDisabledButton();

await assert.tooltip('.test-button').hasPlacement(this.placement);
});

test("it renders the tooltip on disabled button and using the custom assertion can verify it doesn't have an icon", async function (assert) {
await renderDisabledButton();

await assert.tooltip('.test-button').doesNotHaveIcon();
});

test("it renders the tooltip on disabled button and using the custom assertion can verify it doesn't have a subtitle", async function (assert) {
await renderDisabledButton();

await assert.tooltip('.test-button').doesNotHaveSubtitle();
});

module('html attribute', () => {
test('it renders the tooltip on disabled button and using the custom assertion can verify its html safe mode', async function (assert) {
this.html = true;
await renderDisabledButton();

await assert.tooltip('.test-button').isHtmlSafe();
});

test('it renders the tooltip on disabled button and using the custom assertion can verify it is not in html safe mode', async function (assert) {
this.html = false;
await renderDisabledButton();

await assert.tooltip('.test-button').isNotHtmlSafe();
});
});
});
});
Loading