visual-test-script.js

/**
 * Visual Test Script for AutoSite Application
 * 
 * This script provides functions to visually test the AutoSite application,
 * particularly focusing on the AskAI component and its integration with the UI.
 */

// Test data for AI prompts
const TEST_PROMPTS = [
  "Create a simple landing page with a header, hero section, and footer",
  "Add a contact form to the page",
  "Change the background color to light blue",
  "Add a navigation menu with Home, About, and Contact links"
];

// Helper function to wait for a specified time
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Test the AskAI component's UI elements
async function testAskAIUI() {
  console.log('Testing AskAI UI elements...');
  
  // Test input field
  const inputField = document.querySelector('.group input[type="text"]');
  if (!inputField) {
    console.error('Input field not found');
    return false;
  }
  
  // Test send button
  const sendButton = document.querySelector('.group button');
  if (!sendButton) {
    console.error('Send button not found');
    return false;
  }
  
  // Test placeholder text
  console.log('Initial placeholder:', inputField.placeholder);
  
  console.log('AskAI UI elements test passed');
  return true;
}

// Test the progress indicator
async function testProgressIndicator() {
  console.log('Testing progress indicator...');
  
  // Submit a prompt to trigger the progress indicator
  const inputField = document.querySelector('.group input[type="text"]');
  const sendButton = document.querySelector('.group button');
  
  if (!inputField || !sendButton) {
    console.error('Input field or send button not found');
    return false;
  }
  
  // Enter a test prompt
  inputField.value = TEST_PROMPTS[0];
  
  // Click the send button
  sendButton.click();
  
  // Wait for the progress indicator to appear
  await wait(1000);
  
  // Check if progress indicator is visible
  const progressBar = document.querySelector('.bg-gradient-to-r');
  if (!progressBar) {
    console.error('Progress indicator not found after submitting prompt');
    return false;
  }
  
  console.log('Progress indicator test passed');
  return true;
}

// Test the response mode indicator
async function testResponseModeIndicator() {
  console.log('Testing response mode indicator...');
  
  // Wait for the response mode indicator to appear
  await wait(2000);
  
  // Check if response mode indicator is visible
  const modeIndicator = document.querySelector('.bg-gray-800\/90');
  if (!modeIndicator) {
    console.warn('Response mode indicator not found - this may be normal for first request');
    return true;
  }
  
  // Check the text content to verify mode
  const modeText = modeIndicator.textContent.trim();
  console.log('Response mode:', modeText);
  
  console.log('Response mode indicator test passed');
  return true;
}

// Test the preview panel updates
async function testPreviewUpdates() {
  console.log('Testing preview panel updates...');
  
  // Get the preview iframe
  const previewFrame = document.querySelector('iframe');
  if (!previewFrame) {
    console.error('Preview iframe not found');
    return false;
  }
  
  // Store initial content for comparison
  const initialContent = previewFrame.srcdoc;
  
  // Wait for content to update (this may take some time depending on AI response)
  await wait(10000);
  
  // Check if content has changed
  const updatedContent = previewFrame.srcdoc;
  if (initialContent === updatedContent) {
    console.warn('Preview content did not update - this may indicate an issue');
    return false;
  }
  
  console.log('Preview updates test passed');
  return true;
}

// Test the success animation
async function testSuccessAnimation() {
  console.log('Testing success animation...');
  
  // Wait for AI processing to complete
  await wait(15000);
  
  // Check if success class was added to body
  if (document.body.classList.contains('ai-success')) {
    console.log('Success animation detected');
    return true;
  }
  
  // It's possible the animation already completed and class was removed
  console.warn('Success animation not detected - may have already completed');
  return true;
}

// Test responsive design
async function testResponsiveDesign() {
  console.log('Testing responsive design...');
  
  // Store original window dimensions
  const originalWidth = window.innerWidth;
  const originalHeight = window.innerHeight;
  
  // Test mobile layout
  console.log('Testing mobile layout...');
  window.resizeTo(375, 667); // iPhone 8 dimensions
  await wait(1000);
  
  // Check if layout has adjusted
  const editorMobile = document.querySelector('.w-full.h-\\[30dvh\\]');
  if (!editorMobile) {
    console.warn('Mobile layout may not be applied correctly');
  }
  
  // Test tablet layout
  console.log('Testing tablet layout...');
  window.resizeTo(768, 1024); // iPad dimensions
  await wait(1000);
  
  // Test desktop layout
  console.log('Testing desktop layout...');
  window.resizeTo(1440, 900); // Common desktop dimensions
  await wait(1000);
  
  // Restore original dimensions
  window.resizeTo(originalWidth, originalHeight);
  
  console.log('Responsive design test completed');
  return true;
}

// Run all tests
async function runAllTests() {
  console.log('Starting visual tests for AutoSite application...');
  
  const results = {
    uiElements: await testAskAIUI(),
    progressIndicator: await testProgressIndicator(),
    responseModeIndicator: await testResponseModeIndicator(),
    previewUpdates: await testPreviewUpdates(),
    successAnimation: await testSuccessAnimation(),
    responsiveDesign: await testResponsiveDesign()
  };
  
  console.log('Test results:', results);
  console.log('Tests completed:', Object.values(results).filter(Boolean).length, 'of', Object.values(results).length, 'passed');
  
  return results;
}

// Execute tests when run in browser console
if (typeof window !== 'undefined') {
  console.log('AutoSite Visual Test Script loaded');
  console.log('Run tests by calling: runAllTests()');
}