LinkDesk/frontend/verify-assignment-popover.js

// Assignment Popover Verification Script
// Run this in the browser console on a shots table page

console.log('🧪 Starting Assignment Popover Verification...');

const verifyAssignmentPopover = {
    // Check if EditableTaskStatus components are present
    checkComponents() {
        const components = document.querySelectorAll('[data-testid="editable-task-status"]');
        console.log(`✅ Found ${components.length} EditableTaskStatus components`);
        
        if (components.length === 0) {
            console.log('❌ No EditableTaskStatus components found. Make sure you\'re on the shots table view.');
            return false;
        }
        
        return components;
    },

    // Check if assignment buttons are present
    checkAssignmentButtons() {
        const buttons = document.querySelectorAll('[data-testid="editable-task-status"] button');
        console.log(`✅ Found ${buttons.length} assignment buttons`);
        
        buttons.forEach((btn, index) => {
            const hasUserIcon = btn.querySelector('svg[data-lucide="user"]');
            const hasAvatar = btn.querySelector('[class*="avatar"]');
            console.log(`  Button ${index + 1}: ${hasUserIcon ? '👤 User icon' : hasAvatar ? '🔵 Avatar' : '❓ Unknown'}`);
        });
        
        return buttons;
    },

    // Test popover opening
    async testPopoverOpening(buttonIndex = 0) {
        const buttons = this.checkAssignmentButtons();
        
        if (buttons.length === 0) {
            console.log('❌ No buttons found to test');
            return false;
        }
        
        const button = buttons[buttonIndex];
        console.log(`🖱️ Testing popover opening on button ${buttonIndex + 1}...`);
        
        // Click the button
        button.click();
        
        // Wait a moment for popover to appear
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // Check if popover appeared
        const popovers = document.querySelectorAll('[data-radix-popper-content-wrapper]');
        const popoverContent = document.querySelector('[role="dialog"]');
        
        if (popovers.length > 0 || popoverContent) {
            console.log('✅ Popover opened successfully!');
            
            // Check popover content
            const assignText = document.querySelector('*:contains("Assign Task")');
            const debugInfo = document.querySelector('*:contains("Project ID:")');
            const loadingText = document.querySelector('*:contains("Loading members")');
            const membersList = document.querySelector('*:contains("Unassign")');
            
            console.log('📋 Popover content check:');
            console.log(`  - Assign Task header: ${assignText ? '✅' : '❌'}`);
            console.log(`  - Debug info: ${debugInfo ? '✅' : '❌'}`);
            console.log(`  - Loading/Members: ${loadingText || membersList ? '✅' : '❌'}`);
            
            return true;
        } else {
            console.log('❌ Popover did not open');
            return false;
        }
    },

    // Check for expected console messages
    checkConsoleMessages() {
        console.log('🔍 Expected console messages after clicking assignment button:');
        console.log('  - "Popover state changed: true"');
        console.log('  - "Loading project members when popover opens"');
        console.log('  - "Loading project members for project: [ID]"');
        console.log('  - "Loaded project members: [...]"');
        console.log('');
        console.log('💡 Click an assignment button and watch for these messages');
    },

    // Check network requests
    checkNetworkRequests() {
        console.log('🌐 Expected network requests:');
        console.log('  - GET /projects/{id}/members (when popover opens)');
        console.log('  - POST /shots/{id}/tasks (if task doesn\'t exist)');
        console.log('  - PUT /tasks/{id}/assign (when assigning)');
        console.log('  - PUT /tasks/{id} (when unassigning)');
        console.log('');
        console.log('💡 Open Network tab in DevTools to monitor these requests');
    },

    // Run full verification
    async runFullVerification() {
        console.log('🚀 Running full assignment popover verification...');
        console.log('');
        
        // Step 1: Check components
        const components = this.checkComponents();
        if (!components) return false;
        
        // Step 2: Check buttons
        const buttons = this.checkAssignmentButtons();
        if (buttons.length === 0) return false;
        
        // Step 3: Test popover opening
        const popoverWorking = await this.testPopoverOpening();
        
        // Step 4: Show expected messages and requests
        console.log('');
        this.checkConsoleMessages();
        this.checkNetworkRequests();
        
        // Summary
        console.log('');
        console.log('📊 Verification Summary:');
        console.log(`  - Components found: ✅ ${components.length}`);
        console.log(`  - Buttons found: ✅ ${buttons.length}`);
        console.log(`  - Popover opening: ${popoverWorking ? '✅' : '❌'}`);
        
        if (popoverWorking) {
            console.log('');
            console.log('🎉 Assignment popover verification PASSED!');
            console.log('✅ The implementation appears to be working correctly.');
            console.log('');
            console.log('🧪 Manual testing steps:');
            console.log('1. Click assignment buttons to open popovers');
            console.log('2. Verify project members load');
            console.log('3. Test assignment by clicking a member');
            console.log('4. Test unassignment by clicking "Unassign"');
            console.log('5. Check for success toast notifications');
        } else {
            console.log('');
            console.log('❌ Assignment popover verification FAILED');
            console.log('🔧 Check browser console for errors and verify:');
            console.log('  - You\'re on the shots table view');
            console.log('  - No JavaScript errors are present');
            console.log('  - Popover components are properly imported');
            console.log('  - Backend is running and accessible');
        }
        
        return popoverWorking;
    }
};

// Auto-run verification
verifyAssignmentPopover.runFullVerification();

// Make verification object available globally
window.verifyAssignmentPopover = verifyAssignmentPopover;

console.log('');
console.log('🛠️ Verification object available as: window.verifyAssignmentPopover');
console.log('📋 Available methods:');
console.log('  - checkComponents()');
console.log('  - checkAssignmentButtons()');
console.log('  - testPopoverOpening(buttonIndex)');
console.log('  - runFullVerification()');