calendar/frontend/e2e/tests/calendar-ui.spec.ts

import { test, expect } from '@playwright/test';
import { AuthHelpers } from '@/auth-helpers';
import { CalendarHelpers } from '@/calendar-helpers';

test.describe('Calendar UI Interactions', () => {
  let authHelpers: AuthHelpers;
  let calendarHelpers: CalendarHelpers;

  test.beforeEach(async ({ page }) => {
    authHelpers = new AuthHelpers(page);
    calendarHelpers = new CalendarHelpers(page);
    
    await authHelpers.ensureLoggedIn();
    await calendarHelpers.waitForCalendarLoad();
  });

  test('should switch between month and week views', async ({ page }) => {
    // Start in month view (default)
    expect(await calendarHelpers.getCurrentView()).toBe('month');
    
    // Switch to week view
    await calendarHelpers.switchToWeekView();
    expect(await calendarHelpers.getCurrentView()).toBe('week');
    
    // Switch back to month view
    await calendarHelpers.switchToMonthView();
    expect(await calendarHelpers.getCurrentView()).toBe('month');
  });

  test('should navigate between time periods', async ({ page }) => {
    // Get current period text
    const initialPeriod = await page.locator('.calendar-header .month-year').textContent();
    
    // Navigate to next period
    await calendarHelpers.navigateToNextPeriod();
    const nextPeriod = await page.locator('.calendar-header .month-year').textContent();
    expect(nextPeriod).not.toBe(initialPeriod);
    
    // Navigate to previous period (should go back to original)
    await calendarHelpers.navigateToPreviousPeriod();
    const backPeriod = await page.locator('.calendar-header .month-year').textContent();
    expect(backPeriod).toBe(initialPeriod);
    
    // Navigate to today should reset to current period
    await calendarHelpers.navigateToToday();
  });

  test('should create and display events', async ({ page }) => {
    // Skip this test if the app doesn't have a traditional event creation modal
    // This test would need to be adapted based on the actual event creation workflow
    test.skip(true, 'Event creation workflow needs to be determined based on actual app behavior');
    
    /*
    const eventTitle = `Test Event ${Date.now()}`;
    
    // Create a new event
    await calendarHelpers.createEvent({
      title: eventTitle,
      startTime: '14:00',
      endTime: '15:00',
      description: 'This is a test event'
    });
    
    // Verify event appears in calendar
    const event = await calendarHelpers.getEventByTitle(eventTitle);
    await expect(event).toBeVisible();
    */
  });

  test('should toggle calendar visibility', async ({ page }) => {
    // Look for calendars in either the regular calendar list or external calendar list
    const regularCalendar = page.locator('.calendar-list li .calendar-name').first();
    const externalCalendar = page.locator('.external-calendar-item .external-calendar-name').first();
    
    // Try regular calendars first, then external calendars
    try {
      if (await regularCalendar.count() > 0) {
        const calendarName = await regularCalendar.textContent();
        if (calendarName) {
          await calendarHelpers.toggleCalendarVisibility(calendarName);
          await calendarHelpers.toggleCalendarVisibility(calendarName);
        }
      } else if (await externalCalendar.count() > 0) {
        const calendarName = await externalCalendar.textContent();
        if (calendarName) {
          await calendarHelpers.toggleCalendarVisibility(calendarName);
          await calendarHelpers.toggleCalendarVisibility(calendarName);
        }
      } else {
        // Skip test if no calendars are available
        test.skip(true, 'No calendars available to test visibility toggle');
      }
    } catch (error) {
      // If calendars aren't loaded yet or available, skip the test
      test.skip(true, 'Calendars not accessible for visibility testing');
    }
  });

  test('should change themes', async ({ page }) => {
    const themes = ['default', 'ocean', 'forest', 'dark'];
    
    for (const theme of themes) {
      await calendarHelpers.changeTheme(theme);
      
      // Verify theme is applied by checking data-theme attribute on html element
      const themeAttribute = await page.locator('html').getAttribute('data-theme');
      expect(themeAttribute).toBe(theme);
    }
  });

  test('should change styles', async ({ page }) => {
    const styles = ['default', 'google'];
    
    for (const style of styles) {
      await calendarHelpers.changeStyle(style);
      
      if (style === 'google') {
        // Verify Google CSS stylesheet is loaded
        const googleStylesheet = page.locator('link[href*="google.css"]');
        await expect(googleStylesheet).toBeAttached();
      } else {
        // For default style, just verify the selector worked
        const selectedValue = await page.locator('.style-selector-dropdown').inputValue();
        expect(selectedValue).toBe('default');
      }
    }
  });

  test('should open and close calendar management modal', async ({ page }) => {
    // Open modal
    await calendarHelpers.openCalendarManagementModal();
    
    // Verify modal is visible
    await expect(page.locator('.calendar-management-modal')).toBeVisible();
    
    // Check tabs are present
    await expect(page.locator('.tab-button', { hasText: 'Create Calendar' })).toBeVisible();
    await expect(page.locator('.tab-button', { hasText: 'Add External' })).toBeVisible();
    
    // Close modal by clicking the close button
    await page.locator('.modal-close').click();
    await expect(page.locator('.calendar-management-modal')).toBeHidden();
  });
});