Added tests

Author: Hugos68

src/lib/hooks/useRole/App.test.svelte

@@ -6,7 +6,7 @@
 	interface Props extends UseRoleOptions {
 		open?: boolean;
 	}
-	let { open = true, ...rest }: Props = $props();
+	let { open = false, ...rest }: Props = $props();
 	const elements: { reference: HTMLElement | null; floating: HTMLElement | null } = $state({
 		reference: null,
 		floating: null

src/lib/hooks/useRole/index.test.svelte.ts

@@ -6,28 +6,67 @@ const ARIA_ROLES = ['grid', 'listbox', 'menu', 'tree', 'tooltip', 'alertdialog',
 
 describe('useRole', () => {
 	it('by default applies the "dialog" role to the floating element', () => {
-		render(App, { role: undefined });
+		render(App, { role: undefined, open: true });
 		expect(screen.queryByRole('dialog')).toBeInTheDocument();
 		cleanup();
 	});
 
 	for (const role of ARIA_ROLES) {
 		it(`applies the "${role}" role to the floating element`, () => {
-			render(App, { role });
+			render(App, { role, open: true });
 			expect(screen.queryByRole(role)).toBeInTheDocument();
 			cleanup();
 		});
 	}
 
-	it.skip('sets correct aria attributes based on the open state', async () => {
-		const { rerender } = render(App, { role: 'tooltip', open: true });
+	describe('tooltip', () => {
+		it.skip('sets correct aria attributes based on the open state', async () => {
+			const { rerender } = render(App, { role: 'tooltip', open: true });
 
-		expect(screen.getByRole('button')).toHaveAttribute('aria-describedby');
+			expect(screen.getByRole('button')).toHaveAttribute(
+				'aria-describedby',
+				screen.getByRole('tooltip').getAttribute('id')
+			);
 
-		await rerender({ role: 'tooltip', open: false });
+			await rerender({ role: 'tooltip', open: false });
 
-		expect(screen.getByRole('buton')).not.toHaveAttribute('aria-describedby');
+			expect(screen.getByRole('buton')).not.toHaveAttribute('aria-describedby');
 
-		cleanup();
+			cleanup();
+		});
+	});
+
+	describe('label', () => {
+		it.skip('sets correct aria attributes based on the open state', async () => {
+			const { rerender } = render(App, { role: 'label', open: true });
+
+			expect(screen.getByRole('button')).toHaveAttribute(
+				'aria-labelledby',
+				screen.getByRole('tooltip').getAttribute('id')
+			);
+
+			await rerender({ role: 'tooltip', open: false });
+
+			expect(screen.getByRole('buton')).not.toHaveAttribute('aria-labelledby');
+
+			cleanup();
+		});
+	});
+
+	describe('dialog', () => {
+		it.skip('sets correct aria attributes based on the open state', async () => {
+			const { rerender } = render(App, { role: 'dialog', open: false });
+
+			expect(screen.getByRole('button')).toHaveAttribute('aria-haspopup', 'dialog');
+			expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+
+			await rerender({ role: 'dialog', open: true });
+
+			expect(screen.getByRole('dialog')).toBeInTheDocument();
+			expect(screen.getByRole('button')).toHaveAttribute(
+				'aria-controls',
+				screen.getByRole('dialog').getAttribute('id')
+			);
+		});
 	});
 });