@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: {
    name: 'MOverlay',
    template: `<div class="overlay" @click="$emit('click')"><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');

    const emitted = wrapper.emitted('update:open');
    expect(emitted).toBeTruthy();
    expect(emitted![emitted!.length - 1]).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');
  });

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

    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');

    const emitted = wrapper.emitted('update:open');
    expect(emitted).toBeTruthy();

    expect(emitted![emitted!.length - 1]).toEqual([false]);
  });

  it('does not emit update:open when overlay clicked and closeOnOverlay is false', async () => {
    const wrapper = mount(MModal, {
      props: { open: true, title: 'Title', closeOnOverlay: false },
      global: { stubs },
    });

    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');

    const emitted = wrapper.emitted('update:open');

    if (emitted) {
      const lastValue = emitted[emitted.length - 1][0];
      expect(lastValue).not.toBe(false);
    } else {
      expect(emitted).toBeFalsy();
    }
  });

  it('locks scroll when open and unlocks when closed', async () => {
    const wrapper = mount(MModal, {
      props: { open: false, title: 'Title', scroll: false },
      global: { stubs },
    });

    await wrapper.setProps({ open: true });
    expect(document.body.style.overflow).toBe('hidden');
    expect(document.documentElement.style.overflow).toBe('hidden');

    await wrapper.setProps({ open: false });
    expect(document.body.style.overflow).toBe('');
    expect(document.documentElement.style.overflow).toBe('');
  });

  it('does not lock scroll if scroll prop is true', async () => {
    const wrapper = mount(MModal, {
      props: { open: false, title: 'Title', scroll: true },
      global: { stubs },
    });

    await wrapper.setProps({ open: true });
    expect(document.body.style.overflow).toBe('');
    expect(document.documentElement.style.overflow).toBe('');
  });
});