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

describe('MAvatar.vue', () => {
  it('renders the component with default size (s)', () => {
    const wrapper = mount(MAvatar, {
      slots: {
        default: '<span>AB</span>',
      },
    });

    expect(wrapper.classes()).toContain('mc-avatar');
    expect(wrapper.classes().some((cls) => cls.startsWith('mc-avatar--'))).toBe(
      false,
    );
    expect(wrapper.text()).toContain('AB');
  });

  it('applies the correct class for size "m"', () => {
    const wrapper = mount(MAvatar, {
      props: {
        size: 'm',
      },
      slots: {
        default: '<span>CD</span>',
      },
    });

    expect(wrapper.classes()).toContain('mc-avatar');
    expect(wrapper.classes()).toContain('mc-avatar--m');
    expect(wrapper.text()).toContain('CD');
  });

  it('applies the correct class for size "l"', () => {
    const wrapper = mount(MAvatar, {
      props: {
        size: 'l',
      },
      slots: {
        default: '<span>EF</span>',
      },
    });

    expect(wrapper.classes()).toContain('mc-avatar');
    expect(wrapper.classes()).toContain('mc-avatar--l');
    expect(wrapper.text()).toContain('EF');
  });
});