workavia-calendar-front/__test__/features/Events/EventFullDisplay.test.tsx

import { InfoRow } from '@/components/Event/InfoRow'
import { LONG_DATE_FORMAT } from '@/components/Event/utils/dateTimeFormatters'
import * as eventThunks from '@/features/Calendars/services'
import EventUpdateModal from '@/features/Events/EventUpdateModal'
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
import dayjs from 'dayjs'
import { renderWithProviders } from '../../utils/Renderwithproviders'

describe('Event Full Display', () => {
  const mockOnClose = jest.fn()
  const day = new Date('2025-01-15T10:00:00.000Z') // Fixed date in UTC: Jan 15, 2025 10:00 AM UTC

  beforeEach(() => {
    jest.clearAllMocks()
  })

  const preloadedState = {
    user: {
      userData: {
        sub: 'test',
        email: 'test@test.com',
        sid: 'aiYbWZSk2g0F+LrQeD7Dg4QcUMR8R/zTZdZBiA7N6Ro',
        openpaasId: '667037022b752d0026472254'
      },
      organiserData: {
        cn: 'test',
        cal_address: 'test@test.com'
      }
    },
    calendars: {
      list: {
        '667037022b752d0026472254/cal1': {
          id: '667037022b752d0026472254/cal1',
          name: 'First Calendar',
          color: '#FF0000',
          events: {
            event1: {
              uid: 'event1',
              title: 'Test Event',
              calId: '667037022b752d0026472254/cal1',
              start: day.toISOString(),
              end: day.toISOString(),
              organizer: { cn: 'test', cal_address: 'test@test.com' },
              attendee: [
                {
                  cn: 'test',
                  cal_address: 'test@test.com',
                  partstat: 'NEEDS-ACTION',
                  rsvp: 'TRUE',
                  role: 'REQ-PARTICIPANT',
                  cutype: 'INDIVIDUAL'
                },
                {
                  cn: 'John',
                  cal_address: 'john@test.com',
                  partstat: 'NEEDS-ACTION',
                  rsvp: 'TRUE',
                  role: 'REQ-PARTICIPANT',
                  cutype: 'INDIVIDUAL'
                }
              ]
            }
          }
        },
        'otherCal/cal': {
          id: 'otherCal/cal',
          name: 'Calendar 1',
          color: '#FF0000',
          events: {
            event1: {
              uid: 'event1',
              calId: 'otherCal/cal',
              title: 'Test Event Other cal',
              start: day.toISOString(),
              end: day.toISOString(),
              organizer: { cn: 'john', cal_address: 'john@test.com' }
            }
          }
        }
      }
    }
  }

  it('renders correctly event data with fixed timezone', () => {
    // Use fixed timezone UTC for consistent test results across all environments
    const fixedDate = new Date('2025-01-15T10:00:00.000Z') // 10AM UTC
    const endDate = new Date(fixedDate.getTime() + 3600000) // 11AM UTC

    // With UTC timezone set, formatLocalDateTime produces predictable values
    const expectedStart = '2025-01-15T10:00' // 10:00 AM UTC
    const expectedEnd = '2025-01-15T11:00' // 11:00 AM UTC

    const stateWithFixedDate = {
      ...preloadedState,
      calendars: {
        pending: false,
        list: {
          '667037022b752d0026472254/cal1': {
            ...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
            events: {
              event1: {
                ...preloadedState.calendars.list[
                  '667037022b752d0026472254/cal1'
                ].events.event1,
                start: fixedDate.toISOString(),
                end: endDate.toISOString(),
                timezone: 'UTC'
              }
            }
          }
        }
      }
    }

    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      stateWithFixedDate
    )

    expect(screen.getByDisplayValue('Test Event')).toBeInTheDocument()

    // Expand to show date/time inputs (normal mode shows DateTimeSummary)
    fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))

    const startDateInput = screen.getByTestId('start-date-input')
    const startTimeInput = screen.getByTestId('start-time-input')
    const endTimeInput = screen.getByTestId('end-time-input')

    expect(startDateInput).toBeInTheDocument()
    expect(startTimeInput).toBeInTheDocument()
    expect(endTimeInput).toBeInTheDocument()

    expect(startDateInput).toHaveValue(
      dayjs(expectedStart).format(LONG_DATE_FORMAT)
    )
    expect(startTimeInput).toHaveValue(dayjs(expectedStart).format('HH:mm'))

    expect(endTimeInput).toHaveValue(dayjs(expectedEnd).format('HH:mm'))

    expect(screen.getByText('First Calendar')).toBeInTheDocument()
  })
  it('calls onClose when Cancel clicked', () => {
    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      preloadedState
    )
    fireEvent.click(screen.getAllByTestId('CloseIcon')[0])

    expect(mockOnClose).toHaveBeenCalledWith({}, 'backdropClick')
  })
  it('toggle Show More reveals extra fields', async () => {
    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      preloadedState
    )
    act(() => {
      fireEvent.click(
        screen.getByRole('button', { name: 'common.moreOptions' })
      )
    })

    await waitFor(() => {
      expect(screen.getByText('event.form.notification')).toBeInTheDocument()
    })

    // EventDisplay modal doesn't have Repeat checkbox, only RepeatEvent component
    // which shows repetition settings when repetition data exists
    // Since test event has no repetition data, RepeatEvent component won't show Repeat checkbox
    fireEvent.click(screen.getByRole('button', { name: /Show Less/i }))
  })

  it('can edit title when user is organizer', () => {
    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      preloadedState
    )
    const titleField = screen.getByLabelText('event.form.title')
    fireEvent.change(titleField, { target: { value: 'New Title' } })
    expect(screen.getByDisplayValue('New Title')).toBeInTheDocument()
  })
  it('toggle all-day updates end date correctly', () => {
    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      preloadedState
    )

    fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
    const allDayCheckbox = screen.getByLabelText('event.form.allDay')
    fireEvent.click(allDayCheckbox)
    expect(allDayCheckbox).toBeChecked()

    const expectedDate = dayjs(day).format(LONG_DATE_FORMAT)

    const startDateInput = screen.getByTestId('start-date-input')
    const endDateInput = screen.getByTestId('end-date-input')

    expect(startDateInput).toHaveValue(expectedDate)
    expect(endDateInput).toHaveValue(expectedDate)
  })

  it('saves event and moves it when calendar is changed', async () => {
    const spyPut = jest
      .spyOn(eventThunks, 'putEventAsync')
      .mockImplementation(payload => {
        const promise = Promise.resolve(payload)
        ;(promise as any).unwrap = () => promise
        return () => promise as any
      })
    const spyMove = jest
      .spyOn(eventThunks, 'moveEventAsync')
      .mockImplementation(payload => {
        const promise = Promise.resolve(payload)
        ;(promise as any).unwrap = () => promise
        return () => promise as any
      })

    const testDate = new Date('2025-01-15T10:00:00.000Z')
    const testEndDate = new Date('2025-01-15T11:00:00.000Z')
    const preloadedTwoCals = {
      ...preloadedState,
      calendars: {
        pending: false,
        list: {
          '667037022b752d0026472254/cal1': {
            id: '667037022b752d0026472254/cal1',
            name: 'Calendar One',
            color: '#FF0000',
            events: {
              event1: {
                uid: 'event1',
                title: 'Test Event',
                calId: '667037022b752d0026472254/cal1',
                start: testDate.toISOString(),
                end: testEndDate.toISOString(),
                organizer: { cn: 'test', cal_address: 'test@test.com' },
                attendee: [{ cn: 'test', cal_address: 'test@test.com' }]
              }
            }
          },
          '667037022b752d0026472254/cal2': {
            id: '667037022b752d0026472254/cal2',
            name: 'Calendar Two',
            color: '#00FF00',
            events: {}
          }
        },
        pending: false
      }
    }

    await act(async () =>
      renderWithProviders(
        <EventUpdateModal
          open={true}
          onClose={mockOnClose}
          calId={'667037022b752d0026472254/cal1'}
          eventId={'event1'}
        />,
        preloadedTwoCals
      )
    )

    fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
    const calendarSelect = screen.getByLabelText('event.form.calendar')
    await act(async () => fireEvent.mouseDown(calendarSelect))

    const option = await screen.findByText('Calendar Two')
    fireEvent.click(option)

    await act(async () => {
      fireEvent.click(screen.getByRole('button', { name: 'actions.save' }))
    })

    await waitFor(
      () => {
        expect(spyPut).toHaveBeenCalled()
      },
      { timeout: 3000 }
    )

    await waitFor(
      () => {
        expect(spyMove).toHaveBeenCalled()
      },
      { timeout: 3000 }
    )
  })

  it('edit modal displays event time in original event timezone', () => {
    // GIVEN user timezone is UTC+2
    // WHEN the user edits an event at 2PM UTC+7 (Asia/Bangkok)
    // THEN the update modal displays the time as 2PM in Asia/Bangkok timezone
    const eventDateUTC7 = new Date('2025-01-15T07:00:00.000Z') // 7AM UTC = 2PM UTC+7

    const stateWithTimezone = {
      ...preloadedState,
      calendars: {
        pending: false,
        list: {
          '667037022b752d0026472254/cal1': {
            id: '667037022b752d0026472254/cal1',
            name: 'Test Calendar',
            color: '#FF0000',
            events: {
              event1: {
                uid: 'event1',
                title: 'Timezone Edit Test',
                calId: '667037022b752d0026472254/cal1',
                start: eventDateUTC7.toISOString(),
                end: new Date(eventDateUTC7.getTime() + 3600000).toISOString(),
                timezone: 'Asia/Bangkok',
                allday: false,
                organizer: { cn: 'test', cal_address: 'test@test.com' },
                attendee: [{ cn: 'test', cal_address: 'test@test.com' }]
              }
            }
          }
        },
        pending: false
      }
    }

    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      stateWithTimezone
    )

    // Expand to show timezone selector (normal mode hides it)
    fireEvent.click(screen.getByRole('button', { name: 'common.moreOptions' }))
    // The timezone select should have Asia/Bangkok selected
    const timeZone = screen.getByDisplayValue(/Asia\/Bangkok/i)
    expect(timeZone).toBeInTheDocument()
  })

  it('InfoRow renders error style when error prop is true', () => {
    renderWithProviders(<InfoRow icon={<span>i</span>} text="Bad" error />)
    expect(screen.getByText('Bad')).toBeInTheDocument()
  })

  it('can remove an attendee with the close button', () => {
    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      preloadedState
    )

    const removeBtn = screen.getAllByTestId('CloseIcon').pop()!
    fireEvent.click(removeBtn)

    expect(screen.queryByText(/John/)).not.toBeInTheDocument()
  })

  it('renders video conference info when x_openpass_videoconference exists', () => {
    const videoState = {
      ...preloadedState,
      calendars: {
        pending: false,
        list: {
          '667037022b752d0026472254/cal1': {
            ...preloadedState.calendars.list['667037022b752d0026472254/cal1'],
            events: {
              event1: {
                ...preloadedState.calendars.list[
                  '667037022b752d0026472254/cal1'
                ].events.event1,
                x_openpass_videoconference: 'https://meet.test/video'
              }
            }
          }
        }
      }
    }

    renderWithProviders(
      <EventUpdateModal
        open={true}
        onClose={mockOnClose}
        calId={'667037022b752d0026472254/cal1'}
        eventId={'event1'}
      />,
      videoState
    )

    expect(
      screen.getByText('event.form.joinVisioConference')
    ).toBeInTheDocument()
  })
})