test-playwright.js

const { chromium } = require('playwright');
const path = require('path');
const fs = require('fs');

// Test configuration
const config = {
  baseURL: 'http://localhost:8080',
  username: 'admin',
  password: 'admin',
  testFile: 'lion_takanawa.copc.laz',
  screenshotsDir: path.join(__dirname, 'test-screenshots'),
  logsDir: path.join(__dirname, 'test-logs'),
  videoDir: path.join(__dirname, 'test-videos')
};

// Create output directories
[config.screenshotsDir, config.logsDir, config.videoDir].forEach(dir => {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
  }
});

// Test state tracking
const testResults = {
  login: { success: false, message: '' },
  adminSettings: { success: false, message: '', statusCode: null },
  fileUpload: { success: false, message: '' },
  viewerAccess: { success: false, message: '', behavior: '' },
  consoleErrors: [],
  networkErrors: []
};

// Helper function to take screenshot
async function takeScreenshot(page, name, fullPage = false) {
  const filename = path.join(config.screenshotsDir, `${name}.png`);
  await page.screenshot({ path: filename, fullPage });
  console.log(`✓ Screenshot saved: ${filename}`);
  return filename;
}

// Helper function to capture console messages
function captureConsoleMessages(page) {
  page.on('console', msg => {
    const type = msg.type();
    const text = msg.text();

    if (type === 'error') {
      testResults.consoleErrors.push({ type, text, location: msg.location() });
      console.error(`[Console Error] ${text}`);
    } else if (type === 'warning') {
      console.warn(`[Console Warning] ${text}`);
    } else {
      console.log(`[Console ${type}] ${text}`);
    }
  });
}

// Helper function to capture network failures
function captureNetworkFailures(page) {
  page.on('requestfailed', request => {
    const failure = {
      url: request.url(),
      method: request.method(),
      failure: request.failure()
    };
    testResults.networkErrors.push(failure);
    console.error(`[Network Failed] ${failure.method} ${failure.url} - ${failure.failure.errorText}`);
  });
}

// Helper function to capture all network requests
function captureNetworkRequests(page) {
  const requests = [];
  page.on('request', request => {
    requests.push({
      url: request.url(),
      method: request.method(),
      headers: request.headers()
    });
  });
  page.on('response', response => {
    const req = requests.find(r => r.url === response.url());
    if (req) {
      req.status = response.status();
      req.statusText = response.statusText();
    }
  });
  return requests;
}

async function runTests() {
  console.log('🚀 Starting Point Cloud Viewer Browser Tests');
  console.log('='.repeat(60));

  let browser, page;
  let allNetworkRequests = [];

  try {
    // Launch browser with video recording
    browser = await chromium.launch({
      headless: false, // Run in headed mode for visibility
      slowMo: 500 // Slow down actions for better visibility
    });

    const context = await browser.newContext({
      recordVideo: {
        dir: config.videoDir,
        size: { width: 1920, height: 1080 }
      }
    });

    page = await context.newPage();
    page.setDefaultTimeout(10000);

    // Set up listeners
    captureConsoleMessages(page);
    captureNetworkFailures(page);
    allNetworkRequests = captureNetworkRequests(page);

    // Test 1: Navigate and Login
    console.log('\n📋 Test 1: Navigate to Nextcloud and Login');
    console.log('-'.repeat(60));
    await page.goto(config.baseURL);
    await takeScreenshot(page, '01-login-page');

    // Check if we're on login page
    const loginTitle = await page.title();
    console.log(`Page title: ${loginTitle}`);

    try {
      await page.fill('input[name="user"]', config.username);
      await page.fill('input[name="password"]', config.password);
      await page.click('button[type="submit"]');

      // Wait for navigation to complete
      await page.waitForLoadState('networkidle', { timeout: 15000 });

      await takeScreenshot(page, '02-after-login');
      testResults.login.success = true;
      testResults.login.message = 'Successfully logged in as admin';
      console.log('✓ Login successful');
    } catch (error) {
      testResults.login.message = `Login failed: ${error.message}`;
      console.error('✗ Login failed:', error.message);
      await takeScreenshot(page, '02-login-failed');
    }

    // Test 2: Check Admin Settings
    console.log('\n📋 Test 2: Check Admin Settings Page');
    console.log('-'.repeat(60));

    try {
      await page.goto(`${config.baseURL}/settings/admin/files_pointcloudviewer`);
      await page.waitForLoadState('networkidle', { timeout: 10000 });
      await takeScreenshot(page, '03-admin-settings');

      // Check response status
      const response = await page.goto(`${config.baseURL}/settings/admin/files_pointcloudviewer`);
      testResults.adminSettings.statusCode = response ? response.status() : null;

      // Check if settings page loaded or error displayed
      const content = await page.content();
      const hasError = content.includes('Internal Server Error') ||
                      content.includes('500') ||
                      content.includes('Error');

      if (hasError) {
        testResults.adminSettings.message = 'Admin settings page returned error';
        console.log('✗ Admin settings page shows error');
      } else {
        testResults.adminSettings.success = true;
        testResults.adminSettings.message = 'Admin settings page loaded successfully';
        console.log('✓ Admin settings page loaded');
      }

    } catch (error) {
      testResults.adminSettings.message = `Failed to access admin settings: ${error.message}`;
      console.error('✗ Admin settings test failed:', error.message);
      await takeScreenshot(page, '03-admin-settings-error');
    }

    // Test 3: Navigate to Files and Upload LAZ file
    console.log('\n📋 Test 3: Upload LAZ File to Files');
    console.log('-'.repeat(60));

    try {
      await page.goto(`${config.baseURL}/apps/files`);
      await page.waitForLoadState('networkidle', { timeout: 15000 });
      await takeScreenshot(page, '04-files-app');

      // Check if test file exists
      if (!fs.existsSync(config.testFile)) {
        throw new Error(`Test file not found: ${config.testFile}`);
      }

      console.log(`Uploading file: ${config.testFile}`);

      // Click on upload button - try multiple selectors
      const uploadSelectors = [
        'button:has-text("Upload")',
        'button[aria-label="Upload"]',
        '.icon-upload',
        'div[data-apps-files-] button:has-text("+")',
        '#controls button:has-text("New")'
      ];

      let uploadButtonClicked = false;
      for (const selector of uploadSelectors) {
        try {
          const element = await page.locator(selector).first();
          if (await element.isVisible()) {
            await element.click();
            uploadButtonClicked = true;
            console.log(`✓ Clicked upload button using selector: ${selector}`);
            break;
          }
        } catch (e) {
          // Try next selector
        }
      }

      if (!uploadButtonClicked) {
        // Try alternative: Use keyboard shortcut or drag and drop
        console.log('Trying alternative upload method...');
        await page.keyboard.press('u'); // Common Nextcloud upload shortcut
        await page.waitForTimeout(1000);
      }

      // Wait for file chooser
      const fileChooserPromise = page.waitForEvent('filechooser', { timeout: 5000 });

      // Wait for file chooser to appear
      await fileChooserPromise.then(async (fileChooser) => {
        await fileChooser.setFiles(config.testFile);
        console.log('✓ File chooser triggered and file selected');
      }).catch(async () => {
        // If file chooser doesn't appear, try clicking the upload button again
        console.log('File chooser not triggered, trying direct upload...');
      });

      // Wait for upload to complete
      await page.waitForTimeout(5000);
      await takeScreenshot(page, '05-file-uploading');

      // Wait a bit more for upload to finish
      await page.waitForTimeout(3000);
      await takeScreenshot(page, '06-file-uploaded');

      testResults.fileUpload.success = true;
      testResults.fileUpload.message = 'File upload completed';
      console.log('✓ File upload completed');

    } catch (error) {
      testResults.fileUpload.message = `File upload failed: ${error.message}`;
      console.error('✗ File upload failed:', error.message);
      await takeScreenshot(page, '05-upload-failed');
    }

    // Test 4: Access LAZ File in Viewer
    console.log('\n📋 Test 4: Access LAZ File - Check Viewer vs Download');
    console.log('-'.repeat(60));

    try {
      // Look for the uploaded file
      const fileName = path.basename(config.testFile);
      console.log(`Looking for file: ${fileName}`);

      await page.waitForTimeout(2000);

      // Try to find and click on the file
      const fileSelectors = [
        `span:has-text("${fileName}")`,
        `tr[data-file="${fileName}"]`,
        `[data-name="${fileName}"]`,
        `a:has-text("${fileName}")`,
        `li:has-text("${fileName}")`
      ];

      let fileClicked = false;
      for (const selector of fileSelectors) {
        try {
          const fileElement = await page.locator(selector).first();
          if (await fileElement.isVisible({ timeout: 2000 })) {
            console.log(`Found file with selector: ${selector}`);

            // Track if download starts
            let downloadStarted = false;
            page.on('download', () => {
              downloadStarted = true;
              console.log('⚠️ Download started instead of opening viewer!');
            });

            // Click on the file
            await fileElement.click();
            await page.waitForTimeout(3000);

            // Check behavior
            testResults.viewerAccess.behavior = downloadStarted ? 'download' : 'viewer_or_error';

            if (downloadStarted) {
              testResults.viewerAccess.message = 'File triggered download instead of opening viewer';
              console.log('⚠️ File triggered download (viewer not working)');
            } else {
              // Check if viewer opened
              const viewerContent = await page.content();
              const hasViewer = viewerContent.includes('pointcloud') ||
                              viewerContent.includes('potree') ||
                              viewerContent.includes('viewer');

              if (hasViewer) {
                testResults.viewerAccess.success = true;
                testResults.viewerAccess.message = 'Viewer opened successfully';
                console.log('✓ Viewer opened (or viewer UI elements detected)');
              } else {
                testResults.viewerAccess.message = 'Neither viewer nor download triggered - check UI';
                console.log('⚠️ File clicked but unclear behavior - taking screenshot');
              }
            }

            fileClicked = true;
            break;
          }
        } catch (e) {
          // Try next selector
        }
      }

      if (!fileClicked) {
        testResults.viewerAccess.message = 'Could not find uploaded file in Files app';
        console.log('✗ Could not find uploaded file');
      }

      await takeScreenshot(page, '07-after-file-click');
      await page.waitForTimeout(2000);
      await takeScreenshot(page, '08-viewer-or-result');

    } catch (error) {
      testResults.viewerAccess.message = `Viewer access test failed: ${error.message}`;
      console.error('✗ Viewer access test failed:', error.message);
      await takeScreenshot(page, '07-viewer-failed');
    }

    // Final screenshot
    await takeScreenshot(page, '09-final-state', true);

  } catch (error) {
    console.error('\n💥 Test execution failed:', error);
  } finally {
    if (page) {
      await takeScreenshot(page, '10-final-before-close');
    }

    if (browser) {
      await browser.close();
    }
  }

  // Generate test report
  console.log('\n' + '='.repeat(60));
  console.log('📊 TEST RESULTS');
  console.log('='.repeat(60));

  console.log('\n✅ Login Test:');
  console.log(`   Status: ${testResults.login.success ? 'PASS' : 'FAIL'}`);
  console.log(`   Message: ${testResults.login.message}`);

  console.log('\n✅ Admin Settings Test:');
  console.log(`   Status: ${testResults.adminSettings.success ? 'PASS' : 'FAIL'}`);
  console.log(`   Status Code: ${testResults.adminSettings.statusCode}`);
  console.log(`   Message: ${testResults.adminSettings.message}`);

  console.log('\n✅ File Upload Test:');
  console.log(`   Status: ${testResults.fileUpload.success ? 'PASS' : 'FAIL'}`);
  console.log(`   Message: ${testResults.fileUpload.message}`);

  console.log('\n✅ Viewer Access Test:');
  console.log(`   Status: ${testResults.viewerAccess.success ? 'PASS' : 'FAIL'}`);
  console.log(`   Behavior: ${testResults.viewerAccess.behavior}`);
  console.log(`   Message: ${testResults.viewerAccess.message}`);

  if (testResults.consoleErrors.length > 0) {
    console.log('\n⚠️ Console Errors Detected:');
    testResults.consoleErrors.forEach((err, i) => {
      console.log(`   ${i + 1}. ${err.text}`);
    });
  } else {
    console.log('\n✅ No console errors detected');
  }

  if (testResults.networkErrors.length > 0) {
    console.log('\n⚠️ Network Errors Detected:');
    testResults.networkErrors.forEach((err, i) => {
      console.log(`   ${i + 1}. ${err.method} ${err.url}`);
      console.log(`      Error: ${err.failure.errorText}`);
    });
  } else {
    console.log('\n✅ No network errors detected');
  }

  console.log('\n' + '='.repeat(60));
  console.log('📁 Output Files:');
  console.log(`   Screenshots: ${config.screenshotsDir}`);
  console.log(`   Video: ${config.videoDir}`);
  console.log('='.repeat(60));

  // Save detailed logs to file
  const logFile = path.join(config.logsDir, 'test-results.json');
  fs.writeFileSync(logFile, JSON.stringify({
    timestamp: new Date().toISOString(),
    config,
    testResults,
    allNetworkRequests
  }, null, 2));
  console.log(`\n📝 Detailed logs saved to: ${logFile}`);

  // Save console errors to file
  if (testResults.consoleErrors.length > 0 || testResults.networkErrors.length > 0) {
    const errorLogFile = path.join(config.logsDir, 'errors.log');
    const errorLog = `
CONSOLE ERRORS:
${testResults.consoleErrors.map(e => `${e.type}: ${e.text}\n   Location: ${JSON.stringify(e.location)}`).join('\n\n')}

NETWORK ERRORS:
${testResults.networkErrors.map(e => `${e.method} ${e.url}\n   Error: ${e.failure.errorText}`).join('\n\n')}
    `.trim();
    fs.writeFileSync(errorLogFile, errorLog);
    console.log(`📝 Error logs saved to: ${errorLogFile}`);
  }

  // Final verdict
  console.log('\n' + '='.repeat(60));
  console.log('🎯 FINAL VERDICT');
  console.log('='.repeat(60));

  const criticalIssues = [];
  if (!testResults.login.success) criticalIssues.push('❌ Cannot login to Nextcloud');
  if (!testResults.adminSettings.success && testResults.adminSettings.statusCode !== 200) criticalIssues.push('❌ Admin settings page not accessible (500 error)');
  if (!testResults.fileUpload.success) criticalIssues.push('❌ Cannot upload files to Nextcloud');
  if (testResults.viewerAccess.behavior === 'download') criticalIssues.push('❌ LAZ files download instead of opening in viewer');

  if (criticalIssues.length === 0) {
    console.log('✅ All critical tests passed!');
    console.log('   The Point Cloud Viewer appears to be working correctly.');
  } else {
    console.log('⚠️ Issues found:');
    criticalIssues.forEach(issue => console.log(`   ${issue}`));
  }

  console.log('\n' + '='.repeat(60));
  console.log('Test completed at:', new Date().toISOString());
  console.log('='.repeat(60));
}

// Run tests
runTests().catch(error => {
  console.error('Fatal error running tests:', error);
  process.exit(1);
});