test(frontend): more tests

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();
 });

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

control/frontend/src/components/DisplayObject.svelte

@@ -45,6 +45,7 @@
 </script>
 
 <div
+	data-testid="display"
 	role="button"
 	tabindex="0"
 	onkeydown={(e) => {

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

control/frontend/src/components/Notification.svelte

@@ -1,48 +1,57 @@
 <script lang="ts">
-    import { fade } from "svelte/transition";
+	import { fade } from 'svelte/transition';
-    import Button from "./Button.svelte";
+	import Button from './Button.svelte';
-	import { X } from "lucide-svelte";
+	import { X } from 'lucide-svelte';
-	import { notifications } from "../ts/stores/notification";
+	import { notifications } from '../ts/stores/notification';
-	import { get_shifted_color } from "../ts/stores/ui_behavior";
+	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">
+<div
-    {#each $notifications as n (n.id)}
+	data-testid="notification"
-        <div
+	class="fixed flex flex-col gap-2 {true
-            transition:fade={{ duration: 200 }}
+		? 'top-[41%]'
-            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}"
+		: 'top-2'} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50"
-            class:bg-red-900={n.type === "error"}
+>
-            class:bg-green-900={n.type === "success"}
+	{#each $notifications as n (n.id)}
-            class:bg-sky-900={n.type === "info"}
+		<div
-            style="--dur: {n.duration}ms"
+			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}"
-            <div class="flex flex-row justify-between">
+			class:bg-red-900={n.type === 'error'}
-                <span class="text-xl font-bold flex items-center">{n.title}</span>
+			class:bg-green-900={n.type === 'success'}
-                <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>
+			class:bg-sky-900={n.type === 'info'}
-            </div>
+			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="absolute inset-x-0 bottom-0 h-1 bg-white/25">
-                <div
+				<div class="block h-full w-full bg-white/80 origin-left animate-progress-bar"></div>
-                    class="block h-full w-full bg-white/80 origin-left animate-progress-bar"
+			</div>
-                ></div>
+		</div>
-            </div>
+	{/each}
-        </div>
-    {/each}
 </div>
 
 <style>
-    @keyframes progress {
+	@keyframes progress {
-        from {
+		from {
-            transform: scaleX(0);
+			transform: scaleX(0);
-        }
+		}
-        to {
+		to {
-            transform: scaleX(1);
+			transform: scaleX(1);
-        }
+		}
-    }
+	}
-    .animate-progress-bar {
+	.animate-progress-bar {
-        animation: progress var(--dur) linear forwards;
+		animation: progress var(--dur) linear forwards;
-        transform-origin: left;
+		transform-origin: left;
-    }
+	}
 </style>

control/frontend/src/components/TipTapInput.svelte

@@ -152,7 +152,7 @@
 {#each Object.values(color_states) as color_state}
 	<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
 {/each}
-
+
 <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"