import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import SegmentedControl from './SegmentedControl.svelte';

const options = [
	{ value: 'planner', label: 'Planer' },
	{ value: 'member', label: 'Mitglied' }
];

describe('SegmentedControl', () => {
	it('renders all option labels', () => {
		render(SegmentedControl, { props: { options, value: 'planner', onchange: vi.fn() } });
		expect(screen.getByRole('button', { name: 'Planer' })).toBeInTheDocument();
		expect(screen.getByRole('button', { name: 'Mitglied' })).toBeInTheDocument();
	});

	it('marks the active option with aria-pressed', () => {
		render(SegmentedControl, { props: { options, value: 'planner', onchange: vi.fn() } });
		expect(screen.getByRole('button', { name: 'Planer' })).toHaveAttribute('aria-pressed', 'true');
		expect(screen.getByRole('button', { name: 'Mitglied' })).toHaveAttribute('aria-pressed', 'false');
	});

	it('calls onchange with the new value when an option is clicked', async () => {
		const onchange = vi.fn();
		render(SegmentedControl, { props: { options, value: 'planner', onchange } });
		await userEvent.click(screen.getByRole('button', { name: 'Mitglied' }));
		expect(onchange).toHaveBeenCalledWith('member');
	});
});