import { render } from '@testing-library/svelte';
import StepperInline from './StepperInline.svelte';
import { describe, it, expect } from 'vitest';
describe('StepperInline', () => {
    const defaultSteps = [
        { id: '1', label: 'Step 1' },
        { id: '2', label: 'Step 2' },
        { id: '3', label: 'Step 3' },
    ];
    it('renders correctly with default props', () => {
        const { getAllByRole, getByText } = render(StepperInline, {
            props: {
                step: 1,
                steps: defaultSteps,
            },
        });
        expect(getAllByRole('listitem').length).toBe(defaultSteps.length);
        expect(getByText('Step 1')).toBeTruthy();
    });
    describe('Active step - number type', () => {
        it('marks the correct step as active', async () => {
            const { container, rerender } = render(StepperInline, {
                props: {
                    step: 2,
                    steps: defaultSteps,
                },
            });
            let labels = container.querySelectorAll('.mc-stepper-inline__label');
            expect(labels[1].classList.contains('is-current')).toBe(true);
            expect(labels[0].classList.contains('is-current')).toBe(false);
            await rerender({ step: 3, steps: defaultSteps });
            labels = container.querySelectorAll('.mc-stepper-inline__label');
            expect(labels[2].classList.contains('is-current')).toBe(true);
        });
        it('marks completed steps', () => {
            const { container } = render(StepperInline, {
                props: {
                    step: 3,
                    steps: defaultSteps,
                },
            });
            const items = container.querySelectorAll('.mc-stepper-inline__item');
            expect(items[0].classList.contains('is-completed')).toBe(true);
            expect(items[1].classList.contains('is-completed')).toBe(true);
            expect(items[2].classList.contains('is-completed')).toBe(false);
        });
    });
    describe('Active step - string type', () => {
        it('marks the correct step as active', async () => {
            const { container, rerender } = render(StepperInline, {
                props: {
                    step: '2',
                    steps: defaultSteps,
                },
            });
            let labels = container.querySelectorAll('.mc-stepper-inline__label');
            expect(labels[1].classList.contains('is-current')).toBe(true);
            expect(labels[0].classList.contains('is-current')).toBe(false);
            await rerender({ step: '3', steps: defaultSteps });
            labels = container.querySelectorAll('.mc-stepper-inline__label');
            expect(labels[2].classList.contains('is-current')).toBe(true);
        });
        it('marks completed steps', () => {
            const { container } = render(StepperInline, {
                props: {
                    step: '3',
                    steps: defaultSteps,
                },
            });
            const items = container.querySelectorAll('.mc-stepper-inline__item');
            expect(items[0].classList.contains('is-completed')).toBe(true);
            expect(items[1].classList.contains('is-completed')).toBe(true);
            expect(items[2].classList.contains('is-completed')).toBe(false);
        });
    });
    it('renders no steps when steps prop is empty', () => {
        const { queryAllByRole } = render(StepperInline, {
            props: {
                step: 1,
                steps: [],
            },
        });
        expect(queryAllByRole('listitem').length).toBe(0);
    });
    it('renders correct step numbers', () => {
        const { container } = render(StepperInline, {
            props: {
                step: 1,
                steps: defaultSteps,
            },
        });
        const circles = container.querySelectorAll('.mc-stepper-inline__circle');
        circles.forEach((circle, i) => {
            expect(circle.textContent).toBe(String(i + 1));
        });
    });
    it('renders chevron icon between steps except last', () => {
        const { container } = render(StepperInline, {
            props: {
                step: 1,
                steps: defaultSteps,
            },
        });
        const chevrons = container.querySelectorAll('.mc-stepper-inline__icon--chevron');
        expect(chevrons.length).toBe(defaultSteps.length - 1);
    });
    it('renders check icon for completed steps', () => {
        const { container } = render(StepperInline, {
            props: {
                step: 3,
                steps: defaultSteps,
            },
        });
        const checkIcons = container.querySelectorAll('.mc-stepper-inline__icon--check');
        expect(checkIcons.length).toBe(2);
    });
});
