// #region IconTest [C:2] [TYPE Module] [SEMANTICS test, ui, icon, svg, glyph, atom, component]
// @BRIEF Unit tests for Icon UI component — known icon names render correct paths, unknown names fall back to dashboard.
// @LAYER Tests
// @RELATION BINDS_TO -> [Icon]
// @UX_STATE Ready -> Requested icon path set is rendered as a decorative SVG.
// @UX_STATE Fallback -> Unknown icon names resolve to the dashboard glyph.
// @INVARIANT Icon output remains aria-hidden.
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Icon from '../Icon.svelte';

describe('Icon', () => {
	it('renders an svg element', () => {
		const { container } = render(Icon, { props: { name: 'home' } });
		const svg = container.querySelector('svg');
		expect(svg).not.toBeNull();
	});

	it('applies aria-hidden="true"', () => {
		const { container } = render(Icon, { props: { name: 'home' } });
		const svg = container.querySelector('svg');
		expect(svg!.getAttribute('aria-hidden')).toBe('true');
	});

	it('renders paths for a known icon', () => {
		const { container } = render(Icon, { props: { name: 'home' } });
		const paths = container.querySelectorAll('path');
		// home has 3 paths
		expect(paths.length).toBeGreaterThan(0);
	});

	it('renders multiple paths for database icon', () => {
		const { container } = render(Icon, { props: { name: 'database' } });
		const paths = container.querySelectorAll('path');
		expect(paths.length).toBe(5);
	});

	it('uses default icon "circle" when name is not provided', () => {
		const { container } = render(Icon);
		const paths = container.querySelectorAll('path');
		expect(paths.length).toBeGreaterThan(0);
	});

	it('accepts custom size', () => {
		const { container } = render(Icon, { props: { name: 'home', size: 32 } });
		const svg = container.querySelector('svg');
		expect(svg!.getAttribute('width')).toBe('32');
		expect(svg!.getAttribute('height')).toBe('32');
	});

	it('accepts custom stroke width', () => {
		const { container } = render(Icon, { props: { name: 'home', strokeWidth: 2.5 } });
		const svg = container.querySelector('svg');
		expect(svg!.getAttribute('stroke-width')).toBe('2.5');
	});

	it('applies custom class name', () => {
		const { container } = render(Icon, { props: { name: 'home', class: 'my-icon' } });
		const svg = container.querySelector('svg');
		expect(svg!.getAttribute('class')).toContain('my-icon');
	});

	it('falls back to dashboard icon for unknown name', () => {
		const { container } = render(Icon, { props: { name: 'nonexistent-icon-name' } });
		const paths = container.querySelectorAll('path');
		// dashboard has 3 paths: "M4 4h16v16H4z", "M4 10h16", "M10 4v16"
		expect(paths.length).toBe(3);
	});

	it('renders each known icon name without error', () => {
		const knownIcons = [
			'home', 'dashboard', 'database', 'storage', 'reports', 'translate',
			'admin', 'chevronDown', 'chevronLeft', 'chevronRight', 'menu', 'activity',
			'layers', 'back', 'close', 'list', 'clipboard', 'settings', 'trash',
		];
		for (const iconName of knownIcons) {
			const { container } = render(Icon, { props: { name: iconName } });
			const paths = container.querySelectorAll('path');
			expect(paths.length).toBeGreaterThan(0);
		}
	});
});
// #endregion IconTest
