128 lines
4.8 KiB
TypeScript
128 lines
4.8 KiB
TypeScript
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 milestone through frontend form', async ({ page }) => {
|
|
// Step 1: Login
|
|
console.log('🔐 Logging in...');
|
|
|
|
page.on('requestfailed', request => {
|
|
if (request.url().includes('/auth/token')) {
|
|
console.log('Login request failed:', request.failure()?.errorText);
|
|
}
|
|
});
|
|
|
|
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);
|
|
|
|
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');
|
|
|
|
const token = await page.evaluate(() => localStorage.getItem('token'));
|
|
console.log('Token after login:', token ? 'present' : 'missing');
|
|
console.log('Current URL:', page.url());
|
|
|
|
await page.waitForSelector('a:has-text("📁 Projects")', { timeout: 10000 });
|
|
console.log('✅ Logged in');
|
|
|
|
// Step 2: Create Project
|
|
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('input[placeholder="Project name"]', { timeout: 10000 });
|
|
|
|
const projectName = 'Test Project ' + Date.now();
|
|
console.log('Creating project with name:', projectName);
|
|
await page.fill('input[placeholder="Project name"]', projectName);
|
|
await page.fill('input[placeholder="Description (optional)"]', 'Project for milestone testing');
|
|
|
|
await page.click('button:has-text("Create")');
|
|
await page.waitForTimeout(2000);
|
|
|
|
await page.waitForSelector('.project-card', { timeout: 10000 });
|
|
console.log('✅ Project created');
|
|
|
|
// Step 3: Click on project to open it
|
|
console.log('👆 Opening project...');
|
|
await page.click('.project-card');
|
|
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...');
|
|
|
|
// Get the heading text
|
|
const headingText = await page.locator('h3').filter({ hasText: /Milestones/i }).textContent();
|
|
console.log('Heading text:', headingText);
|
|
|
|
// Check if milestone count > 0
|
|
const hasMilestone = headingText && /\(1?\d+\)/.test(headingText) && !headingText.includes('(0)');
|
|
console.log('Has milestone:', hasMilestone);
|
|
|
|
// Verify milestone exists in UI
|
|
expect(hasMilestone).toBe(true);
|
|
console.log('✅ Milestone verified in UI');
|
|
|
|
console.log('🎉 All milestone tests passed!');
|
|
});
|
|
});
|