workavia-calendar-front/__test__/components/DateTimeField.test.tsx

import {
  DateTimeFields,
  DateTimeFieldsProps
} from '@/components/Event/components/DateTimeFields'
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

jest.mock('twake-i18n', () => ({
  useI18n: () => ({
    t: (key: string) => key,
    lang: 'en'
  })
}))

describe('DateTimeFields', () => {
  const mockHandlers = {
    onStartDateChange: jest.fn(),
    onStartTimeChange: jest.fn(),
    onEndDateChange: jest.fn(),
    onEndTimeChange: jest.fn(),
    onToggleEndDate: jest.fn()
  }

  const defaultProps: DateTimeFieldsProps = {
    startDate: '2025-07-18',
    startTime: '09:00',
    endDate: '2025-07-18',
    endTime: '10:00',
    allday: false,
    showMore: true,
    hasEndDateChanged: false,
    showEndDate: false,
    validation: {
      errors: {
        dateTime: ''
      }
    },
    ...mockHandlers
  }

  const renderField = async (props: Partial<DateTimeFieldsProps> = {}) => {
    await act(async () =>
      render(<DateTimeFields {...defaultProps} {...props} />)
    )
  }

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

  it('moves END forward when START moves after END (normal mode)', async () => {
    await renderField({
      startDate: '2025-01-01',
      startTime: '10:00',
      endDate: '2025-01-01',
      endTime: '11:00',
      showMore: true
    })

    const startTimeInput = screen.getByTestId('start-time-input')

    fireEvent.change(startTimeInput, { target: { value: '12:00' } })
    fireEvent.blur(startTimeInput)

    await waitFor(() =>
      expect(mockHandlers.onStartTimeChange).toHaveBeenCalledWith('12:00')
    )
    await waitFor(() =>
      expect(mockHandlers.onEndTimeChange).toHaveBeenCalledWith('13:00')
    )
  })

  it('moves END forward by full duration when START date jumps after END date', async () => {
    await renderField({
      startDate: '2025-01-01',
      startTime: '09:00',
      endDate: '2025-01-01',
      endTime: '10:00',
      showMore: true
    })

    await userEvent.click(screen.getByTestId('start-date-input'))
    const dayButton = screen.getByRole('gridcell', { name: '3' })
    await userEvent.click(dayButton)

    await waitFor(() =>
      expect(mockHandlers.onStartDateChange).toHaveBeenCalledWith('2025-01-03')
    )

    await waitFor(() =>
      expect(mockHandlers.onEndDateChange).toHaveBeenCalledWith('2025-01-03')
    )
  })

  it('does NOT move START backward when END moves before START (normal mode)', async () => {
    await renderField({
      startDate: '2025-01-01',
      startTime: '10:00',
      endDate: '2025-01-01',
      endTime: '11:00',
      showMore: true
    })

    const endTimeInput = screen.getByTestId('end-time-input')

    fireEvent.change(endTimeInput, { target: { value: '08:00' } })
    fireEvent.blur(endTimeInput)

    await waitFor(() =>
      expect(mockHandlers.onEndTimeChange).toHaveBeenCalledWith('08:00')
    )

    // Start time should NOT be automatically adjusted when end time changes
    expect(mockHandlers.onStartTimeChange).not.toHaveBeenCalled()
    expect(mockHandlers.onStartDateChange).not.toHaveBeenCalled()
  })

  it('moves START backward properly when END date jumps before START date', async () => {
    await renderField({
      startDate: '2025-01-05',
      startTime: '09:00',
      endDate: '2025-01-05',
      endTime: '10:00',
      showMore: true
    })

    await userEvent.click(screen.getByTestId('end-date-input'))
    const dayButton = screen.getByRole('gridcell', { name: '3' })
    await userEvent.click(dayButton)

    await waitFor(() =>
      expect(mockHandlers.onEndDateChange).toHaveBeenCalledWith('2025-01-03')
    )

    await waitFor(() =>
      expect(mockHandlers.onStartDateChange).toHaveBeenCalledWith('2025-01-03')
    )
  })

  it('pushes END forward in whole days for allday events', async () => {
    await renderField({
      allday: true,
      startDate: '2025-02-01',
      endDate: '2025-02-03',
      showEndDate: true
    })

    await userEvent.click(screen.getByTestId('start-date-input'))
    const dayButton = screen.getByRole('gridcell', { name: '10' })
    await userEvent.click(dayButton)

    await waitFor(() =>
      expect(mockHandlers.onStartDateChange).toHaveBeenCalledWith('2025-02-10')
    )

    await waitFor(() =>
      expect(mockHandlers.onEndDateChange).toHaveBeenCalledWith('2025-02-12')
    )
  })

  it('moves START backward in whole days for allday when END moves earlier', async () => {
    await renderField({
      allday: true,
      startDate: '2025-05-10',
      endDate: '2025-05-15',
      showEndDate: true
    })

    await userEvent.click(screen.getByTestId('end-date-input'))
    const dayButton = screen.getByRole('gridcell', { name: '1' })
    await userEvent.click(dayButton)

    await waitFor(() =>
      expect(mockHandlers.onEndDateChange).toHaveBeenCalledWith('2025-05-01')
    )

    await waitFor(() =>
      expect(mockHandlers.onStartDateChange).toHaveBeenCalledWith('2025-04-26')
    )
  })

  it('does not call handlers if invalid (null) date value', async () => {
    await renderField({
      showMore: true
    })

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

    fireEvent.change(startDateInput, { target: { value: '' } })

    expect(mockHandlers.onStartDateChange).not.toHaveBeenCalled()
    expect(mockHandlers.onEndDateChange).not.toHaveBeenCalled()
  })

  it('shift to preserve original duration (normal case)', async () => {
    await renderField({
      startDate: '2025-01-01',
      startTime: '09:00',
      endDate: '2025-01-01',
      endTime: '10:00',
      showMore: true
    })

    const startTimeInput = screen.getByTestId('start-time-input')

    fireEvent.change(startTimeInput, { target: { value: '09:30' } })
    fireEvent.blur(startTimeInput)

    await waitFor(() =>
      expect(mockHandlers.onStartTimeChange).toHaveBeenCalledWith('09:30')
    )
    await waitFor(() =>
      expect(mockHandlers.onEndTimeChange).toHaveBeenCalledWith('10:30')
    )
  })

  it('preserves 1-hour duration across midnight when changing start time from 22:30 to 23:45', async () => {
    await renderField({
      startDate: '2025-01-15',
      startTime: '22:30',
      endDate: '2025-01-15',
      endTime: '23:30',
      showMore: true
    })

    const startTimeInput = screen.getByTestId('start-time-input')

    // Change start time from 22:30 to 23:45
    fireEvent.change(startTimeInput, { target: { value: '23:45' } })
    fireEvent.blur(startTimeInput)

    await waitFor(() =>
      expect(mockHandlers.onStartTimeChange).toHaveBeenCalledWith('23:45')
    )

    // End date should move to the next day
    await waitFor(() =>
      expect(mockHandlers.onEndDateChange).toHaveBeenCalledWith(
        '2025-01-16',
        '00:45'
      )
    )
  })

  it('should have aria-label for accessibility and testing', async () => {
    await renderField({
      startDate: '2025-01-01',
      startTime: '10:00',
      endDate: '2025-01-01',
      endTime: '11:00',
      showMore: true
    })

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

    expect(startDateInput).toHaveAttribute(
      'aria-label',
      'dateTimeFields.startDate'
    )
    expect(startTimeInput).toHaveAttribute(
      'aria-label',
      'dateTimeFields.startTime'
    )
    expect(endDateInput).toHaveAttribute('aria-label', 'dateTimeFields.endDate')
    expect(endTimeInput).toHaveAttribute('aria-label', 'dateTimeFields.endTime')
  })

  describe('DateTimeFields - Drag and Drop Display Logic', () => {
    // Test 1.1: Display 2 fields when drag from allday slot (multiple days)
    it('displays only 2 date fields when allday=true and multiple days', async () => {
      await renderField({
        allday: true,
        hasEndDateChanged: false,
        startDate: '2025-07-18',
        endDate: '2025-07-20',
        showEndDate: true,
        showMore: false
      })

      expect(screen.getByTestId('start-date-input')).toBeInTheDocument()
      expect(screen.getByTestId('end-date-input')).toBeInTheDocument()
      expect(screen.queryByTestId('start-time-input')).not.toBeInTheDocument()
      expect(screen.queryByTestId('end-time-input')).not.toBeInTheDocument()
    })

    // Test 1.2: Display 4 fields when drag from week view (multiple days)
    it('displays 4 fields when allday=false, hasEndDateChanged=true, and multiple days', async () => {
      await renderField({
        allday: false,
        hasEndDateChanged: true,
        startDate: '2025-07-18',
        endDate: '2025-07-20',
        startTime: '09:00',
        endTime: '10:00',
        showEndDate: true,
        showMore: false
      })

      expect(screen.getByTestId('start-date-input')).toBeInTheDocument()
      expect(screen.getByTestId('start-time-input')).toBeInTheDocument()
      expect(screen.getByTestId('end-date-input')).toBeInTheDocument()
      expect(screen.getByTestId('end-time-input')).toBeInTheDocument()
    })

    // Test 1.3: Display single date + time fields
    it('displays single date field with time fields for single day event', async () => {
      await renderField({
        allday: false,
        hasEndDateChanged: false,
        startDate: '2025-07-18',
        endDate: '2025-07-18',
        startTime: '09:00',
        endTime: '10:00',
        showEndDate: false,
        showMore: false
      })

      const startDateInput = screen.getByTestId('start-date-input')
      expect(startDateInput).toHaveAttribute(
        'aria-label',
        'dateTimeFields.date'
      )
      expect(screen.getByTestId('start-time-input')).toBeInTheDocument()
      expect(screen.getByTestId('end-time-input')).toBeInTheDocument()
      expect(screen.queryByTestId('end-date-input')).not.toBeInTheDocument()
    })
  })
})