import React from 'react' import { render, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom/extend-expect' import { format, startOfMonth, subMonths } from 'date-fns' import { enGB as locale } from 'date-fns/locale' import DatePickerCalendar from '../src/DatePickerCalendar' describe('DatePickerCalendar', () => { it('should render', () => { const { getAllByText } = render(<DatePickerCalendar locale={locale} />) expect(getAllByText('1').length).toBeGreaterThan(0) }) it('should call onDateChange on date selection', () => { const handleDateChange = jest.fn() const { getAllByText } = render(<DatePickerCalendar locale={locale} onDateChange={handleDateChange} />) fireEvent.click(getAllByText('1')[0]) expect(handleDateChange).toHaveBeenCalledTimes(1) }) it('should display selected date', () => { const { getAllByText } = render(<DatePickerCalendar locale={locale} date={startOfMonth(new Date())} />) expect(getAllByText('1')[0].parentElement).toHaveClass('-selected') }) it('should display pre-selected date’s month on initial render', () => { const pastDate = subMonths(new Date(), 1) const monthName = format(pastDate, 'LLLL', { locale }) const { getByText } = render(<DatePickerCalendar locale={locale} date={pastDate} />) expect(getByText(monthName, { exact: false })).toBeInTheDocument() }) it('should maintain the selected date’s time when selecting a new date', () => { const handleDateChange = jest.fn() const date = new Date(2020, 1, 24, 18, 30) const { getByText } = render(<DatePickerCalendar locale={locale} date={date} onDateChange={handleDateChange} />) fireEvent.click(getByText('25')) expect(handleDateChange).toHaveBeenCalledWith(new Date(2020, 1, 25, 18, 30)) }) })