✅ Update E2E tests for new User Settings UI

Author: AchuAshwath

frontend/tests/user-settings.spec.ts

@@ -4,11 +4,11 @@ import { createUser } from "./utils/privateApi.ts"
 import { randomEmail, randomPassword } from "./utils/random"
 import { logInUser, logOutUser } from "./utils/user"
 
-const tabs = ["My profile", "Password", "Danger zone"]
+const tabs = ["Personal", "Account"]
 
-test("My profile tab is active by default", async ({ page }) => {
+test("Personal tab is active by default", async ({ page }) => {
   await page.goto("/settings")
-  await expect(page.getByRole("tab", { name: "My profile" })).toHaveAttribute(
+  await expect(page.getByRole("tab", { name: "Personal" })).toHaveAttribute(
     "aria-selected",
     "true",
   )
@@ -35,20 +35,19 @@ test.describe("Edit user profile", () => {
   test.beforeEach(async ({ page }) => {
     await logInUser(page, email, password)
     await page.goto("/settings")
-    await page.getByRole("tab", { name: "My profile" }).click()
+    await page.getByRole("tab", { name: "Personal" }).click()
   })
 
   test("Edit user name with a valid name", async ({ page }) => {
     const updatedName = "Test User 2"
 
     await page.getByRole("button", { name: "Edit" }).click()
     await page.getByLabel("Full name").fill(updatedName)
-    await page.getByRole("button", { name: "Save" }).click()
+    await page.getByRole("button", { name: "Save changes" }).click()
 
-    await expect(page.getByText("User updated successfully")).toBeVisible()
-    await expect(
-      page.locator("form").getByText(updatedName, { exact: true }),
-    ).toBeVisible()
+    await expect(page.getByText("Profile updated successfully")).toBeVisible()
+    // Wait for read-only mode to be restored (Edit button reappears)
+    await expect(page.getByRole("button", { name: "Edit" })).toBeVisible()
   })
 
   test("Edit user email with an invalid email shows error", async ({
@@ -73,54 +72,36 @@ test.describe("Edit user email", () => {
     await createUser({ email, password })
     await logInUser(page, email, password)
     await page.goto("/settings")
-    await page.getByRole("tab", { name: "My profile" }).click()
+    await page.getByRole("tab", { name: "Personal" }).click()
 
     await page.getByRole("button", { name: "Edit" }).click()
     await page.getByLabel("Email").fill(updatedEmail)
-    await page.getByRole("button", { name: "Save" }).click()
+    await page.getByRole("button", { name: "Save changes" }).click()
 
-    await expect(page.getByText("User updated successfully")).toBeVisible()
-    await expect(
-      page.locator("form").getByText(updatedEmail, { exact: true }),
-    ).toBeVisible()
+    await expect(page.getByText("Profile updated successfully")).toBeVisible()
+    // Wait for read-only mode to be restored (Edit button reappears)
+    await expect(page.getByRole("button", { name: "Edit" })).toBeVisible()
   })
 })
 
 test.describe("Cancel edit actions", () => {
   test.use({ storageState: { cookies: [], origins: [] } })
 
-  test("Cancel edit action restores original name", async ({ page }) => {
-    const email = randomEmail()
-    const password = randomPassword()
-    const user = await createUser({ email, password })
-
-    await logInUser(page, email, password)
-    await page.goto("/settings")
-    await page.getByRole("tab", { name: "My profile" }).click()
-    await page.getByRole("button", { name: "Edit" }).click()
-    await page.getByLabel("Full name").fill("Test User")
-    await page.getByRole("button", { name: "Cancel" }).first().click()
-
-    await expect(
-      page.locator("form").getByText(user.full_name as string, { exact: true }),
-    ).toBeVisible()
-  })
-
-  test("Cancel edit action restores original email", async ({ page }) => {
+  test("Cancel edit action restores original values", async ({ page }) => {
     const email = randomEmail()
     const password = randomPassword()
     await createUser({ email, password })
 
     await logInUser(page, email, password)
     await page.goto("/settings")
-    await page.getByRole("tab", { name: "My profile" }).click()
+    await page.getByRole("tab", { name: "Personal" }).click()
     await page.getByRole("button", { name: "Edit" }).click()
+    await page.getByLabel("Full name").fill("Test User")
     await page.getByLabel("Email").fill(randomEmail())
     await page.getByRole("button", { name: "Cancel" }).first().click()
 
-    await expect(
-      page.locator("form").getByText(email, { exact: true }),
-    ).toBeVisible()
+    // Wait for read-only mode to be restored (Edit button reappears)
+    await expect(page.getByRole("button", { name: "Edit" })).toBeVisible()
   })
 })
 
@@ -136,11 +117,12 @@ test.describe("Change password", () => {
     await logInUser(page, email, password)
 
     await page.goto("/settings")
-    await page.getByRole("tab", { name: "Password" }).click()
+    await page.getByRole("tab", { name: "Account" }).click()
+    await page.getByRole("button", { name: "Change password" }).click()
     await page.getByTestId("current-password-input").fill(password)
     await page.getByTestId("new-password-input").fill(newPassword)
     await page.getByTestId("confirm-password-input").fill(newPassword)
-    await page.getByRole("button", { name: "Update Password" }).click()
+    await page.getByRole("button", { name: "Update password" }).click()
 
     await expect(page.getByText("Password updated successfully")).toBeVisible()
 
@@ -163,7 +145,8 @@ test.describe("Change password validation", () => {
   test.beforeEach(async ({ page }) => {
     await logInUser(page, email, password)
     await page.goto("/settings")
-    await page.getByRole("tab", { name: "Password" }).click()
+    await page.getByRole("tab", { name: "Account" }).click()
+    await page.getByRole("button", { name: "Change password" }).click()
   })
 
   test("Update password with weak passwords", async ({ page }) => {
@@ -172,7 +155,7 @@ test.describe("Change password validation", () => {
     await page.getByTestId("current-password-input").fill(password)
     await page.getByTestId("new-password-input").fill(weakPassword)
     await page.getByTestId("confirm-password-input").fill(weakPassword)
-    await page.getByRole("button", { name: "Update Password" }).click()
+    await page.getByRole("button", { name: "Update password" }).click()
 
     await expect(
       page.getByText("Password must be at least 8 characters"),
@@ -185,16 +168,16 @@ test.describe("Change password validation", () => {
     await page.getByTestId("current-password-input").fill(password)
     await page.getByTestId("new-password-input").fill(randomPassword())
     await page.getByTestId("confirm-password-input").fill(randomPassword())
-    await page.getByRole("button", { name: "Update Password" }).click()
+    await page.getByRole("button", { name: "Update password" }).click()
 
-    await expect(page.getByText("The passwords don't match")).toBeVisible()
+    await expect(page.getByText("Passwords do not match")).toBeVisible()
   })
 
   test("Current password and new password are the same", async ({ page }) => {
     await page.getByTestId("current-password-input").fill(password)
     await page.getByTestId("new-password-input").fill(password)
     await page.getByTestId("confirm-password-input").fill(password)
-    await page.getByRole("button", { name: "Update Password" }).click()
+    await page.getByRole("button", { name: "Update password" }).click()
 
     await expect(
       page.getByText("New password cannot be the same as the current one"),
@@ -254,3 +237,59 @@ test("Selected mode is preserved across sessions", async ({ page }) => {
   )
   expect(isDarkMode).toBe(true)
 })
+
+test.describe("Delete account", () => {
+  test.use({ storageState: { cookies: [], origins: [] } })
+
+  test("Delete account successfully", async ({ page }) => {
+    const email = randomEmail()
+    const password = randomPassword()
+
+    await createUser({ email, password })
+    await logInUser(page, email, password)
+
+    await page.goto("/settings")
+    await page.getByRole("tab", { name: "Account" }).click()
+    await page.getByRole("button", { name: "Delete account" }).click()
+
+    // Verify dialog is shown
+    await expect(page.getByRole("dialog")).toBeVisible()
+    await expect(
+      page.getByRole("heading", { name: "Delete account" }),
+    ).toBeVisible()
+    await expect(
+      page.getByText("All your account data will be permanently deleted"),
+    ).toBeVisible()
+
+    // Confirm deletion
+    await page.getByRole("button", { name: "Delete", exact: true }).click()
+
+    // Verify user is logged out and redirected to login (toast may not be visible due to redirect)
+    await expect(page).toHaveURL("/login")
+  })
+
+  test("Cancel delete account dialog", async ({ page }) => {
+    const email = randomEmail()
+    const password = randomPassword()
+
+    await createUser({ email, password })
+    await logInUser(page, email, password)
+
+    await page.goto("/settings")
+    await page.getByRole("tab", { name: "Account" }).click()
+    await page.getByRole("button", { name: "Delete account" }).click()
+
+    // Verify dialog is shown
+    await expect(page.getByRole("dialog")).toBeVisible()
+
+    // Cancel deletion
+    await page.getByRole("button", { name: "Cancel" }).click()
+
+    // Verify dialog is closed
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+
+    // Verify user is still logged in and can access settings
+    await expect(page).toHaveURL("/settings")
+    await expect(page.getByRole("tab", { name: "Personal" })).toBeVisible()
+  })
+})