import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import StepperBottomBar from './StepperBottomBar.svelte';
describe('m-stepper-bottom-bar component', () => {
    it('renders the component root', () => {
        const { container } = render(StepperBottomBar, {
            props: {
                steps: 3,
                step: 0,
            },
        });
        const root = container.querySelector('.mc-stepper-bottom-bar');
        expect(root).toBeTruthy();
    });
    it('renders cancel button when cancel=true', () => {
        const { getByText } = render(StepperBottomBar, {
            props: { cancel: true },
        });
        expect(getByText('Cancel')).toBeTruthy();
    });
    it('does not render cancel button when cancel=false', () => {
        const { queryByText } = render(StepperBottomBar, {
            props: { cancel: false },
        });
        expect(queryByText('Cancel')).toBeNull();
    });
    it('does not render previous button on first step', () => {
        const { queryByText } = render(StepperBottomBar, {
            props: {
                step: 0,
                steps: 3,
            },
        });
        expect(queryByText('Previous')).toBeNull();
    });
    it('renders previous button when step > 0', () => {
        const { getByText } = render(StepperBottomBar, {
            props: {
                step: 1,
                steps: 3,
            },
        });
        expect(getByText('Previous')).toBeTruthy();
    });
    it('emits cancel event when cancel button is clicked', async () => {
        const { container, getByText } = render(StepperBottomBar, {
            props: { cancel: true },
        });
        const element = container.querySelector('.mc-stepper-bottom-bar');
        const handler = vi.fn();
        element.addEventListener('cancel', handler);
        await fireEvent.click(getByText('Cancel'));
        expect(handler).toHaveBeenCalledOnce();
    });
    it('emits change event with decremented step on previous click', async () => {
        const { container, getByText } = render(StepperBottomBar, {
            props: {
                step: 2,
                steps: 4,
            },
        });
        const element = container.querySelector('.mc-stepper-bottom-bar');
        const handler = vi.fn();
        element.addEventListener('change', handler);
        await fireEvent.click(getByText('Previous'));
        expect(handler).toHaveBeenCalledOnce();
        expect(handler.mock.calls[0][0].detail).toBe(1);
    });
    it('emits change event with incremented step on next click', async () => {
        const { container, getByText } = render(StepperBottomBar, {
            props: {
                step: 0,
                steps: 3,
            },
        });
        const element = container.querySelector('.mc-stepper-bottom-bar');
        const handler = vi.fn();
        element.addEventListener('change', handler);
        await fireEvent.click(getByText('Next'));
        expect(handler).toHaveBeenCalledOnce();
        expect(handler.mock.calls[0][0].detail).toBe(1);
    });
    it('emits validate event when clicking next on last step', async () => {
        const { container, getByText } = render(StepperBottomBar, {
            props: {
                step: 3,
                steps: 3,
            },
        });
        const element = container.querySelector('.mc-stepper-bottom-bar');
        const handler = vi.fn();
        element.addEventListener('validate', handler);
        await fireEvent.click(getByText('Validate'));
        expect(handler).toHaveBeenCalledOnce();
    });
    it('renders validate label on last step', () => {
        const { getByText } = render(StepperBottomBar, {
            props: {
                step: 3,
                steps: 3,
                validatelabel: 'Confirm',
            },
        });
        expect(getByText('Confirm')).toBeTruthy();
    });
});
