import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import LinearProgressbarPercentage from './LinearProgressbarPercentage.svelte';
describe('m-linear-progressbar-percentage component', () => {
    it('renders with default value 0', () => {
        const { container, getByText } = render(LinearProgressbarPercentage);
        const wrapper = container.querySelector('.mc-linear-progressbar-percentage');
        expect(wrapper).toBeTruthy();
        const indicator = container.querySelector('.mc-linear-progressbar-percentage__indicator');
        expect(indicator).toBeTruthy();
        expect(indicator.style.getPropertyValue('--progress-value')).toBe('0');
        expect(indicator.getAttribute('aria-valuenow')).toBe('0');
        expect(getByText('0')).toBeTruthy();
        expect(getByText('%')).toBeTruthy();
    });
    it('renders with a custom value and displays it', () => {
        const value = 42;
        const { container, getByText } = render(LinearProgressbarPercentage, {
            props: { value },
        });
        const indicator = container.querySelector('.mc-linear-progressbar-percentage__indicator');
        expect(indicator.style.getPropertyValue('--progress-value')).toBe(String(value));
        expect(indicator.getAttribute('aria-valuenow')).toBe(String(value));
        expect(getByText(`${value}`)).toBeTruthy();
    });
});
