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
438 lines
17 KiB
HTML
438 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Migration UI Test - Amazon Product Bar Extension</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.test-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #ff9900;
|
|
}
|
|
|
|
.test-button {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
margin: 8px;
|
|
background: linear-gradient(135deg, #ff9900 0%, #ff7700 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: linear-gradient(135deg, #ffaa00 0%, #ff8800 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
|
|
}
|
|
|
|
.test-button.secondary {
|
|
background: #6c757d;
|
|
}
|
|
|
|
.test-button.secondary:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #ff9900;
|
|
}
|
|
|
|
.test-log {
|
|
background: #000;
|
|
color: #00ff00;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.status-success { background: #28a745; }
|
|
.status-error { background: #dc3545; }
|
|
.status-warning { background: #ffc107; }
|
|
.status-info { background: #17a2b8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<div class="test-header">
|
|
<h1>🔄 Migration UI Test</h1>
|
|
<p>Test der Migration UI und User Experience für die Amazon Product Bar Extension</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Migration Szenarien</h3>
|
|
<p>Teste verschiedene Migration-Szenarien:</p>
|
|
|
|
<button class="test-button" onclick="testMigrationWithData()">
|
|
Migration mit Daten testen
|
|
</button>
|
|
|
|
<button class="test-button" onclick="testMigrationWithoutData()">
|
|
Migration ohne Daten testen
|
|
</button>
|
|
|
|
<button class="test-button" onclick="testMigrationError()">
|
|
Migration Fehler testen
|
|
</button>
|
|
|
|
<button class="test-button secondary" onclick="testMigrationRetry()">
|
|
Migration Retry testen
|
|
</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Migration Manager</h3>
|
|
<p>Teste Migration Manager Funktionalität:</p>
|
|
|
|
<button class="test-button" onclick="initializeMigrationManager()">
|
|
Migration Manager initialisieren
|
|
</button>
|
|
|
|
<button class="test-button" onclick="showMigrationUI()">
|
|
Migration UI anzeigen
|
|
</button>
|
|
|
|
<button class="test-button" onclick="hideMigrationUI()">
|
|
Migration UI verstecken
|
|
</button>
|
|
|
|
<button class="test-button secondary" onclick="showFirstTimeGuidance()">
|
|
Erste Hilfe anzeigen
|
|
</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Status</h3>
|
|
<div id="status-display">
|
|
<p><span class="status-indicator status-info"></span>Bereit zum Testen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>Test Log</h3>
|
|
<div class="test-log" id="test-log">
|
|
<div>Migration UI Test gestartet...</div>
|
|
<div>Warte auf Benutzeraktion...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load React and extension components -->
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
|
|
<script type="module">
|
|
// Import extension components
|
|
import { MigrationService } from './src/MigrationService.js';
|
|
import { MigrationManager } from './src/MigrationManager.js';
|
|
import { AppWriteManager } from './src/AppWriteManager.js';
|
|
|
|
// Global test variables
|
|
window.testMigrationManager = null;
|
|
window.testAppWriteManager = null;
|
|
window.testMigrationService = null;
|
|
|
|
// Logging function
|
|
function log(message, type = 'info') {
|
|
const logElement = document.getElementById('test-log');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logEntry = document.createElement('div');
|
|
logEntry.style.color = type === 'error' ? '#ff6b6b' :
|
|
type === 'success' ? '#51cf66' :
|
|
type === 'warning' ? '#ffd43b' : '#00ff00';
|
|
logEntry.textContent = `[${timestamp}] ${message}`;
|
|
logElement.appendChild(logEntry);
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
console.log(`Migration Test: ${message}`);
|
|
}
|
|
|
|
// Update status
|
|
function updateStatus(message, type = 'info') {
|
|
const statusElement = document.getElementById('status-display');
|
|
const statusClass = `status-${type}`;
|
|
statusElement.innerHTML = `<p><span class="status-indicator ${statusClass}"></span>${message}</p>`;
|
|
}
|
|
|
|
// Mock localStorage data for testing
|
|
function setupMockData() {
|
|
// Mock enhanced items
|
|
const mockEnhancedItems = [
|
|
{
|
|
id: 'B08N5WRWNW',
|
|
amazonUrl: 'https://amazon.de/dp/B08N5WRWNW',
|
|
originalTitle: 'Original Amazon Title 1',
|
|
customTitle: 'AI Enhanced Title 1',
|
|
price: '29.99',
|
|
currency: 'EUR',
|
|
createdAt: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 'B07XJ8C8F5',
|
|
amazonUrl: 'https://amazon.de/dp/B07XJ8C8F5',
|
|
originalTitle: 'Original Amazon Title 2',
|
|
customTitle: 'AI Enhanced Title 2',
|
|
price: '49.99',
|
|
currency: 'EUR',
|
|
createdAt: new Date().toISOString()
|
|
}
|
|
];
|
|
|
|
// Mock blacklisted brands
|
|
const mockBlacklistedBrands = [
|
|
{
|
|
id: 'bl_1641891234567_abc123def',
|
|
name: 'Test Brand 1',
|
|
addedAt: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 'bl_1641891234567_def456ghi',
|
|
name: 'Test Brand 2',
|
|
addedAt: new Date().toISOString()
|
|
}
|
|
];
|
|
|
|
// Mock settings
|
|
const mockSettings = {
|
|
mistralApiKey: 'test-api-key',
|
|
autoExtractEnabled: true,
|
|
defaultTitleSelection: 'first',
|
|
maxRetries: 3,
|
|
timeoutSeconds: 10,
|
|
updatedAt: new Date().toISOString()
|
|
};
|
|
|
|
localStorage.setItem('amazon-ext-enhanced-items', JSON.stringify(mockEnhancedItems));
|
|
localStorage.setItem('amazon_ext_blacklist', JSON.stringify(mockBlacklistedBrands));
|
|
localStorage.setItem('amazon-ext-enhanced-settings', JSON.stringify(mockSettings));
|
|
|
|
log('Mock localStorage data setup complete', 'success');
|
|
}
|
|
|
|
// Clear mock data
|
|
function clearMockData() {
|
|
localStorage.removeItem('amazon-ext-enhanced-items');
|
|
localStorage.removeItem('amazon_ext_blacklist');
|
|
localStorage.removeItem('amazon-ext-enhanced-settings');
|
|
localStorage.removeItem('amazon_ext_products');
|
|
localStorage.removeItem('amazon-ext-migration-status');
|
|
|
|
log('Mock localStorage data cleared', 'success');
|
|
}
|
|
|
|
// Test functions
|
|
window.testMigrationWithData = async function() {
|
|
try {
|
|
log('Starting migration test with data...', 'info');
|
|
updateStatus('Testing migration with data...', 'warning');
|
|
|
|
// Setup mock data
|
|
setupMockData();
|
|
|
|
// Initialize migration manager if not already done
|
|
if (!window.testMigrationManager) {
|
|
await initializeMigrationManager();
|
|
}
|
|
|
|
// Force show migration UI
|
|
await window.testMigrationManager.forceShowMigrationUI();
|
|
|
|
log('Migration UI shown with test data', 'success');
|
|
updateStatus('Migration UI active with test data', 'success');
|
|
|
|
} catch (error) {
|
|
log(`Migration test failed: ${error.message}`, 'error');
|
|
updateStatus('Migration test failed', 'error');
|
|
}
|
|
};
|
|
|
|
window.testMigrationWithoutData = async function() {
|
|
try {
|
|
log('Starting migration test without data...', 'info');
|
|
updateStatus('Testing migration without data...', 'warning');
|
|
|
|
// Clear any existing data
|
|
clearMockData();
|
|
|
|
// Initialize migration manager if not already done
|
|
if (!window.testMigrationManager) {
|
|
await initializeMigrationManager();
|
|
}
|
|
|
|
// Force show migration UI
|
|
await window.testMigrationManager.forceShowMigrationUI();
|
|
|
|
log('Migration UI shown without data', 'success');
|
|
updateStatus('Migration UI active without data', 'success');
|
|
|
|
} catch (error) {
|
|
log(`Migration test failed: ${error.message}`, 'error');
|
|
updateStatus('Migration test failed', 'error');
|
|
}
|
|
};
|
|
|
|
window.testMigrationError = async function() {
|
|
try {
|
|
log('Starting migration error test...', 'info');
|
|
updateStatus('Testing migration error scenario...', 'warning');
|
|
|
|
// Setup mock data
|
|
setupMockData();
|
|
|
|
// Create a mock migration service that will fail
|
|
const mockAppWriteManager = {
|
|
getUserDocuments: () => Promise.reject(new Error('Network connection failed')),
|
|
createUserDocument: () => Promise.reject(new Error('Authentication expired'))
|
|
};
|
|
|
|
const mockAuthService = {
|
|
isAuthenticated: () => Promise.resolve(true),
|
|
getCurrentUser: () => Promise.resolve({ email: 'test@example.com' })
|
|
};
|
|
|
|
// Create migration manager with failing services
|
|
const errorMigrationManager = new MigrationManager(mockAppWriteManager, mockAuthService);
|
|
|
|
// Show migration UI which should fail
|
|
errorMigrationManager.showMigrationUI();
|
|
|
|
log('Migration error scenario initiated', 'success');
|
|
updateStatus('Migration error test active', 'warning');
|
|
|
|
} catch (error) {
|
|
log(`Migration error test setup failed: ${error.message}`, 'error');
|
|
updateStatus('Migration error test failed', 'error');
|
|
}
|
|
};
|
|
|
|
window.testMigrationRetry = async function() {
|
|
try {
|
|
log('Testing migration retry functionality...', 'info');
|
|
updateStatus('Testing migration retry...', 'warning');
|
|
|
|
// This would typically be called from within the migration UI
|
|
// For testing, we'll just log the retry attempt
|
|
log('Migration retry would be triggered from UI', 'info');
|
|
log('Retry functionality is handled by MigrationUI component', 'info');
|
|
|
|
updateStatus('Migration retry test completed', 'success');
|
|
|
|
} catch (error) {
|
|
log(`Migration retry test failed: ${error.message}`, 'error');
|
|
updateStatus('Migration retry test failed', 'error');
|
|
}
|
|
};
|
|
|
|
window.initializeMigrationManager = async function() {
|
|
try {
|
|
log('Initializing Migration Manager...', 'info');
|
|
updateStatus('Initializing Migration Manager...', 'warning');
|
|
|
|
// Initialize AppWrite Manager (mock for testing)
|
|
window.testAppWriteManager = new AppWriteManager();
|
|
const authService = window.testAppWriteManager.getAuthService();
|
|
|
|
// Initialize Migration Manager
|
|
window.testMigrationManager = new MigrationManager(window.testAppWriteManager, authService);
|
|
|
|
// Setup event listeners
|
|
window.testMigrationManager.onMigrationComplete((result) => {
|
|
log(`Migration completed: ${JSON.stringify(result)}`, 'success');
|
|
updateStatus('Migration completed successfully', 'success');
|
|
});
|
|
|
|
window.testMigrationManager.onMigrationError((error) => {
|
|
log(`Migration error: ${error.message}`, 'error');
|
|
updateStatus('Migration failed', 'error');
|
|
});
|
|
|
|
log('Migration Manager initialized successfully', 'success');
|
|
updateStatus('Migration Manager ready', 'success');
|
|
|
|
} catch (error) {
|
|
log(`Migration Manager initialization failed: ${error.message}`, 'error');
|
|
updateStatus('Migration Manager initialization failed', 'error');
|
|
}
|
|
};
|
|
|
|
window.showMigrationUI = function() {
|
|
if (window.testMigrationManager) {
|
|
window.testMigrationManager.showMigrationUI();
|
|
log('Migration UI shown', 'success');
|
|
updateStatus('Migration UI active', 'info');
|
|
} else {
|
|
log('Migration Manager not initialized', 'error');
|
|
updateStatus('Migration Manager not ready', 'error');
|
|
}
|
|
};
|
|
|
|
window.hideMigrationUI = function() {
|
|
if (window.testMigrationManager) {
|
|
window.testMigrationManager.hideMigrationUI();
|
|
log('Migration UI hidden', 'success');
|
|
updateStatus('Migration UI hidden', 'info');
|
|
} else {
|
|
log('Migration Manager not initialized', 'error');
|
|
updateStatus('Migration Manager not ready', 'error');
|
|
}
|
|
};
|
|
|
|
window.showFirstTimeGuidance = function() {
|
|
if (window.testMigrationManager) {
|
|
window.testMigrationManager.showFirstTimeGuidance();
|
|
log('First-time guidance shown', 'success');
|
|
updateStatus('First-time guidance active', 'info');
|
|
} else {
|
|
log('Migration Manager not initialized', 'error');
|
|
updateStatus('Migration Manager not ready', 'error');
|
|
}
|
|
};
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
log('Migration UI Test page loaded', 'success');
|
|
updateStatus('Ready for testing', 'info');
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |