import { render } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import KpiItem from './KpiItem.svelte';
describe('MKpiItem component', () => {
    it('renders the large size correctly', () => {
        const { getByText } = render(KpiItem, {
            props: {
                value: '85%',
                label: 'Completion Rate',
                trend: 'increasing',
                information: 'Above target',
                size: 'l',
            },
        });
        expect(getByText('85%')).toBeTruthy();
        expect(getByText('Completion Rate')).toBeTruthy();
        expect(getByText('Above target')).toBeTruthy();
        expect(document.querySelector('.mc-kpi__icon')).toBeTruthy();
    });
    it('renders the medium size component correctly', () => {
        const { getByText, queryByText } = render(KpiItem, {
            props: {
                value: '85%',
                label: 'Completion Rate',
                information: 'Above target',
                trend: 'increasing',
                size: 'm',
            },
        });
        expect(getByText('85%')).toBeTruthy();
        expect(getByText('Completion Rate')).toBeTruthy();
        expect(queryByText('Above target')).toBeNull();
        expect(document.querySelector('.mc-kpi__icon')).toBeTruthy();
    });
    it('renders the small size component correctly', () => {
        const { getByText, queryByText } = render(KpiItem, {
            props: {
                value: '85%',
                label: 'Completion Rate',
                information: 'Above target',
                trend: 'increasing',
                size: 's',
            },
        });
        expect(getByText('85%')).toBeTruthy();
        expect(queryByText('Completion Rate')).toBeNull();
        expect(queryByText('Above target')).toBeNull();
        expect(document.querySelector('.mc-kpi__icon')).toBeTruthy();
    });
    describe('evolution icon', () => {
        it('does not render the icon when trend prop is not provided', () => {
            const { container } = render(KpiItem, { props: { value: '123' } });
            expect(container.querySelector('.mc-kpi__icon')).toBeNull();
        });
        it('renders the icon when trend prop is provided', () => {
            const { container } = render(KpiItem, { props: { value: '123', trend: 'increasing' } });
            expect(container.querySelector('.mc-kpi__icon')).toBeTruthy();
        });
    });
});
