@mozaic-ds/vue/src/components/tooltip/MTooltip.spec.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import MTooltip from './MTooltip.vue';

describe('MTooltip.vue', () => {
  const defaultProps = {
    id: 'tooltip-1',
    text: 'Tooltip content',
  };

  it('renders tooltip text', () => {
    const wrapper = mount(MTooltip, {
      props: { ...defaultProps },
      slots: { default: 'Hover me' }
    });
    expect(wrapper.text()).toContain(defaultProps.text);
  });

  it('sets aria-describedby attribute correctly', () => {
    const wrapper = mount(MTooltip, {
      props: { ...defaultProps }
    });
    const tooltipDiv = wrapper.find('.mc-tooltip');
    expect(tooltipDiv.attributes('aria-describedby')).toBe(defaultProps.id);
  });

  it('applies position class based on prop', () => {
    const wrapper = mount(MTooltip, {
      props: { ...defaultProps, position: 'bottom' }
    });
    expect(wrapper.find('.mc-tooltip').classes()).toContain('mc-tooltip--bottom');
  });

  it('applies no-pointer class when pointer is false', () => {
    const wrapper = mount(MTooltip, {
      props: { ...defaultProps, pointer: false }
    });
    expect(wrapper.find('.mc-tooltip').classes()).toContain('mc-tooltip--no-pointer');
  });

  it('does not apply no-pointer class when pointer is true', () => {
    const wrapper = mount(MTooltip, {
      props: { ...defaultProps, pointer: true }
    });
    expect(wrapper.find('.mc-tooltip').classes()).not.toContain('mc-tooltip--no-pointer');
  });
});