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

describe('MLinearProgressbarPercentage component', () => {
  it('renders correctly with default props', () => {
    const wrapper = mount(MLinearProgressbarPercentage);
    const indicator = wrapper.get(
      '.mc-linear-progressbar-percentage__indicator',
    );
    const label = wrapper.get('.mc-linear-progressbar-percentage__value');

    expect(indicator.attributes('aria-valuenow')).toBe('0');
    expect(indicator.attributes('aria-valuemin')).toBe('0');
    expect(indicator.attributes('aria-valuemax')).toBe('100');
    expect(indicator.attributes('role')).toBe('progressbar');

    expect(indicator.attributes('style')).toContain('--progress-value: 0;');

    expect(label.text()).toBe('0%');
  });

  it('renders with custom value', () => {
    const wrapper = mount(MLinearProgressbarPercentage, {
      props: {
        value: 65,
      },
    });

    const indicator = wrapper.get(
      '.mc-linear-progressbar-percentage__indicator',
    );
    const label = wrapper.get('.mc-linear-progressbar-percentage__value');

    expect(indicator.attributes('aria-valuenow')).toBe('65');
    expect(indicator.attributes('style')).toContain('--progress-value: 65;');
    expect(label.text()).toBe('65%');
  });

  it('passes extra attributes using v-bind="$attrs"', () => {
    const wrapper = mount(MLinearProgressbarPercentage, {
      attrs: {
        'data-testid': 'progress-indicator',
        title: 'Progress',
      },
    });

    const indicator = wrapper.get('[data-testid="progress-indicator"]');
    expect(indicator.attributes('title')).toBe('Progress');
  });

  it('renders percentage with decimal values correctly', () => {
    const wrapper = mount(MLinearProgressbarPercentage, {
      props: {
        value: 42.5,
      },
    });

    const label = wrapper.get('.mc-linear-progressbar-percentage__value');
    expect(label.text()).toBe('42.5%');
  });
});