feat: add Playwright creation test, toast, search component and trigger toast on create

Author: Wacken2012

e2e/notes.spec.ts

@@ -14,3 +14,11 @@ test('Note editor is accessible', async ({ page }) => {
   await expect(page.locator('label[for="title"]')).toBeVisible()
   await expect(page.locator('#title')).toBeVisible()
 })
+
+test('Note creation works', async ({ page }) => {
+  await page.goto('/create')
+  await page.fill('#title', 'Neue Testnotiz')
+  await page.fill('#content', 'Dies ist ein Testinhalt')
+  await page.click('button[type="submit"]')
+  await expect(page).toHaveURL(/\/notes\/\d+/)
+})

src/components/NoteCreatedToast.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="visible" role="status" class="toast">Notiz erfolgreich erstellt!</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const visible = ref(false)
+
+function showToast() {
+  visible.value = true
+  setTimeout(() => visible.value = false, 3000)
+}
+
+defineExpose({ showToast })
+</script>
+
+<style scoped>
+.toast { background: #222; color: #fff; padding: 0.5rem 1rem; border-radius: 6px }
+</style>

src/components/NoteSearch.vue

@@ -0,0 +1,16 @@
+<template>
+  <input v-model="query" placeholder="Notiz suchen..." />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useNoteStore } from '../stores/noteStore'
+
+const query = ref('')
+const store = useNoteStore()
+const filteredNotes = computed(() =>
+  store.notes.filter((n: any) => n.title.includes(query.value) || n.content.includes(query.value))
+)
+
+defineExpose({ filteredNotes })
+</script>

src/views/NoteCreate.vue

@@ -8,23 +8,27 @@
 
     <button type="submit">Neue Notiz erstellen</button>
   </form>
+  <NoteCreatedToast ref="toastRef" />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNoteStore } from '../stores/noteStore'
+import NoteCreatedToast from '../components/NoteCreatedToast.vue'
 
 const store = useNoteStore()
 const router = useRouter()
 const title = ref('')
 const content = ref('')
+const toastRef = ref<any>(null)
 
 function create() {
   const id = store.createNote(title.value, content.value)
   title.value = ''
   content.value = ''
   // optimistic redirect to newly created note
+  toastRef.value?.showToast()
   router.push(`/notes/${id}`)
 }
 </script>