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

afterEach(cleanup);

describe('ScopeCard', () => {
	it('per-file variant has accent background class', async () => {
		const { container } = render(ScopeCard, { variant: 'per-file', count: 1 });
		const card = container.querySelector('[data-testid="scope-card"]');
		expect(card?.className).toMatch(/bg-accent-bg/);
	});

	it('shared variant does not have accent background', async () => {
		const { container } = render(ScopeCard, { variant: 'shared', count: 3 });
		const card = container.querySelector('[data-testid="scope-card"]');
		expect(card?.className).not.toMatch(/bg-accent-bg/);
	});

	it('shared variant renders count badge with file count', async () => {
		render(ScopeCard, { variant: 'shared', count: 5 });
		await expect.element(page.getByText('5', { exact: true })).toBeInTheDocument();
	});

	it('per-file variant renders slot content', async () => {
		// ScopeCard is a container — verify it renders children
		render(ScopeCard, { variant: 'per-file', count: 1 });
		const card = await page.getByTestId('scope-card');
		await expect.element(card).toBeInTheDocument();
	});
});