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
222 lines
7.6 KiB
HTML
222 lines
7.6 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 Manager Test</title>
|
|
<link rel="stylesheet" href="src/StaggeredMenu.css">
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.test-header {
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.test-controls {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.test-controls button {
|
|
padding: 0.75rem 1.5rem;
|
|
background: #007acc;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.test-controls button:hover {
|
|
background: #0066aa;
|
|
}
|
|
|
|
.test-output {
|
|
background: #f8f9fa;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.ui-container {
|
|
border: 2px dashed #ddd;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
min-height: 200px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.ui-container.has-content {
|
|
border-style: solid;
|
|
border-color: #007acc;
|
|
background: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<div class="test-header">
|
|
<h1>Title Selection Manager Test</h1>
|
|
<p>Test the title selection UI functionality</p>
|
|
</div>
|
|
|
|
<div class="test-controls">
|
|
<button onclick="testBasicUI()">Test Basic UI</button>
|
|
<button onclick="testWithSuggestions()">Test with AI Suggestions</button>
|
|
<button onclick="testEmptySuggestions()">Test Empty Suggestions</button>
|
|
<button onclick="testLoadingState()">Test Loading State</button>
|
|
<button onclick="clearUI()">Clear UI</button>
|
|
</div>
|
|
|
|
<div id="ui-container" class="ui-container">
|
|
<p style="text-align: center; color: #666; margin: 2rem 0;">
|
|
Click a test button above to display the title selection UI
|
|
</p>
|
|
</div>
|
|
|
|
<div class="test-output" id="output">
|
|
Ready for testing...
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { TitleSelectionManager } from './src/TitleSelectionManager.js';
|
|
|
|
let titleManager = null;
|
|
const container = document.getElementById('ui-container');
|
|
const output = document.getElementById('output');
|
|
|
|
function log(message) {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
output.textContent += `[${timestamp}] ${message}\n`;
|
|
output.scrollTop = output.scrollHeight;
|
|
}
|
|
|
|
function clearUI() {
|
|
if (titleManager) {
|
|
titleManager.destroy();
|
|
titleManager = null;
|
|
}
|
|
container.innerHTML = '<p style="text-align: center; color: #666; margin: 2rem 0;">Click a test button above to display the title selection UI</p>';
|
|
container.classList.remove('has-content');
|
|
log('UI cleared');
|
|
}
|
|
|
|
function setupTitleManager() {
|
|
if (titleManager) {
|
|
titleManager.destroy();
|
|
}
|
|
|
|
titleManager = new TitleSelectionManager();
|
|
|
|
// Set up selection callback
|
|
titleManager.onTitleSelected((selectedTitle) => {
|
|
log(`Title selected: "${selectedTitle}"`);
|
|
log(`Selection type: ${titleManager.getSelectedType()}`);
|
|
});
|
|
|
|
return titleManager;
|
|
}
|
|
|
|
window.testBasicUI = function() {
|
|
log('Testing basic UI with original title only...');
|
|
|
|
const manager = setupTitleManager();
|
|
const suggestions = [];
|
|
const originalTitle = 'Samsung Galaxy S21 Ultra 5G Smartphone 128GB Phantom Black';
|
|
|
|
const ui = manager.createSelectionUI(suggestions, originalTitle);
|
|
manager.showTitleSelection(container);
|
|
container.classList.add('has-content');
|
|
|
|
log('Basic UI created with original title');
|
|
};
|
|
|
|
window.testWithSuggestions = function() {
|
|
log('Testing UI with AI suggestions...');
|
|
|
|
const manager = setupTitleManager();
|
|
const suggestions = [
|
|
'Samsung Galaxy S21 Ultra - Premium 5G Flagship',
|
|
'Galaxy S21 Ultra: High-End Android Smartphone',
|
|
'Samsung S21 Ultra - Professional Mobile Device'
|
|
];
|
|
const originalTitle = 'Samsung Galaxy S21 Ultra 5G Smartphone 128GB Phantom Black';
|
|
|
|
const ui = manager.createSelectionUI(suggestions, originalTitle);
|
|
manager.showTitleSelection(container);
|
|
container.classList.add('has-content');
|
|
|
|
log('UI created with 3 AI suggestions and original title');
|
|
};
|
|
|
|
window.testEmptySuggestions = function() {
|
|
log('Testing UI with empty suggestions...');
|
|
|
|
const manager = setupTitleManager();
|
|
const suggestions = ['', '', '']; // Empty suggestions
|
|
const originalTitle = 'Samsung Galaxy S21 Ultra 5G Smartphone 128GB';
|
|
|
|
const ui = manager.createSelectionUI(suggestions, originalTitle);
|
|
manager.showTitleSelection(container);
|
|
container.classList.add('has-content');
|
|
|
|
log('UI created with empty suggestions - should default to original');
|
|
};
|
|
|
|
window.testLoadingState = function() {
|
|
log('Testing loading state...');
|
|
|
|
const manager = setupTitleManager();
|
|
const suggestions = ['', '', '']; // Start with empty
|
|
const originalTitle = 'Samsung Galaxy S21 Ultra 5G Smartphone 128GB';
|
|
|
|
const ui = manager.createSelectionUI(suggestions, originalTitle);
|
|
manager.showTitleSelection(container);
|
|
container.classList.add('has-content');
|
|
|
|
// Show loading state
|
|
manager.showLoadingState();
|
|
log('Loading state activated');
|
|
|
|
// Simulate AI suggestions arriving after 2 seconds
|
|
setTimeout(() => {
|
|
const newSuggestions = [
|
|
'Samsung Galaxy S21 Ultra - Premium Flagship',
|
|
'Galaxy S21 Ultra: Professional Smartphone',
|
|
'Samsung S21 Ultra - High-End Device'
|
|
];
|
|
|
|
manager.updateSuggestions(newSuggestions);
|
|
log('AI suggestions loaded and UI updated');
|
|
}, 2000);
|
|
};
|
|
|
|
// Make functions available globally for onclick handlers
|
|
window.clearUI = clearUI;
|
|
|
|
log('Title Selection Manager Test initialized');
|
|
</script>
|
|
</body>
|
|
</html> |