// #region LanguageSwitcherTest [C:2] [TYPE Module] [SEMANTICS test, ui, language-switcher, i18n, component]
// @BRIEF Unit tests for LanguageSwitcher UI component — renders Select with locale options.
// @LAYER Tests
// @RELATION BINDS_TO -> [LanguageSwitcher]
// @UX_STATE: Idle -> Component renders a select dropdown with supported language options.

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

// Mock must use vi.hoisted to avoid hoisting initialization issues
const localeMock = vi.hoisted(() => ({
	subscribe: vi.fn((run: (v: string) => void) => {
		run('ru');
		return () => {};
	}),
}));

vi.mock('$lib/i18n/index.svelte.js', () => ({
	locale: localeMock,
}));

describe('LanguageSwitcher', () => {
	it('renders with select element', () => {
		const { container } = render(LanguageSwitcher);
		const select = container.querySelector('select');
		expect(select).not.toBeNull();
	});

	it('renders two language options', () => {
		const { container } = render(LanguageSwitcher);
		const options = container.querySelectorAll('option');
		expect(options).toHaveLength(2);
	});

	it('renders Russian option first', () => {
		const { container } = render(LanguageSwitcher);
		const options = container.querySelectorAll('option');
		expect(options[0].textContent).toBe('Русский');
		expect(options[0].getAttribute('value')).toBe('ru');
	});

	it('renders English option second', () => {
		const { container } = render(LanguageSwitcher);
		const options = container.querySelectorAll('option');
		expect(options[1].textContent).toBe('English');
		expect(options[1].getAttribute('value')).toBe('en');
	});

	it('has a wrapping div with w-32 class', () => {
		const { container } = render(LanguageSwitcher);
		const wrapperDiv = container.querySelector('div');
		expect(wrapperDiv).not.toBeNull();
		expect(wrapperDiv!.className).toContain('w-32');
	});
});
// #endregion LanguageSwitcherTest
