nxtgauge-frontend-solid/tests/e2e/company-verification-flow.spec.ts

import { test, expect, chromium } from "@playwright/test";
import { randomUUID } from "crypto";

// Generate random test data
const testEmail = `testcompany${randomUUID().slice(0, 8)}@test.com`;
const testPassword = "TestPassword123!";
const testCompanyName = `Test Company ${randomUUID().slice(0, 6)}`;

console.log("🧪 Starting E2E Test Flow");
console.log("📧 Test Email:", testEmail);
console.log("🏢 Company Name:", testCompanyName);

test.setTimeout(120000);

test("Company signup -> verification flow", async () => {
  // Launch browser with UI visible
  const browser = await chromium.launch({
    headless: false,
    slowMo: 500, // Slow down for visibility
  });

  const context = await browser.newContext({
    viewport: { width: 1400, height: 900 },
    recordVideo: {
      dir: "./test-videos/",
      size: { width: 1400, height: 900 },
    },
  });

  const page = await context.newPage();

  try {
    // Step 1: Navigate to public website signup
    console.log("🌐 Step 1: Opening public website...");
    await page.goto("http://localhost:3001/signup");
    await page.waitForLoadState("networkidle");

    // Take screenshot of signup page
    await page.screenshot({ path: "./test-results/01-signup-page.png", fullPage: true });
    console.log("📸 Screenshot: Signup page");

    // Step 2: Fill signup form
    console.log("✍️ Step 2: Filling signup form...");
    await page.fill('input[name="email"], input[type="email"]', testEmail);
    await page.fill('input[name="password"], input[type="password"]', testPassword);
    await page.fill('input[name="confirmPassword"], input[name="confirm"]', testPassword);

    await page.screenshot({ path: "./test-results/02-signup-filled.png", fullPage: true });
    console.log("📸 Screenshot: Signup form filled");

    // Click signup button
    await page.click('button[type="submit"], button:has-text("Sign")');
    await page.waitForTimeout(3000);

    await page.screenshot({ path: "./test-results/03-after-signup.png", fullPage: true });
    console.log("📸 Screenshot: After signup");

    // Step 3: Select Company role
    console.log("🎯 Step 3: Selecting Company role...");
    await page.waitForSelector("text=Company, text=company", { timeout: 10000 });
    await page.click("text=Company");
    await page.waitForTimeout(2000);

    await page.screenshot({ path: "./test-results/04-company-selected.png", fullPage: true });
    console.log("📸 Screenshot: Company role selected");

    // Step 4: Fill Company Profile
    console.log("📝 Step 4: Filling company profile...");

    // Company name
    await page.fill(
      'input[name="companyName"], input[name="name"], input[placeholder*="company"]',
      testCompanyName
    );

    // Business type
    await page.selectOption('select[name="businessType"]', "Private Limited");

    // Industry
    await page.fill('input[name="industry"]', "Technology");

    // Website
    await page.fill('input[name="website"]', "https://testcompany.com");

    // Description
    await page.fill(
      'textarea[name="description"], textarea[name="about"]',
      "We are a technology company looking for talented professionals to join our team."
    );

    await page.screenshot({ path: "./test-results/05-profile-filled.png", fullPage: true });
    console.log("📸 Screenshot: Profile details filled");

    // Contact details
    await page.fill('input[name="contactName"]', "John Doe");
    await page.fill('input[name="contactEmail"]', testEmail);
    await page.fill('input[name="contactPhone"]', "+91 9876543210");

    // Address
    await page.fill('input[name="address"], textarea[name="address"]', "123 Tech Park, Bangalore");
    await page.fill('input[name="city"]', "Bangalore");
    await page.fill('input[name="state"]', "Karnataka");
    await page.fill('input[name="country"]', "India");
    await page.fill('input[name="postalCode"]', "560001");

    await page.screenshot({ path: "./test-results/06-contact-filled.png", fullPage: true });
    console.log("📸 Screenshot: Contact details filled");

    // Step 5: Submit for verification
    console.log("🚀 Step 5: Submitting for verification...");
    await page.click('button[type="submit"], button:has-text("Submit"), button:has-text("Save")');
    await page.waitForTimeout(3000);

    await page.screenshot({ path: "./test-results/07-profile-submitted.png", fullPage: true });
    console.log("📸 Screenshot: Profile submitted");

    // Wait for verification status page
    await page.waitForSelector("text=verification, text=Verification, text=status", {
      timeout: 10000,
    });

    await page.screenshot({ path: "./test-results/08-verification-status.png", fullPage: true });
    console.log("📸 Screenshot: Verification status page");

    // Step 6: Open Admin Panel
    console.log("🔐 Step 6: Opening admin panel...");
    const adminPage = await context.newPage();
    await adminPage.goto("http://localhost:3000/login");
    await adminPage.waitForLoadState("networkidle");

    await adminPage.screenshot({ path: "./test-results/09-admin-login.png", fullPage: true });
    console.log("📸 Screenshot: Admin login page");

    // Admin login (assuming default admin credentials)
    // Note: You may need to adjust these credentials
    await adminPage.fill('input[name="email"], input[type="email"]', "admin@nxtgauge.com");
    await adminPage.fill('input[name="password"], input[type="password"]', "admin123");

    await adminPage.click(
      'button[type="submit"], button:has-text("Login"), button:has-text("Sign In")'
    );
    await adminPage.waitForTimeout(3000);

    await adminPage.screenshot({ path: "./test-results/10-admin-logged-in.png", fullPage: true });
    console.log("📸 Screenshot: Admin logged in");

    // Step 7: Navigate to Verification Management
    console.log("🔍 Step 7: Navigating to Verification Management...");

    // Click on Verifications in sidebar
    await adminPage.click(
      'text=Verifications, a:has-text("Verifications"), [href*="verification"]'
    );
    await adminPage.waitForTimeout(3000);

    await adminPage.screenshot({ path: "./test-results/11-verification-list.png", fullPage: true });
    console.log("📸 Screenshot: Verification list page");

    // Step 8: Check if our company appears in verification queue
    console.log("🔎 Step 8: Checking for company verification request...");

    // Search for the company name
    await adminPage.fill('input[placeholder*="search"], input[name="search"]', testCompanyName);
    await adminPage.waitForTimeout(2000);

    await adminPage.screenshot({ path: "./test-results/12-search-results.png", fullPage: true });
    console.log("📸 Screenshot: Search results");

    // Check if company is found
    const companyFound = await adminPage
      .locator(`text=${testCompanyName}`)
      .isVisible()
      .catch(() => false);

    if (companyFound) {
      console.log("✅ SUCCESS: Company verification request found in admin panel!");

      // Click on the company to view details
      await adminPage.click(`text=${testCompanyName}`);
      await adminPage.waitForTimeout(3000);

      await adminPage.screenshot({ path: "./test-results/13-company-details.png", fullPage: true });
      console.log("📸 Screenshot: Company verification details");

      // Verify the details match what we submitted
      await expect(adminPage.locator("body")).toContainText(testEmail);
      await expect(adminPage.locator("body")).toContainText("Bangalore");

      console.log("✅ All verification details match!");
    } else {
      console.log("⚠️ Company not found in verification queue");
      console.log("   This might be because:");
      console.log("   - The profile is still being processed");
      console.log("   - The verification queue filters are different");
      console.log("   - The admin credentials are incorrect");
    }

    // Keep browser open for 10 seconds to show results
    console.log("⏳ Keeping browser open for 10 seconds...");
    await page.waitForTimeout(10000);
  } catch (error) {
    console.error("❌ Test failed:", error);
    await page.screenshot({ path: "./test-results/error-screenshot.png", fullPage: true });
    throw error;
  } finally {
    await context.close();
    await browser.close();
    console.log("✅ Test completed!");
    console.log("📹 Video saved to: ./test-videos/");
    console.log("📸 Screenshots saved to: ./test-results/");
  }
});