kokken/tests/calendar-test.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Admin Availability Calendar', () => {
  test.beforeEach(async ({ page }) => {
    // Set basic auth header
    await page.setExtraHTTPHeaders({
      'Authorization': 'Basic ' + Buffer.from('brotha:makefood1').toString('base64')
    });
    
    // Gå til admin availability siden
    await page.goto('http://localhost:3000/admin/availability');
    
    // Vent på siden loader
    await page.waitForSelector('.cook-calendar');
  });

  test('should display calendar with proper layout', async ({ page }) => {
    // Tjek at kalenderen vises
    const calendar = await page.locator('.cook-calendar');
    await expect(calendar).toBeVisible();
    
    // Tjek at månedsnavn vises
    const monthHeader = await page.locator('text=november 2025');
    await expect(monthHeader).toBeVisible();
    
    // Tjek at weekday headers vises
    const weekdays = await page.locator('[class*="rdp"]');
    await expect(weekdays.first()).toBeVisible();
    
    console.log('✅ Calendar layout looks good');
  });

  test('should have proper day styling', async ({ page }) => {
    // Find en dag i kalenderen
    const dayButtons = await page.locator('.cook-calendar .rdp-day');
    const firstDay = dayButtons.first();
    
    // Tjek at dagen er synlig
    await expect(firstDay).toBeVisible();
    
    // Tjek background farve (should be green for available or red for blocked)
    const styles = await firstDay.evaluate((el) => {
      const computed = window.getComputedStyle(el);
      return {
        backgroundColor: computed.backgroundColor,
        color: computed.color,
        border: computed.border
      };
    });
    
    console.log('Day styling:', styles);
    
    // Tjek at der er enten grøn eller rød background
    const isGreenOrRed = styles.backgroundColor.includes('240, 253, 244') || // green-50
                        styles.backgroundColor.includes('220, 38, 38'); // red-600
    
    expect(isGreenOrRed).toBeTruthy();
    console.log('✅ Day colors are correct');
  });

  test('should handle day clicks', async ({ page }) => {
    // Find en klikkbar dag
    const dayButtons = await page.locator('.cook-calendar .rdp-day');
    
    // Vent på at dage er loaded
    await expect(dayButtons.first()).toBeVisible();
    
    // Klik på første dag
    await dayButtons.first().click();
    
    // Vent kort på API response
    await page.waitForTimeout(1000);
    
    // Tjek at der er en toast besked eller loading state
    const possibleMessages = [
      page.locator('text=✅'),
      page.locator('text=🚫'),
      page.locator('text=Gemmer ændring'),
      page.locator('text=Der skete en fejl')
    ];
    
    let messageFound = false;
    for (const message of possibleMessages) {
      if (await message.isVisible()) {
        messageFound = true;
        console.log('✅ Click interaction working - message found');
        break;
      }
    }
    
    // Hvis ingen besked, så tjek om API kaldet skete via network requests
    if (!messageFound) {
      console.log('⚠️ No visible message, but click may have worked');
    }
  });

  test('should fit within container', async ({ page }) => {
    // Tjek calendar container størrelse
    const calendar = await page.locator('.cook-calendar');
    const calendarBox = await calendar.boundingBox();
    
    // Tjek container
    const container = await page.locator('div.max-w-md');
    const containerBox = await container.boundingBox();
    
    if (calendarBox && containerBox) {
      // Kalenderen skal passe inden i containeren
      expect(calendarBox.width).toBeLessThanOrEqual(containerBox.width + 20); // 20px tolerance
      console.log(`✅ Calendar fits: ${calendarBox.width}px ≤ ${containerBox.width}px`);
    }
  });

  test('should show correct blocked dates', async ({ page }) => {
    // Tjek API data
    const response = await page.request.get('http://localhost:3000/api/availability/blocked');
    const blockedDates = await response.json();
    
    console.log('Blocked dates from API:', blockedDates.length);
    
    if (blockedDates.length > 0) {
      // Find røde dage i kalenderen
      const redDays = await page.locator('.cook-calendar .rdp-day').evaluateAll((buttons) => {
        return buttons.filter(btn => {
          const styles = window.getComputedStyle(btn);
          return styles.backgroundColor.includes('220, 38, 38'); // red-600
        }).length;
      });
      
      console.log(`Found ${redDays} red days in calendar for ${blockedDates.length} blocked dates`);
      
      // Der skal være mindst nogle røde dage hvis der er blokerede datoer
      if (blockedDates.length > 0) {
        expect(redDays).toBeGreaterThan(0);
        console.log('✅ Blocked dates show as red');
      }
    }
  });
});