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

afterEach(cleanup);

describe('AnnotateHintStrip', () => {
	it('is absent from the DOM when annotateMode is false', async () => {
		render(AnnotateHintStrip, { annotateMode: false });
		const strip = page.getByTestId('annotate-hint-strip');
		await expect.element(strip).not.toBeInTheDocument();
	});

	it('is present in the DOM when annotateMode is true', async () => {
		render(AnnotateHintStrip, { annotateMode: true });
		const strip = page.getByTestId('annotate-hint-strip');
		await expect.element(strip).toBeInTheDocument();
	});

	it('has hidden md:flex class to hide below 768px', async () => {
		render(AnnotateHintStrip, { annotateMode: true });
		const strip = page.getByTestId('annotate-hint-strip');
		await expect.element(strip).toHaveClass('hidden');
		await expect.element(strip).toHaveClass('md:flex');
	});
});