🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>

frontend/tests/reset-password.spec.ts

@@ -64,8 +64,8 @@ test("User can reset password successfully using the link", async ({
   // Set the new password and confirm it
   await page.goto(url)
 
-  await page.getByLabel("Set Password").fill(newPassword)
-  await page.getByLabel("Confirm Password").fill(newPassword)
+  await page.getByPlaceholder("New Password").fill(newPassword)
+  await page.getByPlaceholder("Confirm Password").fill(newPassword)
   await page.getByRole("button", { name: "Reset Password" }).click()
   await expect(page.getByText("Password updated successfully")).toBeVisible()
 
@@ -79,8 +79,8 @@ test("Expired or invalid reset link", async ({ page }) => {
 
   await page.goto(invalidUrl)
 
-  await page.getByLabel("Set Password").fill(password)
-  await page.getByLabel("Confirm Password").fill(password)
+  await page.getByPlaceholder("New Password").fill(password)
+  await page.getByPlaceholder("Confirm Password").fill(password)
   await page.getByRole("button", { name: "Reset Password" }).click()
 
   await expect(page.getByText("Invalid token")).toBeVisible()
@@ -115,8 +115,8 @@ test("Weak new password validation", async ({ page, request }) => {
 
   // Set a weak new password
   await page.goto(url)
-  await page.getByLabel("Set Password").fill(weakPassword)
-  await page.getByLabel("Confirm Password").fill(weakPassword)
+  await page.getByPlaceholder("New Password").fill(weakPassword)
+  await page.getByPlaceholder("Confirm Password").fill(weakPassword)
   await page.getByRole("button", { name: "Reset Password" }).click()
 
   await expect(

frontend/tests/sign-up.spec.ts

@@ -18,7 +18,7 @@ const fillForm = async (
   await page.getByPlaceholder("Full Name").fill(full_name)
   await page.getByPlaceholder("Email").fill(email)
   await page.getByPlaceholder("Password", { exact: true }).fill(password)
-  await page.getByPlaceholder("Repeat Password").fill(confirm_password)
+  await page.getByPlaceholder("Confirm Password").fill(confirm_password)
 }
 
 const verifyInput = async (
@@ -38,7 +38,7 @@ test("Inputs are visible, empty and editable", async ({ page }) => {
   await verifyInput(page, "Full Name")
   await verifyInput(page, "Email")
   await verifyInput(page, "Password", { exact: true })
-  await verifyInput(page, "Repeat Password")
+  await verifyInput(page, "Confirm Password")
 })
 
 test("Sign Up button is visible", async ({ page }) => {

frontend/tests/user-settings.spec.ts

@@ -1,8 +1,8 @@
 import { expect, test } from "@playwright/test"
 import { firstSuperuser, firstSuperuserPassword } from "./config.ts"
+import { createUser } from "./utils/privateApi.ts"
 import { randomEmail, randomPassword } from "./utils/random"
 import { logInUser, logOutUser } from "./utils/user"
-import { createUser } from "./utils/privateApi.ts"
 
 const tabs = ["My profile", "Password", "Appearance"]
 
@@ -151,9 +151,9 @@ test.describe("Change password successfully", () => {
 
     await page.goto("/settings")
     await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByLabel("Current Password*").fill(password)
-    await page.getByLabel("Set Password*").fill(NewPassword)
-    await page.getByLabel("Confirm Password*").fill(NewPassword)
+    await page.getByPlaceholder("Current Password").fill(password)
+    await page.getByPlaceholder("New Password").fill(NewPassword)
+    await page.getByPlaceholder("Confirm Password").fill(NewPassword)
     await page.getByRole("button", { name: "Save" }).click()
     await expect(page.getByText("Password updated successfully.")).toBeVisible()
 
@@ -179,9 +179,9 @@ test.describe("Change password with invalid data", () => {
 
     await page.goto("/settings")
     await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByLabel("Current Password*").fill(password)
-    await page.getByLabel("Set Password*").fill(weakPassword)
-    await page.getByLabel("Confirm Password*").fill(weakPassword)
+    await page.getByPlaceholder("Current Password").fill(password)
+    await page.getByPlaceholder("New Password").fill(weakPassword)
+    await page.getByPlaceholder("Confirm Password").fill(weakPassword)
     await expect(
       page.getByText("Password must be at least 8 characters"),
     ).toBeVisible()
@@ -202,11 +202,11 @@ test.describe("Change password with invalid data", () => {
 
     await page.goto("/settings")
     await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByLabel("Current Password*").fill(password)
-    await page.getByLabel("Set Password*").fill(newPassword)
-    await page.getByLabel("Confirm Password*").fill(confirmPassword)
-    await page.getByRole("button", { name: "Save" }).click()
-    await expect(page.getByText("Passwords do not match")).toBeVisible()
+    await page.getByPlaceholder("Current Password").fill(password)
+    await page.getByPlaceholder("New Password").fill(newPassword)
+    await page.getByPlaceholder("Confirm Password").fill(confirmPassword)
+    await page.getByLabel("Password", { exact: true }).locator("form").click()
+    await expect(page.getByText("The passwords do not match")).toBeVisible()
   })
 
   test("Current password and new password are the same", async ({ page }) => {
@@ -220,9 +220,9 @@ test.describe("Change password with invalid data", () => {
 
     await page.goto("/settings")
     await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByLabel("Current Password*").fill(password)
-    await page.getByLabel("Set Password*").fill(password)
-    await page.getByLabel("Confirm Password*").fill(password)
+    await page.getByPlaceholder("Current Password").fill(password)
+    await page.getByPlaceholder("New Password").fill(password)
+    await page.getByPlaceholder("Confirm Password").fill(password)
     await page.getByRole("button", { name: "Save" }).click()
     await expect(
       page.getByText("New password cannot be the same as the current one"),
@@ -238,22 +238,50 @@ test("Appearance tab is visible", async ({ page }) => {
   await expect(page.getByLabel("Appearance")).toBeVisible()
 })
 
-test("User can switch from light mode to dark mode", async ({ page }) => {
+test("User can switch from light mode to dark mode and vice versa", async ({
+  page,
+}) => {
   await page.goto("/settings")
   await page.getByRole("tab", { name: "Appearance" }).click()
-  await page.getByLabel("Appearance").locator("span").nth(3).click()
+
+  // Ensure the initial state is light mode
+  if (
+    await page.evaluate(() =>
+      document.documentElement.classList.contains("dark"),
+    )
+  ) {
+    await page
+      .locator("label")
+      .filter({ hasText: "Light Mode" })
+      .locator("span")
+      .first()
+      .click()
+  }
+
+  let isLightMode = await page.evaluate(() =>
+    document.documentElement.classList.contains("light"),
+  )
+  expect(isLightMode).toBe(true)
+
+  await page
+    .locator("label")
+    .filter({ hasText: "Dark Mode" })
+    .locator("span")
+    .first()
+    .click()
   const isDarkMode = await page.evaluate(() =>
-    document.body.classList.contains("chakra-ui-dark"),
+    document.documentElement.classList.contains("dark"),
   )
   expect(isDarkMode).toBe(true)
-})
 
-test("User can switch from dark mode to light mode", async ({ page }) => {
-  await page.goto("/settings")
-  await page.getByRole("tab", { name: "Appearance" }).click()
-  await page.getByLabel("Appearance").locator("span").first().click()
-  const isLightMode = await page.evaluate(() =>
-    document.body.classList.contains("chakra-ui-light"),
+  await page
+    .locator("label")
+    .filter({ hasText: "Light Mode" })
+    .locator("span")
+    .first()
+    .click()
+  isLightMode = await page.evaluate(() =>
+    document.documentElement.classList.contains("light"),
   )
   expect(isLightMode).toBe(true)
 })
@@ -261,13 +289,42 @@ test("User can switch from dark mode to light mode", async ({ page }) => {
 test("Selected mode is preserved across sessions", async ({ page }) => {
   await page.goto("/settings")
   await page.getByRole("tab", { name: "Appearance" }).click()
-  await page.getByLabel("Appearance").locator("span").nth(3).click()
+
+  // Ensure the initial state is light mode
+  if (
+    await page.evaluate(() =>
+      document.documentElement.classList.contains("dark"),
+    )
+  ) {
+    await page
+      .locator("label")
+      .filter({ hasText: "Light Mode" })
+      .locator("span")
+      .first()
+      .click()
+  }
+
+  const isLightMode = await page.evaluate(() =>
+    document.documentElement.classList.contains("light"),
+  )
+  expect(isLightMode).toBe(true)
+
+  await page
+    .locator("label")
+    .filter({ hasText: "Dark Mode" })
+    .locator("span")
+    .first()
+    .click()
+  let isDarkMode = await page.evaluate(() =>
+    document.documentElement.classList.contains("dark"),
+  )
+  expect(isDarkMode).toBe(true)
 
   await logOutUser(page)
-
   await logInUser(page, firstSuperuser, firstSuperuserPassword)
-  const isDarkMode = await page.evaluate(() =>
-    document.body.classList.contains("chakra-ui-dark"),
+
+  isDarkMode = await page.evaluate(() =>
+    document.documentElement.classList.contains("dark"),
   )
   expect(isDarkMode).toBe(true)
 })

frontend/tests/utils/user.ts

@@ -11,11 +11,8 @@ export async function signUpNewUser(
   await page.getByPlaceholder("Full Name").fill(name)
   await page.getByPlaceholder("Email").fill(email)
   await page.getByPlaceholder("Password", { exact: true }).fill(password)
-  await page.getByPlaceholder("Repeat Password").fill(password)
+  await page.getByPlaceholder("Confirm Password").fill(password)
   await page.getByRole("button", { name: "Sign Up" }).click()
-  await expect(
-    page.getByText("Your account has been created successfully"),
-  ).toBeVisible()
   await page.goto("/login")
 }