From 83ad0a50f5deaac78868c45d5ca05ae8dddb797b Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Tue, 5 Aug 2025 20:22:46 +0200
Subject: [PATCH] add first simple settings tests

---
 app/components/settings/Categories.vue       |  4 +-
 app/components/settings/SettingsSheet.vue    |  1 +
 app/components/settings/Tags.vue             |  4 +-
 app/components/settings/labels/AddLabel.vue  |  1 +
 app/components/settings/labels/EditLabel.vue |  4 ++
 tests/settings.test.ts                       | 58 ++++++++++++++++++++
 6 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/app/components/settings/Categories.vue b/app/components/settings/Categories.vue
index 0c76eb9..2bb42af 100644
--- a/app/components/settings/Categories.vue
+++ b/app/components/settings/Categories.vue
@@ -27,10 +27,10 @@ function isUsed(category: LabelType): boolean {
 </script>
 
 <template>
-  <div class="p-1 pt-0">
+  <div data-testid="add-category" class="p-1 pt-0">
     <h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
     <AddLabel @add="onAddCategory" />
-    <div>
+    <div data-testid="category-list">
       <div
         v-for="category in categoryStore.data"
         :key="category.uuid"
diff --git a/app/components/settings/SettingsSheet.vue b/app/components/settings/SettingsSheet.vue
index 813752d..0128ae1 100644
--- a/app/components/settings/SettingsSheet.vue
+++ b/app/components/settings/SettingsSheet.vue
@@ -40,6 +40,7 @@ function onLanguageChange(newLocale: string) {
         <div class="p-1 pt-0">
           <h2 class="text-muted-text text-lg">{{ t("languages") }}</h2>
           <select
+            data-testid="language-select"
             class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
             :value="locale"
             @change="
diff --git a/app/components/settings/Tags.vue b/app/components/settings/Tags.vue
index 293fe3d..b23492f 100644
--- a/app/components/settings/Tags.vue
+++ b/app/components/settings/Tags.vue
@@ -27,10 +27,10 @@ function isUsed(tag: LabelType): boolean {
 </script>
 
 <template>
-  <div class="p-1 pt-0">
+  <div data-testid="add-tag" class="p-1 pt-0">
     <h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
     <AddLabel @add="onAddTag" />
-    <div>
+    <div data-testid="tag-list">
       <div
         v-for="tag in tagStore.data"
         :key="tag.uuid"
diff --git a/app/components/settings/labels/AddLabel.vue b/app/components/settings/labels/AddLabel.vue
index c3aaf3a..9b3c952 100644
--- a/app/components/settings/labels/AddLabel.vue
+++ b/app/components/settings/labels/AddLabel.vue
@@ -19,6 +19,7 @@ function onAddTag(label: Label) {
 <template>
   <EditLabel :default-label="defaultLabel" @save="onAddTag">
     <div
+      data-testid="add-label-button"
       class="border-secondary flex cursor-pointer items-center gap-1 rounded border-1 px-1"
     >
       <Icon name="material-symbols:add-2-rounded" size="20" />
diff --git a/app/components/settings/labels/EditLabel.vue b/app/components/settings/labels/EditLabel.vue
index e27273c..804d782 100644
--- a/app/components/settings/labels/EditLabel.vue
+++ b/app/components/settings/labels/EditLabel.vue
@@ -56,12 +56,14 @@ function onClick() {
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
+        data-testid="edit-label-modal"
         class="bg-popover z-50 mx-2 flex flex-col gap-2 rounded-lg p-2 drop-shadow-lg/30"
         side="top"
         :side-offset="5"
       >
         <input
           v-model="label.name"
+          data-testid="edit-label-name-input"
           class="border-secondary-popover h-8 w-36 rounded border-1 pl-1"
           :placeholder="t('name')"
           type="text"
@@ -79,11 +81,13 @@ function onClick() {
           </button>
           <input
             v-model="label.color"
+            data-testid="edit-label-color-input"
             class="h-full w-full cursor-pointer rounded-sm"
             type="color"
           />
         </div>
         <button
+          data-testid="edit-label-save-button"
           class="bg-primary hover:bg-primary-hover border-secondary-popover disabled:bg-popover flex h-8 cursor-pointer items-center justify-center rounded border-1 px-0.5 transition-colors"
           :disabled="!isValid"
           @click="onClick"
diff --git a/tests/settings.test.ts b/tests/settings.test.ts
index f64c9d3..1a736c5 100644
--- a/tests/settings.test.ts
+++ b/tests/settings.test.ts
@@ -9,4 +9,62 @@ test.describe("settings", () => {
     await page.getByTestId("settings-button").click();
     await expect(page.getByTestId("settings-sheet").first()).toBeVisible();
   });
+
+  test("can switch language", async ({ page, goto }) => {
+    await setAuthCookie(page);
+    await goto("/", { waitUntil: "hydration" });
+    await page.getByTestId("settings-button").click();
+
+    await expect(page).toHaveURL("/en");
+
+    await page.getByTestId("language-select").selectOption("de");
+
+    await expect(page).toHaveURL("/de");
+  });
+
+  test("can add category", async ({ page, goto }) => {
+    await setAuthCookie(page);
+    await goto("/", { waitUntil: "hydration" });
+    await page.getByTestId("settings-button").click();
+
+    const addCategory = page.getByTestId("add-category");
+    await addCategory.getByTestId("add-label-button").click();
+
+    await expect(page.getByTestId("edit-label-modal").first()).toBeVisible();
+
+    await page.getByTestId("edit-label-name-input").fill("new Category");
+    await page.getByTestId("edit-label-color-input").fill("#ff0000");
+
+    await page.getByTestId("edit-label-save-button").click();
+
+    await expect(
+      page.getByTestId("edit-label-modal").first(),
+    ).not.toBeVisible();
+
+    await expect(page.getByTestId("category-list").first()).toContainText(
+      "new Category",
+    );
+  });
+
+  test("can add tag", async ({ page, goto }) => {
+    await setAuthCookie(page);
+    await goto("/", { waitUntil: "hydration" });
+    await page.getByTestId("settings-button").click();
+
+    const addTag = page.getByTestId("add-tag");
+    await addTag.getByTestId("add-label-button").click();
+
+    await expect(page.getByTestId("edit-label-modal").first()).toBeVisible();
+
+    await page.getByTestId("edit-label-name-input").fill("new Tag");
+    await page.getByTestId("edit-label-color-input").fill("#ff0000");
+
+    await page.getByTestId("edit-label-save-button").click();
+
+    await expect(
+      page.getByTestId("edit-label-modal").first(),
+    ).not.toBeVisible();
+
+    await expect(page.getByTestId("tag-list").first()).toContainText("new Tag");
+  });
 });
-- 
2.54.0