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:
346
test-enhanced-item-creation.html
Normal file
346
test-enhanced-item-creation.html
Normal file
@@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Enhanced Item Creation Test</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin: 20px 0;
|
||||
}
|
||||
.form-group {
|
||||
margin: 15px 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input[type="url"], input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
background-color: #007acc;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #005a9e;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.result {
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
}
|
||||
.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
.info {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
.warning {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
border: 1px solid #ffeaa7;
|
||||
}
|
||||
.progress {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.step {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.step.active {
|
||||
color: #007acc;
|
||||
font-weight: bold;
|
||||
}
|
||||
.step.completed {
|
||||
color: #28a745;
|
||||
}
|
||||
.step.error {
|
||||
color: #dc3545;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Enhanced Item Creation Test</h1>
|
||||
<p>Testen Sie die Erstellung von Enhanced Items mit der problematischen URL.</p>
|
||||
|
||||
<div class="container">
|
||||
<h2>Automatische Erstellung (wird fehlschlagen)</h2>
|
||||
<div class="form-group">
|
||||
<label for="auto-url">Amazon URL:</label>
|
||||
<input type="url" id="auto-url"
|
||||
value="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dib=eyJ2IjoiMSJ9.-T0n-H-GYCdSn6tkhSVSM7jc5L9XNXsoonu4xjZ2V7sAFYdNJfrbK7b5XTKN5JZ8tm9hhO5rmd65ytlmLhbkjw-o-PIe2GbUmE4D-08dZWWjkOriS4nUSIqIhYhkqnifLUhr2LZ6ICyHAtY-w6b0A3sLSshcjrX6eCcPVE6y2FIBE7kVFq39QDU0DgDNJbALhcPtg5QCg4rDb1g6Wrlyu6acHCOfW5LqMFzanpLU15G0x9SQ0e1BfByeAH-Tgf4maUYfMB-DHZjSlldp1VDs6Wj0IMT9hUFzSdIMEodJRjA.Y7NPhfxUfYTsNDVIwrqDJbmdym11VoeRQ9GbY6as8mg&dib_tag=se&keywords=rockbros&qid=1768133517&sr=8-7">
|
||||
</div>
|
||||
<button onclick="testAutomaticCreation()" id="auto-btn">Automatisch erstellen</button>
|
||||
<div id="auto-progress"></div>
|
||||
<div id="auto-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h2>Manuelle Erstellung (Fallback)</h2>
|
||||
<div class="form-group">
|
||||
<label for="manual-url">Amazon URL:</label>
|
||||
<input type="url" id="manual-url"
|
||||
value="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="manual-title">Produkttitel:</label>
|
||||
<input type="text" id="manual-title"
|
||||
value="ROCKBROS Fahrradhandschuhe Outdoorsports Reflektierend Atmungsaktiv Einheitsgröße">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="manual-price">Preis:</label>
|
||||
<input type="text" id="manual-price" value="19.99">
|
||||
</div>
|
||||
<button onclick="testManualCreation()" id="manual-btn">Manuell erstellen</button>
|
||||
<div id="manual-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h2>Gespeicherte Items anzeigen</h2>
|
||||
<button onclick="showSavedItems()">Gespeicherte Items laden</button>
|
||||
<div id="saved-items"></div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { UrlValidator } from './src/UrlValidator.js';
|
||||
import { ProductExtractor } from './src/ProductExtractor.js';
|
||||
import { EnhancedStorageManager } from './src/EnhancedStorageManager.js';
|
||||
import { errorHandler } from './src/ErrorHandler.js';
|
||||
|
||||
// Mock event bus
|
||||
window.amazonExtEventBus = {
|
||||
emit: (event, data) => console.log('Event:', event, data)
|
||||
};
|
||||
|
||||
let storageManager = new EnhancedStorageManager();
|
||||
|
||||
window.testAutomaticCreation = async function() {
|
||||
const url = document.getElementById('auto-url').value;
|
||||
const progressDiv = document.getElementById('auto-progress');
|
||||
const resultDiv = document.getElementById('auto-result');
|
||||
const btn = document.getElementById('auto-btn');
|
||||
|
||||
btn.disabled = true;
|
||||
progressDiv.innerHTML = '';
|
||||
resultDiv.innerHTML = '';
|
||||
|
||||
try {
|
||||
// Step 1: URL Validation
|
||||
progressDiv.innerHTML += '<div class="step active">🔍 URL validieren...</div>';
|
||||
const validation = UrlValidator.validateAmazonUrl(url);
|
||||
|
||||
if (!validation.isValid) {
|
||||
throw new Error('URL-Validierung fehlgeschlagen: ' + validation.error);
|
||||
}
|
||||
|
||||
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'completed') +
|
||||
'<div class="step active">📦 Produktdaten extrahieren...</div>';
|
||||
|
||||
// Step 2: Product Extraction (will fail)
|
||||
const extractor = new ProductExtractor();
|
||||
const extractionResult = await extractor.extractProductData(url);
|
||||
|
||||
if (!extractionResult.success) {
|
||||
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'error');
|
||||
|
||||
// Show fallback option
|
||||
resultDiv.innerHTML = `
|
||||
<div class="result warning">
|
||||
⚠️ Automatische Extraktion fehlgeschlagen: ${extractionResult.error}
|
||||
|
||||
Grund: Der ProductExtractor kann aufgrund von CORS-Richtlinien keine externen Amazon-Seiten laden.
|
||||
|
||||
Lösung: Verwenden Sie die manuelle Eingabe unten.
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// This won't be reached due to CORS
|
||||
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'completed') +
|
||||
'<div class="step completed">💾 Item speichern...</div>';
|
||||
|
||||
const enhancedItem = {
|
||||
id: validation.asin,
|
||||
amazonUrl: validation.cleanUrl,
|
||||
originalTitle: extractionResult.data.title,
|
||||
customTitle: extractionResult.data.title,
|
||||
price: extractionResult.data.price,
|
||||
currency: extractionResult.data.currency,
|
||||
titleSuggestions: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
};
|
||||
|
||||
await storageManager.saveEnhancedItem(enhancedItem);
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="result success">
|
||||
✅ Enhanced Item erfolgreich erstellt!
|
||||
ID: ${enhancedItem.id}
|
||||
Titel: ${enhancedItem.customTitle}
|
||||
Preis: ${enhancedItem.price} ${enhancedItem.currency}
|
||||
</div>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
progressDiv.innerHTML = progressDiv.innerHTML.replace('active', 'error');
|
||||
resultDiv.innerHTML = `
|
||||
<div class="result error">
|
||||
❌ Fehler beim Erstellen des Enhanced Items: ${error.message}
|
||||
|
||||
Stack: ${error.stack}
|
||||
</div>
|
||||
`;
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.testManualCreation = async function() {
|
||||
const url = document.getElementById('manual-url').value;
|
||||
const title = document.getElementById('manual-title').value;
|
||||
const price = document.getElementById('manual-price').value;
|
||||
const resultDiv = document.getElementById('manual-result');
|
||||
const btn = document.getElementById('manual-btn');
|
||||
|
||||
btn.disabled = true;
|
||||
resultDiv.innerHTML = '<div class="result info">Erstelle Enhanced Item manuell...</div>';
|
||||
|
||||
try {
|
||||
// Validate inputs
|
||||
if (!url || !title || !price) {
|
||||
throw new Error('Alle Felder sind erforderlich');
|
||||
}
|
||||
|
||||
// Validate URL
|
||||
const validation = UrlValidator.validateAmazonUrl(url);
|
||||
if (!validation.isValid) {
|
||||
throw new Error('URL-Validierung fehlgeschlagen: ' + validation.error);
|
||||
}
|
||||
|
||||
// Create enhanced item
|
||||
const enhancedItem = {
|
||||
id: validation.asin,
|
||||
amazonUrl: validation.cleanUrl,
|
||||
originalTitle: title,
|
||||
customTitle: title,
|
||||
price: price,
|
||||
currency: 'EUR',
|
||||
titleSuggestions: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
};
|
||||
|
||||
// Save item
|
||||
await storageManager.saveEnhancedItem(enhancedItem);
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<div class="result success">
|
||||
✅ Enhanced Item erfolgreich erstellt (manuell)!
|
||||
|
||||
ID: ${enhancedItem.id}
|
||||
Titel: ${enhancedItem.customTitle}
|
||||
Preis: ${enhancedItem.price} ${enhancedItem.currency}
|
||||
URL: ${enhancedItem.amazonUrl}
|
||||
|
||||
Das Item wurde erfolgreich in Local Storage gespeichert.
|
||||
</div>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
resultDiv.innerHTML = `
|
||||
<div class="result error">
|
||||
❌ Fehler bei manueller Erstellung: ${error.message}
|
||||
|
||||
Stack: ${error.stack}
|
||||
</div>
|
||||
`;
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.showSavedItems = async function() {
|
||||
const resultDiv = document.getElementById('saved-items');
|
||||
|
||||
try {
|
||||
const items = await storageManager.getEnhancedItems();
|
||||
|
||||
if (items.length === 0) {
|
||||
resultDiv.innerHTML = '<div class="result info">Keine gespeicherten Items gefunden.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let itemsHtml = '<div class="result success">Gespeicherte Enhanced Items:\n\n';
|
||||
items.forEach((item, index) => {
|
||||
itemsHtml += `${index + 1}. ID: ${item.id}
|
||||
Titel: ${item.customTitle}
|
||||
Preis: ${item.price} ${item.currency}
|
||||
URL: ${item.amazonUrl}
|
||||
Erstellt: ${new Date(item.createdAt).toLocaleString()}
|
||||
|
||||
`;
|
||||
});
|
||||
itemsHtml += '</div>';
|
||||
|
||||
resultDiv.innerHTML = itemsHtml;
|
||||
|
||||
} catch (error) {
|
||||
resultDiv.innerHTML = `
|
||||
<div class="result error">
|
||||
❌ Fehler beim Laden der Items: ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-load saved items on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Enhanced Item Creation Test loaded');
|
||||
showSavedItems();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user