Added some basic login tests that actually works

Author: initialxy

.github/workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [ main ]
   pull_request:
-    branches: [ main, master ]
+    branches: [ main ]
 jobs:
   test:
     timeout-minutes: 60

app/components/LoginForm.vue

@@ -1,8 +1,9 @@
 <template>
-  <UCard variant="subtle" data-testid="login_card">
+  <UCard variant="subtle">
     <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
       <UFormField name="username" v-if="!isAnyUserSelected">
         <UInput
+          data-testid="username"
           placeholder="Who?"
           type="text"
           v-model="state.username"
@@ -32,6 +33,7 @@
 
       <UFormField name="password">
         <UInput
+          data-testid="password"
           placeholder="Password"
           v-model="state.password"
           type="password"
@@ -40,6 +42,7 @@
       </UFormField>
       <div>
         <UButton
+          data-testid="login_button"
           type="submit"
           icon="i-lucide-log-in"
           size="md"

stores/index.ts

@@ -40,7 +40,7 @@ export const useStore = defineStore('main', () => {
     await clearSession()
   }
 
-  const useRememberedUsers = () =>
+  const useRememberedUsers = (): Ref<RememberedUser[]> =>
     useLocalStorage<RememberedUser[]>('rememberedUsers', [])
 
   return {

test/playwright/login.test.ts

@@ -1,14 +1,38 @@
 import { expect, test } from '@nuxt/test-utils/playwright'
-import { resetDb, createAuthTestData } from '../utils/index'
+import { resetDb, createAuthTestData, TEST_PARENT_USER } from '../utils/index'
+
+const TIMEOUT = 10000 // 10 seconds
 
 test.describe('Login page', () => {
   test.beforeEach(async ({ page, goto }) => {
+    page.setDefaultNavigationTimeout(TIMEOUT)
+    page.setDefaultTimeout(TIMEOUT)
     await resetDb()
     await createAuthTestData()
   })
 
-  test('displays the login card', async ({ page, goto }) => {
+  test('login form is shown', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+    await expect(page.getByTestId('username')).toBeVisible()
+    await expect(page.getByTestId('password')).toBeVisible()
+    await expect(page.getByTestId('login_button')).toBeVisible()
+  })
+
+  test('login with valid user credentials', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+    await page.getByTestId('username').fill(TEST_PARENT_USER.username)
+    await page.getByTestId('password').fill(TEST_PARENT_USER.password)
+    await page.getByTestId('login_button').click()
+    await page.waitForURL('**/dashboard')
+    expect(page.url()).toMatch(/\/dashboard$/)
+  })
+
+  test('login with invalid user credentials', async ({ page, goto }) => {
     await goto('/', { waitUntil: 'hydration' })
-    await expect(page.getByTestId('login_card')).toBeVisible()
+    await page.getByTestId('username').fill(TEST_PARENT_USER.username)
+    await page.getByTestId('password').fill('wrongpassword')
+    await page.getByTestId('login_button').click()
+    await page.waitForSelector('li[role="alert"]') // wait for toast to pop up
+    expect(page.url()).toMatch(/\/login$/)
   })
 })

test/utils/index.ts

@@ -90,6 +90,7 @@ export async function setTestUserPoints(username: string, points: number) {
     username,
   ])
 }
+
 export async function getSessionCookie(username: string, password: string) {
   const response = await fetch('/api/auth/login', {
     method: 'POST',