@mozaic-ds/vue/src/components/callout/MCallout.spec.ts

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

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

vi.mock('@mozaic-ds/icons-vue', async () => {
  const actual = await vi.importActual('@mozaic-ds/icons-vue');
  return {
    ...actual,
    ImageAlt32: {
      name: 'ImageAlt32',
      template: '<svg class="mock-icon" />',
    },
  };
});

describe('MCallout.vue', () => {
  it('renders title and description correctly', () => {
    const wrapper = mount(MCallout, {
      props: {
        title: 'Callout Title',
        description: 'This is a description',
      },
    });

    expect(wrapper.find('.mc-callout__title').text()).toBe('Callout Title');
    expect(wrapper.find('.mc-callout__message').text()).toBe(
      'This is a description',
    );
  });

  it('renders with default appearance (standard)', () => {
    const wrapper = mount(MCallout, {
      props: {
        title: 'Title',
        description: 'Description',
      },
    });

    expect(wrapper.classes()).toContain('mc-callout');
    // No modifier class for 'standard' appearance
    expect(
      wrapper.classes().some((cls) => cls.startsWith('mc-callout--')),
    ).toBe(false);
  });

  it('applies the correct class for appearance "accent"', () => {
    const wrapper = mount(MCallout, {
      props: {
        title: 'Title',
        description: 'Description',
        appearance: 'accent',
      },
    });

    expect(wrapper.classes()).toContain('mc-callout--accent');
  });

  it('renders the icon slot content', () => {
    const wrapper = mount(MCallout, {
      props: {
        title: 'Title',
        description: 'Description',
      },
      slots: {
        icon: '<svg class="test-icon" />',
      },
    });

    const iconContainer = wrapper.find('.mc-callout__icon');
    expect(iconContainer.exists()).toBe(true);
    expect(iconContainer.find('svg.test-icon').exists()).toBe(true);
  });

  it('renders footer slot when provided', () => {
    const wrapper = mount(MCallout, {
      props: {
        title: 'Title',
        description: 'Description',
      },
      slots: {
        footer: '<button class="footer-button">Click me</button>',
      },
    });

    const footer = wrapper.find('.mc-callout__footer');
    expect(footer.exists()).toBe(true);
    expect(footer.find('button.footer-button').text()).toBe('Click me');
  });

  it('does not render footer section when slot is not provided', () => {
    const wrapper = mount(MCallout, {
      props: {
        title: 'Title',
        description: 'Description',
      },
    });

    expect(wrapper.find('.mc-callout__footer').exists()).toBe(false);
  });

  it('renders title with default tag prop (h2)', () => {
    const wrapper = mount(MCallout, {
      props: { title: 'Title', description: 'Desc' },
    });
    expect(wrapper.find('h2.mc-callout__title').exists()).toBe(true);
  });

  it('renders title with custom tag prop', () => {
    const wrapper = mount(MCallout, {
      props: { title: 'Title', description: 'Desc', tag: 'h3' },
    });
    expect(wrapper.find('h3.mc-callout__title').exists()).toBe(true);
    expect(wrapper.find('h2').exists()).toBe(false);
  });

  it('has aria-labelledby pointing to the title', () => {
    const wrapper = mount(MCallout, {
      props: { title: 'Title', description: 'Desc' },
    });
    const section = wrapper.find('section');
    const titleId = wrapper.find('.mc-callout__title').attributes('id');
    expect(titleId).toBeDefined();
    expect(section.attributes('aria-labelledby')).toBe(titleId);
  });

  it('sets aria-hidden on the icon wrapper', () => {
    const wrapper = mount(MCallout, {
      props: { title: 'Title', description: 'Desc' },
      slots: { icon: '<svg class="icon" />' },
    });
    expect(wrapper.find('.mc-callout__icon').attributes('aria-hidden')).toBe(
      'true',
    );
  });
});