From cbe42271875d22a3ccc865fed5121b4ae0eee87e Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Thu, 7 Aug 2025 19:48:14 +0200
Subject: [PATCH] add simple newTodo tests

Signed-off-by: tobinio <Tobias.frischmann1@gmail.com>
---
 app/components/edit/NewTodoSheet.vue |  3 ++
 app/components/edit/NoteSelect.vue   |  1 +
 app/components/edit/TitleSelect.vue  |  1 +
 app/components/nav/VerticalNav.vue   |  1 +
 app/components/todo/Todo.vue         |  4 +-
 app/components/todo/Todos.vue        |  2 +-
 playwright.config.ts                 |  2 +-
 tests/newTodo.test.ts                | 65 ++++++++++++++++++++++++++++
 8 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 tests/newTodo.test.ts

diff --git a/app/components/edit/NewTodoSheet.vue b/app/components/edit/NewTodoSheet.vue
index b73588d..4df733a 100644
--- a/app/components/edit/NewTodoSheet.vue
+++ b/app/components/edit/NewTodoSheet.vue
@@ -64,6 +64,7 @@ const isValid = computed(() => {
 <template>
   <Sheet :is-open="isOpen" title="New Todo Sheet" @close="close">
     <form
+      data-testid="new-todo-sheet"
       class="flex h-full flex-col justify-between"
       @submit.prevent="onSubmitForm"
     >
@@ -77,6 +78,7 @@ const isValid = computed(() => {
       <div class="flex h-10 gap-1">
         <button
           type="button"
+          data-testid="submit-new-todo-button"
           :disabled="!isValid"
           class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex flex-1 cursor-pointer items-center justify-center rounded transition-colors"
           @click="onAddTodo()"
@@ -85,6 +87,7 @@ const isValid = computed(() => {
         </button>
         <button
           type="button"
+          data-testid="submit-another-new-todo-button"
           :disabled="!isValid"
           class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex w-min cursor-pointer items-center justify-center gap-1 rounded px-2 text-sm transition-colors"
           @click="onAddTodoNoClose"
diff --git a/app/components/edit/NoteSelect.vue b/app/components/edit/NoteSelect.vue
index 0fca846..94382e5 100644
--- a/app/components/edit/NoteSelect.vue
+++ b/app/components/edit/NoteSelect.vue
@@ -32,6 +32,7 @@ onMounted(async () => {
     <textarea
       v-if="isEditing"
       v-model="note"
+      data-testid="note-input"
       class="border-secondary h-full w-full resize-none rounded border-1 pl-1"
       :placeholder="t('note')"
     />
diff --git a/app/components/edit/TitleSelect.vue b/app/components/edit/TitleSelect.vue
index 9887166..c9b908b 100644
--- a/app/components/edit/TitleSelect.vue
+++ b/app/components/edit/TitleSelect.vue
@@ -6,6 +6,7 @@ const title = defineModel<string>("title");
 <template>
   <input
     v-model="title"
+    data-testid="title-input"
     :placeholder="t('title')"
     class="border-secondary rounded border-2 pl-1 text-xl"
   />
diff --git a/app/components/nav/VerticalNav.vue b/app/components/nav/VerticalNav.vue
index ed266c1..dbe81ea 100644
--- a/app/components/nav/VerticalNav.vue
+++ b/app/components/nav/VerticalNav.vue
@@ -39,6 +39,7 @@ const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
     </div>
 
     <button
+      data-testid="new-todo-button"
       class="bg-primary hover:bg-primary-hover relative m-1 flex aspect-square h-10 cursor-pointer items-center justify-center rounded transition-colors"
       @click="isNewSheetOpen = true"
     >
diff --git a/app/components/todo/Todo.vue b/app/components/todo/Todo.vue
index 547214d..6456e52 100644
--- a/app/components/todo/Todo.vue
+++ b/app/components/todo/Todo.vue
@@ -53,7 +53,7 @@ function onCategoryPress(category: LabelType) {
 </script>
 
 <template>
-  <div class="relative flex flex-col justify-center">
+  <div data-testid="todo" class="relative flex flex-col justify-center">
     <div class="flex items-center gap-1 pt-2 pb-1">
       <button class="cursor-pointer" :disabled="checking" @click="onCheck()">
         <div
@@ -78,7 +78,7 @@ function onCategoryPress(category: LabelType) {
         >
           <icon
             v-if="data.note ?? '' != ''"
-            class=""
+            data-testid="note-icon"
             size="20"
             name="material-symbols:note-outline"
           />
diff --git a/app/components/todo/Todos.vue b/app/components/todo/Todos.vue
index 96a001e..abcf728 100644
--- a/app/components/todo/Todos.vue
+++ b/app/components/todo/Todos.vue
@@ -24,7 +24,7 @@ function dropHandler(event: DragEvent, uuid: UUID) {
 </script>
 
 <template>
-  <div class="flex justify-center">
+  <div class="flex justify-center" data-testid="todos-container">
     <div
       class="max-h-[calc(100dvh-5.75rem)] w-dvw max-w-200 overflow-scroll px-1 md:max-h-[calc(100dvh-2.5rem)]"
     >
diff --git a/playwright.config.ts b/playwright.config.ts
index b09deee..9419d4c 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -15,7 +15,7 @@ export default defineConfig<ConfigOptions>({
   fullyParallel: true,
   forbidOnly: !!isCI,
   retries: isCI ? 2 : 0,
-  workers: isCI ? 1 : undefined,
+  workers: isCI ? 1 : 4,
   reporter: "html",
   use: {
     trace: "on-first-retry",
diff --git a/tests/newTodo.test.ts b/tests/newTodo.test.ts
new file mode 100644
index 0000000..5966031
--- /dev/null
+++ b/tests/newTodo.test.ts
@@ -0,0 +1,65 @@
+import { test, expect } from "@nuxt/test-utils/playwright";
+import { setAuthCookie } from "./utils";
+
+test("can add todo", async ({ page, goto }) => {
+  await setAuthCookie(page);
+  await goto("/", { waitUntil: "hydration" });
+
+  await page.getByTestId("new-todo-button").click();
+  await expect(page.getByTestId("new-todo-sheet").first()).toBeVisible();
+
+  await page.getByTestId("title-input").fill("new Todo");
+
+  await page.getByTestId("submit-new-todo-button").click();
+
+  // check todo creation
+  await expect(page.getByTestId("todos-container").first()).toBeVisible();
+  await expect(page.getByTestId("todos-container").first()).toHaveText(
+    "new Todo",
+  );
+});
+
+test("can add another todo", async ({ page, goto }) => {
+  await setAuthCookie(page);
+  await goto("/", { waitUntil: "hydration" });
+
+  await page.getByTestId("new-todo-button").click();
+  await expect(page.getByTestId("new-todo-sheet").first()).toBeVisible();
+
+  await page.getByTestId("title-input").fill("new Todo");
+
+  await page.getByTestId("submit-another-new-todo-button").click();
+
+  await expect(page.getByTestId("new-todo-sheet").first()).toBeVisible();
+  await expect(page.getByTestId("title-input").first()).toBeEmpty();
+
+  await page.getByTestId("title-input").fill("new Todo 2");
+
+  await page.getByTestId("submit-new-todo-button").click();
+
+  // check todo creation
+  const container = page.getByTestId("todos-container");
+  await expect(container.first()).toBeVisible();
+  await expect(container.getByTestId("todo").nth(0)).toHaveText("new Todo");
+  await expect(container.getByTestId("todo").nth(1)).toHaveText("new Todo 2");
+});
+
+test("can add todo with notes", async ({ page, goto }) => {
+  await setAuthCookie(page);
+  await goto("/", { waitUntil: "hydration" });
+
+  await page.getByTestId("new-todo-button").click();
+  await expect(page.getByTestId("new-todo-sheet").first()).toBeVisible();
+
+  await page.getByTestId("title-input").fill("new Todo");
+  await page.getByTestId("note-input").fill("some notes");
+
+  await page.getByTestId("submit-new-todo-button").click();
+
+  // check todo creation
+  await expect(page.getByTestId("todos-container")).toBeVisible();
+
+  const todo = page.getByTestId("todos-container").getByTestId("todo");
+  await expect(todo).toHaveText("new Todo");
+  await expect(todo.getByTestId("note-icon")).toBeVisible();
+});
-- 
2.51.2