chore: add tests

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: Test
+
+on:
+  pull_request:
+    branches: main
+
+jobs:
+  integration-tests:
+    name: Integration tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright dependencies
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npm test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results
+          path: test-results/

.gitignore

@@ -9,5 +9,6 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
+/test-results
 /ai/models
 /sessions/*.json

package.json

@@ -6,12 +6,14 @@
 		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
+		"test": "playwright test --trace on",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.43.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-cloudflare": "^4.2.1",
 		"@sveltejs/kit": "^2.0.0",

playwright.config.ts

@@ -6,7 +6,11 @@ const config: PlaywrightTestConfig = {
 		port: 4173
 	},
 	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+	timeout: 5000,
+	use: {
+		trace: 'on-first-retry'
+	}
 };
 
 export default config;

src/lib/ollama.ts

@@ -2,12 +2,46 @@ import { get } from "svelte/store";
 import type { Session } from "$lib/sessions";
 import { settingsStore } from "$lib/store";
 
-interface OllamaCompletionRequest {
-	model: string;
+type OllamaCompletionRequest = {
+	context: number[];
 	prompt: string;
+	model: string;
+}
+
+export type OllamaCompletionResponse = {
+	model: string;
+	created_at: string;
+	response: string;
+	done: boolean;
 	context: number[];
+	total_duration: number;
+	load_duration: number;
+	prompt_eval_count: number;
+	prompt_eval_duration: number;
+	eval_count: number;
+	eval_duration: number;
 }
 
+export type OllamaModel = {
+  name: string;
+  model: string;
+  modified_at: string;
+  size: number;
+  digest: string;
+  details: {
+    parent_model: string;
+    format: string;
+    family: string;
+    families: string[] | null;
+    parameter_size: string;
+    quantization_level: string;
+  };
+};
+
+export type OllamaTagResponse = {
+  models: OllamaModel[];
+};
+
 export async function ollamaGenerate(session: Session) {
 	const settings = get(settingsStore);
 	if (!settings) throw new Error('No Ollama server specified');
@@ -23,4 +57,4 @@ export async function ollamaGenerate(session: Session) {
 		headers: { 'Content-Type': 'text/event-stream' },
 		body: JSON.stringify(payload)
 	});
-}
+}

src/routes/+layout.svelte

@@ -2,6 +2,16 @@
 	import '../app.pcss';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import { onMount } from 'svelte';
+
+	let newSessionId: string;
+
+	function createNewSession() {
+		// Example: `zbvxte`
+		newSessionId = Math.random().toString(36).substring(2, 8);
+	}
+
+	onMount(createNewSession);
 </script>
 
 <div class="grid h-screen w-screen grid-cols-[240px,max-content,1fr] text-current">
@@ -12,7 +22,12 @@
 		</a>
 		<Separator />
 		<div class="p-6">
-			<Button class="w-full" variant="outline" href={`/${Math.random().toString(36).substring(2, 8)}`}>
+			<Button
+				class="w-full"
+				variant="outline"
+				href={`/${newSessionId}`}
+				on:click={() => createNewSession()}
+			>
 				New session
 			</Button>
 		</div>

src/routes/+page.svelte

@@ -9,9 +9,10 @@
 	import { slide } from 'svelte/transition';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import type { OllamaTagResponse } from '$lib/ollama';
 
 	export let ollamaURL: URL | null = null;
-	let modelList: ModelList | null = null;
+	let ollamaTagResponse: OllamaTagResponse | null = null;
 
 	const DETAULT_OLLAMA_SERVER = 'http://localhost:11434';
 	let ollamaServer = $settingsStore?.ollamaServer || DETAULT_OLLAMA_SERVER;
@@ -27,10 +28,6 @@
 	// key on the Ollama server input.
 	$: typeof ollamaServer === 'string' && getModelsList();
 
-	interface ModelList {
-		models: Model[];
-	}
-
 	interface Model {
 		name: string;
 		modified_at: string;
@@ -41,11 +38,11 @@
 	async function getModelsList(): Promise<void> {
 		try {
 			const response = await fetch(`${ollamaServer}/api/tags`);
-			const data = await response.json();
-			modelList = data;
+			const data = await response.json() as OllamaTagResponse;
+			ollamaTagResponse = data;
 			serverStatus = 'connected';
 		} catch {
-			modelList = null;
+			ollamaTagResponse = null;
 			serverStatus = 'disconnected';
 		}
 	}
@@ -116,7 +113,6 @@
 			</Label>
 			<Input bind:value={ollamaServer} placeholder={DETAULT_OLLAMA_SERVER} />
 
-			<!-- {#if ollamaURL} -->
 			{#if ollamaURL && serverStatus === 'disconnected'}
 				<div transition:slide class={_help}>
 					<p class={_pHelp}>
@@ -161,14 +157,14 @@
 			<Label class={_label}>Model</Label>
 			<Select.Root
 				bind:selected={ollamaModel}
-				disabled={!modelList || modelList.models.length === 0}
+				disabled={!ollamaTagResponse || ollamaTagResponse.models.length === 0}
 			>
 				<Select.Trigger>
 					<Select.Value placeholder={ollamaModel.value} />
 				</Select.Trigger>
 				<Select.Content>
-					{#if modelList}
-						{#each modelList.models as model}
+					{#if ollamaTagResponse}
+						{#each ollamaTagResponse.models as model}
 							<Select.Item value={model.name}>{model.name}</Select.Item>
 						{/each}
 					{:else}

src/routes/[id]/+page.svelte

@@ -4,7 +4,7 @@
 	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import Textarea from '$lib/components/ui/textarea/textarea.svelte';
 
-	import { ollamaGenerate } from '$lib/ollama';
+	import { ollamaGenerate, type OllamaCompletionResponse } from '$lib/ollama';
 	import { saveSession, type Message, type Session, loadSession } from '$lib/sessions';
 	import type { PageData } from './$types';
 	import Article from './Article.svelte';
@@ -77,7 +77,7 @@
 
 					const jsonLines = value.split('\n').filter((line) => line);
 					for (const line of jsonLines) {
-						const { response, context } = JSON.parse(line);
+						const { response, context } = JSON.parse(line) as OllamaCompletionResponse;
 						completion += response;
 						session.context = context;
 					}
@@ -99,10 +99,10 @@
 
 <div class="h-screen w-full flex flex-col">
 	<div class="space-y-1 px-6 py-4">
-		<p class="text-sm leading-none">
+		<p data-testid="session-id" class="text-sm leading-none">
 			Session <a class={_a} href={`/${session.id}`}>#{session.id}</a>
 		</p>
-		<p class="text-sm text-muted-foreground">{session.model}</p>
+		<p data-testid="model-name" class="text-sm text-muted-foreground">{session.model}</p>
 	</div>
 
 	<Separator />

src/routes/[id]/Article.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <article class="grid grid-cols-[max-content_auto] gap-x-6">
-	<p class="
+	<p data-testid="session-role" class="
 		text-xs
 		text-neutral-900
 		text-center