Add basic playwright tests for tasks and rewards

Author: initialxy

.github/workflows/playwright.yml

@@ -18,7 +18,7 @@ jobs:
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Run Playwright tests
-      run: npx dotenv -e .env.test playwright test --workers 1
+      run: npx dotenv -e .env.test playwright test
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:

app/components/ActionEntityModal.vue

@@ -14,6 +14,7 @@
             type="text"
             placeholder="Description"
             class="w-full"
+            data-testid="description-input"
           />
         </UFormField>
         <UFormField name="points">
@@ -22,6 +23,7 @@
             type="number"
             placeholder="Points"
             class="w-full"
+            data-testid="points-input"
           />
         </UFormField>
         <UFormField name="recurrenceType">
@@ -42,6 +44,7 @@
           color="primary"
           variant="solid"
           class="w-full"
+          data-testid="submit-item-button"
         >
           {{ submitButtonText }}
         </UButton>

app/components/AppAction.vue

@@ -21,6 +21,7 @@
           block
           class="w-10 h-10 rounded-full flex"
           :ui="{ leadingIcon: 'text-lg' }"
+          data-testid="create-task-button"
         />
       </div>
     </Transition>
@@ -45,6 +46,7 @@
           block
           class="w-10 h-10 rounded-full flex mt-2"
           :ui="{ leadingIcon: 'text-lg' }"
+          data-testid="create-reward-button"
         />
       </div>
     </Transition>
@@ -67,6 +69,7 @@
           block
           class="w-10 h-10 rounded-full flex"
           :ui="{ leadingIcon: 'text-lg' }"
+          data-testid="app-action-button"
         />
       </div>
     </Transition>

app/components/RewardList.vue

@@ -14,7 +14,10 @@
       }"
     >
       <div class="flex justify-start items-start space-x-2">
-        <p class="truncate text-indigo-700 dark:text-indigo-200 grow min-w-0">
+        <p
+          class="truncate text-indigo-700 dark:text-indigo-200 grow min-w-0"
+          data-testid="reward-description"
+        >
           {{ reward.description }}
         </p>
         <UButton
@@ -24,6 +27,7 @@
           color="error"
           variant="soft"
           @click="confirmDelete(reward)"
+          data-testid="delete-reward-button"
         />
       </div>
       <div class="flex justify-start items-start mt-2 space-x-2">
@@ -57,6 +61,7 @@
             color="error"
             variant="soft"
             @click="emit('reject', reward)"
+            data-testid="reject-reward-button"
           />
           <UButton
             v-if="props.mode === 'parent' || !reward.is_redemption_requested"
@@ -65,6 +70,7 @@
             color="success"
             variant="soft"
             @click="emit('complete', reward)"
+            data-testid="complete-reward-button"
           />
           <UButton
             v-if="props.mode === 'parent'"
@@ -73,6 +79,7 @@
             color="neutral"
             variant="soft"
             @click="emit('edit', reward)"
+            data-testid="edit-reward-button"
           />
         </div>
       </div>
@@ -88,7 +95,12 @@
         <p>Are you sure you want to delete this reward?</p>
       </template>
       <template #footer>
-        <UButton @click="deleteConfirmed" color="error" icon="i-lucide-trash">
+        <UButton
+          @click="deleteConfirmed"
+          color="error"
+          icon="i-lucide-trash"
+          data-testid="confirm-delete-button"
+        >
           Delete
         </UButton>
       </template>

app/components/TaskList.vue

@@ -14,7 +14,10 @@
       }"
     >
       <div class="flex justify-start items-start space-x-2">
-        <p class="truncate text-cyan-700 dark:text-cyan-200 grow min-w-0">
+        <p
+          class="truncate text-cyan-700 dark:text-cyan-200 grow min-w-0"
+          data-testid="task-description"
+        >
           {{ task.description }}
         </p>
         <UButton
@@ -23,6 +26,7 @@
           icon="i-lucide-x"
           color="error"
           variant="soft"
+          data-testid="delete-task-button"
           @click="confirmDelete(task)"
         />
       </div>
@@ -56,6 +60,7 @@
             icon="i-lucide-thumbs-down"
             color="error"
             variant="soft"
+            data-testid="reject-task-button"
             @click="emit('reject', task)"
           />
           <UButton
@@ -64,6 +69,7 @@
             icon="i-lucide-thumbs-up"
             color="success"
             variant="soft"
+            data-testid="complete-task-button"
             @click="emit('complete', task)"
           />
           <UButton
@@ -72,6 +78,7 @@
             icon="i-lucide-pencil"
             color="neutral"
             variant="soft"
+            data-testid="edit-task-button"
             @click="emit('edit', task)"
           />
         </div>
@@ -88,7 +95,12 @@
         <p>Are you sure you want to delete this task?</p>
       </template>
       <template #footer>
-        <UButton @click="deleteConfirmed" color="error" icon="i-lucide-trash">
+        <UButton
+          :data-testid="'confirm-delete-button'"
+          @click="deleteConfirmed"
+          color="error"
+          icon="i-lucide-trash"
+        >
           Delete
         </UButton>
       </template>

app/pages/child/[id].vue

@@ -6,7 +6,10 @@
           <span class="text-secondary">{{ child?.user?.username }}</span>
           <span class="text-neutral-500"> earned</span>
         </h1>
-        <div class="text-6xl font-extrabold text-primary text-center mb-4">
+        <div
+          class="text-6xl font-extrabold text-primary text-center mb-4"
+          data-testid="child-points-display"
+        >
           {{ child?.user?.points || 0 }}
           <span class="text-neutral-500 text-base absolute ml-2 mt-8">pts</span>
         </div>

package.json

@@ -11,8 +11,8 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "e2e": "vitest run --no-file-parallelism",
-    "playwright": "dotenv -e .env.test playwright test --workers 1",
-    "test": "vitest run --no-file-parallelism && dotenv -e .env.test playwright test --workers 1",
+    "playwright": "dotenv -e .env.test playwright test",
+    "test": "vitest run --no-file-parallelism && dotenv -e .env.test playwright test",
     "format": "prettier --write \"{app/components,app/composables,app/layouts,app/middleware,app/pages,app/utils,server,stores,shared,test}/**/*.{ts,vue}\"",
     "tsc": "tsc --noEmit",
     "admin": "tsx ./server/database/admin.ts"

playwright.config.ts

@@ -25,8 +25,7 @@ export default defineConfig<ConfigOptions>({
   forbidOnly: !!isCI,
   /* Retry on CI only */
   retries: isCI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: isCI ? 1 : undefined,
+  workers: 1,
   timeout: isWindows ? 60000 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',