test: update Sidebar tests to render text content and improve test wrapper logic

Author: MichaelKreil

src/lib/component/Sidebar.svelte.test.ts

@@ -44,15 +44,14 @@ describe('Sidebar', () => {
 		expect(sidebar?.textContent?.trim()).toBe('');
 	});
 
-	it('renders multiple child elements', () => {
+	it('renders text content', () => {
 		const { container } = render(SidebarWrapper, {
 			props: {
-				content: '<div>Item 1</div><div>Item 2</div>'
+				content: 'Multiple items in sidebar'
 			}
 		});
 
 		const sidebar = container.querySelector('.sidebar');
-		expect(sidebar?.textContent).toContain('Item 1');
-		expect(sidebar?.textContent).toContain('Item 2');
+		expect(sidebar?.textContent).toContain('Multiple items in sidebar');
 	});
 });

src/lib/component/Sidebar.test-wrapper.svelte

@@ -6,6 +6,6 @@
 
 <Sidebar>
 	{#if content}
-		{@html content}
+		{content}
 	{/if}
 </Sidebar>

src/test-setup/client-setup.ts

@@ -62,6 +62,8 @@ const localStorageMock = {
 	getItem: vi.fn(),
 	setItem: vi.fn(),
 	removeItem: vi.fn(),
-	clear: vi.fn()
+	clear: vi.fn(),
+	length: 0,
+	key: vi.fn()
 };
 global.localStorage = localStorageMock as Storage;

src/test-setup/setup.ts

@@ -7,7 +7,7 @@ import { vi } from 'vitest';
 
 // Ensure we're in a browser-like environment for Svelte 5
 if (typeof globalThis !== 'undefined') {
-	// @ts-ignore
+	// @ts-expect-error - Adding browser flag for Svelte 5 testing
 	globalThis.browser = true;
 }