diff --git a/addon-test-support/custom-assertions/tooltip.ts b/addon-test-support/custom-assertions/tooltip.ts index 8ff8d6ddc..80c2d8d91 100644 --- a/addon-test-support/custom-assertions/tooltip.ts +++ b/addon-test-support/custom-assertions/tooltip.ts @@ -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 { @@ -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; diff --git a/addon/modifiers/enable-tooltip.ts b/addon/modifiers/enable-tooltip.ts index 6dfd2066f..45de94f67 100644 --- a/addon/modifiers/enable-tooltip.ts +++ b/addon/modifiers/enable-tooltip.ts @@ -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', diff --git a/tests/integration/components/modifiers/enable-tooltip-test.ts b/tests/integration/components/modifiers/enable-tooltip-test.ts index 26fc82099..db743106b 100644 --- a/tests/integration/components/modifiers/enable-tooltip-test.ts +++ b/tests/integration/components/modifiers/enable-tooltip-test.ts @@ -16,7 +16,7 @@ module('Integration | Component | modifiers/enable-tooltip', function (hooks) { async function renderTooltip() { await render(hbs`
+ {{enable-tooltip title=this.title subtitle=this.subtitle placement=this.placement icon=this.icon trigger=this.trigger html=this.html}}>
`); } @@ -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` -
- abc -
- `); +
+ abc +
+ `); await assert.tooltip('.test-container').doesNotExist(); }); test('When content has overflow, it displays tooltip on hover', async function (assert) { await render(hbs` -
- abcdefghijklmnopqrstuvwxyz -
- `); +
+ abcdefghijklmnopqrstuvwxyz +
+ `); await assert.tooltip('.test-container').exists(); }); @@ -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` + + `); + } + + 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(); + }); + }); + }); });