@aquera/nile-elements 0.1.38-beta-1.5 → 0.1.39-beta-1.0

package/src/nile-tooltip/nile-tooltip.test.ts

@@ -0,0 +1,168 @@
+import { fixture, html, assert, oneEvent, waitUntil } from '@open-wc/testing';
+import './nile-tooltip';
+import { NileTooltip } from './nile-tooltip';
+
+describe('NileTooltip', () => {
+
+  it('renders with default properties', async () => {
+    const el = await fixture<NileTooltip>(html`<nile-tooltip content="Hello"><button>Hover me</button></nile-tooltip>`);
+    assert.equal(el.content, 'Hello');
+    assert.equal(el.placement, 'top');
+    assert.equal(el.disabled, false);
+    assert.equal(el.open, false);
+  });
+
+  it('renders text content when no slot is used', async () => {
+    const el = await fixture<NileTooltip>(html`<nile-tooltip content="Fallback"><button>Trigger</button></nile-tooltip>`);
+    const content = el.shadowRoot!.querySelector('.tooltip-content')!;
+    assert.include(content.textContent!, 'Fallback');
+  });
+
+  it('uses slotted content when provided', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip>
+        <div slot="content">Slot Content</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+
+    const slot = el.shadowRoot!.querySelector('slot[name="content"]') as HTMLSlotElement;
+    const assigned = slot.assignedNodes({ flatten: true });
+    assert.isAbove(assigned.length, 0);
+    assert.include(assigned[0].textContent ?? '', 'Slot Content');
+  });
+
+  it('shows tooltip on hover when trigger includes "hover"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Tooltip" trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));
+    await waitUntil(() => el.open === true);
+    assert.isTrue(el.open);
+  });
+
+  it('hides tooltip on mouseout when trigger includes "hover"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Tooltip" trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));
+    await waitUntil(() => el.open === true);
+    trigger.dispatchEvent(new Event('mouseout', { bubbles: true }));
+    await waitUntil(() => el.open === false);
+  });
+
+  it('toggles tooltip on click when trigger includes "click"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Click me" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    trigger.click();
+    await waitUntil(() => el.open === true);
+    trigger.click();
+    await waitUntil(() => el.open === false);
+  });
+
+  it('shows and hides tooltip on focus/blur when trigger includes "focus"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Focus" trigger="focus">
+        <button>Focus</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('focusin'));
+    await waitUntil(() => el.open === true);
+    trigger.dispatchEvent(new Event('focusout'));
+    await waitUntil(() => el.open === false);
+  });
+
+  it('does not show tooltip when disabled', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Disabled" disabled trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('mouseover'));
+    await new Promise(resolve => setTimeout(resolve, 200));
+    assert.isFalse(el.open);
+  });
+
+
+  it('emits nile-show and nile-after-show events', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    setTimeout(() => trigger.click());
+    const showEvent = await oneEvent(el, 'nile-show');
+    assert.ok(showEvent);
+    const afterShow = await oneEvent(el, 'nile-after-show');
+    assert.ok(afterShow);
+  });
+
+  it('emits nile-hide and nile-after-hide events', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    trigger.click();
+    await waitUntil(() => el.open === true);
+    setTimeout(() => trigger.click());
+    const hideEvent = await oneEvent(el, 'nile-hide');
+    assert.ok(hideEvent);
+    const afterHide = await oneEvent(el, 'nile-after-hide');
+    assert.ok(afterHide);
+  });
+
+  it('defaults to "bottom" placement when given invalid value', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Fallback" placement=${'invalid' as unknown as NileTooltip['placement']} >
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+    await el.updateComplete;
+    assert.equal(el.placement, 'top');
+  });
+
+
+  it('updates hasTooltipSlot on slot change', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip>
+        <div slot="content">Initial slot</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+
+    const slot = el.shadowRoot!.querySelector('slot[name="content"]') as HTMLSlotElement;
+    const newSlotNode = document.createElement('div');
+    newSlotNode.slot = 'content';
+    newSlotNode.textContent = 'Updated slot';
+    el.appendChild(newSlotNode);
+
+    slot.dispatchEvent(new Event('slotchange'));
+    await el.updateComplete;
+
+    assert.isTrue((el as any).hasTooltipSlot);
+  });
+
+  it('respects hoist attribute', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip hoist content="Hoisted">
+        <button>Hoist</button>
+      </nile-tooltip>
+    `);
+    assert.isTrue(el.hoist);
+  });
+});