96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
// Performance test for column toggle
|
|
console.log('Column Toggle Performance Test');
|
|
|
|
// Function to measure performance
|
|
function measureColumnToggle() {
|
|
const startTime = performance.now();
|
|
|
|
// Find the show/hide tasks button
|
|
const taskToggleButton = document.querySelector('button[title*="Tasks"], button:has(svg + span:contains("Tasks"))');
|
|
|
|
if (!taskToggleButton) {
|
|
console.error('Could not find the show/hide tasks button');
|
|
return;
|
|
}
|
|
|
|
console.log('Found tasks toggle button:', taskToggleButton);
|
|
|
|
// Add performance observer
|
|
const observer = new PerformanceObserver((list) => {
|
|
const entries = list.getEntries();
|
|
entries.forEach((entry) => {
|
|
if (entry.entryType === 'measure') {
|
|
console.log(`${entry.name}: ${entry.duration.toFixed(2)}ms`);
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe({ entryTypes: ['measure'] });
|
|
|
|
// Measure the click performance
|
|
performance.mark('toggle-start');
|
|
|
|
taskToggleButton.click();
|
|
|
|
// Use requestAnimationFrame to measure when the DOM updates are complete
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
performance.mark('toggle-end');
|
|
performance.measure('Column Toggle Duration', 'toggle-start', 'toggle-end');
|
|
|
|
const endTime = performance.now();
|
|
const totalTime = endTime - startTime;
|
|
|
|
console.log(`Total toggle time: ${totalTime.toFixed(2)}ms`);
|
|
|
|
if (totalTime < 500) {
|
|
console.log('✅ Performance is good (< 500ms)');
|
|
} else if (totalTime < 1000) {
|
|
console.log('⚠️ Performance is acceptable (500-1000ms)');
|
|
} else {
|
|
console.log('❌ Performance is poor (> 1000ms)');
|
|
}
|
|
|
|
observer.disconnect();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Function to count EditableTaskStatus components
|
|
function countTaskStatusComponents() {
|
|
const components = document.querySelectorAll('[data-testid="editable-task-status"], .editable-task-status');
|
|
console.log(`Found ${components.length} EditableTaskStatus components`);
|
|
return components.length;
|
|
}
|
|
|
|
// Function to monitor component creation/destruction
|
|
function monitorComponentChanges() {
|
|
const initialCount = countTaskStatusComponents();
|
|
|
|
setTimeout(() => {
|
|
const finalCount = countTaskStatusComponents();
|
|
const difference = Math.abs(finalCount - initialCount);
|
|
|
|
if (difference === 0) {
|
|
console.log('✅ No components were recreated');
|
|
} else {
|
|
console.log(`⚠️ ${difference} components were recreated`);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
// Run the test
|
|
console.log('Starting performance test...');
|
|
console.log('Initial component count:', countTaskStatusComponents());
|
|
|
|
// Monitor for component changes
|
|
monitorComponentChanges();
|
|
|
|
// Wait a bit then measure toggle performance
|
|
setTimeout(() => {
|
|
measureColumnToggle();
|
|
}, 500);
|
|
|
|
// Export functions for manual testing
|
|
window.testColumnToggle = measureColumnToggle;
|
|
window.countComponents = countTaskStatusComponents; |