lux-network/e2e/homepage.spec.ts

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

// These specs assert the RESTORED full dynamic lux.network: the real @luxfi/ui
// chrome (Lux ▼ logo + mega-menu), the post-quantum landing content, a pure
// monochrome theme (zero gold/amber/orange), a reachable /checkout, and login
// routed to lux.id. They run against a running server (next start / standalone
// / the deployed site) via playwright.config baseURL.

test.describe('lux.network homepage', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/', { waitUntil: 'load' })
    await page.waitForSelector('text=LUX NETWORK', { timeout: 15000 }).catch(() => {})
    await page.waitForTimeout(1500) // chrome + footer hydrate
  })

  test('renders the post-quantum hero', async ({ page }) => {
    await expect(page.locator('.min-h-screen').first()).toBeVisible()
    await expect(page.locator('h1').first()).toContainText('LUX NETWORK')
    // Assert presence + copy (not strict pixel-visibility): the hero video's
    // poster lives on cdn.lux.network, which is unreachable in CI/headless and
    // renders as an oversized placeholder that can occlude the hero text. On the
    // real Cloudflare-fronted site the video plays in its own column.
    await expect(page.getByText('Post-Quantum, Privacy-First')).toBeAttached()
    await expect(page.getByText('Mainnet Live')).toBeAttached()
  })

  test('shows the canonical Lux ▼ logo (not plain text) in the header', async ({ page }) => {
    const logoSvgViewBox = await page.evaluate(() => {
      const link = document.querySelector('#DESKTOP_HEADER a[href="/"]')
      return link?.querySelector('svg')?.getAttribute('viewBox') ?? null
    })
    // @luxfi/logo renders a 100x100 viewBox mark; the stripped build used plain text.
    expect(logoSvgViewBox).toContain('100')
  })

  test('has a populated mega-menu nav', async ({ page }) => {
    const header = page.locator('#DESKTOP_HEADER')
    await expect(header).toBeVisible()
    const navCount = await header.locator('a, button').count()
    expect(navCount).toBeGreaterThanOrEqual(5)
  })

  test('is pure monochrome — zero gold / amber / orange elements', async ({ page }) => {
    const warmHits = await page.evaluate(() => {
      const warm = (rgb: string) => {
        const m = rgb && rgb.match(/rgba?\(([^)]+)\)/)
        if (!m) return false
        const [r, g, b, a] = m[1].split(',').map((s) => parseFloat(s))
        if (a === 0) return false
        const R = r / 255, G = g / 255, B = b / 255
        const max = Math.max(R, G, B), min = Math.min(R, G, B), d = max - min
        const l = (max + min) / 2
        const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1))
        if (s < 0.25 || l < 0.12 || l > 0.92) return false
        let h = 0
        if (d !== 0) {
          if (max === R) h = 60 * (((G - B) / d) % 6)
          else if (max === G) h = 60 * ((B - R) / d + 2)
          else h = 60 * ((R - G) / d + 4)
        }
        if (h < 0) h += 360
        return h >= 20 && h <= 60 // amber/orange/gold band
      }
      const props = ['color', 'backgroundColor', 'borderTopColor', 'fill', 'stroke']
      let n = 0
      for (const el of Array.from(document.querySelectorAll('*'))) {
        const cs = getComputedStyle(el)
        if (props.some((p) => warm((cs as any)[p]))) n++
      }
      return n
    })
    expect(warmHits).toBe(0)
  })

  test('hero CTAs are present', async ({ page }) => {
    await expect(page.locator('a').filter({ hasText: 'Run Chain' })).toBeVisible()
    await expect(page.locator('a').filter({ hasText: 'Bridge Assets' })).toHaveAttribute('href', 'https://bridge.lux.network')
  })

  test('renders the full footer', async ({ page }) => {
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
    await expect(page.locator('footer')).toBeVisible()
  })
})

test.describe('dynamic features', () => {
  test('login routes to lux.id', async ({ page }) => {
    await page.goto('/', { waitUntil: 'load' })
    await page.waitForTimeout(2500) // AuthWidget settles its auth probe
    const luxIdHref = await page.evaluate(() => {
      const a = Array.from(document.querySelectorAll('a,button')).find(
        (el) => (el.getAttribute('href') || '').includes('lux.id'),
      )
      return a?.getAttribute('href') ?? null
    })
    expect(luxIdHref).toContain('lux.id/login')
  })

  test('checkout route serves the commerce panel host', async ({ page }) => {
    const resp = await page.goto('/checkout', { waitUntil: 'domcontentloaded' })
    expect(resp?.status()).toBe(200)
    await expect(page.locator('#CHECKOUT_MAIN')).toBeAttached()
  })
})