HarborForge.Frontend.Test/tests/milestone.spec.ts

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

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

const ADMIN_USERNAME = 'admin';
const ADMIN_PASSWORD = 'admin123';

test.describe('Milestone Editor', () => {
  test('login -> create project -> create and edit milestone through modal', async ({ page }) => {
    // Step 1: Login (with retry — backend may still be warming up)
    console.log('🔐 Logging in...');

    const MAX_LOGIN_RETRIES = 3;
    for (let attempt = 1; attempt <= MAX_LOGIN_RETRIES; attempt++) {
      console.log(`Login attempt ${attempt}/${MAX_LOGIN_RETRIES}`);

      await page.goto(`${BASE_URL}/login`);
      await page.waitForLoadState('networkidle');

      if (attempt === 1) {
        const backendBase = await page.evaluate(() => localStorage.getItem('HF_BACKEND_BASE_URL'));
        console.log('HF_BACKEND_BASE_URL:', backendBase);
      }

      await page.fill('input[type="text"], input[name="username"]', ADMIN_USERNAME);
      await page.fill('input[type="password"], input[name="password"]', ADMIN_PASSWORD);

      const loginPromise = page.waitForResponse(response =>
        response.url().includes('/auth/token') && response.request().method() === 'POST'
      , { timeout: 15000 }).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());
        if (loginResponse.status() === 200) {
          // Wait for navigation after successful login
          await page.waitForURL(`${BASE_URL}/**`, { timeout: 10000 }).catch(() => {});
          await page.waitForLoadState('networkidle');
          break;
        }
        console.log('Login response:', (await loginResponse.text()).substring(0, 200));
      } else {
        console.log('No /auth/token response (backend may not be ready)');
      }

      if (attempt < MAX_LOGIN_RETRIES) {
        console.log(`Retrying login in 3s...`);
        await page.waitForTimeout(3000);
      }
    }

    const token = await page.evaluate(() => localStorage.getItem('token'));
    console.log('Token after login:', token ? 'present' : 'missing');
    console.log('Current URL:', page.url());
    expect(token, 'Login failed — no token obtained after retries').toBeTruthy();

    await page.waitForSelector('a:has-text("📁 Projects")', { timeout: 10000 });
    console.log('✅ Logged in');

    // Step 2: Create Project (unique name for this test)
    console.log('📁 Creating project...');
    await page.click('a:has-text("📁 Projects")');
    await page.waitForLoadState('networkidle');
    
    await page.waitForSelector('button:has-text("+ New")', { timeout: 10000 });
    await page.click('button:has-text("+ New")');
    await page.waitForSelector('.modal', { timeout: 10000 });
    
    const projectName = 'Milestone Test Project ' + 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 milestone testing');
    
    await page.click('.modal button.btn-primary:has-text("Create")');
    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: Click on OUR project to open it
    console.log('👆 Opening project...');
    await page.click(`.project-card:has-text("${projectName}")`);
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1500);
    console.log('✅ Project opened');

    // Step 4: Create milestone through frontend
    console.log('🎯 Creating milestone...');
    
    // Wait for page to load
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1000);
    
    // Scroll to milestone section
    await page.evaluate(() => window.scrollTo(0, 500));
    await page.waitForTimeout(500);
    
    // Click the "+ New" button for milestones
    await page.click('button:has-text("+ New")');
    await page.waitForTimeout(1000);
    
    // Wait for modal
    await page.waitForSelector('.modal', { timeout: 5000 });
    console.log('Modal opened');
    
    // Fill in the milestone title
    const milestoneName = 'Test Milestone ' + Date.now();
    console.log('Milestone name:', milestoneName);
    await page.fill('input[placeholder="Milestone title"]', milestoneName);
    await page.waitForTimeout(500);
    
    // Click the Create button inside the modal (the one with class btn-primary)
    await page.locator('.modal button.btn-primary').click();
    await page.waitForTimeout(2000);
    
    // Wait for modal to close
    await page.waitForSelector('.modal', { state: 'detached', timeout: 5000 }).catch(() => {});
    await page.waitForTimeout(1000);
    
    // Step 5: Verify milestone was created
    console.log('🔍 Verifying milestone...');
    const headingText = await page.locator('h3').filter({ hasText: /Milestones/i }).textContent();
    console.log('Heading text:', headingText);
    const hasMilestone = headingText && /\(1?\d+\)/.test(headingText) && !headingText.includes('(0)');
    console.log('Has milestone:', hasMilestone);
    expect(hasMilestone).toBe(true);
    console.log('✅ Milestone verified in UI');

    // Step 6: Open milestone and edit it via modal
    console.log('✏️ Editing milestone...');
    await page.click(`.milestone-item:has-text("${milestoneName}")`);
    await page.waitForLoadState('networkidle');
    await page.click('button:has-text("Edit Milestone")');
    await page.waitForSelector('.modal', { timeout: 10000 });

    const updatedMilestoneName = `${milestoneName} Updated`;
    await page.getByTestId('milestone-title-input').fill(updatedMilestoneName);
    await page.click('.modal button.btn-primary:has-text("Save")');
    await page.waitForSelector('.modal', { state: 'detached', timeout: 10000 });
    await expect(page.locator(`h2:has-text("${updatedMilestoneName}")`)).toBeVisible({ timeout: 10000 });
    console.log('✅ Milestone edited');

    console.log('🎉 All milestone tests passed!');
  });
});