test(auth): fix e2e tests

package.json

@@ -16,6 +16,7 @@
     "lint:ci": "eslint --output-file eslint_report.json --format json ."
   },
   "dependencies": {
+    "@playwright/test": "^1.41.2",
     "@vueuse/nuxt": "^10.7.2",
     "bcryptjs": "^2.4.3",
     "jsonwebtoken": "^9.0.2",

pages/#.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { z } from 'zod'
 import { userDTO } from '~/db/dto/user.dto'
 
 definePageMeta({
@@ -21,7 +22,7 @@ const formErrors = reactive({
 
 function validate() {
   const userDTOWithPasswordConfirmation = userDTO.extend({
-    passwordConfirmation: userDTO.shape.password.refine((confirmation) => {
+    passwordConfirmation: z.string().refine((confirmation) => {
       return confirmation === formData.password
     }, { message: 'Passwords don\'t match' }),
   })

tests/e2e/auth.e2e.spec.ts

@@ -1,9 +1,11 @@
 import { afterAll, afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { expect as expectE2E } from '@playwright/test'
 import { createPage, setup } from '@nuxt/test-utils/e2e'
 import { consola } from 'consola'
 import { testNuxtConfig } from '../utils/nuxt_config'
 import { MemoryDb } from '../utils/db'
 import { UserRepository } from '~/db/repositories/user.repo'
+import { DbClient } from '~/db/client'
 
 const db = new MemoryDb()
 
@@ -12,7 +14,7 @@ beforeEach(() => {
 })
 
 afterEach(async () => {
-  await db.clear()
+  await DbClient.db.dropDatabase()
 })
 
 afterAll(async () => {
@@ -23,7 +25,7 @@ await setup({
   nuxtConfig: await testNuxtConfig({ db }),
 })
 
-describe('auth', () => {
+describe('auth', async () => {
   describe('login', () => {
     it('should show error if invalid', async () => {
       const page = await createPage('/')
@@ -33,10 +35,10 @@ describe('auth', () => {
       await page.getByLabel('Username').type('test')
       await page.getByLabel('Password').type('test')
       await page.getByTestId('submit').click()
-      expect(page.getByText('Invalid username or password')).toBeDefined()
+      await expectE2E(page.getByText('Invalid username or password')).toBeVisible()
     })
 
-    it('should redirect if valid', async () => {
+    it('should auth and navigate to chats if valid', async () => {
       const repo = new UserRepository()
       await repo.create({ username: 'test', password: 'test' })
       const page = await createPage('/')
@@ -47,27 +49,35 @@ describe('auth', () => {
       await page.getByLabel('Password').type('test')
       await page.getByTestId('submit').click()
       await page.waitForURL('**/chats')
-      await expect(page.locator('h1').textContent()).resolves.toContain('Its time to join or create a chat room !')
+      await expectE2E(page.getByText('Its time to join or create a chat room !')).toBeVisible()
     })
   })
 
   describe('#', () => {
     it('should show error if invalid', async () => {
+      const repo = new UserRepository()
+      await repo.create({ username: 'test', password: 'test' })
       const page = await createPage('/')
       await page.getByTestId('login-link').click()
       await page.getByTestId('#-link').click()
       await page.waitForURL('**/#')
       await expect(page.locator('h1').textContent()).resolves.toContain('#')
       await page.getByLabel('Username').type('t')
-      await page.getByLabel('Password', { exact: true }).type('test')
+      await page.getByLabel('Password', { exact: true }).type('t')
       await page.getByTestId('submit').click()
-      expect(page.getByText('Passwords don\'t match')).toBeDefined()
+      await expectE2E(page.getByText('Passwords don\'t match')).toBeVisible()
+      await expect(page.getByText('Must be longer than 3 characters').count()).resolves.toBe(2)
+      await page.getByLabel('Username').clear()
+      await page.getByLabel('Username').type('test')
+      await page.getByLabel('Password', { exact: true }).clear()
+      await page.getByLabel('Password', { exact: true }).type('test')
+      await page.getByLabel('Password confirmation').clear()
       await page.getByLabel('Password confirmation').type('test')
       await page.getByTestId('submit').click()
-      expect(page.getByText('Must be longer than 3 characters')).toBeDefined()
+      await expectE2E(page.getByText('Username already taken')).toBeVisible()
     })
 
-    it('should redirect if valid', async () => {
+    it('should auth and navigate to chats if valid', async () => {
       const repo = new UserRepository()
       const page = await createPage('/')
       await page.getByTestId('login-link').click()
@@ -79,7 +89,7 @@ describe('auth', () => {
       await page.getByLabel('Password confirmation').type('test')
       await page.getByTestId('submit').click()
       await page.waitForURL('**/chats')
-      await expect(page.locator('h1').textContent()).resolves.toContain('Its time to join or create a chat room !')
+      await expectE2E(page.getByText('Its time to join or create a chat room !')).toBeVisible()
       await expect(repo.collection.findOne({ username: 'test' })).resolves.toMatchObject({ username: 'test' })
     })
   })

tests/unit/db/repositories/user.spec.ts

@@ -63,7 +63,7 @@ describe('user repository', () => {
     it('should reject if password does not match', async () => {
       const repo = new UserRepository()
       await repo.create({ username: 'foobar', password: 'test' })
-      await expect(repo.authenticate({ username: 'foobar', password: 'testy' })).rejects.toThrowError('Invalid username or password')
+      await expect(repo.authenticate({ username: 'foobar', password: 'testy' })).resolves.toBe(false)
     })
   })