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

describe('MCircularProgressbar component', () => {
  it('renders percentage type with correct value and aria attributes', () => {
    const wrapper = mount(MCircularProgressbar, {
      props: {
        value: 75,
        type: 'percentage',
      },
    });

    expect(wrapper.find('.mc-circular-progressbar__value').text()).toBe('75');
    expect(wrapper.find('.mc-circular-progressbar__unit').text()).toBe('%');

    const root = wrapper.find('.mc-circular-progressbar');
    expect(root.attributes('aria-valuemin')).toBe('0');
    expect(root.attributes('aria-valuemax')).toBe('100');
    expect(root.attributes('aria-valuenow')).toBe('75');

    expect(root.attributes('style')).toContain('--progress-value: 75');
  });

  it('renders content type with contentValue and additionalInfo', () => {
    const wrapper = mount(MCircularProgressbar, {
      props: {
        type: 'content',
        contentValue: '999 999 €',
        additionalInfo: 'additional info',
      },
    });

    expect(wrapper.find('.mc-circular-progressbar__number').text()).toBe(
      '999 999 €',
    );
    expect(wrapper.find('.mc-circular-progressbar__text').text()).toBe(
      'additional info',
    );
  });

  it('renders content type without additionalInfo when not provided', () => {
    const wrapper = mount(MCircularProgressbar, {
      props: {
        type: 'content',
        contentValue: '123',
      },
    });

    expect(wrapper.find('.mc-circular-progressbar__number').text()).toBe('123');
    expect(wrapper.find('.mc-circular-progressbar__text').exists()).toBe(false);
  });

  it('applies size modifier class when size is not "l"', () => {
    const wrapper = mount(MCircularProgressbar, {
      props: {
        size: 's',
      },
    });

    expect(wrapper.classes()).toContain('mc-circular-progressbar--s');
  });

  it('does not apply size modifier class when size is "l" or not provided', () => {
    const wrapperDefault = mount(MCircularProgressbar);
    expect(wrapperDefault.classes()).not.toContain(
      'mc-circular-progressbar--l',
    );

    const wrapperL = mount(MCircularProgressbar, {
      props: {
        size: 'l',
      },
    });
    expect(wrapperL.classes()).not.toContain('mc-circular-progressbar--l');
  });
});