WellNuo/e2e/full-flow.spec.ts

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

const BASE_URL = 'https://wellnuo.smartlaunchhub.com/';

// This test requires manual OTP entry or temp-mail integration
test.describe('Full Authentication Flow', () => {

    test('Complete login flow with OTP', async ({ page }) => {
        // Listen to console
        page.on('console', msg => console.log(`BROWSER: ${msg.text()}`));
        page.on('pageerror', err => console.log(`ERROR: ${err.message}`));

        // 1. Go to login page
        await page.goto(BASE_URL);
        await page.waitForLoadState('networkidle');

        console.log('Step 1: Login page loaded');
        await expect(page.getByText('Welcome to WellNuo')).toBeVisible();

        // 2. Enter email (use temp email: ort3x@virgilian.com)
        const testEmail = 'ort3x@virgilian.com';
        await page.getByPlaceholder('Enter your email').fill(testEmail);
        console.log(`Step 2: Email entered: ${testEmail}`);

        // 3. Click Continue
        await page.getByText('Continue').click();
        console.log('Step 3: Clicked Continue');

        // 4. Wait for OTP screen
        await expect(page.getByText(/verification code|Enter.*code/i)).toBeVisible({ timeout: 15000 });
        console.log('Step 4: OTP screen visible');

        // Take screenshot of OTP screen
        await page.screenshot({ path: 'screenshots/otp-screen.png' });
        console.log('Screenshot saved: screenshots/otp-screen.png');

        // 5. Wait for email to arrive and enter OTP
        // For now, just verify we got to OTP screen
        // Full flow would require reading email via temp-mail MCP

        console.log('✅ Login flow up to OTP screen working!');
    });

    test('Check OTP screen elements', async ({ page }) => {
        page.on('console', msg => console.log(`BROWSER: ${msg.text()}`));

        await page.goto(BASE_URL);
        await page.waitForLoadState('networkidle');

        // Enter email and go to OTP
        await page.getByPlaceholder('Enter your email').fill('test@example.com');
        await page.getByText('Continue').click();

        // Wait for OTP screen
        await page.waitForTimeout(2000);

        // Check OTP input elements
        const otpInputs = page.locator('input[type="text"], input[type="number"]');
        const inputCount = await otpInputs.count();
        console.log(`Found ${inputCount} input fields on OTP screen`);

        // Check for Verify button
        const hasVerifyButton = await page.getByText(/Verify|Submit|Confirm/i).isVisible();
        console.log(`Verify button visible: ${hasVerifyButton}`);

        // Check for Resend option
        const hasResend = await page.getByText(/Resend|Send again/i).isVisible();
        console.log(`Resend option visible: ${hasResend}`);

        // Take screenshot
        await page.screenshot({ path: 'screenshots/otp-elements.png' });

        console.log('✅ OTP screen elements checked');
    });

    test('Wrong OTP shows error', async ({ page }) => {
        page.on('console', msg => console.log(`BROWSER: ${msg.text()}`));

        await page.goto(BASE_URL);
        await page.waitForLoadState('networkidle');

        // Go to OTP screen
        await page.getByPlaceholder('Enter your email').fill('test@example.com');
        await page.getByText('Continue').click();
        await page.waitForTimeout(2000);

        // Enter wrong OTP
        await page.keyboard.type('000000');

        // Try to verify
        const verifyButton = page.getByText(/Verify|Submit|Confirm/i);
        if (await verifyButton.isVisible()) {
            await verifyButton.click();

            // Should show error
            await page.waitForTimeout(2000);
            await page.screenshot({ path: 'screenshots/wrong-otp.png' });

            // Check we're still on OTP screen (not logged in)
            const stillOnOtp = await page.getByText(/verification code|Enter.*code|Invalid|incorrect/i).isVisible();
            expect(stillOnOtp).toBe(true);

            console.log('✅ Wrong OTP handled correctly');
        } else {
            console.log('Verify button not found - OTP input might work differently');
        }
    });

});