More testing

package.json

@@ -23,11 +23,13 @@
 	"devDependencies": {
 		"@codecov/vite-plugin": "^0.0.1-beta.10",
 		"@playwright/test": "^1.45.0",
+		"@sentry/sveltekit": "^8.21.0",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.5",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@tailwindcss/typography": "^0.5.12",
 		"@testing-library/svelte": "^5.2.0",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/qrcode": "^1.5.5",
 		"@typescript-eslint/eslint-plugin": "^8.0.0",
 		"@typescript-eslint/parser": "^8.0.0",
@@ -62,6 +64,7 @@
 		"remark-stringify": "^11.0.0",
 		"svelte": "^4.2.12",
 		"svelte-check": "^3.8.0",
+		"svelte-persisted-store": "^0.11.0",
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.5.2",
@@ -70,8 +73,5 @@
 		"vitest": "^2.0.5",
 		"yaml": "^2.5.0",
 		"zod": "^3.22.4"
-	},
-	"dependencies": {
-		"@sentry/sveltekit": "^8.21.0"
 	}
 }

src/components/content/Comment.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Theme, currentTheme } from '~/lib/theme';
+	import { currentTheme, Theme } from '$lib/theme';
 
 	$: theme = $currentTheme == Theme.Light ? 'github-light' : 'github-dark';
 </script>
 
-{#key $currentTheme}
-	<div data-testid="utterances" {...$$restProps}>
+{#key theme}
+	<div data-testid="utterances" class="w-full">
 		<script
 			src="https://utteranc.es/client.js"
 			repo="lasuillard/lasuillard.github.io"

src/components/content/Markdown.svelte

@@ -17,7 +17,7 @@
 	 *
 	 * Just ignore this to use slotted inputs for raw markdown text.
 	 */
-	export let content: string | undefined = undefined;
+	export let content: string = '';
 
 	// Binding wrapper for input slot to obtain its contents
 	let wrapper: HTMLElement;
@@ -33,7 +33,6 @@
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html content}
 {:else}
-	<!-- Internal-->
 	<div bind:this={wrapper} class="hidden">
 		<slot />
 	</div>

src/components/content/QRCode.svelte

@@ -30,4 +30,4 @@
 	});
 </script>
 
-<canvas bind:this={qrCode} title={text} data-testid="qrcode" {...$$restProps} />
+<canvas bind:this={qrCode} data-testid="qrcode" title={text} {width} />

src/components/content/Toc.svelte

@@ -4,15 +4,15 @@
 	import { onMount } from 'svelte';
 
 	export let content: HTMLElement | undefined;
-	let rootHeadings: TreeNode<HTMLElement>[];
+	let rootHeadings: TreeNode<HTMLElement>[] = [];
 
 	onMount(() => {
 		if (!content) {
 			console.error('Content element not available.');
 			return;
 		}
 
-		const headings = [...(content.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [])].map(
+		const headings = [...content.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(
 			(elem) => elem as HTMLElement
 		);
 		const root = {
@@ -41,10 +41,8 @@
 
 <div data-testid="toc" {...$$restProps}>
 	<div>
-		{#if rootHeadings}
-			{#each rootHeadings as root}
-				<TocTree tree={root} />
-			{/each}
-		{/if}
+		{#each rootHeadings as root}
+			<TocTree tree={root} />
+		{/each}
 	</div>
 </div>

src/components/layout/Footer.svelte

@@ -7,7 +7,7 @@
 	const currentYear = new Date().getFullYear();
 </script>
 
-<div data-testid="footer" {...$$restProps}>
+<div data-testid="footer" class="sticky top-[100vh] mt-20 bg-base-200 px-2 py-4 lg:mt-32">
 	<div class="flex flex-col">
 		<footer class="footer px-3 py-2 md:px-12 md:py-8">
 			<aside class="mx-auto items-center">

src/components/layout/Header.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Menu from '$components/icon/Menu.svelte';
-	import LanguageSelect from '$components/utility/LanguageSelect.svelte';
 	import ThemeSelect from '$components/utility/ThemeSelect.svelte';
 
 	const links = [
@@ -13,7 +12,7 @@
 	export let drawerOpen = false;
 </script>
 
-<div data-testid="header-wrapper" {...$$restProps}>
+<div data-testid="header-wrapper" class="bg-base-100">
 	<!-- Drawer container -->
 	<div class="drawer">
 		<input id="header-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
@@ -54,8 +53,7 @@
 
 				<!-- Utility buttons -->
 				<div class="navbar-end flex-1">
-					<ThemeSelect class="flex" />
-					<LanguageSelect class="hidden" />
+					<ThemeSelect />
 				</div>
 			</header>
 		</div>

src/components/utility/Search.svelte

@@ -44,7 +44,7 @@
 	});
 </script>
 
-<div data-testid="search" {...$$restProps}>
+<div data-testid="search" class="mb-2 w-64">
 	<div class="group relative flex items-center space-x-2">
 		<form class="w-full" autocomplete="off" on:submit|preventDefault role="search">
 			<div class="absolute ml-[11px] mt-[9px]">

src/components/utility/ThemeSelect.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <!-- BUG: False-positive uncovered branch; https://github.com/vitest-dev/vitest/issues/1893 -->
-<div data-testid="theme-select" {...$$restProps}>
+<div data-testid="theme-select" class="flex">
 	<label class="btn btn-circle btn-ghost swap swap-rotate" aria-label="Theme Selection">
 		<input
 			data-testid="toggle-input"

src/hooks.client.ts

@@ -1,3 +1,4 @@
+/* c8 ignore start */
 import { initEngine } from '$lib/search';
 import { initTheme } from '$lib/theme';
 import * as Sentry from '@sentry/sveltekit';
@@ -13,9 +14,6 @@ Sentry.init({
 });
 console.debug('Sentry initialized');
 
-// Array of initializer promises for testing
-export const initializers: Promise<unknown>[] = [];
-
 initTheme();
 
 // Initialize Mermaid for fancy diagrams
@@ -26,11 +24,10 @@ mermaid.initialize({
 });
 console.debug('Mermaid initialized');
 
-// Initialize search engine
-initializers.push(
-	initEngine().then((engine) => {
-		console.debug(`Search engine initialized, there is ${engine.termCount} terms in the index`);
-	})
-);
+initEngine().then((engine) => {
+	console.debug(`Search engine initialized, there is ${engine.termCount} terms in the index`);
+});
 
 export const handleError = Sentry.handleErrorWithSentry();
+
+/* c8 ignore stop */

src/hooks.server.ts

@@ -1,13 +1,14 @@
+/* c8 ignore start */
 // NOTE: Right now there's no server running but keep this for future
 //       Until, this configuration only will be used for development in local
 import * as Sentry from '@sentry/sveltekit';
 import { handleErrorWithSentry, sentryHandle } from '@sentry/sveltekit';
 import { sequence } from '@sveltejs/kit/hooks';
 
 Sentry.init({
-	dsn: import.meta.env.SENTRY_DSN,
+	dsn: import.meta.env?.SENTRY_DSN || '',
 	tracesSampleRate: 0.05,
-	environment: import.meta.env.MODE
+	environment: import.meta.env?.MODE
 });
 console.debug('Sentry initialized');
 
@@ -16,3 +17,5 @@ export const handle = sequence(sentryHandle());
 
 // If you have a custom error handler, pass it to `handleErrorWithSentry`
 export const handleError = handleErrorWithSentry();
+
+/* c8 ignore stop */

src/lib/search.ts

@@ -6,9 +6,11 @@ let miniSearch: MiniSearch | undefined = undefined;
 
 /**
  * Initialize search engine.
+ * @param posts POsts to index.
  * @returns Initialized search engine.
  */
-export async function initEngine(): Promise<MiniSearch> {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function initEngine(posts?: any[]): Promise<MiniSearch> {
 	console.debug('Initializing search engine');
 	miniSearch = new MiniSearch({
 		fields: ['slug', 'metadata.title', 'metadata.tags' /* FIXME: Sanitize content HTML tags */],
@@ -20,13 +22,17 @@ export async function initEngine(): Promise<MiniSearch> {
 	});
 
 	// TODO: Search for document contents
-	console.debug('Loading post documents');
-	const response = await fetch('/api/posts');
-	const data = await response.json();
-	const allPosts = z.array(Post).parse(data);
+	if (!posts) {
+		console.debug('Loading post documents');
+		const response = await fetch('/api/posts');
+		const data = await response.json();
+		const allPosts = z.array(Post).parse(data);
+
+		posts = allPosts;
+	}
 
 	console.debug('Indexing documents');
-	await miniSearch.addAllAsync(allPosts);
+	await miniSearch.addAllAsync(posts);
 
 	return miniSearch;
 }