Kenso Grimm
216a972fef
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
372 lines
14 KiB
HTML
372 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Title Selection Debug Test</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.debug-section {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.error-log {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.test-button {
|
|
background: #ff9900;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: #ff7700;
|
|
}
|
|
|
|
.test-button:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.workflow-container {
|
|
border: 2px solid #007bff;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.status-success { background: #28a745; }
|
|
.status-error { background: #dc3545; }
|
|
.status-warning { background: #ffc107; }
|
|
.status-info { background: #17a2b8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>🔍 Title Selection Debug Test</h1>
|
|
|
|
<div class="debug-section">
|
|
<h3>Problem Analysis</h3>
|
|
<p>Der Fehler "Unerwarteter Fehler beim Erstellen des Enhanced Items" tritt im Titel-Auswahlschritt auf.
|
|
Dieser Test hilft dabei, das spezifische Problem zu identifizieren.</p>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h3>Test Scenarios</h3>
|
|
<button class="test-button" onclick="testTitleSelectionUI()">Test Title Selection UI</button>
|
|
<button class="test-button" onclick="testWorkflowWithMockData()">Test Complete Workflow</button>
|
|
<button class="test-button" onclick="testErrorHandling()">Test Error Handling</button>
|
|
<button class="test-button" onclick="clearLogs()">Clear Logs</button>
|
|
</div>
|
|
|
|
<div class="workflow-container" id="workflowContainer">
|
|
<h4>Workflow Test Area</h4>
|
|
<p>Hier wird der Enhanced Item Workflow getestet...</p>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h3>Error Log</h3>
|
|
<div class="error-log" id="errorLog">Keine Fehler bisher...</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<h3>Console Output</h3>
|
|
<div class="error-log" id="consoleOutput">Console-Ausgaben werden hier angezeigt...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Mock localStorage for testing
|
|
const mockStorage = {
|
|
data: {},
|
|
getItem(key) {
|
|
return this.data[key] || null;
|
|
},
|
|
setItem(key, value) {
|
|
this.data[key] = value;
|
|
},
|
|
removeItem(key) {
|
|
delete this.data[key];
|
|
},
|
|
clear() {
|
|
this.data = {};
|
|
}
|
|
};
|
|
|
|
// Override localStorage if not available
|
|
if (typeof localStorage === 'undefined') {
|
|
window.localStorage = mockStorage;
|
|
}
|
|
|
|
// Mock event bus
|
|
window.amazonExtEventBus = {
|
|
events: {},
|
|
emit(event, data) {
|
|
console.log('Event emitted:', event, data);
|
|
if (this.events[event]) {
|
|
this.events[event].forEach(callback => callback(data));
|
|
}
|
|
},
|
|
on(event, callback) {
|
|
if (!this.events[event]) {
|
|
this.events[event] = [];
|
|
}
|
|
this.events[event].push(callback);
|
|
}
|
|
};
|
|
|
|
// Capture console output
|
|
const originalConsoleLog = console.log;
|
|
const originalConsoleError = console.error;
|
|
const originalConsoleWarn = console.warn;
|
|
|
|
function logToOutput(type, ...args) {
|
|
const output = document.getElementById('consoleOutput');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const message = args.map(arg =>
|
|
typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
|
|
).join(' ');
|
|
|
|
output.textContent += `[${timestamp}] ${type.toUpperCase()}: ${message}\n`;
|
|
output.scrollTop = output.scrollHeight;
|
|
}
|
|
|
|
console.log = (...args) => {
|
|
originalConsoleLog(...args);
|
|
logToOutput('log', ...args);
|
|
};
|
|
|
|
console.error = (...args) => {
|
|
originalConsoleError(...args);
|
|
logToOutput('error', ...args);
|
|
|
|
// Also add to error log
|
|
const errorLog = document.getElementById('errorLog');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const message = args.map(arg =>
|
|
typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
|
|
).join(' ');
|
|
errorLog.textContent += `[${timestamp}] ERROR: ${message}\n`;
|
|
};
|
|
|
|
console.warn = (...args) => {
|
|
originalConsoleWarn(...args);
|
|
logToOutput('warn', ...args);
|
|
};
|
|
|
|
// Import modules
|
|
let TitleSelectionManager, EnhancedAddItemWorkflow, ErrorHandler;
|
|
|
|
try {
|
|
const modules = await Promise.all([
|
|
import('./src/TitleSelectionManager.js'),
|
|
import('./src/EnhancedAddItemWorkflow.js'),
|
|
import('./src/ErrorHandler.js')
|
|
]);
|
|
|
|
TitleSelectionManager = modules[0].TitleSelectionManager;
|
|
EnhancedAddItemWorkflow = modules[1].EnhancedAddItemWorkflow;
|
|
ErrorHandler = modules[2].errorHandler;
|
|
|
|
console.log('Modules loaded successfully');
|
|
} catch (error) {
|
|
console.error('Failed to load modules:', error);
|
|
}
|
|
|
|
// Test functions
|
|
window.testTitleSelectionUI = async function() {
|
|
console.log('=== Testing Title Selection UI ===');
|
|
|
|
try {
|
|
const titleManager = new TitleSelectionManager();
|
|
const container = document.getElementById('workflowContainer');
|
|
|
|
// Clear container
|
|
container.innerHTML = '<h4>Title Selection Test</h4>';
|
|
|
|
// Test data
|
|
const suggestions = [
|
|
'ROCKBROS Fahrradhandschuhe - Premium Qualität',
|
|
'Hochwertige Fahrradhandschuhe von ROCKBROS',
|
|
'ROCKBROS Handschuhe für Radfahrer'
|
|
];
|
|
const originalTitle = 'ROCKBROS Fahrradhandschuhe Herren Damen Halbfinger MTB Handschuhe Rutschfest Atmungsaktiv für Rennrad Mountainbike';
|
|
|
|
console.log('Creating selection UI with:', { suggestions, originalTitle });
|
|
|
|
// Create UI
|
|
const selectionUI = titleManager.createSelectionUI(suggestions, originalTitle);
|
|
container.appendChild(selectionUI);
|
|
|
|
// Set up callback
|
|
titleManager.onTitleSelected((selectedTitle) => {
|
|
console.log('Title selected:', selectedTitle);
|
|
alert(`Titel ausgewählt: ${selectedTitle}`);
|
|
});
|
|
|
|
// Show UI
|
|
titleManager.showTitleSelection(selectionUI);
|
|
|
|
console.log('Title selection UI created successfully');
|
|
|
|
} catch (error) {
|
|
console.error('Title selection test failed:', error);
|
|
}
|
|
};
|
|
|
|
window.testWorkflowWithMockData = async function() {
|
|
console.log('=== Testing Complete Workflow ===');
|
|
|
|
try {
|
|
const workflow = new EnhancedAddItemWorkflow();
|
|
const container = document.getElementById('workflowContainer');
|
|
|
|
// Clear container
|
|
container.innerHTML = '<h4>Workflow Test</h4><p>Starting workflow...</p>';
|
|
|
|
// Mock URL
|
|
const testUrl = 'https://www.amazon.de/dp/B08XYZABC123';
|
|
|
|
// Set up callbacks
|
|
workflow.onProgress((progress) => {
|
|
console.log('Workflow progress:', progress);
|
|
const progressDiv = container.querySelector('.progress') || document.createElement('div');
|
|
progressDiv.className = 'progress';
|
|
progressDiv.innerHTML = `
|
|
<p><span class="status-indicator status-info"></span>Step: ${progress.currentStep?.name || 'Unknown'}</p>
|
|
<p>Progress: ${progress.progress}%</p>
|
|
`;
|
|
if (!container.querySelector('.progress')) {
|
|
container.appendChild(progressDiv);
|
|
}
|
|
});
|
|
|
|
workflow.onError((error) => {
|
|
console.error('Workflow error:', error);
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.innerHTML = `
|
|
<p><span class="status-indicator status-error"></span>Error: ${error.error}</p>
|
|
<p>Step: ${error.step}</p>
|
|
`;
|
|
container.appendChild(errorDiv);
|
|
});
|
|
|
|
workflow.onManualInput((result) => {
|
|
console.log('Manual input required:', result);
|
|
const manualDiv = document.createElement('div');
|
|
manualDiv.innerHTML = `
|
|
<p><span class="status-indicator status-warning"></span>Manual input required</p>
|
|
<p>Reason: ${result.error}</p>
|
|
<button onclick="handleManualInput()">Provide Manual Input</button>
|
|
`;
|
|
container.appendChild(manualDiv);
|
|
});
|
|
|
|
// Start workflow
|
|
const result = await workflow.startWorkflow(testUrl, {
|
|
container: container,
|
|
allowManualFallback: true,
|
|
settings: {
|
|
mistralApiKey: '', // Empty to test fallback
|
|
timeoutSeconds: 5
|
|
}
|
|
});
|
|
|
|
console.log('Workflow result:', result);
|
|
|
|
} catch (error) {
|
|
console.error('Workflow test failed:', error);
|
|
}
|
|
};
|
|
|
|
window.testErrorHandling = function() {
|
|
console.log('=== Testing Error Handling ===');
|
|
|
|
try {
|
|
// Test different error types
|
|
const testErrors = [
|
|
new Error('Network error: Failed to fetch'),
|
|
new Error('Invalid API key provided'),
|
|
new Error('Validation failed: URL is required'),
|
|
new Error('Storage quota exceeded'),
|
|
new Error('Extraction failed: Title not found'),
|
|
new Error('Mistral AI service unavailable'),
|
|
new Error('Request timed out after 10000ms')
|
|
];
|
|
|
|
testErrors.forEach((error, index) => {
|
|
const processedError = ErrorHandler.handleError(error, {
|
|
component: 'TestComponent',
|
|
operation: `testOperation${index + 1}`
|
|
});
|
|
|
|
console.log(`Error ${index + 1}:`, processedError);
|
|
|
|
const userFriendlyError = ErrorHandler.getUserFriendlyError(processedError);
|
|
console.log(`User-friendly ${index + 1}:`, userFriendlyError);
|
|
});
|
|
|
|
console.log('Error handling test completed');
|
|
|
|
} catch (error) {
|
|
console.error('Error handling test failed:', error);
|
|
}
|
|
};
|
|
|
|
window.handleManualInput = function() {
|
|
console.log('Handling manual input...');
|
|
// This would normally show a manual input form
|
|
alert('Manual input form would be shown here');
|
|
};
|
|
|
|
window.clearLogs = function() {
|
|
document.getElementById('errorLog').textContent = 'Logs cleared...';
|
|
document.getElementById('consoleOutput').textContent = 'Console cleared...';
|
|
document.getElementById('workflowContainer').innerHTML = '<h4>Workflow Test Area</h4><p>Hier wird der Enhanced Item Workflow getestet...</p>';
|
|
};
|
|
|
|
console.log('Debug test page loaded successfully');
|
|
</script>
|
|
</body>
|
|
</html> |