pleno-vue/tests/e2e/userProfileNotifications.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);
}

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

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

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

  // Expand the email notifications section
  await expandCategory(page, "E-mail");

  // Booking confirmation email section should be visible
  await expect(page.locator("text=Booking bekræftelser")).toBeVisible();
});

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

  // Expand the email notifications section
  await expandCategory(page, "E-mail");

  // Edit booking email button should be visible
  const editBookingEmailButton = page.locator('button:has-text("Rediger e-mail til booking")');
  await expect(editBookingEmailButton).toBeVisible();
});

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

  // Expand the email notifications section
  await expandCategory(page, "E-mail");

  // Email notifications toggle should be visible
  await expect(page.locator("text=E-mail notifikationer")).toBeVisible();
});

test("[PROFILE][User][Notifications] should display SMS notifications section", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

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

test("[PROFILE][User][Notifications] should display SMS notifications toggle", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the SMS notifications section
  await expandCategory(page, "SMS");

  // SMS notifications toggle should be visible
  await expect(page.getByText("SMS notifikationer", { exact: true })).toBeVisible();
});

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

  // Expand the email notifications section
  await expandCategory(page, "E-mail");

  // Click edit booking email button
  const editBookingEmailButton = page.locator('button:has-text("Rediger e-mail til booking")');
  await editBookingEmailButton.click();

  // Should show email dialog (SweetAlert)
  await expect(page.locator(".swal2-popup")).toBeVisible();
  await expect(page.locator(".swal2-title")).toContainText("e-mailadresse");
});

/** Email Validation Tests */

test("[PROFILE][User][Notifications] should show validation error for invalid email format", async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);

  // Expand the email notifications section
  await expandCategory(page, "E-mail");

  // Click edit booking email button
  const editBookingEmailButton = page.locator('button:has-text("Rediger e-mail til booking")');
  await editBookingEmailButton.click();

  // Fill in invalid email
  await page.fill(".swal2-input", "invalid-email");

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

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

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

  // Expand the email notifications section
  await expandCategory(page, "E-mail");

  // Click edit booking email button
  const editBookingEmailButton = page.locator('button:has-text("Rediger e-mail til booking")');
  await editBookingEmailButton.click();

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

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