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

afterEach(cleanup);

describe('AccountSection', () => {
	it('renders the section heading', async () => {
		render(AccountSection, { props: {} });

		await expect.element(page.getByRole('heading', { name: /benutzerverwaltung/i })).toBeVisible();
	});

	it('renders the email input as type=email and required', async () => {
		render(AccountSection, { props: {} });

		const email = document.querySelector('input[name="email"]') as HTMLInputElement;
		expect(email.type).toBe('email');
		expect(email.required).toBe(true);
		expect(email.autocomplete).toBe('email');
	});

	it('renders the password input as type=password and required', async () => {
		render(AccountSection, { props: {} });

		const pwd = document.querySelector('input[name="password"]') as HTMLInputElement;
		expect(pwd.type).toBe('password');
		expect(pwd.required).toBe(true);
	});
});
