import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import QuoteBlock from './QuoteBlock.svelte';
import type { QuoteBlock as QuoteBlockType } from '$lib/types/content-blocks';

describe('QuoteBlock', () => {
	it('renders the quote text', () => {
		const block: QuoteBlockType = {
			$type: 'at.riven.block.quote',
			text: 'To be or not to be'
		};
		render(QuoteBlock, { props: { block } });
		expect(screen.getByText('To be or not to be')).toBeTruthy();
	});

	it('renders as a blockquote element', () => {
		const block: QuoteBlockType = {
			$type: 'at.riven.block.quote',
			text: 'Some quote'
		};
		render(QuoteBlock, { props: { block } });
		const el = screen.getByTestId('quote-block');
		expect(el.tagName).toBe('BLOCKQUOTE');
	});

	it('renders source when provided', () => {
		const block: QuoteBlockType = {
			$type: 'at.riven.block.quote',
			text: 'That is the question',
			source: 'Shakespeare'
		};
		render(QuoteBlock, { props: { block } });
		expect(screen.getByText(/Shakespeare/)).toBeTruthy();
	});

	it('does not render source when not provided', () => {
		const block: QuoteBlockType = {
			$type: 'at.riven.block.quote',
			text: 'Just a quote'
		};
		render(QuoteBlock, { props: { block } });
		const footer = screen.getByTestId('quote-block').querySelector('footer');
		expect(footer).toBeNull();
	});
});