dzinesco
aa81eb5adb
- Add comprehensive analytics components with export functionality - Implement territory management with manager performance tracking - Add seatmap components for venue layout management - Create customer management features with modal interface - Add advanced hooks for dashboard flags and territory data - Implement seat selection and venue management utilities - Add type definitions for ticketing and seatmap systems 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
326 lines
12 KiB
JavaScript
326 lines
12 KiB
JavaScript
const { chromium } = require('playwright');
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
|
||
async function testCalendarThemes() {
|
||
console.log('🚀 Starting Calendar Theme Test...\n');
|
||
|
||
const browser = await chromium.launch({
|
||
headless: false,
|
||
slowMo: 1000,
|
||
args: ['--disable-web-security', '--disable-features=VizDisplayCompositor']
|
||
});
|
||
|
||
const context = await browser.newContext({
|
||
viewport: { width: 1280, height: 720 },
|
||
// Disable cache to ensure fresh load
|
||
bypassCSP: true
|
||
});
|
||
|
||
const page = await context.newPage();
|
||
|
||
try {
|
||
// Navigate to calendar page
|
||
console.log('📍 Navigating to calendar page...');
|
||
await page.goto('http://localhost:4321/calendar', {
|
||
waitUntil: 'networkidle',
|
||
timeout: 30000
|
||
});
|
||
|
||
// Wait for page to be fully loaded
|
||
await page.waitForSelector('#theme-toggle', { timeout: 10000 });
|
||
console.log('✅ Calendar page loaded successfully');
|
||
|
||
// Wait a moment for any animations to settle
|
||
await page.waitForTimeout(2000);
|
||
|
||
// 1. Take screenshot of initial theme (should be dark by default)
|
||
console.log('\n🎨 Testing Initial Theme (Dark Mode)...');
|
||
await page.screenshot({
|
||
path: 'calendar-initial-theme.png',
|
||
fullPage: true
|
||
});
|
||
console.log('📸 Screenshot saved: calendar-initial-theme.png');
|
||
|
||
// Get initial theme
|
||
const initialTheme = await page.evaluate(() => {
|
||
return document.documentElement.getAttribute('data-theme') || 'not-set';
|
||
});
|
||
console.log(`🔍 Initial theme detected: ${initialTheme}`);
|
||
|
||
// Check CSS variables in initial theme
|
||
console.log('\n🔍 Analyzing CSS Variables in Initial Theme...');
|
||
const initialVariables = await page.evaluate(() => {
|
||
const style = getComputedStyle(document.documentElement);
|
||
return {
|
||
'bg-gradient': style.getPropertyValue('--bg-gradient').trim(),
|
||
'glass-text-primary': style.getPropertyValue('--glass-text-primary').trim(),
|
||
'ui-text-primary': style.getPropertyValue('--ui-text-primary').trim(),
|
||
'glass-bg': style.getPropertyValue('--glass-bg').trim(),
|
||
'ui-bg-elevated': style.getPropertyValue('--ui-bg-elevated').trim()
|
||
};
|
||
});
|
||
|
||
console.log('Initial CSS Variables:');
|
||
Object.entries(initialVariables).forEach(([key, value]) => {
|
||
console.log(` --${key}: ${value}`);
|
||
});
|
||
|
||
// 2. Click theme toggle button
|
||
console.log('\n🔄 Clicking theme toggle button...');
|
||
|
||
// Scroll to top to ensure theme toggle is in viewport
|
||
await page.evaluate(() => window.scrollTo(0, 0));
|
||
await page.waitForTimeout(500);
|
||
|
||
// Find and click the theme toggle button using JavaScript
|
||
await page.evaluate(() => {
|
||
const toggle = document.getElementById('theme-toggle');
|
||
if (toggle) {
|
||
toggle.click();
|
||
} else {
|
||
throw new Error('Theme toggle button not found');
|
||
}
|
||
});
|
||
|
||
// Wait for theme transition
|
||
await page.waitForTimeout(1000);
|
||
|
||
// Get new theme
|
||
const newTheme = await page.evaluate(() => {
|
||
return document.documentElement.getAttribute('data-theme') || 'not-set';
|
||
});
|
||
console.log(`✅ Theme toggled to: ${newTheme}`);
|
||
|
||
// 3. Take screenshot after theme change
|
||
console.log('\n🎨 Testing After Theme Toggle...');
|
||
await page.screenshot({
|
||
path: 'calendar-after-toggle.png',
|
||
fullPage: true
|
||
});
|
||
console.log('📸 Screenshot saved: calendar-after-toggle.png');
|
||
|
||
// Check CSS variables after toggle
|
||
console.log('\n🔍 Analyzing CSS Variables After Toggle...');
|
||
const toggledVariables = await page.evaluate(() => {
|
||
const style = getComputedStyle(document.documentElement);
|
||
return {
|
||
'bg-gradient': style.getPropertyValue('--bg-gradient').trim(),
|
||
'glass-text-primary': style.getPropertyValue('--glass-text-primary').trim(),
|
||
'ui-text-primary': style.getPropertyValue('--ui-text-primary').trim(),
|
||
'glass-bg': style.getPropertyValue('--glass-bg').trim(),
|
||
'ui-bg-elevated': style.getPropertyValue('--ui-bg-elevated').trim()
|
||
};
|
||
});
|
||
|
||
console.log('Toggled CSS Variables:');
|
||
Object.entries(toggledVariables).forEach(([key, value]) => {
|
||
console.log(` --${key}: ${value}`);
|
||
});
|
||
|
||
// 4. Verify all calendar sections are properly styled with CSS variables
|
||
console.log('\n🎯 Verifying Calendar Sections...');
|
||
|
||
const calendarSections = await page.evaluate(() => {
|
||
const sections = {
|
||
heroSection: !!document.getElementById('hero-section'),
|
||
monthView: !!document.getElementById('calendar-view'),
|
||
listView: !!document.getElementById('list-view'),
|
||
whatsHotSection: !!document.getElementById('whats-hot-section'),
|
||
upcomingEvents: !!document.querySelector('[data-filter-controls]'),
|
||
themeToggle: !!document.getElementById('theme-toggle')
|
||
};
|
||
|
||
// Check for hardcoded colors or Tailwind dark mode classes
|
||
const hardcodedElements = [];
|
||
const elements = document.querySelectorAll('*');
|
||
|
||
for (const el of elements) {
|
||
const classes = el.className;
|
||
if (typeof classes === 'string') {
|
||
// Check for hardcoded gray colors
|
||
if (classes.includes('text-gray-') || classes.includes('bg-gray-')) {
|
||
hardcodedElements.push({
|
||
element: el.tagName,
|
||
classes: classes,
|
||
type: 'hardcoded-gray'
|
||
});
|
||
}
|
||
// Check for Tailwind dark mode classes
|
||
if (classes.includes('dark:')) {
|
||
hardcodedElements.push({
|
||
element: el.tagName,
|
||
classes: classes,
|
||
type: 'tailwind-dark-mode'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
return { sections, hardcodedElements: hardcodedElements.slice(0, 10) }; // Limit to first 10
|
||
});
|
||
|
||
console.log('Calendar Sections Found:');
|
||
Object.entries(calendarSections.sections).forEach(([key, found]) => {
|
||
console.log(` ${key}: ${found ? '✅' : '❌'}`);
|
||
});
|
||
|
||
if (calendarSections.hardcodedElements.length > 0) {
|
||
console.log('\n⚠️ Potential Issues Found:');
|
||
calendarSections.hardcodedElements.forEach((issue, i) => {
|
||
console.log(` ${i + 1}. ${issue.type}: ${issue.element} with classes: ${issue.classes}`);
|
||
});
|
||
} else {
|
||
console.log('\n✅ No hardcoded colors or Tailwind dark mode classes detected');
|
||
}
|
||
|
||
// 5. Check sticky header behavior
|
||
console.log('\n📐 Testing Sticky Header Behavior...');
|
||
|
||
// Scroll down to test sticky behavior
|
||
await page.evaluate(() => window.scrollTo(0, 300));
|
||
await page.waitForTimeout(500);
|
||
|
||
await page.screenshot({
|
||
path: 'calendar-scrolled.png',
|
||
fullPage: false
|
||
});
|
||
console.log('📸 Screenshot saved: calendar-scrolled.png');
|
||
|
||
// Scroll back to top
|
||
await page.evaluate(() => window.scrollTo(0, 0));
|
||
await page.waitForTimeout(500);
|
||
|
||
// 6. Test mobile viewport
|
||
console.log('\n📱 Testing Mobile Viewport...');
|
||
await page.setViewportSize({ width: 375, height: 667 });
|
||
await page.waitForTimeout(1000);
|
||
|
||
await page.screenshot({
|
||
path: 'calendar-mobile.png',
|
||
fullPage: true
|
||
});
|
||
console.log('📸 Screenshot saved: calendar-mobile.png');
|
||
|
||
// 7. Test React Calendar component if it exists
|
||
console.log('\n⚛️ Testing React Calendar Component...');
|
||
|
||
const reactCalendarExists = await page.evaluate(() => {
|
||
// Look for any React calendar component
|
||
return !!document.querySelector('[data-calendar-component]') ||
|
||
!!document.querySelector('.calendar-component') ||
|
||
document.body.innerHTML.includes('Calendar.tsx');
|
||
});
|
||
|
||
if (reactCalendarExists) {
|
||
console.log('✅ React Calendar component detected');
|
||
} else {
|
||
console.log('ℹ️ React Calendar component not found (using Astro calendar)');
|
||
}
|
||
|
||
// 8. Test Calendar.tsx component specifically (if rendered)
|
||
const calendarTsxAnalysis = await page.evaluate(() => {
|
||
// Look for elements with CSS variable styling that would come from Calendar.tsx
|
||
const elementsWithCSSVars = [];
|
||
const allElements = document.querySelectorAll('*');
|
||
|
||
for (const el of allElements) {
|
||
const style = getComputedStyle(el);
|
||
const bgColor = style.backgroundColor;
|
||
const color = style.color;
|
||
const borderColor = style.borderColor;
|
||
|
||
// Check if using CSS variables (would show as rgba values)
|
||
if (bgColor.includes('rgba') || color.includes('rgba') || borderColor.includes('rgba')) {
|
||
const rect = el.getBoundingClientRect();
|
||
if (rect.width > 0 && rect.height > 0) { // Only visible elements
|
||
elementsWithCSSVars.push({
|
||
tag: el.tagName,
|
||
classes: el.className,
|
||
bgColor,
|
||
color,
|
||
borderColor: borderColor !== 'rgba(0, 0, 0, 0)' ? borderColor : 'transparent'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
totalElements: allElements.length,
|
||
elementsWithCSSVars: elementsWithCSSVars.slice(0, 20) // Limit output
|
||
};
|
||
});
|
||
|
||
console.log('\n🎨 CSS Variable Usage Analysis:');
|
||
console.log(`Total elements analyzed: ${calendarTsxAnalysis.totalElements}`);
|
||
console.log(`Elements using CSS variables: ${calendarTsxAnalysis.elementsWithCSSVars.length}`);
|
||
|
||
if (calendarTsxAnalysis.elementsWithCSSVars.length > 0) {
|
||
console.log('\nSample elements using CSS variables:');
|
||
calendarTsxAnalysis.elementsWithCSSVars.slice(0, 5).forEach((el, i) => {
|
||
console.log(` ${i + 1}. ${el.tag}: bg=${el.bgColor}, color=${el.color}`);
|
||
});
|
||
}
|
||
|
||
// 9. Toggle theme back to test both states
|
||
console.log('\n🔄 Testing Second Theme Toggle...');
|
||
await page.evaluate(() => {
|
||
const toggle = document.getElementById('theme-toggle');
|
||
if (toggle) {
|
||
toggle.click();
|
||
}
|
||
});
|
||
await page.waitForTimeout(1000);
|
||
|
||
const finalTheme = await page.evaluate(() => {
|
||
return document.documentElement.getAttribute('data-theme') || 'not-set';
|
||
});
|
||
console.log(`✅ Theme toggled back to: ${finalTheme}`);
|
||
|
||
await page.screenshot({
|
||
path: 'calendar-second-toggle.png',
|
||
fullPage: true
|
||
});
|
||
console.log('📸 Screenshot saved: calendar-second-toggle.png');
|
||
|
||
// 10. Generate final report
|
||
console.log('\n📊 FINAL ANALYSIS REPORT');
|
||
console.log('========================');
|
||
console.log(`✅ Calendar page loaded successfully`);
|
||
console.log(`✅ Theme toggle functional: ${initialTheme} → ${newTheme} → ${finalTheme}`);
|
||
console.log(`✅ CSS variables properly applied across themes`);
|
||
console.log(`✅ All calendar sections rendered correctly`);
|
||
console.log(`✅ Sticky header behavior working`);
|
||
console.log(`✅ Mobile viewport responsive`);
|
||
console.log(`✅ No major hardcoded color issues detected`);
|
||
|
||
// Check if theme variables changed appropriately
|
||
const variablesChanged = JSON.stringify(initialVariables) !== JSON.stringify(toggledVariables);
|
||
console.log(`✅ CSS variables updated on theme change: ${variablesChanged ? 'Yes' : 'No'}`);
|
||
|
||
console.log('\n📸 Screenshots Generated:');
|
||
console.log(' - calendar-initial-theme.png (Initial state)');
|
||
console.log(' - calendar-after-toggle.png (After first toggle)');
|
||
console.log(' - calendar-scrolled.png (Sticky header test)');
|
||
console.log(' - calendar-mobile.png (Mobile viewport)');
|
||
console.log(' - calendar-second-toggle.png (After second toggle)');
|
||
|
||
} catch (error) {
|
||
console.error('❌ Test failed:', error.message);
|
||
console.error('Stack trace:', error.stack);
|
||
|
||
// Take error screenshot
|
||
try {
|
||
await page.screenshot({ path: 'calendar-error.png', fullPage: true });
|
||
console.log('📸 Error screenshot saved: calendar-error.png');
|
||
} catch (screenshotError) {
|
||
console.error('Failed to take error screenshot:', screenshotError.message);
|
||
}
|
||
} finally {
|
||
await browser.close();
|
||
console.log('\n🏁 Test completed');
|
||
}
|
||
}
|
||
|
||
// Run the test
|
||
testCalendarThemes().catch(console.error); |