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

import TagChipList from './TagChipList.svelte';

afterEach(() => {
	cleanup();
});

const makeTags = (n: number) =>
	Array.from({ length: n }, (_, i) => ({ id: `t${i}`, name: `Tag${i}` }));

describe('TagChipList', () => {
	it('renders all tags as chips when under the cap', () => {
		render(TagChipList, { tags: makeTags(2), max: 3 });
		const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
		expect(chips).toHaveLength(2);
		expect(document.body.textContent).not.toMatch(/\+/);
	});

	it('caps visible chips at max and renders +N for the remainder', () => {
		render(TagChipList, { tags: makeTags(5), max: 3 });
		const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
		expect(chips).toHaveLength(3);
		expect(document.body.textContent).toMatch(/\+2/);
	});

	it('renders nothing when tags is empty', () => {
		render(TagChipList, { tags: [], max: 3 });
		const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
		expect(chips).toHaveLength(0);
		expect(document.body.textContent).not.toMatch(/\+/);
	});

	it('defaults max to 3 when the prop is omitted', () => {
		render(TagChipList, { tags: makeTags(5) });
		const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
		expect(chips).toHaveLength(3);
		expect(document.body.textContent).toMatch(/\+2/);
	});
});
