import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import StepList from './StepList.svelte';

const mockSteps = [
	{ stepNumber: 1, instruction: 'Wasser zum Kochen bringen' },
	{ stepNumber: 2, instruction: 'Spaghetti al dente kochen' },
	{ stepNumber: 3, instruction: 'Sauce bereiten' }
];

describe('StepList', () => {
	it('renders the section heading', () => {
		render(StepList, { props: { steps: mockSteps } });
		expect(screen.getByText(/zubereitung/i)).toBeInTheDocument();
	});

	it('renders each step instruction', () => {
		render(StepList, { props: { steps: mockSteps } });
		expect(screen.getByText('Wasser zum Kochen bringen')).toBeInTheDocument();
		expect(screen.getByText('Spaghetti al dente kochen')).toBeInTheDocument();
		expect(screen.getByText('Sauce bereiten')).toBeInTheDocument();
	});

	it('renders step numbers', () => {
		render(StepList, { props: { steps: mockSteps } });
		expect(screen.getByText('1')).toBeInTheDocument();
		expect(screen.getByText('2')).toBeInTheDocument();
		expect(screen.getByText('3')).toBeInTheDocument();
	});

	it('renders numbered circles with step numbers', () => {
		render(StepList, { props: { steps: mockSteps } });
		const circles = document.querySelectorAll('[data-testid="step-circle"]');
		expect(circles).toHaveLength(3);
	});

	it('renders steps in stepNumber order', () => {
		const shuffled = [mockSteps[2], mockSteps[0], mockSteps[1]];
		render(StepList, { props: { steps: shuffled } });
		const circles = document.querySelectorAll('[data-testid="step-circle"]');
		expect(circles[0].textContent).toBe('1');
		expect(circles[1].textContent).toBe('2');
		expect(circles[2].textContent).toBe('3');
	});

	it('renders empty state when no steps', () => {
		render(StepList, { props: { steps: [] } });
		expect(screen.getByText(/zubereitung/i)).toBeInTheDocument();
	});
});