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