@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
146 lines (127 loc) • 5.78 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Controller API Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.test-result {
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
.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;
}
</style>
</head>
<body>
<h1>Calendar Controller API Test</h1>
<div id="test-results"></div>
<script type="module">
import { CalendarController } from '../../dist/index.js';
const testResults = document.getElementById('test-results');
function addResult(message, type = 'info') {
const div = document.createElement('div');
div.className = `test-result ${type}`;
div.textContent = message;
testResults.appendChild(div);
}
function runTests() {
try {
addResult('Starting Calendar Controller tests...', 'info');
// Test 1: Controller creation
const calendar = CalendarController({
initialSelectedDate: new Date(2025, 5, 1), // June 1, 2025
firstDayOfWeek: 0,
isRangeSelection: false
});
if (calendar) {
addResult('✓ Calendar Controller created successfully', 'success');
} else {
addResult('✗ Failed to create Calendar Controller', 'error');
return;
}
// Test 2: Check bindings
if (calendar.bindings && calendar.bindings.selectedDate) {
addResult('✓ Bindings exist and are accessible', 'success');
} else {
addResult('✗ Bindings not found or inaccessible', 'error');
}
// Test 3: Check methods
if (calendar.methods && typeof calendar.methods.selectDate === 'function') {
addResult('✓ Methods exist and are accessible', 'success');
} else {
addResult('✗ Methods not found or inaccessible', 'error');
}
// Test 4: Check events
if (calendar.events && calendar.events.dateSelected) {
addResult('✓ Events exist and are accessible', 'success');
} else {
addResult('✗ Events not found or inaccessible', 'error');
}
// Test 5: Test date selection
try {
calendar.methods.selectDate(2025, 5, 15); // June 15, 2025
addResult('✓ Date selection method works', 'success');
} catch (error) {
addResult(`✗ Date selection failed: ${error.message}`, 'error');
}
// Test 6: Test navigation
try {
calendar.methods.nextMonth();
calendar.methods.prevMonth();
addResult('✓ Navigation methods work', 'success');
} catch (error) {
addResult(`✗ Navigation failed: ${error.message}`, 'error');
}
// Test 7: Test range selection
try {
calendar.methods.setRangeSelectionMode(true);
addResult('✓ Range selection mode toggle works', 'success');
} catch (error) {
addResult(`✗ Range selection failed: ${error.message}`, 'error');
}
// Test 8: Test internationalization
try {
calendar.methods.setLocale('es-ES');
calendar.methods.setLocale('en-US');
addResult('✓ Internationalization methods work', 'success');
} catch (error) {
addResult(`✗ Internationalization failed: ${error.message}`, 'error');
}
addResult('All basic API tests completed!', 'info');
// Display current state
const selectedDate = calendar.bindings.selectedDate.current;
const currentMonth = calendar.bindings.currentMonth.current;
const currentYear = calendar.bindings.currentYear.current;
addResult(`Selected Date: ${selectedDate ? selectedDate.toDateString() : 'None'}`, 'info');
addResult(`Current Month: ${currentMonth} (${currentYear})`, 'info');
} catch (error) {
addResult(`✗ Critical error: ${error.message}`, 'error');
console.error('Test error:', error);
}
}
// Run tests when page loads
runTests();
</script>
</body>
</html>