import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect, vi } from 'vitest';
import NavigationIndicator from './NavigationIndicator.svelte';
import { tick } from 'svelte';
describe('NavigationIndicator (Svelte 5)', () => {
    it('renders the correct number of steps', () => {
        const { getAllByRole } = render(NavigationIndicator, {
            props: {
                steps: 5,
                selected: 0,
            },
        });
        const buttons = getAllByRole('button', {
            name: 'Navigation step button',
        });
        expect(buttons).toHaveLength(5);
    });
    it('sets aria-current on the selected step', () => {
        const { getAllByRole } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 1,
            },
        });
        const buttons = getAllByRole('button', {
            name: 'Navigation step button',
        });
        expect(buttons[1].getAttribute('aria-current')).toBe('step');
        expect(buttons[0].getAttribute('aria-current')).toBeNull();
    });
    it('updates selected step on click', async () => {
        const { getAllByRole, component } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 0,
            },
        });
        const buttons = getAllByRole('button', {
            name: 'Navigation step button',
        });
        await fireEvent.click(buttons[2]);
        expect(component.selected).toBe(2);
    });
    it('updates selected step when pressing Enter', async () => {
        const { getAllByRole, component } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 0,
            },
        });
        const buttons = getAllByRole('button', {
            name: 'Navigation step button',
        });
        await fireEvent.keyDown(buttons[1], {
            key: 'Enter',
            code: 'Enter',
            charCode: 13,
        });
        expect(component.selected).toBe(1);
    });
    it('renders action button with label when label is provided', () => {
        const { getByRole } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 0,
                label: 'Play',
                action: 'resume',
            },
        });
        expect(getByRole('button', { name: 'Play' })).not.toBeNull();
    });
    it('renders icon-only action button when no label is provided', () => {
        const { container } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 0,
                action: 'pause',
            },
        });
        // On vérifie simplement qu’un bouton d’action existe
        const buttons = container.querySelectorAll('button');
        expect(buttons.length).toBeGreaterThan(0);
    });
    it('does not render action button when player is false', () => {
        const { container } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 0,
                player: false,
            },
        });
        const buttons = container.querySelectorAll('button');
        // uniquement les boutons de navigation
        expect(buttons).toHaveLength(3);
    });
    it('calls onAction callback when action button is clicked', async () => {
        const onAction = vi.fn();
        const { getByRole } = render(NavigationIndicator, {
            props: {
                steps: 3,
                selected: 0,
                label: 'Play',
                onAction,
            },
        });
        await fireEvent.click(getByRole('button', { name: 'Play' }));
        expect(onAction).toHaveBeenCalledOnce();
    });
    it('dispatches "action" event when action button is clicked', async () => {
        const { container, getByRole } = render(NavigationIndicator, {
            props: { steps: 3, selected: 0, label: 'Play' },
        });
        const button = getByRole('button', { name: 'Play' });
        const handler = vi.fn();
        container.addEventListener('action', handler);
        if (button)
            await fireEvent.click(button);
        await tick();
        expect(handler).toHaveBeenCalledTimes(1);
    });
    it('has correct navigation role and aria-label', () => {
        const { getByRole } = render(NavigationIndicator, {
            props: {
                steps: 2,
                selected: 0,
            },
        });
        expect(getByRole('navigation', { name: 'Navigations steps' })).not.toBeNull();
    });
});
