dawarich/e2e/auth.spec.ts

import { test, expect } from '@playwright/test';
import { TestHelpers, TEST_USERS } from './fixtures/test-helpers';

test.describe.configure({ mode: 'serial' });

test.describe('Authentication', () => {
  let helpers: TestHelpers;

  test.beforeEach(async ({ page }) => {
    helpers = new TestHelpers(page);
  });

  test.describe('Login and Logout', () => {
    test('should display login page correctly', async ({ page }) => {
      await page.goto('/users/sign_in');

      // Check page elements based on actual Devise view
      await expect(page).toHaveTitle(/Dawarich/);
      await expect(page.getByRole('heading', { name: 'Login now' })).toBeVisible();
      await expect(page.getByLabel('Email')).toBeVisible();
      await expect(page.getByLabel('Password')).toBeVisible();
      await expect(page.getByRole('button', { name: 'Log in' })).toBeVisible();
      await expect(page.getByRole('link', { name: 'Forgot your password?' })).toBeVisible();
    });

    test('should show demo credentials in demo environment', async ({ page }) => {
      await page.goto('/users/sign_in');

      // Check if demo credentials are shown (they may not be in test environment)
      const demoCredentials = page.getByText('demo@dawarich.app');
      if (await demoCredentials.isVisible()) {
        await expect(demoCredentials).toBeVisible();
        await expect(page.getByText('password').nth(1)).toBeVisible(); // Second "password" text
      }
    });

    test('should login with valid credentials', async ({ page }) => {
      await helpers.loginAsDemo();

      // Verify successful login - should redirect to map
      await expect(page).toHaveURL(/\/map/);
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible();
    });

    test('should reject invalid credentials', async ({ page }) => {
      await page.goto('/users/sign_in');

      await page.getByLabel('Email').fill('invalid@email.com');
      await page.getByLabel('Password').fill('wrongpassword');
      await page.getByRole('button', { name: 'Log in' }).click();

      // Should stay on login page and show error
      await expect(page).toHaveURL(/\/users\/sign_in/);
      // Look for flash message with error styling
      const errorMessage = page.locator('.bg-red-100, .text-red-700, .alert-error');
      if (await errorMessage.isVisible()) {
        await expect(errorMessage).toBeVisible();
      }
    });

    test('should remember user when "Remember me" is checked', async ({ page }) => {
      await page.goto('/users/sign_in');

      await page.getByLabel('Email').fill(TEST_USERS.DEMO.email);
      await page.getByLabel('Password').fill(TEST_USERS.DEMO.password);

      // Look for remember me checkbox - use getByRole to target the actual checkbox
      const rememberCheckbox = page.getByRole('checkbox', { name: 'Remember me' });

      if (await rememberCheckbox.isVisible()) {
        await rememberCheckbox.check();
      }

      await page.getByRole('button', { name: 'Log in' }).click();

      // Wait for redirect with longer timeout
      await page.waitForURL(/\/map/, { timeout: 10000 });

      // Check for remember token cookie
      const cookies = await page.context().cookies();
      const hasPersistentCookie = cookies.some(cookie =>
        cookie.name.includes('remember') || cookie.name.includes('session')
      );
      expect(hasPersistentCookie).toBeTruthy();
    });

    test('should logout successfully', async ({ page }) => {
      await helpers.loginAsDemo();

      // Open user dropdown using the actual navigation structure
      const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email });
      await userDropdown.locator('summary').click();

      // Use evaluate to trigger the logout form submission properly
      await page.evaluate(() => {
        const logoutLink = document.querySelector('a[href="/users/sign_out"]');
        if (logoutLink) {
          // Create a form and submit it with DELETE method (Rails UJS style)
          const form = document.createElement('form');
          form.action = '/users/sign_out';
          form.method = 'post';
          form.style.display = 'none';

          // Add method override for DELETE
          const methodInput = document.createElement('input');
          methodInput.type = 'hidden';
          methodInput.name = '_method';
          methodInput.value = 'delete';
          form.appendChild(methodInput);

          // Add CSRF token
          const csrfToken = document.querySelector('meta[name="csrf-token"]');
          if (csrfToken) {
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'authenticity_token';
            const tokenValue = csrfToken.getAttribute('content');
            if (tokenValue) {
              csrfInput.value = tokenValue;
            }
            form.appendChild(csrfInput);
          }

          document.body.appendChild(form);
          form.submit();
        }
      });

      // Wait for redirect and navigate to home to verify logout
      await page.waitForURL('/', { timeout: 10000 });

      // Verify user is logged out - should see login options
      await expect(page.getByRole('link', { name: 'Sign in' })).toBeVisible();
    });

    test('should redirect to login when accessing protected pages while logged out', async ({ page }) => {
      await page.goto('/map');

      // Should redirect to login
      await expect(page).toHaveURL(/\/users\/sign_in/);
    });
  });

  test.describe('Password Management', () => {
    test('should display forgot password form', async ({ page }) => {
      await page.goto('/users/sign_in');
      await page.getByRole('link', { name: 'Forgot your password?' }).click();

      await expect(page).toHaveURL(/\/users\/password\/new/);
      await expect(page.getByRole('heading', { name: 'Forgot your password?' })).toBeVisible();
      await expect(page.getByLabel('Email')).toBeVisible();
      await expect(page.getByRole('button', { name: 'Send me reset password instructions' })).toBeVisible();
    });

    test('should handle password reset request', async ({ page }) => {
      await page.goto('/users/password/new');

      // Fill the email and actually submit the form
      await page.getByLabel('Email').fill(TEST_USERS.DEMO.email);
      await page.getByRole('button', { name: 'Send me reset password instructions' }).click();

      // Wait for response and check URL
      await page.waitForLoadState('networkidle');

      // Should redirect to login page after successful submission
      await expect(page).toHaveURL(/\/users\/sign_in/);

      // Look for success flash message with correct Devise message
      const successMessage = page.locator('.bg-blue-100, .text-blue-700').filter({ hasText: /instructions.*reset.*password.*minutes/i });
      await expect(successMessage).toBeVisible();
    });

    test.skip('should change password when logged in', async ({ page }) => {
      const newPassword = 'newpassword123';
      const helpers = new TestHelpers(page);
      
      // Use helper method for robust login
      await helpers.loginAsDemo();

      // Navigate to account settings using helper
      await helpers.goToAccountSettings();

      // Check password change form using actual field IDs from Rails
      await expect(page.locator('input[id="user_password"]')).toBeVisible();
      await expect(page.locator('input[id="user_password_confirmation"]')).toBeVisible();
      await expect(page.locator('input[id="user_current_password"]')).toBeVisible();

      // Clear fields first to handle browser autocomplete issues
      await page.locator('input[id="user_password"]').clear();
      await page.locator('input[id="user_password_confirmation"]').clear();
      await page.locator('input[id="user_current_password"]').clear();

      // Wait a bit to ensure clearing is complete
      await page.waitForTimeout(500);

      // Actually change the password
      await page.locator('input[id="user_password"]').fill(newPassword);
      await page.locator('input[id="user_password_confirmation"]').fill(newPassword);
      await page.locator('input[id="user_current_password"]').fill(TEST_USERS.DEMO.password);
      
      // Submit the form
      await page.getByRole('button', { name: 'Update' }).click();

      // Wait for update to complete
      await page.waitForLoadState('networkidle');

      // Look for success flash message with multiple styling options
      const successMessage = page.locator('.bg-blue-100, .text-blue-700, .bg-green-100, .text-green-700, .alert-success').filter({ hasText: /updated.*successfully/i });
      await expect(successMessage.first()).toBeVisible({ timeout: 10000 });

      // Navigate back to account settings to restore password
      // (Devise might have redirected us away from the form)
      await helpers.goToAccountSettings();

      // Clear fields first
      await page.locator('input[id="user_password"]').clear();
      await page.locator('input[id="user_password_confirmation"]').clear();
      await page.locator('input[id="user_current_password"]').clear();
      await page.waitForTimeout(500);

      // Restore original password
      await page.locator('input[id="user_password"]').fill(TEST_USERS.DEMO.password);
      await page.locator('input[id="user_password_confirmation"]').fill(TEST_USERS.DEMO.password);
      await page.locator('input[id="user_current_password"]').fill(newPassword);
      await page.getByRole('button', { name: 'Update' }).click();

      // Wait for restoration to complete
      await page.waitForLoadState('networkidle');
      
      // Look for success message to confirm restoration
      const finalSuccessMessage = page.locator('.bg-blue-100, .text-blue-700, .bg-green-100, .text-green-700, .alert-success').filter({ hasText: /updated.*successfully/i });
      await expect(finalSuccessMessage.first()).toBeVisible({ timeout: 10000 });

      // Verify we can still login with the original password by logging out and back in
      await helpers.logout();
      
      // Login with original password to verify restoration worked
      await page.goto('/users/sign_in');
      await page.waitForLoadState('networkidle');
      
      await page.getByLabel('Email').fill(TEST_USERS.DEMO.email);
      await page.getByLabel('Password').fill(TEST_USERS.DEMO.password);
      await page.getByRole('button', { name: 'Log in' }).click();

      // Wait for login to complete
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(1000);
      await page.waitForURL(/\/map/, { timeout: 15000 });

      // Verify we're logged in with the original password
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible({ timeout: 5000 });
    });
  });

  test.describe.configure({ mode: 'serial' });
  test.describe('Account Settings', () => {
    test.beforeEach(async ({ page }) => {
      // Use the helper method for more robust login
      const helpers = new TestHelpers(page);
      await helpers.loginAsDemo();
    });

    test('should display account settings page', async ({ page }) => {
      // Wait a bit more to ensure page is fully loaded
      await page.waitForTimeout(500);
      
      const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email }).first();
      await userDropdown.locator('summary').click();
      
      // Wait for dropdown to open
      await page.waitForTimeout(300);
      
      await page.getByRole('link', { name: 'Account' }).click();

      await expect(page).toHaveURL(/\/users\/edit/);
      
      // Be more flexible with the heading text
      const headingVariations = [
        page.getByRole('heading', { name: 'Edit your account!' }),
        page.getByRole('heading', { name: /edit.*account/i }),
        page.locator('h1, h2, h3').filter({ hasText: /edit.*account/i })
      ];
      
      let headingFound = false;
      for (const heading of headingVariations) {
        if (await heading.isVisible()) {
          await expect(heading).toBeVisible();
          headingFound = true;
          break;
        }
      }
      
      if (!headingFound) {
        // If no heading found, at least verify we're on the right page
        await expect(page.getByLabel('Email')).toBeVisible();
      }
      
      await expect(page.getByLabel('Email')).toBeVisible();
    });

    test('should update email address with current password', async ({ page }) => {
      let emailChanged = false;
      const newEmail = 'newemail@test.com';
      
      try {
        // Wait a bit more to ensure page is fully loaded
        await page.waitForTimeout(500);
        
        const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email }).first();
        await userDropdown.locator('summary').click();
        
        // Wait for dropdown to open
        await page.waitForTimeout(300);
        
        await page.getByRole('link', { name: 'Account' }).click();

        // Wait for account page to load
        await page.waitForURL(/\/users\/edit/, { timeout: 10000 });
        await page.waitForLoadState('networkidle');

        // Actually change the email using the correct field ID
        await page.locator('input[id="user_email"]').fill(newEmail);
        await page.locator('input[id="user_current_password"]').fill(TEST_USERS.DEMO.password);
        await page.getByRole('button', { name: 'Update' }).click();

        // Wait for update to complete and check for success flash message
        await page.waitForLoadState('networkidle');
        emailChanged = true;

        // Look for success flash message with Devise styling
        const successMessage = page.locator('.bg-blue-100, .text-blue-700, .bg-green-100, .text-green-700').filter({ hasText: /updated.*successfully/i });
        await expect(successMessage.first()).toBeVisible({ timeout: 10000 });

        // Verify the new email is displayed in the navigation
        await expect(page.getByText(newEmail)).toBeVisible({ timeout: 5000 });

      } finally {
        // ALWAYS restore original email, even if test fails
        if (emailChanged) {
          try {
            // Navigate to account settings if not already there
            if (!page.url().includes('/users/edit')) {
              // Wait and try to find dropdown with new email
              await page.waitForTimeout(500);
              const userDropdownNew = page.locator('details').filter({ hasText: newEmail }).first();
              await userDropdownNew.locator('summary').click();
              await page.waitForTimeout(300);
              await page.getByRole('link', { name: 'Account' }).click();
              await page.waitForURL(/\/users\/edit/, { timeout: 10000 });
            }

            // Change email back to original
            await page.locator('input[id="user_email"]').fill(TEST_USERS.DEMO.email);
            await page.locator('input[id="user_current_password"]').fill(TEST_USERS.DEMO.password);
            await page.getByRole('button', { name: 'Update' }).click();

            // Wait for final update to complete
            await page.waitForLoadState('networkidle');
            
            // Verify original email is back
            await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible({ timeout: 5000 });
          } catch (cleanupError) {
            console.warn('Failed to restore original email:', cleanupError);
          }
        }
      }
    });

    test('should view API key in settings', async ({ page }) => {
      // Wait a bit more to ensure page is fully loaded
      await page.waitForTimeout(500);
      
      const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email }).first();
      await userDropdown.locator('summary').click();
      
      // Wait for dropdown to open
      await page.waitForTimeout(300);
      
      await page.getByRole('link', { name: 'Account' }).click();

      // Wait for account page to load
      await page.waitForURL(/\/users\/edit/, { timeout: 10000 });
      await page.waitForLoadState('networkidle');

      // Look for code element containing the API key (the actual key value)
      const codeElement = page.locator('code, .code, [data-testid="api-key"]');
      await expect(codeElement.first()).toBeVisible({ timeout: 5000 });
      
      // Verify the API key has content
      const apiKeyValue = await codeElement.first().textContent();
      expect(apiKeyValue).toBeTruthy();
      expect(apiKeyValue?.length).toBeGreaterThan(10); // API keys should be reasonably long
      
      // Verify instructional text is present (use first() to avoid strict mode issues)
      const instructionText = page.getByText('Use this API key to authenticate');
      await expect(instructionText).toBeVisible();
    });

    test('should generate new API key', async ({ page }) => {
      // Wait a bit more to ensure page is fully loaded
      await page.waitForTimeout(500);
      
      const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email }).first();
      await userDropdown.locator('summary').click();
      
      // Wait for dropdown to open
      await page.waitForTimeout(300);
      
      await page.getByRole('link', { name: 'Account' }).click();

      // Wait for account page to load
      await page.waitForURL(/\/users\/edit/, { timeout: 10000 });
      await page.waitForLoadState('networkidle');

      // Get current API key
      const codeElement = page.locator('code, .code, [data-testid="api-key"]').first();
      await expect(codeElement).toBeVisible({ timeout: 5000 });
      const currentApiKey = await codeElement.textContent();
      expect(currentApiKey).toBeTruthy();

      // Actually generate a new API key - be more flexible with link text
      const generateKeyLink = page.getByRole('link', { name: /generate.*new.*api.*key/i }).or(
        page.getByRole('link', { name: /regenerate.*key/i })
      );
      await expect(generateKeyLink.first()).toBeVisible({ timeout: 5000 });

      // Handle the confirmation dialog if it appears
      page.on('dialog', dialog => dialog.accept());

      await generateKeyLink.first().click();

      // Wait for the page to reload/update
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(1000);

      // Verify the API key has changed
      const newApiKey = await codeElement.textContent();
      expect(newApiKey).toBeTruthy();
      expect(newApiKey).not.toBe(currentApiKey);

      // Look for success flash message with various styling options
      const successMessage = page.locator('.bg-blue-100, .text-blue-700, .bg-green-100, .text-green-700, .alert-success');
      if (await successMessage.first().isVisible()) {
        await expect(successMessage.first()).toBeVisible();
      }
    });

    test('should change theme', async ({ page }) => {
      // Theme toggle is in the navbar - look for it more specifically
      const themeButton = page.locator('svg').locator('..').filter({ hasText: /path/ }).first();

      if (await themeButton.isVisible()) {
        // Get current theme
        const htmlElement = page.locator('html');
        const currentTheme = await htmlElement.getAttribute('data-theme');

        await themeButton.click();

        // Wait for theme change with retry logic
        let newTheme = currentTheme;
        let attempts = 0;
        
        while (newTheme === currentTheme && attempts < 10) {
          await page.waitForTimeout(200);
          newTheme = await htmlElement.getAttribute('data-theme');
          attempts++;
        }

        // Theme should have changed
        expect(newTheme).not.toBe(currentTheme);
      } else {
        // If theme button is not visible, just verify the page doesn't crash
        const navbar = page.locator('.navbar');
        await expect(navbar).toBeVisible();
        console.log('Theme button not found, but navbar is functional');
      }
    });
  });

  test.describe('Registration (Non-Self-Hosted)', () => {
    test('should show registration link when not self-hosted', async ({ page }) => {
      await page.goto('/users/sign_in');

      // Registration link may or may not be visible depending on SELF_HOSTED setting
      const registerLink = page.getByRole('link', { name: 'Register' }).first();
      const selfHosted = await page.getAttribute('html', 'data-self-hosted');

      if (selfHosted === 'false') {
        await expect(registerLink).toBeVisible();
      } else {
        await expect(registerLink).not.toBeVisible();
      }
    });

    test('should display registration form when available', async ({ page }) => {
      await page.goto('/users/sign_up');
      
      // Wait for page to load
      await page.waitForLoadState('networkidle');

      // May redirect if self-hosted, so check current URL
      const currentUrl = page.url();
      if (currentUrl.includes('/users/sign_up')) {
        await expect(page.getByRole('heading', { name: 'Register now!' })).toBeVisible();
        await expect(page.getByLabel('Email')).toBeVisible();
        await expect(page.locator('input[id="user_password"]')).toBeVisible();
        await expect(page.locator('input[id="user_password_confirmation"]')).toBeVisible();
        await expect(page.getByRole('button', { name: 'Sign up' })).toBeVisible();
      } else {
        // If redirected (self-hosted mode), verify we're on login page
        console.log('Registration not available (self-hosted mode), redirected to:', currentUrl);
        await expect(page).toHaveURL(/\/users\/sign_in/);
      }
    });
  });

  test.describe('Mobile Authentication', () => {
    test('should work on mobile viewport', async ({ page }) => {
      // Set mobile viewport
      await page.setViewportSize({ width: 375, height: 667 });

      await page.goto('/users/sign_in');
      
      // Wait for page to load
      await page.waitForLoadState('networkidle');

      // Check mobile-responsive login form
      await expect(page.getByLabel('Email')).toBeVisible();
      await expect(page.getByLabel('Password')).toBeVisible();
      await expect(page.getByRole('button', { name: 'Log in' })).toBeVisible();

      // Test login on mobile
      await page.getByLabel('Email').fill(TEST_USERS.DEMO.email);
      await page.getByLabel('Password').fill(TEST_USERS.DEMO.password);
      await page.getByRole('button', { name: 'Log in' }).click();

      // Wait for the form submission to complete
      await page.waitForLoadState('networkidle');
      
      // Check if login failed (stayed on login page)
      const currentUrl = page.url();
      if (currentUrl.includes('/users/sign_in')) {
        // Check for error messages
        const errorMessage = page.locator('.bg-red-100, .text-red-700, .alert-error');
        if (await errorMessage.isVisible()) {
          throw new Error(`Mobile login failed for ${TEST_USERS.DEMO.email}. Credentials may be corrupted.`);
        }
      }
      
      await page.waitForTimeout(1000);

      await page.waitForURL(/\/map/, { timeout: 15000 });
      
      // Verify we're logged in by looking for user email in navigation
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible({ timeout: 5000 });
    });

    test('should handle mobile navigation after login', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 });

      // Manual login
      await page.goto('/users/sign_in');
      await page.waitForLoadState('networkidle');
      
      await page.getByLabel('Email').fill(TEST_USERS.DEMO.email);
      await page.getByLabel('Password').fill(TEST_USERS.DEMO.password);
      await page.getByRole('button', { name: 'Log in' }).click();

      // Wait for the form submission to complete
      await page.waitForLoadState('networkidle');
      
      // Check if login failed (stayed on login page)
      const currentUrl = page.url();
      if (currentUrl.includes('/users/sign_in')) {
        // Check for error messages
        const errorMessage = page.locator('.bg-red-100, .text-red-700, .alert-error');
        if (await errorMessage.isVisible()) {
          throw new Error(`Mobile navigation login failed for ${TEST_USERS.DEMO.email}. Credentials may be corrupted.`);
        }
      }
      
      await page.waitForTimeout(1000);

      await page.waitForURL(/\/map/, { timeout: 15000 });

      // Verify we're logged in first
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible({ timeout: 5000 });

      // Open mobile navigation using hamburger menu or mobile-specific elements
      const mobileMenuButton = page.locator('label[tabindex="0"]').or(
        page.locator('button').filter({ hasText: /menu/i })
      ).or(
        page.locator('.drawer-toggle')
      );

      if (await mobileMenuButton.first().isVisible()) {
        await mobileMenuButton.first().click();
        await page.waitForTimeout(300);

        // Should see user email in mobile menu structure
        await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible({ timeout: 3000 });
      } else {
        // If mobile menu is not found, just verify the user is logged in
        console.log('Mobile menu button not found, but user is logged in');
        await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible();
      }
    });

    test('should handle mobile logout', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 });

      // Manual login
      await page.goto('/users/sign_in');
      await page.waitForLoadState('networkidle');
      
      await page.getByLabel('Email').fill(TEST_USERS.DEMO.email);
      await page.getByLabel('Password').fill(TEST_USERS.DEMO.password);
      await page.getByRole('button', { name: 'Log in' }).click();

      // Wait for the form submission to complete
      await page.waitForLoadState('networkidle');
      
      // Check if login failed (stayed on login page)
      const currentUrl = page.url();
      if (currentUrl.includes('/users/sign_in')) {
        // Check for error messages
        const errorMessage = page.locator('.bg-red-100, .text-red-700, .alert-error');
        if (await errorMessage.isVisible()) {
          throw new Error(`Mobile logout test login failed for ${TEST_USERS.DEMO.email}. Credentials may be corrupted.`);
        }
      }
      
      await page.waitForTimeout(1000);

      await page.waitForURL(/\/map/, { timeout: 15000 });

      // Verify we're logged in first
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible({ timeout: 5000 });

      // In mobile view, user dropdown should still work
      const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email }).first();
      await userDropdown.locator('summary').click();
      await page.waitForTimeout(300);

      // Use evaluate to trigger the logout form submission properly
      await page.evaluate(() => {
        const logoutLink = document.querySelector('a[href="/users/sign_out"]');
        if (logoutLink) {
          // Create a form and submit it with DELETE method (Rails UJS style)
          const form = document.createElement('form');
          form.action = '/users/sign_out';
          form.method = 'post';
          form.style.display = 'none';

          // Add method override for DELETE
          const methodInput = document.createElement('input');
          methodInput.type = 'hidden';
          methodInput.name = '_method';
          methodInput.value = 'delete';
          form.appendChild(methodInput);

          // Add CSRF token
          const csrfToken = document.querySelector('meta[name="csrf-token"]');
          if (csrfToken) {
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'authenticity_token';
            const tokenValue = csrfToken.getAttribute('content');
            if (tokenValue) {
              csrfInput.value = tokenValue;
            }
            form.appendChild(csrfInput);
          }

          document.body.appendChild(form);
          form.submit();
        }
      });

      // Wait for redirect and navigate to home to verify logout
      await page.waitForURL('/', { timeout: 15000 });

      // Verify user is logged out - should see login options
      await expect(page.getByRole('link', { name: 'Sign in' })).toBeVisible({ timeout: 5000 });
    });
  });

  test.describe('Navigation Integration', () => {
    test.beforeEach(async ({ page }) => {
      // Use the helper method for more robust login
      const helpers = new TestHelpers(page);
      await helpers.loginAsDemo();
    });

    test('should show user email in navigation', async ({ page }) => {
      // User email should be visible in the navbar dropdown
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible();
    });

    test('should show admin indicator for admin users', async ({ page }) => {
      // Look for admin star indicator if user is admin
      const adminStar = page.getByText('⭐️');
      // Admin indicator may not be visible for demo user
      const isVisible = await adminStar.isVisible();
      // Just verify the page doesn't crash
      expect(typeof isVisible).toBe('boolean');
    });

    test('should access settings through navigation', async ({ page }) => {
      const userDropdown = page.locator('details').filter({ hasText: TEST_USERS.DEMO.email });
      await userDropdown.locator('summary').click();
      await page.getByRole('link', { name: 'Settings' }).click();

      await expect(page).toHaveURL(/\/settings/);
      await expect(page.getByRole('heading', { name: /settings/i })).toBeVisible();
    });

    test('should show version badge in navigation', async ({ page }) => {
      // Version badge should be visible
      const versionBadge = page.locator('.badge').filter({ hasText: /\d+\.\d+/ });
      await expect(versionBadge).toBeVisible();
    });

    test('should show notifications dropdown', async ({ page }) => {
      // Look for notifications dropdown or button with multiple approaches
      const notificationDropdown = page.locator('[data-controller="notifications"]');
      const notificationButton = page.locator('svg').filter({ hasText: /path.*stroke/ }).first();
      const bellIcon = page.locator('[data-testid="bell-icon"]');
      
      // Try to find any notification-related element
      const hasNotificationDropdown = await notificationDropdown.isVisible();
      const hasNotificationButton = await notificationButton.isVisible();
      const hasBellIcon = await bellIcon.isVisible();

      if (hasNotificationDropdown || hasNotificationButton || hasBellIcon) {
        // At least one notification element exists
        if (hasNotificationDropdown) {
          await expect(notificationDropdown).toBeVisible();
        } else if (hasNotificationButton) {
          await expect(notificationButton).toBeVisible();
        } else if (hasBellIcon) {
          await expect(bellIcon).toBeVisible();
        }
        console.log('Notifications feature is available');
      } else {
        // If notifications aren't available, just verify the navbar is functional
        const navbar = page.locator('.navbar');
        await expect(navbar).toBeVisible();
        console.log('Notifications feature not found, but navbar is functional');
        
        // This is not necessarily an error - notifications might be disabled
        // or not implemented in this version
      }
    });
  });

  test.describe('Session Management', () => {
    test('should maintain session across page reloads', async ({ page }) => {
      // Use helper method for robust login
      const helpers = new TestHelpers(page);
      await helpers.loginAsDemo();

      // Reload page
      await page.reload();
      await page.waitForLoadState('networkidle');

      // Should still be logged in
      await expect(page.getByText(TEST_USERS.DEMO.email)).toBeVisible();
      await expect(page).toHaveURL(/\/map/);
    });

    test('should handle session timeout gracefully', async ({ page }) => {
      // Use helper method for robust login
      const helpers = new TestHelpers(page);
      await helpers.loginAsDemo();

      // Clear all cookies to simulate session timeout
      await page.context().clearCookies();

      // Try to access protected page
      await page.goto('/settings');

      // Should redirect to login
      await expect(page).toHaveURL(/\/users\/sign_in/);
    });
  });
});