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

describe('MLoadingOverlay component', () => {
  it('renders and applies isVisible class based on prop', () => {
    const wrapper = mount(MLoadingOverlay, {
      props: { isVisible: true, text: 'Loading data...' },
    });

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

    const dialog = wrapper.find('[role="dialog"]');
    expect(dialog.attributes('aria-label')).toBe('Loading data...');
  });

  it('does not have is-visible class when isVisible is false or undefined', () => {
    const wrapper = mount(MLoadingOverlay, {
      props: { isVisible: false },
    });
    expect(wrapper.classes()).not.toContain('is-visible');

    const wrapperNoProp = mount(MLoadingOverlay);
    expect(wrapperNoProp.classes()).not.toContain('is-visible');
  });

  it('passes down attributes via $attrs', () => {
    const wrapper = mount(MLoadingOverlay, {
      props: { isVisible: true, text: 'Loading...' },
      attrs: { id: 'custom-id', 'data-test': 'loading-overlay' },
    });

    const dialog = wrapper.find('[role="dialog"]');
    expect(dialog.attributes('id')).toBe('custom-id');
    expect(dialog.attributes('data-test')).toBe('loading-overlay');
  });
});