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
158 lines
5.8 KiB
HTML
158 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Settings Panel Test</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #000;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.test-button {
|
|
background: #ff9900;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.test-button:hover {
|
|
background: #e68900;
|
|
}
|
|
|
|
.test-output {
|
|
background: #222;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
border: 1px solid #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>Settings Panel Manager Test</h1>
|
|
|
|
<div>
|
|
<button class="test-button" onclick="testCreatePanel()">Create Settings Panel</button>
|
|
<button class="test-button" onclick="testValidation()">Test API Key Validation</button>
|
|
<button class="test-button" onclick="testMasking()">Test API Key Masking</button>
|
|
<button class="test-button" onclick="testSettings()">Test Settings Storage</button>
|
|
</div>
|
|
|
|
<div id="test-output" class="test-output">
|
|
<p>Click buttons above to test Settings Panel functionality</p>
|
|
</div>
|
|
|
|
<div id="settings-container" style="margin-top: 20px;"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { SettingsPanelManager } from './src/SettingsPanelManager.js';
|
|
|
|
// Mock window.amazonExtEventBus for testing
|
|
window.amazonExtEventBus = {
|
|
emit: (event, data) => {
|
|
console.log('Event emitted:', event, data);
|
|
updateOutput(`Event emitted: ${event}`);
|
|
}
|
|
};
|
|
|
|
const settingsManager = new SettingsPanelManager();
|
|
|
|
function updateOutput(message) {
|
|
const output = document.getElementById('test-output');
|
|
output.innerHTML += `<p>${message}</p>`;
|
|
}
|
|
|
|
window.testCreatePanel = function() {
|
|
try {
|
|
const container = document.getElementById('settings-container');
|
|
container.innerHTML = '';
|
|
|
|
const settingsContent = settingsManager.createSettingsContent();
|
|
container.appendChild(settingsContent);
|
|
|
|
updateOutput('✅ Settings panel created successfully');
|
|
} catch (error) {
|
|
updateOutput('❌ Error creating panel: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.testValidation = function() {
|
|
try {
|
|
const tests = [
|
|
{ key: '', expected: false, desc: 'Empty key' },
|
|
{ key: 'short', expected: false, desc: 'Short key' },
|
|
{ key: 'key with spaces', expected: false, desc: 'Key with spaces' },
|
|
{ key: 'GP1CD0e0TrGJvt6ERDyjhaUy5w4Q4Wqr', expected: true, desc: 'Valid key' }
|
|
];
|
|
|
|
tests.forEach(test => {
|
|
const result = settingsManager.validateApiKey(test.key);
|
|
const status = result.isValid === test.expected ? '✅' : '❌';
|
|
updateOutput(`${status} ${test.desc}: ${result.isValid ? 'Valid' : result.error}`);
|
|
});
|
|
} catch (error) {
|
|
updateOutput('❌ Error in validation test: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.testMasking = function() {
|
|
try {
|
|
const tests = [
|
|
{ key: '', expected: '', desc: 'Empty key' },
|
|
{ key: 'short', expected: 'shor••••', desc: 'Short key' },
|
|
{ key: 'GP1CD0e0TrGJvt6ERDyjhaUy5w4Q4Wqr', expected: 'GP1CD0e0••••••••••••••••••••4Wqr', desc: 'Long key' }
|
|
];
|
|
|
|
tests.forEach(test => {
|
|
const result = settingsManager.maskApiKey(test.key);
|
|
const status = result === test.expected ? '✅' : '❌';
|
|
updateOutput(`${status} ${test.desc}: "${result}"`);
|
|
});
|
|
} catch (error) {
|
|
updateOutput('❌ Error in masking test: ' + error.message);
|
|
}
|
|
};
|
|
|
|
window.testSettings = async function() {
|
|
try {
|
|
// Test default settings
|
|
const defaultSettings = await settingsManager.getSettings();
|
|
updateOutput('✅ Default settings loaded: ' + JSON.stringify(defaultSettings, null, 2));
|
|
|
|
// Test saving settings
|
|
const testSettings = {
|
|
mistralApiKey: 'test-key-123',
|
|
autoExtractEnabled: false,
|
|
maxRetries: 5
|
|
};
|
|
|
|
await settingsManager.saveSettings(testSettings);
|
|
updateOutput('✅ Settings saved successfully');
|
|
|
|
// Test loading saved settings
|
|
const savedSettings = await settingsManager.getSettings();
|
|
updateOutput('✅ Saved settings loaded: ' + JSON.stringify(savedSettings, null, 2));
|
|
|
|
} catch (error) {
|
|
updateOutput('❌ Error in settings test: ' + error.message);
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |