From 3fc67dadd9e607637aedf95dc8c0a201551977af Mon Sep 17 00:00:00 2001
From: 2mal3 <56305732+2mal3@users.noreply.github.com>
Date: Mon, 29 Dec 2025 18:21:30 +0100
Subject: [PATCH] test(frontend): more tests

---
 control/frontend/e2e/basic.test.ts            | 35 +++++++-
 control/frontend/playwright.config.ts         |  1 +
 .../src/components/DisplayObject.svelte       |  1 +
 .../src/components/InodeElement.svelte        |  2 +-
 .../src/components/Notification.svelte        | 87 ++++++++++---------
 .../src/components/TipTapInput.svelte         |  2 +-
 6 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/control/frontend/e2e/basic.test.ts b/control/frontend/e2e/basic.test.ts
index 751b624..b4751ab 100644
--- a/control/frontend/e2e/basic.test.ts
+++ b/control/frontend/e2e/basic.test.ts
@@ -2,5 +2,38 @@ import { expect, test } from '@playwright/test';
 
 test('page loads', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.locator('main')).toBeVisible();
+	await expect(page.getByText('PLG MuDiCS')).toBeVisible();
+});
+
+test('page loads without problems', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByText('PLG MuDiCS')).toBeVisible();
+	await expect(page.getByTestId('notification')).not.toBeVisible();
+});
+
+test('diplay click shows files', async ({ page }) => {
+	await page.goto('/');
+	await page.getByTestId('display').click();
+	await expect(page.getByTestId('inode').first()).toBeVisible();
+});
+
+test('show text', async ({ page }) => {
+	await page.goto('/');
+	await page.getByTestId('display').click();
+
+	const controlButton = page.getByText('Text anzeigen');
+	await expect(controlButton).toBeVisible();
+	await controlButton.click();
+
+	const textPopup = page.getByTestId('text-popup');
+	await expect(textPopup).toBeVisible();
+	const textArea = textPopup.getByRole('textbox');
+	await expect(textArea).toBeVisible();
+	await textArea.fill('Hello, world!');
+
+	const submitButton = textPopup.locator('button').filter({ hasText: 'Text anzeigen' });
+	await submitButton.click();
+	await expect(
+		page.locator('[data-testid="notification"]:not(:has-text("Fehler 500"))')
+	).not.toBeVisible();
 });
diff --git a/control/frontend/playwright.config.ts b/control/frontend/playwright.config.ts
index aa4ea48..9189563 100644
--- a/control/frontend/playwright.config.ts
+++ b/control/frontend/playwright.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
+	fullyParallel: true,
 	webServer: {
 		command: 'deno task build && deno task preview',
 		port: 4173
diff --git a/control/frontend/src/components/DisplayObject.svelte b/control/frontend/src/components/DisplayObject.svelte
index e097f8a..4af293a 100755
--- a/control/frontend/src/components/DisplayObject.svelte
+++ b/control/frontend/src/components/DisplayObject.svelte
@@ -45,6 +45,7 @@
 </script>
 
 <div
+	data-testid="display"
 	role="button"
 	tabindex="0"
 	onkeydown={(e) => {
diff --git a/control/frontend/src/components/InodeElement.svelte b/control/frontend/src/components/InodeElement.svelte
index 4bdf1ad..91c4ff8 100755
--- a/control/frontend/src/components/InodeElement.svelte
+++ b/control/frontend/src/components/InodeElement.svelte
@@ -92,7 +92,7 @@
 	}
 </script>
 
-<div class="flex flex-row h-{$current_height.file} w-full">
+<div data-testid="inode" class="flex flex-row h-{$current_height.file} w-full">
 	{#if !not_interactable}
 		<div class="h-{$current_height.file} aspect-square max-w-15 flex">
 			<Button
diff --git a/control/frontend/src/components/Notification.svelte b/control/frontend/src/components/Notification.svelte
index 7f93116..7cd4dc6 100644
--- a/control/frontend/src/components/Notification.svelte
+++ b/control/frontend/src/components/Notification.svelte
@@ -1,48 +1,57 @@
 <script lang="ts">
-    import { fade } from "svelte/transition";
-    import Button from "./Button.svelte";
-	import { X } from "lucide-svelte";
-	import { notifications } from "../ts/stores/notification";
-	import { get_shifted_color } from "../ts/stores/ui_behavior";
+	import { fade } from 'svelte/transition';
+	import Button from './Button.svelte';
+	import { X } from 'lucide-svelte';
+	import { notifications } from '../ts/stores/notification';
+	import { get_shifted_color } from '../ts/stores/ui_behavior';
 </script>
 
-<div class="fixed flex flex-col gap-2 {true ? "top-[41%]": "top-2"} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50">
-    {#each $notifications as n (n.id)}
-        <div
-            transition:fade={{ duration: 200 }}
-            class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
-            class:bg-red-900={n.type === "error"}
-            class:bg-green-900={n.type === "success"}
-            class:bg-sky-900={n.type === "info"}
-            style="--dur: {n.duration}ms"
-        >
-            <div class="flex flex-row justify-between">
-                <span class="text-xl font-bold flex items-center">{n.title}</span>
-                <Button click_function={() => notifications.remove(n.id)} className="p-2" bg="bg-stone-900/50" hover_bg="bg-stone-600/70" active_bg="bg-stone-500/80"><X/></Button>
-            </div>
+<div
+	data-testid="notification"
+	class="fixed flex flex-col gap-2 {true
+		? 'top-[41%]'
+		: 'top-2'} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50"
+>
+	{#each $notifications as n (n.id)}
+		<div
+			transition:fade={{ duration: 200 }}
+			class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
+			class:bg-red-900={n.type === 'error'}
+			class:bg-green-900={n.type === 'success'}
+			class:bg-sky-900={n.type === 'info'}
+			style="--dur: {n.duration}ms"
+		>
+			<div class="flex flex-row justify-between">
+				<span class="text-xl font-bold flex items-center">{n.title}</span>
+				<Button
+					click_function={() => notifications.remove(n.id)}
+					className="p-2"
+					bg="bg-stone-900/50"
+					hover_bg="bg-stone-600/70"
+					active_bg="bg-stone-500/80"><X /></Button
+				>
+			</div>
 
-            <span class="whitespace-break-spaces">{n.message}</span>
+			<span class="whitespace-break-spaces">{n.message}</span>
 
-            <div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
-                <div
-                    class="block h-full w-full bg-white/80 origin-left animate-progress-bar"
-                ></div>
-            </div>
-        </div>
-    {/each}
+			<div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
+				<div class="block h-full w-full bg-white/80 origin-left animate-progress-bar"></div>
+			</div>
+		</div>
+	{/each}
 </div>
 
 <style>
-    @keyframes progress {
-        from {
-            transform: scaleX(0);
-        }
-        to {
-            transform: scaleX(1);
-        }
-    }
-    .animate-progress-bar {
-        animation: progress var(--dur) linear forwards;
-        transform-origin: left;
-    }
+	@keyframes progress {
+		from {
+			transform: scaleX(0);
+		}
+		to {
+			transform: scaleX(1);
+		}
+	}
+	.animate-progress-bar {
+		animation: progress var(--dur) linear forwards;
+		transform-origin: left;
+	}
 </style>
diff --git a/control/frontend/src/components/TipTapInput.svelte b/control/frontend/src/components/TipTapInput.svelte
index 2862943..6c0260b 100644
--- a/control/frontend/src/components/TipTapInput.svelte
+++ b/control/frontend/src/components/TipTapInput.svelte
@@ -152,7 +152,7 @@
 	<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
 {/each}
 
-<div class="flex flex-row gap-2 size-full">
+<div data-testid="text-popup" class="flex flex-row gap-2 size-full">
 	<div
 		class="rounded-xl size-full flex-shrink min-w-0 flex"
 		style="background-color: {color_states.bg.value};"