refactor(KitFallback): Simplify and add testing

Author: webJose

src/lib/KitFallback.server.test.ts

@@ -0,0 +1,36 @@
+import { createRawSnippet } from "svelte";
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
+import { render } from "svelte/server";
+import { init } from "./init.js";
+
+// @ts-expect-error Not all properties are mocked.
+vi.mock(import("$app/state"), () => {
+    return {
+        page: {
+            url: new URL("http://localhost/"),
+            state: { path: "/", hash: {} },
+        },
+    };
+});
+
+describe("KitFallback", () => {
+    let cleanup: () => void;
+    beforeAll(() => {
+        cleanup = init();
+    });
+    afterAll(() => {
+        cleanup();
+    });
+
+    test("Should not render when not in browser environment.", async () => {
+        const KitFallbackTester = (await import("./KitFallbackTester.test.svelte")).default;
+        const testId = "evidence-01";
+        const children = createRawSnippet(() => ({
+            render() {
+                return `<span data-testid="${testId}">Here</span>`;
+            },
+        }));
+        const c = render(KitFallbackTester, { props: { children } });
+        expect(c.body).not.toContain(testId);
+    });
+});

src/lib/KitFallback.svelte

@@ -3,7 +3,9 @@
     import { Fallback } from '@svelte-router/core';
     import type { ComponentProps } from 'svelte';
 
-    let { when, ...restProps }: ComponentProps<typeof Fallback> = $props();
+    let { ...restProps }: ComponentProps<typeof Fallback> = $props();
 </script>
 
-<Fallback when={(rs, noMatches) => browser && (when?.(rs, noMatches) || (!when && noMatches))} {...restProps} />
+{#if browser}
+    <Fallback {...restProps} />
+{/if}

src/lib/KitFallback.test.ts

@@ -0,0 +1,36 @@
+import { createRawSnippet } from "svelte";
+import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from "vitest";
+import { render } from "vitest-browser-svelte";
+import { init } from "./init.js";
+
+// @ts-expect-error Not all properties are mocked.
+vi.mock(import("$app/state"), () => {
+    return {
+        page: {
+            url: new URL("http://localhost/"),
+            state: { path: "/", hash: {} },
+        },
+    };
+});
+
+describe("KitFallback", () => {
+    let cleanup: () => void;
+    beforeAll(() => {
+        cleanup = init();
+    });
+    afterAll(() => {
+        cleanup();
+    });
+
+    test("Should render when in browser environment.", async () => {
+        const KitFallbackTester = (await import("./KitFallbackTester.test.svelte")).default;
+        const testId = "evidence-01";
+        const children = createRawSnippet(() => ({
+            render() {
+                return `<span data-testid="${testId}">Here</span>`;
+            },
+        }));
+        const { getByTestId } = render(KitFallbackTester, { children });
+        expect(getByTestId(testId).element()).toBeDefined();
+    });
+});

src/lib/KitFallbackTester.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { Router } from "@svelte-router/core";
+    import KitFallback from "./KitFallback.svelte";
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        children?: Snippet;
+    };
+
+    let { children }: Props = $props();
+</script>
+
+<Router>
+    <KitFallback>
+        {@render children?.()}
+    </KitFallback>
+</Router>

vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vitest/config';
 import { sveltekit } from '@sveltejs/kit/vite';
-import { playwright, PlaywrightBrowserProvider } from '@vitest/browser-playwright';
+import { playwright } from '@vitest/browser-playwright';
 
 export default defineConfig({
 	plugins: [sveltekit()],
@@ -9,6 +9,7 @@ export default defineConfig({
 	},
 	test: {
 		expect: { requireAssertions: true },
+		includeTaskLocation: true,
 		projects: [
 			{
 				extends: './vite.config.ts',
@@ -17,10 +18,10 @@ export default defineConfig({
 					browser: {
 						enabled: true,
 						provider: playwright(),
-						instances: [{ browser: 'firefox' }]
+						instances: [{ browser: 'firefox' }, { browser: 'chromium' }]
 					},
-					include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
-					exclude: ['src/lib/server/**'],
+					include: ['src/**/*.svelte.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.{js,ts}'],
+					exclude: ['src/lib/server/**', 'src/**/*.server.{test,spec}.{js,ts}'],
 					setupFiles: ['./vitest-setup-client.ts']
 				}
 			},
@@ -29,7 +30,7 @@ export default defineConfig({
 				test: {
 					name: 'server',
 					environment: 'node',
-					include: ['src/**/*.{test,spec}.{js,ts}'],
+					include: ['src/**/*.server.{test,spec}.{js,ts}'],
 					exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
 				}
 			}