feat: Add E2E test for multi-admin users

This commit is contained in:
Ionys 2025-06-26 15:32:23 +02:00
parent 67d5a706aa
commit 5198432cfc
5 changed files with 75 additions and 8 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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);
});
});

View file

@ -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");