Archive/admin-panel/test-furni-crud.js

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

async function testFurniCRUD() {
  console.log('🧪 Starting Playwright test for Furniture CRUD...\n');

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
  });
  const page = await context.newPage();

  try {
    console.log('📍 Navigating to furniture editor...');
    await page.goto('https://admin-panel.habland.orb.local/furni', {
      waitUntil: 'networkidle',
      timeout: 10000
    });
    console.log('✅ Page loaded\n');

    // Wait for the page to render
    await page.waitForSelector('h1', { timeout: 5000 });

    // Take screenshot of initial state
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-initial.png', fullPage: true });
    console.log('📸 Screenshot saved: furni-initial.png\n');

    // ===== TEST 1: Check UI Elements =====
    console.log('🔍 Test 1: Checking UI elements...');

    const heading = await page.locator('h1:has-text("Furniture Editor")').count();
    console.log(`   Heading found: ${heading > 0 ? '✅' : '❌'}`);

    const addButton = await page.locator('button:has-text("Add New")').count();
    console.log(`   Add New button found: ${addButton > 0 ? '✅' : '❌'}`);

    const tabs = await page.locator('button:has-text("havana"), button:has-text("kepler"), button:has-text("roseau"), button:has-text("retro")').count();
    console.log(`   Emulator tabs found: ${tabs} (expected: 4) ${tabs === 4 ? '✅' : '❌'}`);

    // Wait for data to load
    console.log('\n⏳ Waiting for furniture data to load...');
    await page.waitForTimeout(3000);

    // Check if table has data
    const tableRows = await page.locator('tbody tr').count();
    console.log(`   Table rows loaded: ${tableRows} ${tableRows > 0 ? '✅' : '❌'}\n`);

    // ===== TEST 2: Test Add New Functionality =====
    console.log('➕ Test 2: Testing Add New functionality...');

    // Click Add New button
    await page.locator('button:has-text("Add New")').click();
    console.log('   Clicked Add New button');

    await page.waitForTimeout(500);

    // Check if edit row appeared
    const editRow = await page.locator('tr.bg-purple-500\\/5').count();
    console.log(`   Edit row appeared: ${editRow > 0 ? '✅' : '❌'}`);

    // Fill in the form
    const timestamp = Date.now();
    const testSpriteName = `test_sprite_${timestamp}`;
    const testPublicName = `Test Furniture ${timestamp}`;

    console.log(`   Filling form with test data:`);
    console.log(`     sprite_name: ${testSpriteName}`);
    console.log(`     public_name: ${testPublicName}`);

    await page.locator('input[placeholder="sprite_name"]').fill(testSpriteName);
    await page.locator('input[placeholder="Public Name"]').fill(testPublicName);
    await page.locator('select').selectOption('s'); // Floor type
    await page.locator('input[type="number"]').first().fill('2'); // width
    await page.locator('input[type="number"]').last().fill('3'); // length

    console.log('   Form filled ✅');

    // Take screenshot before save
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-add-form.png', fullPage: true });
    console.log('   📸 Screenshot saved: furni-add-form.png');

    // Monitor API call
    const apiCalls = [];
    page.on('response', async response => {
      if (response.url().includes('/api/furni')) {
        const method = response.request().method();
        const status = response.status();
        apiCalls.push({ method, url: response.url(), status });
      }
    });

    // Click Save button
    console.log('   Clicking Save button...');
    await page.locator('button:has-text("Save")').click();

    // Wait for API response
    await page.waitForTimeout(2000);

    // Check API calls
    console.log('\n   📡 API Calls:');
    apiCalls.forEach(call => {
      console.log(`      ${call.method} ${call.url} - Status: ${call.status} ${call.status === 200 ? '✅' : '❌'}`);
    });

    // Verify item was added (look for our test item in the table)
    const itemExists = await page.locator(`td:has-text("${testSpriteName}")`).count();
    console.log(`\n   Item created and visible in table: ${itemExists > 0 ? '✅' : '❌'}\n`);

    // ===== TEST 3: Test Edit Functionality =====
    console.log('✏️  Test 3: Testing Edit functionality...');

    // Find and hover over our test item row
    const testItemRow = page.locator(`tr:has(td:has-text("${testSpriteName}"))`);
    await testItemRow.hover();
    console.log('   Hovered over test item row');

    await page.waitForTimeout(500);

    // Take screenshot showing hover state
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-hover.png', fullPage: true });
    console.log('   📸 Screenshot saved: furni-hover.png');

    // Click Edit button (should be visible on hover)
    await testItemRow.locator('button[title="Edit"]').click();
    console.log('   Clicked Edit button');

    await page.waitForTimeout(500);

    // Modify the public name
    const updatedPublicName = `${testPublicName} [EDITED]`;
    await page.locator('input[placeholder="Public Name"]').fill(updatedPublicName);
    console.log(`   Updated public_name to: ${updatedPublicName}`);

    // Clear API calls array
    apiCalls.length = 0;

    // Click Save
    await page.locator('button:has-text("Save")').click();
    console.log('   Clicked Save button');

    await page.waitForTimeout(2000);

    // Check API calls
    console.log('\n   📡 API Calls:');
    apiCalls.forEach(call => {
      console.log(`      ${call.method} ${call.url} - Status: ${call.status} ${call.status === 200 ? '✅' : '❌'}`);
    });

    // Verify edit worked
    const editedItemExists = await page.locator(`td:has-text("${updatedPublicName}")`).count();
    console.log(`\n   Item updated successfully: ${editedItemExists > 0 ? '✅' : '❌'}\n`);

    // ===== TEST 4: Test Delete Functionality =====
    console.log('🗑️  Test 4: Testing Delete functionality...');

    // Hover over test item row again
    await testItemRow.hover();
    await page.waitForTimeout(500);

    // Set up dialog handler for confirmation
    page.once('dialog', async dialog => {
      console.log(`   Confirmation dialog appeared: "${dialog.message()}"`);
      await dialog.accept();
      console.log('   Accepted confirmation dialog');
    });

    // Clear API calls array
    apiCalls.length = 0;

    // Click Delete button
    await testItemRow.locator('button[title="Delete"]').click();
    console.log('   Clicked Delete button');

    await page.waitForTimeout(2000);

    // Check API calls
    console.log('\n   📡 API Calls:');
    apiCalls.forEach(call => {
      console.log(`      ${call.method} ${call.url} - Status: ${call.status} ${call.status === 200 ? '✅' : '❌'}`);
    });

    // Verify item was deleted
    const deletedItemExists = await page.locator(`td:has-text("${testSpriteName}")`).count();
    console.log(`\n   Item deleted successfully: ${deletedItemExists === 0 ? '✅' : '❌'}\n`);

    // ===== TEST 5: Test Emulator Tabs =====
    console.log('🔀 Test 5: Testing emulator tabs...');

    const emulators = ['havana', 'kepler', 'roseau', 'retro'];
    for (const emulator of emulators) {
      await page.locator(`button:has-text("${emulator}")`).click();
      console.log(`   Clicked ${emulator} tab`);

      await page.waitForTimeout(2000);

      const rows = await page.locator('tbody tr').count();
      console.log(`   ${emulator} tab loaded: ${rows} items ${rows > 0 ? '✅' : '❌'}`);
    }

    // Take final screenshot
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-final.png', fullPage: true });
    console.log('\n📸 Screenshot saved: furni-final.png');

    console.log('\n✅ All CRUD tests completed!\n');
    console.log('Summary:');
    console.log('  ✅ UI elements present');
    console.log('  ✅ Add New functionality works');
    console.log('  ✅ Edit functionality works');
    console.log('  ✅ Delete functionality works');
    console.log('  ✅ All emulator tabs work');

  } catch (error) {
    console.error('\n❌ Test failed:', error.message);
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-error.png', fullPage: true });
    console.log('📸 Error screenshot saved: furni-error.png');
  } finally {
    await browser.close();
    console.log('\n🎬 Browser closed');
  }
}

testFurniCRUD().catch(console.error);