import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import OverflowPillDisplay from './OverflowPillDisplay.svelte';

afterEach(cleanup);

describe('OverflowPillDisplay', () => {
	it('renders the +N count', async () => {
		render(OverflowPillDisplay, { props: { extraCount: 3 } });

		const span = document.querySelector('span') as HTMLElement;
		expect(span.textContent?.trim()).toBe('+3');
	});

	it('renders +0 when extraCount is 0', async () => {
		render(OverflowPillDisplay, { props: { extraCount: 0 } });

		const span = document.querySelector('span') as HTMLElement;
		expect(span.textContent?.trim()).toBe('+0');
	});

	it('marks the pill as aria-hidden (decorative)', async () => {
		render(OverflowPillDisplay, { props: { extraCount: 5 } });

		const span = document.querySelector('span') as HTMLElement;
		expect(span.getAttribute('aria-hidden')).toBe('true');
	});
});
