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:
222
test-title-selection.html
Normal file
222
test-title-selection.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user