import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import CircularProgressbar from './CircularProgressbar.svelte';
describe('m-circular-progressbar component', () => {
    it('renders with default props (type: percentage, value: 0)', () => {
        const { container, getByText } = render(CircularProgressbar);
        const wrapper = container.querySelector('.mc-circular-progressbar');
        expect(wrapper).toBeTruthy();
        expect(wrapper).toHaveAttribute('role', 'progressbar');
        expect(wrapper).toHaveAttribute('aria-valuenow', '0');
        expect(wrapper).toHaveAttribute('aria-valuemin', '0');
        expect(wrapper).toHaveAttribute('aria-valuemax', '100');
        const valueText = getByText('0');
        const percentUnit = getByText('%');
        expect(valueText).toBeTruthy();
        expect(percentUnit).toBeTruthy();
    });
    it('applies the correct size class', () => {
        const { container } = render(CircularProgressbar, {
            props: { size: 'l' },
        });
        const wrapper = container.querySelector('.mc-circular-progressbar');
        expect(wrapper?.classList.contains('mc-circular-progressbar--l')).toBe(true);
    });
    it('updates percentage value visually and via ARIA', () => {
        const { container, getByText } = render(CircularProgressbar, {
            props: { value: 75 },
        });
        const wrapper = container.querySelector('.mc-circular-progressbar');
        expect(wrapper?.getAttribute('aria-valuenow')).toBe('75');
        expect(getByText('75')).toBeTruthy();
    });
    it('renders content type with contentvalue and no additional info', () => {
        const { getByText, queryByText } = render(CircularProgressbar, {
            props: {
                type: 'content',
                contentvalue: '42',
            },
        });
        const content = getByText('42');
        expect(content).toBeTruthy();
        expect(queryByText('%')).toBeNull();
    });
    it('renders contentvalue with additionalinfo', () => {
        const { getByText } = render(CircularProgressbar, {
            props: {
                type: 'content',
                contentvalue: 'Done',
                additionalinfo: 'All tasks completed',
            },
        });
        expect(getByText('Done')).toBeTruthy();
        expect(getByText('All tasks completed')).toBeTruthy();
    });
    it('does not render content block when type is percentage', () => {
        const { container } = render(CircularProgressbar, {
            props: {
                type: 'percentage',
                value: 10,
                contentvalue: 'Should not show',
                additionalinfo: 'Also hidden',
            },
        });
        expect(container.querySelector('.mc-circular-progressbar__content')).toBeNull();
    });
    it('sets inline style for progress value', () => {
        const { container } = render(CircularProgressbar, {
            props: { value: 33 },
        });
        const wrapper = container.querySelector('.mc-circular-progressbar');
        const style = wrapper.getAttribute('style');
        expect(style).toContain('--progress-value: 33');
    });
});
