feat: Add E2E test for multi-admin users

src/components/settings/Users/AddUser.vue

@@ -14,7 +14,7 @@
                     :placeholder="$t('Username')"
                     required
                     :disabled="creating"
-                    data-cy="username-input"
+                    data-testid="username-input"
                 >
             </label>
         </div>
@@ -29,7 +29,7 @@
                     :placeholder="$t('Password')"
                     required
                     :disabled="creating"
-                    data-cy="password-input"
+                    data-testid="password-input"
                 >
             </label>
         </div>
@@ -44,12 +44,12 @@
                     :placeholder="$t('Repeat Password')"
                     required
                     :disabled="creating"
-                    data-cy="password-repeat-input"
+                    data-testid="password-repeat-input"
                 >
             </label>
         </div>
 
-        <button class="btn btn-primary" type="submit" :disabled="creating" data-cy="submit-create-admin-form">
+        <button class="btn btn-primary" type="submit" :disabled="creating" data-testid="submit-create-admin-form">
             <span v-show="creating" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
             {{ $t("Create") }}
         </button>

src/components/settings/Users/EditUser.vue

@@ -83,6 +83,7 @@
                     type="checkbox"
                     :disabled="saving"
                     @click="debounceCheckboxClick(() => { active = !active; save({ active }); })"
+                    data-testid="active-checkbox"
                 >
                 <div class="ps-2">{{ $t("Active") }}</div>
             </label>

src/components/settings/Users/Users.vue

@@ -10,12 +10,13 @@
             <font-awesome-icon icon="spinner" size="2x" spin />
         </div>
 
-        <div v-else class="my-3">
+        <div v-else class="my-3" data-testid="users-list">
             <RouterLink
                 v-for="({ id, username, active }, index) in usersList"
                 :key="id"
                 class="d-flex align-items-center mx-0 mx-lg-4 py-1 text-decoration-none users-list-row"
                 :to="{ name: 'settings.users.edit', params: { id } }"
+                data-testid="user-item"
             >
                 <div class="col-10 col-sm-5 m-2 flex-shrink-1 fw-bold">
                     {{ username }}
@@ -31,6 +32,7 @@
                         :class="active ? 'btn-outline-danger' : 'btn-outline-success'"
                         :disabled="processing"
                         @click.prevent="active ? disableConfirm(usersList[index]) : toggleActiveUser(usersList[index])"
+                        :data-testid="`toggle-active-user-${username}`"
                     >
                         <font-awesome-icon class="" :icon="active ? 'user-slash' : 'user-check'" />
                     </button>

test/e2e/specs/multiple-users.spec.js

@@ -0,0 +1,63 @@
+import { expect, test } from "@playwright/test";
+import { login, restoreSqliteSnapshot, screenshot } from "../util-test";
+
+test.describe("Multiple Users", () => {
+    test.beforeEach(async ({ page }) => {
+        await restoreSqliteSnapshot(page);
+    });
+
+    test("test multiple users", async ({ page }, testInfo) => {
+        // Login as admin
+        await page.goto("./settings/users");
+        await login(page, "admin");
+
+        // Check if the user list contains only the admin user
+        await expect(page.getByTestId("users-list")).toHaveCount(1);
+
+        await screenshot(testInfo, page);
+
+        // Add a second user
+        await page.goto("./settings/users/add");
+
+        await expect(page.getByTestId("username-input")).toBeVisible();
+        await page.getByTestId("username-input").fill("newuser");
+        await page.getByTestId("password-input").fill("newuser123");
+        await page.getByTestId("password-repeat-input").fill("newuser123");
+        await page.getByTestId("submit-create-admin-form").click();
+        
+        // Ensure the new user is created and visible in the user list
+        await page.waitForURL("./settings/users");
+        await expect(page.getByTestId("users-list")).toContainText("newuser");
+        await expect(page.getByTestId("users-list").locator("[data-testid='user-item']")).toHaveCount(2);
+
+        await screenshot(testInfo, page);
+
+        // Disable the admin user
+        await page.getByTestId("toggle-active-user-admin").click();
+        // Click on the button containing Yes and having btn-danger class
+        await page.getByRole("button", { name: "Yes", exact: true}).click();
+        await expect(page.getByText("You are not logged in.")).toBeVisible();
+        
+        // Make sure we're back on the login page after refresh
+        await page.reload();
+        await expect(page.getByText("Log in")).toBeVisible();
+
+        // Login as the new user
+        await page.goto("./dashboard"); // Assuming the new user has ID 2
+        await login(page, "newuser");
+        await screenshot(testInfo, page);
+
+        // Disable self-user
+        await page.goto("./settings/users/edit/2");
+        await expect(page.getByTestId("active-checkbox")).toBeVisible();
+        await page.getByTestId("active-checkbox").uncheck();
+
+        await screenshot(testInfo, page);
+
+        // Make sure we're back on the login page after refresh
+        await page.reload();
+        await expect(page.getByText("Log in")).toBeVisible();
+
+        await screenshot(testInfo, page);
+    });
+});

test/e2e/util-test.js

@@ -19,14 +19,15 @@ export async function screenshot(testInfo, page) {
 
 /**
  * @param {Page} page Page
+ * @param {string} [user="admin"] Username to log in with
  * @returns {Promise<void>}
  */
-export async function login(page) {
+export async function login(page, user = "admin") {
     // Login
     await page.getByPlaceholder("Username").click();
-    await page.getByPlaceholder("Username").fill("admin");
+    await page.getByPlaceholder("Username").fill(user);
     await page.getByPlaceholder("Username").press("Tab");
-    await page.getByPlaceholder("Password").fill("admin123");
+    await page.getByPlaceholder("Password").fill(user + "123");
     await page.getByLabel("Remember me").check();
     await page.getByRole("button", { name: "Log in" }).click();
     await page.isVisible("text=Add New Monitor");