✅ Add items and admin tests, and refactor existing ones (#2146)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

frontend/tests/admin.spec.ts

@@ -0,0 +1,205 @@
+import { expect, test } from "@playwright/test"
+import { firstSuperuser, firstSuperuserPassword } from "./config.ts"
+import { createUser } from "./utils/privateApi"
+import { randomEmail, randomPassword } from "./utils/random"
+import { logInUser } from "./utils/user"
+
+test("Admin page is accessible and shows correct title", async ({ page }) => {
+  await page.goto("/admin")
+  await expect(page.getByRole("heading", { name: "Users" })).toBeVisible()
+  await expect(
+    page.getByText("Manage user accounts and permissions"),
+  ).toBeVisible()
+})
+
+test("Add User button is visible", async ({ page }) => {
+  await page.goto("/admin")
+  await expect(page.getByRole("button", { name: "Add User" })).toBeVisible()
+})
+
+test.describe("Admin user management", () => {
+  test("Create a new user successfully", async ({ page }) => {
+    await page.goto("/admin")
+
+    const email = randomEmail()
+    const password = randomPassword()
+    const fullName = "Test User Admin"
+
+    await page.getByRole("button", { name: "Add User" }).click()
+
+    await page.getByPlaceholder("Email").fill(email)
+    await page.getByPlaceholder("Full name").fill(fullName)
+    await page.getByPlaceholder("Password").first().fill(password)
+    await page.getByPlaceholder("Password").last().fill(password)
+
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("User created successfully")).toBeVisible()
+
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+
+    const userRow = page.getByRole("row").filter({ hasText: email })
+    await expect(userRow).toBeVisible()
+  })
+
+  test("Create a superuser", async ({ page }) => {
+    await page.goto("/admin")
+
+    const email = randomEmail()
+    const password = randomPassword()
+
+    await page.getByRole("button", { name: "Add User" }).click()
+
+    await page.getByPlaceholder("Email").fill(email)
+    await page.getByPlaceholder("Password").first().fill(password)
+    await page.getByPlaceholder("Password").last().fill(password)
+    await page.getByLabel("Is superuser?").check()
+    await page.getByLabel("Is active?").check()
+
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("User created successfully")).toBeVisible()
+
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+
+    const userRow = page.getByRole("row").filter({ hasText: email })
+    await expect(userRow.getByText("Superuser")).toBeVisible()
+  })
+
+  test("Edit a user successfully", async ({ page }) => {
+    await page.goto("/admin")
+
+    const email = randomEmail()
+    const password = randomPassword()
+    const originalName = "Original Name"
+    const updatedName = "Updated Name"
+
+    await page.getByRole("button", { name: "Add User" }).click()
+    await page.getByPlaceholder("Email").fill(email)
+    await page.getByPlaceholder("Full name").fill(originalName)
+    await page.getByPlaceholder("Password").first().fill(password)
+    await page.getByPlaceholder("Password").last().fill(password)
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("User created successfully")).toBeVisible()
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+
+    const userRow = page.getByRole("row").filter({ hasText: email })
+    await userRow.getByRole("button").click()
+
+    await page.getByRole("menuitem", { name: "Edit User" }).click()
+
+    await page.getByPlaceholder("Full name").fill(updatedName)
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("User updated successfully")).toBeVisible()
+    await expect(page.getByText(updatedName)).toBeVisible()
+  })
+
+  test("Delete a user successfully", async ({ page }) => {
+    await page.goto("/admin")
+
+    const email = randomEmail()
+    const password = randomPassword()
+
+    await page.getByRole("button", { name: "Add User" }).click()
+    await page.getByPlaceholder("Email").fill(email)
+    await page.getByPlaceholder("Password").first().fill(password)
+    await page.getByPlaceholder("Password").last().fill(password)
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("User created successfully")).toBeVisible()
+
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+
+    const userRow = page.getByRole("row").filter({ hasText: email })
+    await userRow.getByRole("button").click()
+
+    await page.getByRole("menuitem", { name: "Delete User" }).click()
+
+    await page.getByRole("button", { name: "Delete" }).click()
+
+    await expect(
+      page.getByText("The user was deleted successfully"),
+    ).toBeVisible()
+
+    await expect(
+      page.getByRole("row").filter({ hasText: email }),
+    ).not.toBeVisible()
+  })
+
+  test("Cancel user creation", async ({ page }) => {
+    await page.goto("/admin")
+
+    await page.getByRole("button", { name: "Add User" }).click()
+    await page.getByPlaceholder("Email").fill("test@example.com")
+
+    await page.getByRole("button", { name: "Cancel" }).click()
+
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+  })
+
+  test("Email is required and must be valid", async ({ page }) => {
+    await page.goto("/admin")
+
+    await page.getByRole("button", { name: "Add User" }).click()
+
+    await page.getByPlaceholder("Email").fill("invalid-email")
+    await page.getByPlaceholder("Email").blur()
+
+    await expect(page.getByText("Invalid email address")).toBeVisible()
+  })
+
+  test("Password must be at least 8 characters", async ({ page }) => {
+    await page.goto("/admin")
+
+    await page.getByRole("button", { name: "Add User" }).click()
+
+    await page.getByPlaceholder("Email").fill(randomEmail())
+    await page.getByPlaceholder("Password").first().fill("short")
+    await page.getByPlaceholder("Password").last().fill("short")
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(
+      page.getByText("Password must be at least 8 characters"),
+    ).toBeVisible()
+  })
+
+  test("Passwords must match", async ({ page }) => {
+    await page.goto("/admin")
+
+    await page.getByRole("button", { name: "Add User" }).click()
+
+    await page.getByPlaceholder("Email").fill(randomEmail())
+    await page.getByPlaceholder("Password").first().fill(randomPassword())
+    await page.getByPlaceholder("Password").last().fill("different12345")
+    await page.getByPlaceholder("Password").last().blur()
+
+    await expect(page.getByText("The passwords don't match")).toBeVisible()
+  })
+})
+
+test.describe("Admin page access control", () => {
+  test.use({ storageState: { cookies: [], origins: [] } })
+
+  test("Non-superuser cannot access admin page", async ({ page }) => {
+    const email = randomEmail()
+    const password = randomPassword()
+
+    await createUser({ email, password })
+    await logInUser(page, email, password)
+
+    await page.goto("/admin")
+
+    await expect(page.getByRole("heading", { name: "Users" })).not.toBeVisible()
+    await expect(page).not.toHaveURL(/\/admin/)
+  })
+
+  test("Superuser can access admin page", async ({ page }) => {
+    await logInUser(page, firstSuperuser, firstSuperuserPassword)
+
+    await page.goto("/admin")
+
+    await expect(page.getByRole("heading", { name: "Users" })).toBeVisible()
+  })
+})

frontend/tests/items.spec.ts

@@ -0,0 +1,132 @@
+import { expect, test } from "@playwright/test"
+import { createUser } from "./utils/privateApi"
+import {
+  randomEmail,
+  randomItemDescription,
+  randomItemTitle,
+  randomPassword,
+} from "./utils/random"
+import { logInUser } from "./utils/user"
+
+test("Items page is accessible and shows correct title", async ({ page }) => {
+  await page.goto("/items")
+  await expect(page.getByRole("heading", { name: "Items" })).toBeVisible()
+  await expect(page.getByText("Create and manage your items")).toBeVisible()
+})
+
+test("Add Item button is visible", async ({ page }) => {
+  await page.goto("/items")
+  await expect(page.getByRole("button", { name: "Add Item" })).toBeVisible()
+})
+
+test.describe("Items management", () => {
+  test.use({ storageState: { cookies: [], origins: [] } })
+  let email: string
+  const password = randomPassword()
+
+  test.beforeAll(async () => {
+    email = randomEmail()
+    await createUser({ email, password })
+  })
+
+  test.beforeEach(async ({ page }) => {
+    await logInUser(page, email, password)
+    await page.goto("/items")
+  })
+
+  test("Create a new item successfully", async ({ page }) => {
+    const title = randomItemTitle()
+    const description = randomItemDescription()
+
+    await page.getByRole("button", { name: "Add Item" }).click()
+    await page.getByLabel("Title").fill(title)
+    await page.getByLabel("Description").fill(description)
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("Item created successfully")).toBeVisible()
+    await expect(page.getByText(title)).toBeVisible()
+  })
+
+  test("Create item with only required fields", async ({ page }) => {
+    const title = randomItemTitle()
+
+    await page.getByRole("button", { name: "Add Item" }).click()
+    await page.getByLabel("Title").fill(title)
+    await page.getByRole("button", { name: "Save" }).click()
+
+    await expect(page.getByText("Item created successfully")).toBeVisible()
+    await expect(page.getByText(title)).toBeVisible()
+  })
+
+  test("Cancel item creation", async ({ page }) => {
+    await page.getByRole("button", { name: "Add Item" }).click()
+    await page.getByLabel("Title").fill("Test Item")
+    await page.getByRole("button", { name: "Cancel" }).click()
+
+    await expect(page.getByRole("dialog")).not.toBeVisible()
+  })
+
+  test("Title is required", async ({ page }) => {
+    await page.getByRole("button", { name: "Add Item" }).click()
+    await page.getByLabel("Title").fill("")
+    await page.getByLabel("Title").blur()
+
+    await expect(page.getByText("Title is required")).toBeVisible()
+  })
+
+  test.describe("Edit and Delete", () => {
+    let itemTitle: string
+
+    test.beforeEach(async ({ page }) => {
+      itemTitle = randomItemTitle()
+
+      await page.getByRole("button", { name: "Add Item" }).click()
+      await page.getByLabel("Title").fill(itemTitle)
+      await page.getByRole("button", { name: "Save" }).click()
+      await expect(page.getByText("Item created successfully")).toBeVisible()
+      await expect(page.getByRole("dialog")).not.toBeVisible()
+    })
+
+    test("Edit an item successfully", async ({ page }) => {
+      const itemRow = page.getByRole("row").filter({ hasText: itemTitle })
+      await itemRow.getByRole("button").last().click()
+      await page.getByRole("menuitem", { name: "Edit Item" }).click()
+
+      const updatedTitle = randomItemTitle()
+      await page.getByLabel("Title").fill(updatedTitle)
+      await page.getByRole("button", { name: "Save" }).click()
+
+      await expect(page.getByText("Item updated successfully")).toBeVisible()
+      await expect(page.getByText(updatedTitle)).toBeVisible()
+    })
+
+    test("Delete an item successfully", async ({ page }) => {
+      const itemRow = page.getByRole("row").filter({ hasText: itemTitle })
+      await itemRow.getByRole("button").last().click()
+      await page.getByRole("menuitem", { name: "Delete Item" }).click()
+
+      await page.getByRole("button", { name: "Delete" }).click()
+
+      await expect(
+        page.getByText("The item was deleted successfully"),
+      ).toBeVisible()
+      await expect(page.getByText(itemTitle)).not.toBeVisible()
+    })
+  })
+})
+
+test.describe("Items empty state", () => {
+  test.use({ storageState: { cookies: [], origins: [] } })
+
+  test("Shows empty state message when no items exist", async ({ page }) => {
+    const email = randomEmail()
+    const password = randomPassword()
+    await createUser({ email, password })
+    await logInUser(page, email, password)
+
+    await page.goto("/items")
+
+    await expect(page.getByText("You don't have any items yet")).toBeVisible()
+    await expect(page.getByText("Add a new item to get started")).toBeVisible()
+  })
+})

frontend/tests/login.spec.ts

@@ -69,8 +69,6 @@ test("Log in with invalid password", async ({ page }) => {
   await expect(page.getByText("Incorrect email or password")).toBeVisible()
 })
 
-// Log out
-
 test("Successful log out", async ({ page }) => {
   await page.goto("/login")
 

frontend/tests/sign-up.spec.ts

@@ -75,13 +75,11 @@ test("Sign up with existing email", async ({ page }) => {
   const email = randomEmail()
   const password = randomPassword()
 
-  // Sign up with an email
   await page.goto("/signup")
 
   await fillForm(page, fullName, email, password, password)
   await page.getByRole("button", { name: "Sign Up" }).click()
 
-  // Sign up again with the same email
   await page.goto("/signup")
 
   await fillForm(page, fullName, email, password, password)

frontend/tests/user-settings.spec.ts

@@ -6,8 +6,6 @@ import { logInUser, logOutUser } from "./utils/user"
 
 const tabs = ["My profile", "Password", "Danger zone"]
 
-// User Information
-
 test("My profile tab is active by default", async ({ page }) => {
   await page.goto("/settings")
   await expect(page.getByRole("tab", { name: "My profile" })).toHaveAttribute(
@@ -23,46 +21,64 @@ test("All tabs are visible", async ({ page }) => {
   }
 })
 
-test.describe("Edit user full name and email successfully", () => {
+test.describe("Edit user profile", () => {
   test.use({ storageState: { cookies: [], origins: [] } })
+  let email: string
+  let password: string
 
-  test("Edit user name with a valid name", async ({ page }) => {
+  test.beforeAll(async () => {
-    const email = randomEmail()
+    email = randomEmail()
-    const updatedName = "Test User 2"
+    password = randomPassword()
-    const password = randomPassword()
-
     await createUser({ email, password })
+  })
 
-    // Log in the user
+  test.beforeEach(async ({ page }) => {
     await logInUser(page, email, password)
-
     await page.goto("/settings")
     await page.getByRole("tab", { name: "My profile" }).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 expect(page.getByText("User updated successfully")).toBeVisible()
-    // Check if the new name is displayed on the page
     await expect(
       page.locator("form").getByText(updatedName, { exact: true }),
     ).toBeVisible()
   })
 
+  test("Edit user email with an invalid email shows error", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Edit" }).click()
+    await page.getByLabel("Email").fill("")
+    await page.locator("body").click()
+
+    await expect(page.getByText("Invalid email address")).toBeVisible()
+  })
+})
+
+test.describe("Edit user email", () => {
+  test.use({ storageState: { cookies: [], origins: [] } })
+
   test("Edit user email with a valid email", async ({ page }) => {
     const email = randomEmail()
-    const updatedEmail = randomEmail()
     const password = randomPassword()
+    const updatedEmail = randomEmail()
 
     await createUser({ email, password })
-
-    // Log in the user
     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("Email").fill(updatedEmail)
     await page.getByRole("button", { name: "Save" }).click()
+
     await expect(page.getByText("User updated successfully")).toBeVisible()
     await expect(
       page.locator("form").getByText(updatedEmail, { exact: true }),
@@ -70,42 +86,21 @@ test.describe("Edit user full name and email successfully", () => {
   })
 })
 
-test.describe("Edit user with invalid data", () => {
+test.describe("Cancel edit actions", () => {
   test.use({ storageState: { cookies: [], origins: [] } })
 
-  test("Edit user email with an invalid email", async ({ page }) => {
-    const email = randomEmail()
-    const password = randomPassword()
-    const invalidEmail = ""
-
-    await createUser({ email, password })
-
-    // Log in the user
-    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("Email").fill(invalidEmail)
-    await page.locator("body").click()
-    await expect(page.getByText("Invalid email address")).toBeVisible()
-  })
-
   test("Cancel edit action restores original name", async ({ page }) => {
     const email = randomEmail()
     const password = randomPassword()
-    const updatedName = "Test User"
-
     const user = await createUser({ email, password })
 
-    // Log in the user
     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(updatedName)
+    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()
@@ -114,73 +109,71 @@ test.describe("Edit user with invalid data", () => {
   test("Cancel edit action restores original email", async ({ page }) => {
     const email = randomEmail()
     const password = randomPassword()
-    const updatedEmail = randomEmail()
-
     await createUser({ email, password })
 
-    // Log in the user
     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("Email").fill(updatedEmail)
+    await page.getByLabel("Email").fill(randomEmail())
     await page.getByRole("button", { name: "Cancel" }).first().click()
+
     await expect(
       page.locator("form").getByText(email, { exact: true }),
     ).toBeVisible()
   })
 })
 
-// Change Password
+test.describe("Change password", () => {
-
-test.describe("Change password successfully", () => {
   test.use({ storageState: { cookies: [], origins: [] } })
 
   test("Update password successfully", async ({ page }) => {
     const email = randomEmail()
     const password = randomPassword()
-    const NewPassword = randomPassword()
+    const newPassword = randomPassword()
 
     await createUser({ email, password })
-
-    // Log in the user
     await logInUser(page, email, password)
 
     await page.goto("/settings")
     await page.getByRole("tab", { name: "Password" }).click()
     await page.getByTestId("current-password-input").fill(password)
-    await page.getByTestId("new-password-input").fill(NewPassword)
+    await page.getByTestId("new-password-input").fill(newPassword)
-    await page.getByTestId("confirm-password-input").fill(NewPassword)
+    await page.getByTestId("confirm-password-input").fill(newPassword)
     await page.getByRole("button", { name: "Update Password" }).click()
+
     await expect(page.getByText("Password updated successfully")).toBeVisible()
 
     await logOutUser(page)
-
+    await logInUser(page, email, newPassword)
-    // Check if the user can log in with the new password
-    await logInUser(page, email, NewPassword)
   })
 })
 
-test.describe("Change password with invalid data", () => {
+test.describe("Change password validation", () => {
   test.use({ storageState: { cookies: [], origins: [] } })
+  let email: string
+  let password: string
 
-  test("Update password with weak passwords", async ({ page }) => {
+  test.beforeAll(async () => {
-    const email = randomEmail()
+    email = randomEmail()
-    const password = randomPassword()
+    password = randomPassword()
-    const weakPassword = "weak"
-
     await createUser({ email, password })
+  })
 
-    // Log in the user
+  test.beforeEach(async ({ page }) => {
     await logInUser(page, email, password)
-
     await page.goto("/settings")
     await page.getByRole("tab", { name: "Password" }).click()
+  })
+
+  test("Update password with weak passwords", async ({ page }) => {
+    const weakPassword = "weak"
+
     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 expect(
       page.getByText("Password must be at least 8 characters"),
     ).toBeVisible()
@@ -189,48 +182,26 @@ test.describe("Change password with invalid data", () => {
   test("New password and confirmation password do not match", async ({
     page,
   }) => {
-    const email = randomEmail()
-    const password = randomPassword()
-    const newPassword = randomPassword()
-    const confirmPassword = randomPassword()
-
-    await createUser({ email, password })
-
-    // Log in the user
-    await logInUser(page, email, password)
-
-    await page.goto("/settings")
-    await page.getByRole("tab", { name: "Password" }).click()
     await page.getByTestId("current-password-input").fill(password)
-    await page.getByTestId("new-password-input").fill(newPassword)
+    await page.getByTestId("new-password-input").fill(randomPassword())
-    await page.getByTestId("confirm-password-input").fill(confirmPassword)
+    await page.getByTestId("confirm-password-input").fill(randomPassword())
     await page.getByRole("button", { name: "Update Password" }).click()
+
     await expect(page.getByText("The passwords don't match")).toBeVisible()
   })
 
   test("Current password and new password are the same", async ({ page }) => {
-    const email = randomEmail()
-    const password = randomPassword()
-
-    await createUser({ email, password })
-
-    // Log in the user
-    await logInUser(page, email, password)
-
-    await page.goto("/settings")
-    await page.getByRole("tab", { name: "Password" }).click()
     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 expect(
       page.getByText("New password cannot be the same as the current one"),
     ).toBeVisible()
   })
 })
 
-// Appearance
-
 test("Appearance button is visible in sidebar", async ({ page }) => {
   await page.goto("/settings")
   await expect(page.getByTestId("theme-button")).toBeVisible()
@@ -243,7 +214,6 @@ test("User can switch between theme modes", async ({ page }) => {
   await page.getByTestId("dark-mode").click()
   await expect(page.locator("html")).toHaveClass(/dark/)
 
-  // wait for dropdown to close before reopening
   await expect(page.getByTestId("dark-mode")).not.toBeVisible()
 
   await page.getByTestId("theme-button").click()

frontend/tests/utils/random.ts

@@ -11,3 +11,9 @@ export const slugify = (text: string) =>
     .toLowerCase()
     .replace(/\s+/g, "-")
     .replace(/[^\w-]+/g, "")
+
+export const randomItemTitle = () =>
+  `Item ${Math.random().toString(36).substring(7)}`
+
+export const randomItemDescription = () =>
+  `Description ${Math.random().toString(36).substring(7)}`