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
277 lines
10 KiB
HTML
277 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Enhanced Add Item Workflow Test</title>
|
|
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
color: white;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.test-section {
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.test-section h2 {
|
|
margin-top: 0;
|
|
color: #007acc;
|
|
}
|
|
|
|
.test-button {
|
|
padding: 0.75rem 1.5rem;
|
|
background: #007acc;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
margin-right: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: #0088dd;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
background: #333;
|
|
}
|
|
|
|
.status.success {
|
|
background: #1a4d2e;
|
|
border: 1px solid #28a745;
|
|
}
|
|
|
|
.status.error {
|
|
background: #4d1a1a;
|
|
border: 1px solid #dc3545;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>Enhanced Add Item Workflow Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Workflow Integration Test</h2>
|
|
<p>Test the complete enhanced add item workflow with progress tracking and error handling.</p>
|
|
|
|
<button class="test-button" onclick="testWorkflowIntegration()">Test Complete Workflow</button>
|
|
<button class="test-button" onclick="testManualFallback()">Test Manual Fallback</button>
|
|
<button class="test-button" onclick="testProgressTracking()">Test Progress Tracking</button>
|
|
|
|
<div id="workflow-status" class="status" style="display: none;"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Enhanced Items Panel</h2>
|
|
<p>Test the enhanced items panel with the new workflow integration.</p>
|
|
|
|
<button class="test-button" onclick="showEnhancedPanel()">Show Enhanced Panel</button>
|
|
<button class="test-button" onclick="hideEnhancedPanel()">Hide Enhanced Panel</button>
|
|
|
|
<div id="enhanced-panel-container"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Workflow Status</h2>
|
|
<div id="workflow-info">
|
|
<p>No active workflow</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import modules -->
|
|
<script type="module">
|
|
import { EnhancedAddItemWorkflow } from './src/EnhancedAddItemWorkflow.js';
|
|
import { EnhancedItemsPanelManager } from './src/EnhancedItemsPanelManager.js';
|
|
import { EnhancedStorageManager } from './src/EnhancedStorageManager.js';
|
|
|
|
// Global instances for testing
|
|
window.workflow = new EnhancedAddItemWorkflow();
|
|
window.panelManager = new EnhancedItemsPanelManager();
|
|
window.storageManager = new EnhancedStorageManager();
|
|
|
|
// Mock event bus for testing
|
|
window.amazonExtEventBus = {
|
|
events: {},
|
|
on(event, callback) {
|
|
if (!this.events[event]) this.events[event] = [];
|
|
this.events[event].push(callback);
|
|
},
|
|
emit(event, data) {
|
|
if (this.events[event]) {
|
|
this.events[event].forEach(callback => callback(data));
|
|
}
|
|
}
|
|
};
|
|
|
|
// Test functions
|
|
window.testWorkflowIntegration = async function() {
|
|
const statusEl = document.getElementById('workflow-status');
|
|
statusEl.style.display = 'block';
|
|
statusEl.className = 'status';
|
|
statusEl.innerHTML = 'Testing workflow integration...';
|
|
|
|
try {
|
|
// Set up workflow event handlers
|
|
window.workflow.onProgress((progress) => {
|
|
statusEl.innerHTML = `Progress: ${progress.stepId} - ${progress.status} (${progress.progress}%)`;
|
|
});
|
|
|
|
window.workflow.onComplete((result) => {
|
|
statusEl.className = 'status success';
|
|
statusEl.innerHTML = `Workflow completed successfully! Item ID: ${result.enhancedItem?.id}`;
|
|
});
|
|
|
|
window.workflow.onError((error) => {
|
|
statusEl.className = 'status error';
|
|
statusEl.innerHTML = `Workflow failed: ${error.error}`;
|
|
});
|
|
|
|
// Test with a sample Amazon URL
|
|
const testUrl = 'https://www.amazon.de/dp/B08N5WRWNW';
|
|
const settings = {
|
|
mistralApiKey: '', // No API key for testing
|
|
timeoutSeconds: 10,
|
|
maxRetries: 1
|
|
};
|
|
|
|
statusEl.innerHTML = 'Starting workflow test...';
|
|
|
|
// This will likely fail at extraction due to CORS, but we can test the workflow structure
|
|
const result = await window.workflow.startWorkflow(testUrl, {
|
|
allowManualFallback: true,
|
|
settings: settings
|
|
});
|
|
|
|
console.log('Workflow test result:', result);
|
|
|
|
} catch (error) {
|
|
statusEl.className = 'status error';
|
|
statusEl.innerHTML = `Test error: ${error.message}`;
|
|
console.error('Workflow test error:', error);
|
|
}
|
|
};
|
|
|
|
window.testManualFallback = async function() {
|
|
const statusEl = document.getElementById('workflow-status');
|
|
statusEl.style.display = 'block';
|
|
statusEl.className = 'status';
|
|
statusEl.innerHTML = 'Testing manual fallback...';
|
|
|
|
try {
|
|
const partialData = {
|
|
url: 'https://www.amazon.de/dp/B08N5WRWNW',
|
|
title: 'Test Product Title',
|
|
price: '29.99',
|
|
currency: 'EUR'
|
|
};
|
|
|
|
const result = await window.workflow.startManualInputWorkflow(partialData);
|
|
|
|
if (result.success) {
|
|
statusEl.className = 'status success';
|
|
statusEl.innerHTML = `Manual workflow completed! Item: ${result.enhancedItem.customTitle}`;
|
|
} else {
|
|
statusEl.className = 'status error';
|
|
statusEl.innerHTML = `Manual workflow failed: ${result.message}`;
|
|
}
|
|
|
|
} catch (error) {
|
|
statusEl.className = 'status error';
|
|
statusEl.innerHTML = `Manual test error: ${error.message}`;
|
|
console.error('Manual test error:', error);
|
|
}
|
|
};
|
|
|
|
window.testProgressTracking = function() {
|
|
const statusEl = document.getElementById('workflow-status');
|
|
statusEl.style.display = 'block';
|
|
statusEl.className = 'status';
|
|
|
|
// Simulate progress updates
|
|
const steps = ['validate', 'extract', 'ai', 'select', 'save'];
|
|
let currentStep = 0;
|
|
|
|
const updateProgress = () => {
|
|
if (currentStep < steps.length) {
|
|
const step = steps[currentStep];
|
|
const progress = Math.round(((currentStep + 1) / steps.length) * 100);
|
|
|
|
statusEl.innerHTML = `Simulating progress: ${step} (${progress}%)`;
|
|
|
|
// Simulate step completion after 1 second
|
|
setTimeout(() => {
|
|
currentStep++;
|
|
if (currentStep < steps.length) {
|
|
updateProgress();
|
|
} else {
|
|
statusEl.className = 'status success';
|
|
statusEl.innerHTML = 'Progress tracking test completed!';
|
|
}
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
updateProgress();
|
|
};
|
|
|
|
window.showEnhancedPanel = function() {
|
|
const container = document.getElementById('enhanced-panel-container');
|
|
const panelContent = window.panelManager.createItemsContent();
|
|
container.innerHTML = '';
|
|
container.appendChild(panelContent);
|
|
};
|
|
|
|
window.hideEnhancedPanel = function() {
|
|
const container = document.getElementById('enhanced-panel-container');
|
|
container.innerHTML = '';
|
|
};
|
|
|
|
// Update workflow status periodically
|
|
setInterval(() => {
|
|
const status = window.workflow.getWorkflowStatus();
|
|
const infoEl = document.getElementById('workflow-info');
|
|
|
|
if (status) {
|
|
infoEl.innerHTML = `
|
|
<p><strong>Active Workflow:</strong> ${status.id}</p>
|
|
<p><strong>Current Step:</strong> ${status.currentStep}</p>
|
|
<p><strong>Progress:</strong> ${status.progress}%</p>
|
|
<p><strong>Duration:</strong> ${Math.round(status.duration / 1000)}s</p>
|
|
<p><strong>Errors:</strong> ${status.errors.length}</p>
|
|
`;
|
|
} else {
|
|
infoEl.innerHTML = '<p>No active workflow</p>';
|
|
}
|
|
}, 1000);
|
|
|
|
console.log('Enhanced Add Item Workflow test page loaded');
|
|
console.log('Available test functions:', {
|
|
testWorkflowIntegration: 'Tests complete workflow integration',
|
|
testManualFallback: 'Tests manual input fallback',
|
|
testProgressTracking: 'Tests progress tracking simulation',
|
|
showEnhancedPanel: 'Shows the enhanced items panel',
|
|
hideEnhancedPanel: 'Hides the enhanced items panel'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |