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

describe('MTile', () => {
  it('does not apply appearance modifier when appearance is primary', () => {
    const wrapper = mount(MTile, {
      props: {
        appearance: 'primary',
      },
    });

    expect(wrapper.classes()).not.toContain('mc-tile--primary');
  });

  it('applies appearance modifier when appearance is not primary', () => {
    const wrapper = mount(MTile, {
      props: {
        appearance: 'secondary',
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--secondary');
  });

  it('applies bordered class when bordered is true', () => {
    const wrapper = mount(MTile, {
      props: {
        bordered: true,
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--bordered');
  });

  it('does not apply bordered class when bordered is false', () => {
    const wrapper = mount(MTile, {
      props: {
        bordered: false,
      },
    });

    expect(wrapper.classes()).not.toContain('mc-tile--bordered');
  });

  it('does not render details container when slot is missing', () => {
    const wrapper = mount(MTile);

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

  it('renders details container when slot is provided', () => {
    const wrapper = mount(MTile, {
      slots: {
        details: '<span>Details</span>',
      },
    });

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