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

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

    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;');
  });

  it('applies the correct style based on value prop', () => {
    const wrapper = mount(MLinearProgressbarBuffer, {
      props: { value: 45 },
    });
    const indicator = wrapper.get('.mc-linear-progressbar-buffer__indicator');
    expect(indicator.attributes('style')).toContain('--progress-value: 45;');
  });

  it('applies the correct size class for size "s"', () => {
    const wrapper = mount(MLinearProgressbarBuffer, {
      props: {
        size: 's',
      },
    });
    expect(wrapper.classes()).toContain('mc-linear-progressbar-buffer--s');
  });

  it('does not apply size class when size is "m"', () => {
    const wrapper = mount(MLinearProgressbarBuffer, {
      props: {
        size: 'm',
      },
    });
    expect(wrapper.classes()).not.toContain('mc-linear-progressbar-buffer--m');
  });

  it('applies the correct size class for size "l"', () => {
    const wrapper = mount(MLinearProgressbarBuffer, {
      props: {
        size: 'l',
      },
    });
    expect(wrapper.classes()).toContain('mc-linear-progressbar-buffer--l');
  });
});