pruebas e2e

e2e/Dockerfile

@@ -0,0 +1,11 @@
+FROM mcr.microsoft.com/playwright:v1.40.0-jammy
+
+WORKDIR /e2e
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+# Default command, can be overridden
+CMD ["npx", "playwright", "test"]

e2e/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "openccb-e2e",
+    "version": "1.0.0",
+    "scripts": {
+        "test": "playwright test",
+        "test:ui": "playwright test --ui",
+        "test:debug": "playwright test --debug"
+    },
+    "devDependencies": {
+        "@playwright/test": "1.40.0",
+        "@types/node": "^20.10.0",
+        "typescript": "^5.3.0"
+    }
+}

e2e/playwright.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// Use environment variables for base URLs, with fallbacks for local dev vs docker
+const STUDIO_URL = process.env.STUDIO_URL || 'http://studio:3000';
+const EXPERIENCE_URL = process.env.EXPERIENCE_URL || 'http://experience:3003';
+
+export default defineConfig({
+    testDir: './tests',
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: 'html',
+    use: {
+        trace: 'on-first-retry',
+        screenshot: 'only-on-failure',
+        video: 'retain-on-failure',
+    },
+
+    projects: [
+        {
+            name: 'setup',
+            testMatch: /global\.setup\.ts/,
+        },
+        {
+            name: 'studio',
+            use: {
+                ...devices['Desktop Chrome'],
+                baseURL: STUDIO_URL,
+            },
+            testMatch: /.*instructor.*\.spec\.ts/,
+            dependencies: ['setup'],
+        },
+        {
+            name: 'experience',
+            use: {
+                ...devices['Desktop Chrome'],
+                baseURL: EXPERIENCE_URL,
+            },
+            testMatch: /.*student.*\.spec\.ts/,
+            dependencies: ['setup'],
+        },
+    ],
+});

e2e/tests/global.setup.ts

@@ -0,0 +1,8 @@
+import { test as setup } from '@playwright/test';
+
+setup('check services are up', async ({ request }) => {
+    // We could ping health endpoints here
+    // const studio = await request.get('http://studio:3000');
+    // expect(studio.ok()).toBeTruthy();
+    console.log('Setup complete - proceeding to tests');
+});

e2e/tests/instructor-flow.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Instructor Flow', () => {
+    test('should login, create course, add content, and publish', async ({ page }) => {
+        const email = `instructor_${Date.now()}@test.com`;
+
+        // 0. Register (since DB might be empty)
+        await page.goto('/auth/register');
+        await page.fill('[placeholder="Instructor Name"]', 'E2E Instructor');
+        await page.fill('[placeholder="instructor@openccb.com"]', email); // or input[type="email"]
+        await page.fill('[placeholder="••••••••"]', 'password123'); // or input[type="password"]
+        await page.click('button[type="submit"]');
+
+        // Wait for navigation - Register automatically logs in and redirects to /
+        // Increase timeout for cold starts in CI/Docker
+        await expect(page).toHaveURL('/', { timeout: 15000 });
+
+        // Verify dashboard loaded
+        await expect(page.locator('h2')).toContainText('My Courses', { timeout: 10000 });
+
+        // 2. Create Course
+        // Usamos manejador de dialogo para el prompt
+        const courseName = 'Playwright E2E Course ' + Date.now();
+        page.on('dialog', dialog => dialog.accept(courseName));
+        await page.click('button:has-text("New Course")');
+
+        // Esperar a que aparezca el nuevo curso y hacer clic
+        await page.waitForTimeout(1000); // Wait for API
+        await page.click('text=Playwright E2E Course');
+
+        // 3. Add Module
+        await page.click('button:has-text("Add Module")');
+        await page.fill('[placeholder="Module Title"]', 'Module 1: Basics');
+        await page.click('button:has-text("Create Module")');
+
+        // 4. Add Lesson
+        await page.click('button:has-text("Add Lesson")');
+        await page.fill('[placeholder="Lesson Title"]', 'Intro Lesson');
+        // Select video type (assuming it's default or select dropdown)
+        await page.click('button:has-text("Create Lesson")');
+
+        // 5. Publish
+        await page.click('button:has-text("Publish Course")');
+
+        // Confirm publish
+        // Assuming there is a confirmation or toast
+        // await expect(page.locator('text=Published successfully')).toBeVisible();
+    });
+});

e2e/tests/student-flow.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Student Flow', () => {
+    test('should login and view catalog', async ({ page }) => {
+        // 1. Register/Login
+        // For simplicity, we assume registration or reuse existing
+        await page.goto('/auth/login');
+
+        // Register link?
+        // await page.click('text=Sign up');
+        // ... fill registration ...
+
+        // OR just login if we seed the DB. 
+        // For E2E on fresh DB, we might need to register first.
+
+        // Let's try to register a new user every time to be safe
+        // Let's try to register a new user every time to be safe
+        const email = `student_${Date.now()}@test.com`;
+        await page.goto('/auth/register');
+        await page.fill('[placeholder="John Doe"]', 'Test Student');
+        await page.fill('[placeholder="name@company.com"]', email);
+        await page.fill('[placeholder="••••••••"]', 'password123');
+        await page.click('button[type="submit"]');
+
+        // Should redirect to dashboard/catalog
+        await expect(page).toHaveURL('/', { timeout: 15000 });
+        await expect(page.locator('h1')).toContainText('Available Courses', { timeout: 10000 });
+
+        // Check if the course from instructor flow is visible (might need refresh)
+        await page.reload();
+        // await expect(page.locator('text=Playwright E2E Course')).toBeVisible();
+    });
+});