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
364 lines
12 KiB
HTML
364 lines
12 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 Fix 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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.workflow-container {
|
|
border: 2px solid #007bff;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
min-height: 200px;
|
|
background: white;
|
|
}
|
|
|
|
.status-message {
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-success {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-error {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
|
|
.status-info {
|
|
background: #d1ecf1;
|
|
border: 1px solid #bee5eb;
|
|
color: #0c5460;
|
|
}
|
|
|
|
/* Title Selection Styles */
|
|
.title-selection-container {
|
|
border: 2px solid #28a745;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
background: #f8fff8;
|
|
}
|
|
|
|
.title-selection-header h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.title-option {
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
margin: 0.5rem 0;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
background: white;
|
|
}
|
|
|
|
.title-option:hover {
|
|
border-color: #ff9900;
|
|
box-shadow: 0 2px 8px rgba(255, 153, 0, 0.2);
|
|
}
|
|
|
|
.title-option.selected {
|
|
border-color: #28a745;
|
|
background: #f8fff8;
|
|
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
|
|
}
|
|
|
|
.title-option.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.option-label {
|
|
font-weight: bold;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.option-text {
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.selection-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm-selection-btn, .skip-ai-btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.confirm-selection-btn {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.confirm-selection-btn:hover {
|
|
background: #218838;
|
|
}
|
|
|
|
.skip-ai-btn {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.skip-ai-btn:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.selection-message {
|
|
padding: 0.75rem;
|
|
margin: 0.5rem 0;
|
|
border-radius: 4px;
|
|
border: 1px solid;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>🔧 Title Selection Fix Test</h1>
|
|
|
|
<div class="status-info status-message">
|
|
<strong>Test Ziel:</strong> Überprüfung der Fehlerbehebung für "Unerwarteter Fehler beim Erstellen des Enhanced Items"
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Test Scenarios</h3>
|
|
<button class="test-button" onclick="testBasicTitleSelection()">Basic Title Selection</button>
|
|
<button class="test-button" onclick="testWithoutInteractivityEnhancer()">Without InteractivityEnhancer</button>
|
|
<button class="test-button" onclick="testErrorHandling()">Error Handling</button>
|
|
<button class="test-button" onclick="clearTest()">Clear</button>
|
|
</div>
|
|
|
|
<div class="workflow-container" id="testContainer">
|
|
<h4>Test Area</h4>
|
|
<p>Hier werden die Tests ausgeführt...</p>
|
|
</div>
|
|
|
|
<div id="statusContainer"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Mock localStorage
|
|
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 = {}; }
|
|
};
|
|
|
|
if (typeof localStorage === 'undefined') {
|
|
window.localStorage = mockStorage;
|
|
}
|
|
|
|
// Mock event bus
|
|
window.amazonExtEventBus = {
|
|
events: {},
|
|
emit(event, data) { console.log('Event:', event, data); },
|
|
on(event, callback) { }
|
|
};
|
|
|
|
// Load TitleSelectionManager
|
|
let TitleSelectionManager;
|
|
|
|
try {
|
|
const module = await import('./src/TitleSelectionManager.js');
|
|
TitleSelectionManager = module.TitleSelectionManager;
|
|
console.log('✅ TitleSelectionManager loaded successfully');
|
|
showStatus('✅ TitleSelectionManager loaded successfully', 'success');
|
|
} catch (error) {
|
|
console.error('❌ Failed to load TitleSelectionManager:', error);
|
|
showStatus('❌ Failed to load TitleSelectionManager: ' + error.message, 'error');
|
|
}
|
|
|
|
function showStatus(message, type = 'info') {
|
|
const statusContainer = document.getElementById('statusContainer');
|
|
const statusDiv = document.createElement('div');
|
|
statusDiv.className = `status-message status-${type}`;
|
|
statusDiv.textContent = message;
|
|
statusContainer.appendChild(statusDiv);
|
|
|
|
// Auto-remove after 5 seconds
|
|
setTimeout(() => {
|
|
if (statusDiv.parentNode) {
|
|
statusDiv.parentNode.removeChild(statusDiv);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
window.testBasicTitleSelection = function() {
|
|
console.log('=== Testing Basic Title Selection ===');
|
|
showStatus('Testing Basic Title Selection...', 'info');
|
|
|
|
try {
|
|
const container = document.getElementById('testContainer');
|
|
container.innerHTML = '<h4>🎯 Basic Title Selection Test</h4>';
|
|
|
|
const titleManager = new TitleSelectionManager();
|
|
|
|
// 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';
|
|
|
|
// Create UI
|
|
const selectionUI = titleManager.createSelectionUI(suggestions, originalTitle);
|
|
container.appendChild(selectionUI);
|
|
|
|
// Set up callback
|
|
titleManager.onTitleSelected((selectedTitle) => {
|
|
console.log('✅ Title selected:', selectedTitle);
|
|
showStatus('✅ Title selected: ' + selectedTitle, 'success');
|
|
});
|
|
|
|
// Show UI
|
|
titleManager.showTitleSelection(selectionUI);
|
|
|
|
showStatus('✅ Basic title selection test completed', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('❌ Basic title selection test failed:', error);
|
|
showStatus('❌ Basic title selection test failed: ' + error.message, 'error');
|
|
}
|
|
};
|
|
|
|
window.testWithoutInteractivityEnhancer = function() {
|
|
console.log('=== Testing Without InteractivityEnhancer ===');
|
|
showStatus('Testing without InteractivityEnhancer...', 'info');
|
|
|
|
try {
|
|
const container = document.getElementById('testContainer');
|
|
container.innerHTML = '<h4>🔧 Without InteractivityEnhancer Test</h4>';
|
|
|
|
const titleManager = new TitleSelectionManager();
|
|
|
|
// Simulate missing InteractivityEnhancer
|
|
titleManager.interactivityEnhancer = null;
|
|
|
|
const suggestions = ['Test Suggestion 1', 'Test Suggestion 2'];
|
|
const originalTitle = 'Original Test Title';
|
|
|
|
// Create UI
|
|
const selectionUI = titleManager.createSelectionUI(suggestions, originalTitle);
|
|
container.appendChild(selectionUI);
|
|
|
|
// Set up callback
|
|
titleManager.onTitleSelected((selectedTitle) => {
|
|
console.log('✅ Title selected without enhancer:', selectedTitle);
|
|
showStatus('✅ Title selected without enhancer: ' + selectedTitle, 'success');
|
|
});
|
|
|
|
// Show UI
|
|
titleManager.showTitleSelection(selectionUI);
|
|
|
|
showStatus('✅ Test without InteractivityEnhancer completed', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('❌ Test without InteractivityEnhancer failed:', error);
|
|
showStatus('❌ Test without InteractivityEnhancer failed: ' + error.message, 'error');
|
|
}
|
|
};
|
|
|
|
window.testErrorHandling = function() {
|
|
console.log('=== Testing Error Handling ===');
|
|
showStatus('Testing error handling...', 'info');
|
|
|
|
try {
|
|
const container = document.getElementById('testContainer');
|
|
container.innerHTML = '<h4>🐛 Error Handling Test</h4>';
|
|
|
|
const titleManager = new TitleSelectionManager();
|
|
|
|
// Test 1: Invalid suggestions
|
|
console.log('Test 1: Invalid suggestions');
|
|
const ui1 = titleManager.createSelectionUI(null, null);
|
|
container.appendChild(ui1);
|
|
|
|
// Test 2: Show without container
|
|
console.log('Test 2: Show without container');
|
|
titleManager.showTitleSelection(null);
|
|
|
|
// Test 3: Select invalid index
|
|
console.log('Test 3: Select invalid index');
|
|
titleManager.selectTitle(-1);
|
|
titleManager.selectTitle(999);
|
|
|
|
// Test 4: Confirm without selection
|
|
console.log('Test 4: Confirm without selection');
|
|
titleManager.selectedTitle = null;
|
|
titleManager.confirmSelection();
|
|
|
|
showStatus('✅ Error handling tests completed', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('❌ Error handling test failed:', error);
|
|
showStatus('❌ Error handling test failed: ' + error.message, 'error');
|
|
}
|
|
};
|
|
|
|
window.clearTest = function() {
|
|
document.getElementById('testContainer').innerHTML = '<h4>Test Area</h4><p>Hier werden die Tests ausgeführt...</p>';
|
|
document.getElementById('statusContainer').innerHTML = '';
|
|
console.clear();
|
|
};
|
|
|
|
console.log('🔧 Title Selection Fix Test loaded');
|
|
</script>
|
|
</body>
|
|
</html> |