@mozaic-ds/vue/src/components/modal/MModal.spec.ts

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

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

const stubs = {
  Cross24: { template: '<svg />' },
  MIconButton: {
    template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
  },
  MOverlay: {
    template: `<div class="overlay"><slot/></div>`,
  },
};

describe('MModal component', () => {
  it('renders title and description', () => {
    const wrapper = mount(MModal, {
      props: {
        open: true,
        title: 'Test Modal',
        description: 'This is a description',
      },
      global: { stubs },
    });

    expect(wrapper.text()).toContain('Test Modal');
    expect(wrapper.text()).toContain('This is a description');
  });

  it('renders close button if closable is true', () => {
    const wrapper = mount(MModal, {
      props: { open: true, title: 'Title', closable: true },
      global: { stubs },
    });

    expect(wrapper.find('button.mc-modal__close').exists()).toBe(true);
  });

  it('does not render close button if closable is false', () => {
    const wrapper = mount(MModal, {
      props: { open: true, title: 'Title', closable: false },
      global: { stubs },
    });

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

  it('emits update:open with false when close button clicked', async () => {
    const wrapper = mount(MModal, {
      props: { open: true, title: 'Title', closable: true },
      global: { stubs },
    });

    await wrapper.find('button.mc-modal__close').trigger('click');

    expect(wrapper.emitted('update:open')).toBeTruthy();
    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
  });

  it('renders slots content', () => {
    const wrapper = mount(MModal, {
      props: { open: true, title: 'Title' },
      slots: {
        default: '<div class="default-slot">Default Content</div>',
        icon: '<span class="icon-slot">ICON</span>',
        footer: '<div class="footer-slot">Footer Content</div>',
        link: '<a href="#" class="link-slot">Link Content</a>',
      },
      global: { stubs },
    });

    expect(wrapper.find('.icon-slot').exists()).toBe(true);
    expect(wrapper.find('.default-slot').exists()).toBe(true);
    expect(wrapper.find('.footer-slot').exists()).toBe(true);
    expect(wrapper.find('.link-slot').exists()).toBe(true);
  });

  it('has aria-hidden set correctly based on open prop', async () => {
    const wrapper = mount(MModal, {
      props: { open: false, title: 'Title' },
      global: { stubs },
    });

    expect(wrapper.find('.mc-modal').attributes('aria-hidden')).toBe('true');

    await wrapper.setProps({ open: true });

    expect(wrapper.find('.mc-modal').attributes('aria-hidden')).toBe('false');
  });

  it('adds "is-open" class when open is true', async () => {
    const wrapper = mount(MModal, {
      props: { open: false, title: 'Title' },
      global: { stubs },
    });

    expect(wrapper.find('.mc-modal').classes()).not.toContain('is-open');

    await wrapper.setProps({ open: true });

    expect(wrapper.find('.mc-modal').classes()).toContain('is-open');
  });
});