pleno-vue/tests/e2e/userProfileSecurity.spec.ts

import { test, expect } from "@playwright/test";
import { userCredentials, loginAsUser } from "./fixtures";

// Navigate to profile page helper
async function goToUserProfile(page) {
  await page.click('a[href="/user/profile"]');
  await expect(page).toHaveURL("/user/profile");
}

// Helper to expand a category section by clicking its header
async function expandCategory(page, categoryText: string) {
  const categoryHeader = page.locator(".card-header").filter({ hasText: categoryText }).first();
  await categoryHeader.click();
  // Wait for expansion animation
  await page.waitForTimeout(200);
}

// Security section display tests
test("[PROFILE][User][Security] should display security section", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Should display the security section header
  await expect(page.locator(".card-header").filter({ hasText: "Sikkerhed" }).first()).toBeVisible();
});

test("[PROFILE][User][Security] should display email field", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Email field should be visible (look for the edit icon inside expanded content)
  await expect(page.locator(".card-content i.fas.fa-edit").first()).toBeVisible();
});

test("[PROFILE][User][Security] should display edit email button", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Edit email button should be visible (Danish: "Rediger e-mail")
  const editEmailButton = page.locator("button").filter({ hasText: "Rediger e-mail" }).first();
  await expect(editEmailButton).toBeVisible();
});

test("[PROFILE][User][Security] should display phone number field", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Phone number section should be visible
  await expect(page.getByText("Telefonnummer", { exact: true }).first()).toBeVisible();
});

test("[PROFILE][User][Security] should display edit phone number button", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Edit phone button should be visible (first one, in Security section)
  const editPhoneButton = page
    .locator("button")
    .filter({ hasText: /^Rediger telefonnummer$/ })
    .first();
  await expect(editPhoneButton).toBeVisible();
});

test("[PROFILE][User][Security] should display change password button", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Change password button should be visible
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await expect(changePasswordButton).toBeVisible();
});

test("[PROFILE][User][Security] should display logout button", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Logout button should be visible
  const logoutButton = page.locator('button:has-text("Log ud")');
  await expect(logoutButton).toBeVisible();
});

// Security button functionality tests
test("[PROFILE][User][Security] should open edit email dialog when clicking edit email button", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click edit email button (Danish: "Rediger e-mail")
  const editEmailButton = page.locator("button").filter({ hasText: "Rediger e-mail" }).first();
  await editEmailButton.click();

  // Should show password prompt dialog (SweetAlert)
  await expect(page.locator(".swal2-popup")).toBeVisible();
  await expect(page.locator(".swal2-title")).toBeVisible();
});

test("[PROFILE][User][Security] should open change phone number dialog when clicking edit phone button", async ({
  page,
}) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page
    .locator("button")
    .filter({ hasText: /^Rediger telefonnummer$/ })
    .first();
  await editPhoneButton.click();

  // Should show phone number dialog (SweetAlert)
  await expect(page.locator(".swal2-popup")).toBeVisible();
  await expect(page.locator(".swal2-title")).toContainText("telefonnummer");
});

test("[PROFILE][User][Security] should open change password dialog when clicking change password button", async ({
  page,
}) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();

  // Should show change password dialog (SweetAlert)
  await expect(page.locator(".swal2-popup")).toBeVisible();
  await expect(page.locator(".swal2-title")).toContainText("adgangskode");
});

test("[PROFILE][User][Security] should open logout confirmation dialog when clicking logout button", async ({
  page,
}) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click logout button
  const logoutButton = page.locator('button:has-text("Log ud")');
  await logoutButton.click();

  // Should show confirmation dialog (SweetAlert)
  await expect(page.locator(".swal2-popup")).toBeVisible();
});

/** Password Change Validation Tests */

test("[PROFILE][User][Security] should show validation error when passwords do not match", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();

  // Fill in mismatched passwords
  await page.fill("#swal-input1", "currentpass");
  await page.fill("#swal-input2", "newpassword1");
  await page.fill("#swal-input3", "newpassword2");

  // Click confirm
  await page.click(".swal2-confirm");

  // Should show validation error
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});

test("[PROFILE][User][Security] should show validation error when password is too short", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();

  // Fill in short password
  await page.fill("#swal-input1", "currentpass");
  await page.fill("#swal-input2", "123");
  await page.fill("#swal-input3", "123");

  // Click confirm
  await page.click(".swal2-confirm");

  // Should show validation error about password length
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});

test("[PROFILE][User][Security] should show validation error when fields are empty", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();

  // Click confirm without filling fields
  await page.click(".swal2-confirm");

  // Should show validation error
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});

/** Phone Number Validation Tests */

test("[PROFILE][User][Security] should show validation error when phone number is empty", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page
    .locator("button")
    .filter({ hasText: /^Rediger telefonnummer$/ })
    .first();
  await editPhoneButton.click();

  // Click confirm without filling phone number
  await page.click(".swal2-confirm");

  // Should show validation error
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});

test("[PROFILE][User][Security] should show validation error when country code is empty", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page
    .locator("button")
    .filter({ hasText: /^Rediger telefonnummer$/ })
    .first();
  await editPhoneButton.click();

  // Fill in phone number but not country code
  await page.fill("#swal-input1", "12345678");

  // Click confirm
  await page.click(".swal2-confirm");

  // Should show validation error
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});

/** Dialog Cancel Tests */

test("[PROFILE][User][Security] should close dialog when cancel is clicked on password change", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();

  // Verify dialog is open
  await expect(page.locator(".swal2-popup")).toBeVisible();

  // Click cancel
  await page.click(".swal2-cancel");

  // Dialog should be closed
  await expect(page.locator(".swal2-popup")).not.toBeVisible();
});

test("[PROFILE][User][Security] should close dialog when cancel is clicked on phone number change", async ({
  page,
}) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the security section
  await expandCategory(page, "Sikkerhed");

  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page
    .locator("button")
    .filter({ hasText: /^Rediger telefonnummer$/ })
    .first();
  await editPhoneButton.click();

  // Verify dialog is open
  await expect(page.locator(".swal2-popup")).toBeVisible();

  // Click cancel
  await page.click(".swal2-cancel");

  // Dialog should be closed
  await expect(page.locator(".swal2-popup")).not.toBeVisible();
});