@mozaic-ds/vue/src/components/overlay/MOverlay.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 MOverlay from './MOverlay.vue';

describe('MOverlay.vue', () => {
  it('should be visible when isVisible is true', () => {
    const wrapper = mount(MOverlay, {
      props: {
        isVisible: true,
      },
    });

    expect(wrapper.classes()).toContain('is-visible');
  });

  it('should not be visible when isVisible is false', () => {
    const wrapper = mount(MOverlay, {
      props: {
        isVisible: false,
      },
    });

    expect(wrapper.classes()).not.toContain('is-visible');
  });

  it('should apply the dialog label for accessibility', () => {
    const label = 'Overlay Dialog';
    const wrapper = mount(MOverlay, {
      props: {
        dialogLabel: label,
      },
    });

    expect(
      wrapper.find('div[role="dialog"]').attributes('aria-labelledby'),
    ).toBe(label);
  });

  it('should render the content inside the overlay', () => {
    const wrapper = mount(MOverlay, {
      props: {
        isVisible: true,
      },
      slots: {
        default: 'Overlay Content',
      },
    });

    expect(wrapper.text()).toContain('Overlay Content');
  });
});