@mozaic-ds/vue/src/components/container/MContainer.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 MlContainer from './MContainer.vue';

describe('MlContainer.vue', () => {
  it('renders default container without fluid class', () => {
    const wrapper = mount(MlContainer);
    const container = wrapper.get('.ml-container');

    expect(container.classes()).not.toContain('ml-container--fluid');
  });

  it('adds fluid class when fluid prop is true', () => {
    const wrapper = mount(MlContainer, {
      props: {
        fluid: true,
      },
    });

    const container = wrapper.get('.ml-container');
    expect(container.classes()).toContain('ml-container--fluid');
  });

  it('does not add fluid class when fluid prop is false', () => {
    const wrapper = mount(MlContainer, {
      props: {
        fluid: false,
      },
    });

    const container = wrapper.get('.ml-container');
    expect(container.classes()).not.toContain('ml-container--fluid');
  });

  it('renders slot content', () => {
    const wrapper = mount(MlContainer, {
      slots: {
        default: '<p>Test content</p>',
      },
    });

    expect(wrapper.html()).toContain('Test content');
  });
});