@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/src/components/ImageAlt32/ImageAlt32.vue',
  () => ({
    default: {
      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);
  });
});