chore: initialize project repository with core extension files
- 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
This commit is contained in:
364
test-title-selection-fix.html
Normal file
364
test-title-selection-fix.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user