metabuilder/e2e/package-loading.spec.ts

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

/**
 * E2E tests for package loading and rendering
 * 
 * Tests the dynamic package system, JSON component rendering, and routing
 */

test.describe('Package Rendering', () => {
  test.describe('Package Home Pages', () => {
    test('should render ui_home package', async ({ page }) => {
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      
      // Should load and render home page
      const bodyText = await page.textContent('body')
      expect(bodyText).toBeTruthy()
      expect(bodyText!.length).toBeGreaterThan(0)
    })

    test('should render dashboard package', async ({ page }) => {
      await page.goto('/default/dashboard')
      await page.waitForLoadState('networkidle')
      
      // Should load dashboard (may require auth)
      const title = await page.title()
      expect(title).toBeTruthy()
    })

    test('should handle package not found', async ({ page }) => {
      await page.goto('/default/non_existent_package')
      
      // Should show 404 or not found message
      const notFound = page.getByText(/not found|404|doesn't exist/i)
      await expect(notFound).toBeVisible({ timeout: 5000 })
    })

    test('should respect package min level permissions', async ({ page }) => {
      // Try to access admin package without authentication
      await page.goto('/default/admin_dialog')
      
      // Should be denied or redirected
      const isAccessDenied = (await page.getByText(/access denied|login required|forbidden/i).count()) > 0
      const onLoginPage = (await page.locator('input[type="password"]').count()) > 0
      
      expect(isAccessDenied || onLoginPage).toBeTruthy()
    })
  })

  test.describe('Package Route Priority', () => {
    test('should load root route from InstalledPackage config', async ({ page }) => {
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      
      // Root should load ui_home package (from InstalledPackage defaultRoute config)
      const isHomePage = (await page.getByRole('heading', { name: /metabuilder|home|welcome/i }).count()) > 0
      expect(isHomePage).toBeTruthy()
    })

    test('should override package routes with PageConfig', async ({ page }) => {
      // Skip - requires database setup with PageConfig overrides
      test.skip(true, 'Requires PageConfig route overrides in database')
      
      // If PageConfig has entry for "/", it should take priority over InstalledPackage
    })
  })

  test.describe('Package Component Discovery', () => {
    test('should find home component in package', async ({ page }) => {
      await page.goto('/default/ui_home')
      await page.waitForLoadState('networkidle')
      
      // Should successfully load home component
      const hasContent = (await page.textContent('body'))!.length > 0
      expect(hasContent).toBeTruthy()
    })

    test('should prioritize home_page over HomePage', async ({ page }) => {
      // Skip - requires package with both components
      test.skip(true, 'Requires package with multiple home component candidates')
      
      // Package loader should prioritize: 'home_page' > 'HomePage' > 'Home' > first component
    })

    test('should use first component if no home component', async ({ page }) => {
      // Skip - requires package without explicit home component
      test.skip(true, 'Requires package without home component')
      
      // Should fall back to first component in components array
    })
  })

  test.describe('JSON Component Rendering', () => {
    test('should render JSON components from package', async ({ page }) => {
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      
      // Components should be rendered from JSON definitions
      // Check for common component types
      const hasBoxes = (await page.locator('[class*="Box"], [class*="box"]').count()) > 0
      const hasContainers = (await page.locator('main, section, div').count()) > 0
      
      expect(hasBoxes || hasContainers).toBeTruthy()
    })

    test('should render nested components', async ({ page }) => {
      await page.goto('/')
      
      // Should have nested structure
      const mainElement = page.locator('main').first()
      const hasChildren = (await mainElement.locator('> *').count()) > 0
      
      if (await mainElement.count() > 0) {
        expect(hasChildren).toBeTruthy()
      }
    })

    test('should apply component props', async ({ page }) => {
      await page.goto('/')
      
      // Components should have their props applied
      // Check for common props like className
      const elementsWithClass = await page.locator('[class]').count()
      expect(elementsWithClass).toBeGreaterThan(0)
    })

    test('should render text content', async ({ page }) => {
      await page.goto('/')
      
      // Should have text content from JSON components
      const bodyText = await page.textContent('body')
      expect(bodyText!.trim().length).toBeGreaterThan(0)
    })
  })

  test.describe('Package Metadata', () => {
    test('should set page title from package', async ({ page }) => {
      await page.goto('/')
      
      // Should have page title
      const title = await page.title()
      expect(title).toBeTruthy()
      expect(title.length).toBeGreaterThan(0)
    })

    test('should set meta description from package', async ({ page }) => {
      await page.goto('/')
      
      // Check for meta description
      const description = await page.locator('meta[name="description"]').getAttribute('content')
      // May or may not exist
      if (description) {
        expect(description.length).toBeGreaterThan(0)
      }
    })
  })

  test.describe('Package Static Assets', () => {
    test('should load package styles', async ({ page }) => {
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      
      // Styles should be applied
      const bodyStyles = await page.locator('body').evaluate((el) => {
        const computed = window.getComputedStyle(el)
        return {
          backgroundColor: computed.backgroundColor,
          color: computed.color,
          margin: computed.margin,
        }
      })
      
      // Should have some styling
      expect(bodyStyles.backgroundColor).toBeTruthy()
    })

    test('should load package images', async ({ page }) => {
      await page.goto('/')
      
      // Check for images
      const images = page.locator('img')
      const imageCount = await images.count()
      
      // May or may not have images
      if (imageCount > 0) {
        // First image should load
        await expect(images.first()).toBeVisible({ timeout: 5000 })
      }
    })
  })

  test.describe('Package Sub-Routes', () => {
    test('should handle package entity routes', async ({ page }) => {
      await page.goto('/default/dashboard/users')
      
      // Should load entity list or show access denied
      const hasContent = (await page.textContent('body'))!.length > 0
      expect(hasContent).toBeTruthy()
    })

    test('should handle entity detail routes', async ({ page }) => {
      await page.goto('/default/dashboard/users/123')
      
      // Should attempt to load entity detail
      const hasContent = (await page.textContent('body'))!.length > 0
      expect(hasContent).toBeTruthy()
    })

    test('should handle entity action routes', async ({ page }) => {
      await page.goto('/default/dashboard/users/create')
      
      // Should show create form or access denied
      const hasContent = (await page.textContent('body'))!.length > 0
      expect(hasContent).toBeTruthy()
    })
  })

  test.describe('Multi-Tenant Package Isolation', () => {
    test('should load packages for specific tenant', async ({ page }) => {
      await page.goto('/default/dashboard')
      
      // Should load for default tenant
      const title = await page.title()
      expect(title).toBeTruthy()
    })

    test('should isolate tenant data', async ({ page }) => {
      // Skip - requires multiple tenants in database
      test.skip(true, 'Requires multi-tenant database setup')
      
      // Navigate to tenant A
      await page.goto('/tenant-a/dashboard')
      const tenantAContent = await page.textContent('body')
      
      // Navigate to tenant B
      await page.goto('/tenant-b/dashboard')
      const tenantBContent = await page.textContent('body')
      
      // Should have different content
      expect(tenantAContent).not.toBe(tenantBContent)
    })

    test('should prevent cross-tenant access', async ({ page }) => {
      // Skip - requires authentication and multiple tenants
      test.skip(true, 'Requires authenticated user and tenant isolation')
      
      // Login to tenant A
      // Try to access tenant B data
      // Should be denied
    })
  })

  test.describe('Package Dependencies', () => {
    test('should load package dependencies', async ({ page }) => {
      // Skip - requires package with dependencies
      test.skip(true, 'Requires package with explicit dependencies')
      
      // Package should load its dependencies
      // Dependencies should be available
    })

    test('should fail gracefully if dependency missing', async ({ page }) => {
      // Skip - requires package with missing dependency
      test.skip(true, 'Requires package with missing dependency')
      
      // Should show error or warning about missing dependency
    })
  })

  test.describe('Package Error Handling', () => {
    test('should handle invalid JSON components', async ({ page }) => {
      // Skip - requires package with invalid JSON
      test.skip(true, 'Requires package with invalid JSON')
      
      // Should show error message or fallback UI
    })

    test('should handle missing package files', async ({ page }) => {
      await page.goto('/default/missing_package_123')
      
      // Should show 404 or package not found
      const notFound = page.getByText(/not found|404|doesn't exist|package.*not/i)
      await expect(notFound).toBeVisible({ timeout: 5000 })
    })

    test('should handle component rendering errors', async ({ page }) => {
      // Skip - requires component with rendering error
      test.skip(true, 'Requires component that fails to render')
      
      // Should show error boundary or fallback
    })
  })

  test.describe('Package Versioning', () => {
    test('should display package version', async ({ page }) => {
      // Skip - requires version display in UI
      test.skip(true, 'Requires package version display')
      
      // Check footer or settings for version info
    })

    test('should handle package updates', async ({ page }) => {
      // Skip - requires package update mechanism
      test.skip(true, 'Requires package update system')
      
      // Should be able to update to new version
    })
  })

  test.describe('Package Configuration', () => {
    test('should respect package enabled/disabled state', async ({ page }) => {
      // Skip - requires disabled package in database
      test.skip(true, 'Requires disabled package')
      
      // Disabled packages should not be accessible
      await page.goto('/default/disabled_package')
      
      // Should show not found or access denied
    })

    test('should apply package configuration', async ({ page }) => {
      // Skip - requires package with custom config
      test.skip(true, 'Requires package with custom configuration')
      
      // Package should use its config values
    })

    test('should allow God users to configure packages', async ({ page }) => {
      // Skip - requires God-level authentication
      test.skip(true, 'Requires God-level user authentication')
      
      // God panel should show package configuration
    })
  })

  test.describe('Package System Integration', () => {
    test('should list available packages', async ({ page }) => {
      // Skip - requires package list UI
      test.skip(true, 'Requires package listing UI')
      
      // Should show list of installed packages
    })

    test('should search packages', async ({ page }) => {
      // Skip - requires package search UI
      test.skip(true, 'Requires package search functionality')
      
      // Should be able to search for packages
    })

    test('should install new packages', async ({ page }) => {
      // Skip - requires God-level and package installation UI
      test.skip(true, 'Requires package installation system')
      
      // Should be able to install packages from UI
    })

    test('should uninstall packages', async ({ page }) => {
      // Skip - requires God-level and package management UI
      test.skip(true, 'Requires package uninstall system')
      
      // Should be able to uninstall packages
    })
  })

  test.describe('Performance', () => {
    test('should load packages quickly', async ({ page }) => {
      const startTime = Date.now()
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      const loadTime = Date.now() - startTime
      
      // Should load in reasonable time (< 5 seconds)
      expect(loadTime).toBeLessThan(5000)
    })

    test('should cache package data', async ({ page }) => {
      // First load
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      
      // Second load should be faster (cached)
      const startTime = Date.now()
      await page.goto('/')
      await page.waitForLoadState('networkidle')
      const loadTime = Date.now() - startTime
      
      // Should load quickly from cache
      expect(loadTime).toBeLessThan(3000)
    })

    test('should lazy load package components', async ({ page }) => {
      // Skip - requires lazy loading implementation
      test.skip(true, 'Requires lazy loading of components')
      
      // Components should load on demand
    })
  })

  test.describe('Accessibility', () => {
    test('should have semantic HTML from package components', async ({ page }) => {
      await page.goto('/')
      
      // Check for semantic elements
      const main = await page.locator('main').count()
      const header = await page.locator('header').count()
      const nav = await page.locator('nav').count()
      
      const hasSemanticHTML = main > 0 || header > 0 || nav > 0
      expect(hasSemanticHTML).toBeTruthy()
    })

    test('should have proper heading hierarchy', async ({ page }) => {
      await page.goto('/')
      
      // Should have h1
      const h1Count = await page.locator('h1').count()
      expect(h1Count).toBeGreaterThan(0)
    })

    test('should have alt text for images', async ({ page }) => {
      await page.goto('/')
      
      const images = page.locator('img')
      const imageCount = await images.count()
      
      if (imageCount > 0) {
        // Images should have alt attribute
        const firstImage = images.first()
        const alt = await firstImage.getAttribute('alt')
        // Alt can be empty string but should exist
        expect(alt).not.toBeNull()
      }
    })
  })
})