@furystack/shades-common-components/esm/components/tooltip.spec.js

Common UI components for FuryStack Shades

import { createComponent, flushUpdates } from '@furystack/shades';
import { describe, expect, it } from 'vitest';
import { Tooltip } from './tooltip.js';
describe('Tooltip', () => {
    it('should be defined', () => {
        expect(Tooltip).toBeDefined();
        expect(typeof Tooltip).toBe('function');
    });
    it('should create a tooltip element with default props', () => {
        const el = (createComponent(Tooltip, { title: "Hello" }));
        expect(el).toBeDefined();
        expect(el.tagName?.toLowerCase()).toBe('shade-tooltip');
    });
    it('should render title content inside the popup', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "My Tooltip" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        const popup = tooltip.querySelector('.tooltip-popup');
        expect(popup.textContent).toContain('My Tooltip');
    });
    it('should set data-placement when placement prop is provided', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip", placement: "bottom" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.getAttribute('data-placement')).toBe('bottom');
    });
    it('should render a tooltip-popup with role="tooltip"', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip" },
                createComponent("span", null, "Hover me"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        const popup = tooltip.querySelector('.tooltip-popup');
        expect(popup).toBeDefined();
        expect(popup).not.toBeNull();
        expect(popup.getAttribute('role')).toBe('tooltip');
    });
    it('should render the title content inside the popup', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Hello World" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        const popup = tooltip.querySelector('.tooltip-popup');
        expect(popup.textContent).toContain('Hello World');
    });
    it('should render an arrow element', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        const arrow = tooltip.querySelector('.tooltip-arrow');
        expect(arrow).not.toBeNull();
    });
    it('should set data-placement attribute when placement is provided', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip", placement: "bottom" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.getAttribute('data-placement')).toBe('bottom');
    });
    it('should not set data-placement attribute when placement is not provided', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.hasAttribute('data-placement')).toBe(false);
    });
    it('should set data-placement for each valid placement', async () => {
        const placements = ['top', 'bottom', 'left', 'right'];
        for (const placement of placements) {
            const el = (createComponent("div", null,
                createComponent(Tooltip, { title: "Tip", placement: placement },
                    createComponent("span", null, "Trigger"))));
            const tooltip = el.firstElementChild;
            tooltip.updateComponent();
            await flushUpdates();
            expect(tooltip.getAttribute('data-placement')).toBe(placement);
        }
    });
    it('should set data-disabled attribute when disabled', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip", disabled: true },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.hasAttribute('data-disabled')).toBe(true);
    });
    it('should not set data-disabled attribute when not disabled', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.hasAttribute('data-disabled')).toBe(false);
    });
    it('should set --tooltip-delay CSS variable when delay is provided', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip", delay: 300 },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.style.getPropertyValue('--tooltip-delay')).toBe('300ms');
    });
    it('should not set --tooltip-delay CSS variable when delay is 0', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip", delay: 0 },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.style.getPropertyValue('--tooltip-delay')).toBe('');
    });
    it('should not set --tooltip-delay CSS variable when delay is not provided', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip" },
                createComponent("span", null, "Trigger"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        expect(tooltip.style.getPropertyValue('--tooltip-delay')).toBe('');
    });
    it('should render children as trigger content', async () => {
        const el = (createComponent("div", null,
            createComponent(Tooltip, { title: "Tip" },
                createComponent("button", null, "Click me"))));
        const tooltip = el.firstElementChild;
        tooltip.updateComponent();
        await flushUpdates();
        const button = tooltip.querySelector('button');
        expect(button).not.toBeNull();
        expect(button?.textContent).toBe('Click me');
    });
});
//# sourceMappingURL=tooltip.spec.js.map