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

afterEach(cleanup);

describe('UserPasswordSection', () => {
	it('renders both password labels', async () => {
		render(UserPasswordSection, { props: {} });

		await expect.element(page.getByLabelText('Neues Passwort (Wiederholung)')).toBeVisible();
		const inputs = document.querySelectorAll('input[type="password"]');
		expect(inputs.length).toBe(2);
	});

	it('exposes both inputs as type=password', async () => {
		render(UserPasswordSection, { props: {} });

		const newPwd = document.querySelector('input[name="newPassword"]') as HTMLInputElement;
		const confirm = document.querySelector('input[name="confirmPassword"]') as HTMLInputElement;
		expect(newPwd.type).toBe('password');
		expect(confirm.type).toBe('password');
	});

	it('marks both inputs as required when required prop is true', async () => {
		render(UserPasswordSection, { props: { required: true } });

		const newPwd = document.querySelector('input[name="newPassword"]') as HTMLInputElement;
		const confirm = document.querySelector('input[name="confirmPassword"]') as HTMLInputElement;
		expect(newPwd.required).toBe(true);
		expect(confirm.required).toBe(true);
	});

	it('leaves both inputs optional when required is false (default)', async () => {
		render(UserPasswordSection, { props: {} });

		const newPwd = document.querySelector('input[name="newPassword"]') as HTMLInputElement;
		const confirm = document.querySelector('input[name="confirmPassword"]') as HTMLInputElement;
		expect(newPwd.required).toBe(false);
		expect(confirm.required).toBe(false);
	});
});