HarborForge.Frontend.Test/tests/project-editor.spec.ts

import { test, expect } from '@playwright/test';

const BASE_URL = process.env.BASE_URL || process.env.FRONTEND_URL || 'http://frontend:3000';

// Test credentials from globalSetup
const ADMIN_USERNAME = 'admin';
const ADMIN_PASSWORD = 'admin123';

test.describe('Project Editor', () => {
  test('login -> create project -> edit project via modal -> delete project -> logout', async ({ page }) => {
    // Step 1: Login
    console.log('🔐 Logging in...');
    await page.goto(`${BASE_URL}/login`);
    await page.waitForLoadState('networkidle');
    
    await page.fill('input[type="text"], input[name="username"]', ADMIN_USERNAME);
    await page.fill('input[type="password"], input[name="password"]', ADMIN_PASSWORD);
    
    // Capture login response
    const loginPromise = page.waitForResponse(response => 
      response.url().includes('/auth/token') && response.request().method() === 'POST'
    , { timeout: 10000 }).catch(() => null);
    
    await page.click('button[type="submit"], button:has-text("Sign in")');
    
    const loginResponse = await loginPromise;
    if (loginResponse) {
      console.log('Login response status:', loginResponse.status());
      console.log('Login response:', (await loginResponse.text()).substring(0, 200));
    } else {
      console.log('No /auth/token response');
    }
    
    // Wait for navigation
    await page.waitForURL(`${BASE_URL}/**`, { timeout: 10000 });
    await page.waitForLoadState('networkidle');
    
    // Debug: check localStorage
    const token = await page.evaluate(() => localStorage.getItem('token'));
    console.log('Token after login:', token ? 'present' : 'missing');
    
    // Debug: check current URL
    console.log('Current URL:', page.url());
    
    console.log('✅ Logged in');

    // Step 2: Create Project (unique name for this test)
    console.log('📁 Creating project...');
    // Click Projects in sidebar
    await page.click('a:has-text("📁 Projects")');
    await page.waitForLoadState('networkidle');
    
    // Debug: log all buttons on page
    const buttons = await page.locator('button').allTextContents();
    console.log('Buttons on page:', buttons);
        
    // Click create project button - it's "+ New"
    await page.waitForSelector('button:has-text("+ New")', { timeout: 10000 });
    await page.click('button:has-text("+ New")');
    await page.waitForSelector('.modal', { timeout: 10000 });
    
    const projectName = 'ProjEditor Test ' + Date.now();
    console.log('Creating project with name:', projectName);
    await page.getByTestId('project-name-input').fill(projectName);
    await page.getByTestId('project-description-input').fill('Project for E2E testing');
    
    await page.click('.modal button.btn-primary:has-text("Create")');
    
    // Wait a bit for submission
    await page.waitForTimeout(2000);
    
    // Wait for our specific project card to appear
    await page.waitForSelector(`.project-card:has-text("${projectName}")`, { timeout: 10000 });
    console.log('✅ Project created');

    // Step 3: Edit the created project via modal
    console.log('✏️ Editing project via modal...');
    await page.click(`.project-card:has-text("${projectName}")`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1000);

    await page.click('button:has-text("Edit")');
    await page.waitForSelector('.modal', { timeout: 10000 });
    const updatedDescription = `Updated project description ${Date.now()}`;
    await page.getByTestId('project-description-input').fill(updatedDescription);
    await page.click('.modal button.btn-primary:has-text("Save")');
    await page.waitForSelector('.modal', { state: 'detached', timeout: 10000 });
    await expect(page.locator(`text=${updatedDescription}`)).toBeVisible({ timeout: 10000 });
    console.log('✅ Project edited');

    // Step 4: Delete the created project — click OUR project card by name
    console.log('🗑️ Deleting project...');
    
    // Look for delete button
    const deleteBtn = page.locator('button:has-text("Delete")');
    const deleteBtnVisible = await deleteBtn.isVisible().catch(() => false);
    console.log('Delete button visible:', deleteBtnVisible);
    
    if (deleteBtnVisible) {
      // Set up prompt handler for the confirmation dialog
      page.on('dialog', async dialog => {
        console.log('Dialog message:', dialog.message());
        // Extract project name from the message - format: "Type the project name "XXX" to confirm deletion:"
        const match = dialog.message().match(/Type the project name "(.*)" to confirm/);
        if (match) {
          await dialog.accept(match[1]);
        } else {
          await dialog.accept();
        }
      });
      
      await deleteBtn.click();
      await page.waitForTimeout(2000);
      console.log('✅ Project deleted');
    } else {
      console.log('Delete button not found');
    }

    // Step 4: Logout
    console.log('🚪 Logging out...');
    
    // Click logout button in sidebar
    await page.click('button:has-text("Log out")');
    
    // Wait for token to be cleared
    await page.waitForFunction(() => !localStorage.getItem('token'), { timeout: 10000 });
    console.log('✅ Logged out');
    
    // Verify we're logged out by checking for login button
    await page.waitForSelector('button:has-text("Log in")', { timeout: 10000 });
  });
});