import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiProgress from '../UiProgress.vue';

describe('UiProgress', () => {
  test('renders progress as 0% done', () => {
    const { getByRole } = render(UiProgress, {
      props: {
        modelValue: 0,
      },
    });

    expect(getByRole('progressbar').getAttribute('data-value')).toBe('0');
  });

  test('renders progress as 50% done', () => {
    const { getByRole } = render(UiProgress, {
      props: {
        modelValue: 50,
      },
    });

    expect(getByRole('progressbar').getAttribute('data-value')).toBe('50');
  });

  test('renders progress as 100% done', () => {
    const { getByRole } = render(UiProgress, {
      props: {
        modelValue: 100,
      },
    });

    expect(getByRole('progressbar').getAttribute('data-value')).toBe('100');
  });

  test('clamps value to max prop', () => {
    const { getByRole } = render(UiProgress, {
      props: {
        modelValue: 100,
        max: 25,
      },
    });

    expect(getByRole('progressbar').getAttribute('data-value')).toBe('25');
  });
});
