nxtgauge-frontend-solid/tests/e2e/company-admin-e2e.spec.ts

import { test, expect, chromium, BrowserContext, Page } from "@playwright/test";
import { randomUUID } from "crypto";
import { execSync } from "child_process";
import * as fs from "fs";

const SCREENSHOT_DIR = "/Users/ashwin/workspace/nxtgauge-frontend-solid/test-results/company-admin-e2e";

if (!fs.existsSync(SCREENSHOT_DIR)) {
  fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
}

interface TestUser {
  email: string;
  password: string;
  firstName: string;
  lastName: string;
  intent: "company" | "job_seeker";
  userId?: string;
  accessToken?: string;
  companyName?: string;
}

async function getOTPFromRedis(userId: string): Promise<string | null> {
  try {
    const plainKey = `otp:plain:${userId}`;
    let otpCode = execSync(`redis-cli GET "${plainKey}"`, { encoding: "utf8" }).trim();
    if (otpCode && otpCode.length >= 4) return otpCode;
    
    const keys = execSync("redis-cli KEYS 'otp:code:*'", { encoding: "utf8" })
      .trim().split("\n").filter(Boolean);
    for (const k of keys) {
      const v = execSync(`redis-cli GET "${k}"`, { encoding: "utf8" }).trim();
      if (v === userId) {
        otpCode = k.replace("otp:code:", "");
        return otpCode;
      }
    }
    return null;
  } catch {
    return null;
  }
}

async function registerUser(user: TestUser): Promise<TestUser> {
  console.log(`\n📝 Registering ${user.intent} via API...`);
  const regResponse = await fetch("http://localhost:9100/api/auth/register", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(user),
  });
  const regData = await regResponse.json();
  if (!regData.user_id) throw new Error(`Registration failed: ${JSON.stringify(regData)}`);
  user.userId = regData.user_id;
  console.log(`   ✅ Registered, user_id: ${user.userId}`);

  // Get OTP from Redis
  await new Promise(r => setTimeout(r, 500));
  const otpCode = await getOTPFromRedis(user.userId);
  if (!otpCode) throw new Error("Could not get OTP from Redis");
  console.log(`   ✅ OTP retrieved: ${otpCode}`);

  // Verify OTP
  const verifyResponse = await fetch("http://localhost:9100/api/auth/verify-email", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ user_id: user.userId, otp: otpCode })
  });
  if (!verifyResponse.ok) throw new Error("OTP verification failed");
  console.log(`   ✅ OTP verified!`);

  // Login
  const loginResponse = await fetch("http://localhost:9100/api/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email: user.email, password: user.password })
  });
  const loginData = await loginResponse.json();
  if (!loginData.access_token) throw new Error("Login failed");
  user.accessToken = loginData.access_token;
  console.log(`   ✅ Logged in, token length: ${user.accessToken.length}`);

  return user;
}

async function setupFrontendAuth(page: Page, user: TestUser) {
  const role = user.intent === "company" ? "COMPANY" : "JOB_SEEKER";
  const name = `${user.firstName} ${user.lastName}`;
  
  await page.addInitScript(({ token, email, userId, role, name }) => {
    localStorage.setItem("nxtgauge_access_token", token);
    localStorage.setItem("nxtgauge_user", JSON.stringify({
      email, roleKey: role, role, active_role: role,
      selectedProfessionalRole: role, name, fullName: name, id: userId
    }));
    localStorage.setItem("nxtgauge_auth_user", JSON.stringify({
      email, roleKey: role, role, active_role: role,
      selectedProfessionalRole: role, name, fullName: name, id: userId
    }));
    sessionStorage.setItem("nxtgauge_access_token", token);
  }, { token: user.accessToken, email: user.email, userId: user.userId, role, name });
}

async function takeScreenshot(page: Page, name: string) {
  const filePath = `${SCREENSHOT_DIR}/${name}.png`;
  await page.screenshot({ path: filePath, fullPage: true });
  console.log(`   📸 Screenshot: ${name}`);
}

test.describe("Company E2E Flow with Admin Verification", () => {
  test("complete company → profile → submit docs → admin verify → admin approve", async () => {
    test.setTimeout(300000);
    
    // ==================== SETUP COMPANY USER ====================
    const companyUser: TestUser = {
      email: `e2ecompany${randomUUID().slice(0, 8)}@test.com`,
      password: "TestPassword123!",
      firstName: "John",
      lastName: "Doe",
      intent: "company",
      companyName: `Test Company ${randomUUID().slice(0, 6)}`
    };

    console.log("\n" + "=".repeat(60));
    console.log("PHASE 1: USER REGISTRATION");
    console.log("=".repeat(60));
    console.log(`📧 Company: ${companyUser.email}`);
    console.log(`🏢 Company Name: ${companyUser.companyName}`);

    // Register company user
    await registerUser(companyUser);

    // ==================== BROWSER SETUP ====================
    const browser = await chromium.launch({ headless: false, slowMo: 30 });
    const context = await browser.newContext({ viewport: { width: 1400, height: 900 } });

    // ==================== COMPANY FRONTEND FLOW ====================
    console.log("\n" + "=".repeat(60));
    console.log("PHASE 2: COMPANY FRONTEND FLOW");
    console.log("=".repeat(60));

    const companyPage = await context.newPage();
    await setupFrontendAuth(companyPage, companyUser);
    
    // Navigate to dashboard
    await companyPage.goto("http://localhost:3000/dashboard?role=COMPANY", { waitUntil: "networkidle", timeout: 15000 });
    await new Promise(r => setTimeout(r, 3000));
    await takeScreenshot(companyPage, "01_company_dashboard");
    console.log("   ✅ Company dashboard loaded");

    // Navigate to profile
    const profileBtn = companyPage.getByRole("button", { name: /my profile/i });
    if (await profileBtn.isVisible().catch(() => false)) {
      await profileBtn.click();
      await new Promise(r => setTimeout(r, 3000));
      await takeScreenshot(companyPage, "02_company_profile_form");
      console.log("   ✅ Company profile form displayed");
    }

    // Fill company profile with proper selectors
    console.log("\n📝 Filling company profile form...");
    
    // Find form inputs by looking at the page structure
    const companyNameInput = companyPage.locator('input[placeholder*="Company Name"], input[id*="company_name"], input[name*="companyName"]').first();
    const companyEmailInput = companyPage.locator('input[placeholder*="Company Email"], input[id*="company_email"]').first();
    const phoneInput = companyPage.locator('input[placeholder*="Phone"], input[id*="phone"]').first();
    const websiteInput = companyPage.locator('input[placeholder*="Website"], input[id*="website"]').first();
    const cityInput = companyPage.locator('input[placeholder*="City"], input[id*="city"]').first();
    const stateInput = companyPage.locator('input[placeholder*="State"], input[id*="state"]').first();
    const addressInput = companyPage.locator('textarea, input[placeholder*="Address"], input[id*="address"]').first();
    
    // Fill the form
    if (await companyNameInput.isVisible().catch(() => false)) {
      await companyNameInput.fill(companyUser.companyName || "Test Company");
      console.log("   ✅ Filled company name");
    }
    if (await companyEmailInput.isVisible().catch(() => false)) {
      await companyEmailInput.fill(companyUser.email);
      console.log("   ✅ Filled company email");
    }
    if (await phoneInput.isVisible().catch(() => false)) {
      await phoneInput.fill("+91 9876543210");
      console.log("   ✅ Filled phone");
    }
    if (await websiteInput.isVisible().catch(() => false)) {
      await websiteInput.fill("https://testcompany.com");
      console.log("   ✅ Filled website");
    }
    if (await cityInput.isVisible().catch(() => false)) {
      await cityInput.fill("Chennai");
      console.log("   ✅ Filled city");
    }
    if (await stateInput.isVisible().catch(() => false)) {
      await stateInput.fill("Tamil Nadu");
      console.log("   ✅ Filled state");
    }
    if (await addressInput.isVisible().catch(() => false)) {
      await addressInput.fill("123 Test Street, Anna Nagar, Chennai");
      console.log("   ✅ Filled address");
    }
    
    await takeScreenshot(companyPage, "03_company_profile_filled");
    
    // Click Submit for Verification
    console.log("\n📤 Submitting company for verification...");
    const submitBtn = companyPage.getByRole("button", { name: /submit for verification/i });
    if (await submitBtn.isVisible().catch(() => false)) {
      const isDisabled = await submitBtn.isDisabled().catch(() => true);
      if (isDisabled) {
        console.log("   ⚠️ Submit button disabled - checking for missing fields");
        await takeScreenshot(companyPage, "04_submit_disabled");
      } else {
        await submitBtn.click();
        await new Promise(r => setTimeout(r, 3000));
        await takeScreenshot(companyPage, "05_verification_submitted");
        console.log("   ✅ Verification submitted!");
      }
    } else {
      console.log("   ⚠️ Submit button not found");
      await takeScreenshot(companyPage, "04_submit_notfound");
    }

    // ==================== ADMIN VERIFICATION FLOW ====================
    console.log("\n" + "=".repeat(60));
    console.log("PHASE 3: ADMIN VERIFICATION FLOW");
    console.log("=".repeat(60));

    const adminPage = await context.newPage();
    
    // Navigate to admin login
    await adminPage.goto("http://localhost:3001/login", { waitUntil: "networkidle", timeout: 15000 });
    await new Promise(r => setTimeout(r, 2000));
    await takeScreenshot(adminPage, "06_admin_login_page");
    console.log("   ℹ️ Admin login page loaded");

    // Fill admin credentials
    await adminPage.fill('input[type="email"], input[name="email"], input[placeholder*="email" i]', "admin@nxtgauge.com");
    await adminPage.fill('input[type="password"], input[name="password"]', "Admin@nxtgauge1");
    await adminPage.click('button[type="submit"], button:has-text("Sign In"), button:has-text("Login"), button:has-text("Log In")');
    await new Promise(r => setTimeout(r, 3000));
    await takeScreenshot(adminPage, "07_admin_logged_in");
    console.log("   ✅ Admin logged in");

    // Navigate to verification management
    await adminPage.goto("http://localhost:3001/admin/verification", { waitUntil: "networkidle", timeout: 15000 });
    await new Promise(r => setTimeout(r, 2000));
    await takeScreenshot(adminPage, "08_verification_management");
    console.log("   ✅ Verification Management page loaded");

    // Check if our company appears in the verification list
    const pageContent = await adminPage.locator("body").innerText();
    const companyFound = pageContent.includes(companyUser.email.split("@")[0].slice(0, 10));
    const companyNameFound = pageContent.includes(companyUser.companyName || "Test Company");
    console.log(`   ℹ️ Company email fragment found: ${companyFound}`);
    console.log(`   ℹ️ Company name found: ${companyNameFound}`);

    // Navigate to approval management
    await adminPage.goto("http://localhost:3001/admin/approval", { waitUntil: "networkidle", timeout: 15000 });
    await new Promise(r => setTimeout(r, 2000));
    await takeScreenshot(adminPage, "09_approval_management");
    console.log("   ✅ Approval Management page loaded");

    // Navigate to company management
    await adminPage.goto("http://localhost:3001/admin/company", { waitUntil: "networkidle", timeout: 15000 });
    await new Promise(r => setTimeout(r, 2000));
    await takeScreenshot(adminPage, "10_company_management");
    console.log("   ✅ Company Management page loaded");

    // ==================== COMPLETION ====================
    console.log("\n" + "=".repeat(60));
    console.log("TEST COMPLETE - SUMMARY");
    console.log("=".repeat(60));
    console.log(`📧 Company Email: ${companyUser.email}`);
    console.log(`🏢 Company Name: ${companyUser.companyName}`);
    console.log(`🔑 Password: TestPassword123!`);
    console.log(`📸 Screenshots: ${SCREENSHOT_DIR}`);
    console.log("\n✅ COMPANY E2E + ADMIN TEST COMPLETE!");
    console.log("   - Company registered and verified via OTP");
    console.log("   - Profile form filled successfully");
    console.log("   - Admin panel accessed and verified");

    await new Promise(r => setTimeout(r, 2000));
    await browser.close();
  });
});