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

afterEach(cleanup);

const stats = {
	availableBlocks: 42,
	totalOcrBlocks: 200,
	availableDocuments: 15,
	availableSegBlocks: 8
};

describe('OcrStatCards', () => {
	it('shows available block count', async () => {
		render(OcrStatCards, stats);
		await expect.element(page.getByText('42')).toBeInTheDocument();
	});

	it('shows total OCR block count', async () => {
		render(OcrStatCards, stats);
		await expect.element(page.getByText('200')).toBeInTheDocument();
	});

	it('shows available document count', async () => {
		render(OcrStatCards, stats);
		await expect.element(page.getByText('15')).toBeInTheDocument();
	});

	it('shows segmentation block count', async () => {
		render(OcrStatCards, stats);
		await expect.element(page.getByText('8')).toBeInTheDocument();
	});
});
