Skip to content

Commit

Permalink
fix: update calendar tests for react 18
Browse files Browse the repository at this point in the history
  • Loading branch information
@kabaros
kabaros committed Nov 21, 2024
1 parent 1824fb1 commit 98831a7
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 55 deletions.
76 changes: 40 additions & 36 deletions components/calendar/src/calendar-input/__tests__/calendar-input.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button } from '@dhis2-ui/button'
import { fireEvent, render, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { userEvent } from '@testing-library/user-event'
import React, { useState } from 'react'
import { Field, Form } from 'react-final-form'
import { CalendarInput } from '../calendar-input.js'
Expand Down Expand Up @@ -62,6 +62,7 @@ describe('Calendar Input', () => {
})

describe('validation', () => {
beforeEach(jest.useRealTimers)
it('should validate minimum date', async () => {
const onDateSelectMock = jest.fn()
const screen = render(
Expand All @@ -77,9 +78,9 @@ describe('Calendar Input', () => {
screen.getByTestId('dhis2-uicore-input')
).getByRole('textbox')

userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
await screen.findByText(
Expand All @@ -101,9 +102,9 @@ describe('Calendar Input', () => {
getByTestId('dhis2-uicore-input')
).getByRole('textbox')

userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
await findByText(
Expand All @@ -126,9 +127,9 @@ describe('Calendar Input', () => {
getByTestId('dhis2-uicore-input')
).getByRole('textbox')

userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
await findByText(
Expand All @@ -137,9 +138,9 @@ describe('Calendar Input', () => {
)

dateInputString = '2018-13-05'
userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
queryByText(
Expand All @@ -148,9 +149,9 @@ describe('Calendar Input', () => {
).not.toBeInTheDocument()

dateInputString = '2018-13-07'
userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
await findByText('Invalid date in specified calendar')
Expand All @@ -171,9 +172,9 @@ describe('Calendar Input', () => {
getByTestId('dhis2-uicore-input')
).getByRole('textbox')

userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
await findByText(
Expand All @@ -182,24 +183,27 @@ describe('Calendar Input', () => {
)

dateInputString = '2080-04-32'
userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
queryByText(/greater than the maximum allowed date/)
).not.toBeInTheDocument()

dateInputString = '2080-01-32'
userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
await findByText('Invalid date in specified calendar')
).toBeInTheDocument()
})
it('should validate from date picker', async () => {
jest.useFakeTimers('modern')
jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'))

const onDateSelectMock = jest.fn()
const { queryByText, getByText, getByTestId } = render(
<CalendarWithValidation
Expand All @@ -213,11 +217,11 @@ describe('Calendar Input', () => {
getByTestId('dhis2-uicore-input')
).getByRole('textbox')

await userEvent.click(dateInput)
await userEvent.click(getByText('17'))
await fireEvent.focusIn(dateInput)
await fireEvent.click(getByText('17'))
expect(queryByText('17')).not.toBeInTheDocument()

// Bug where callback used to be called first with undefined
// Checking fix for Bug where callback used to be called twice - first with undefined
expect(onDateSelectMock).toHaveBeenCalledTimes(1)
expect(onDateSelectMock).toHaveBeenCalledWith({
calendarDateString: '2024-10-17',
Expand All @@ -241,9 +245,9 @@ describe('Calendar Input', () => {
getByTestId('dhis2-uicore-input')
).getByRole('textbox')

userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')
Expand Down Expand Up @@ -274,16 +278,16 @@ describe('Calendar Input', () => {
getByTestId('dhis2-uicore-input')
).getByRole('textbox')

userEvent.clear(dateInput)
userEvent.type(dateInput, dateInputString)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.type(dateInput, dateInputString)
await userEvent.tab()

expect(
getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')
).toBeInTheDocument()

userEvent.clear(dateInput)
userEvent.tab()
await userEvent.clear(dateInput)
await userEvent.tab()

expect(onDateSelectMock).toHaveBeenCalledWith({
calendarDateString: null,
Expand Down
13 changes: 3 additions & 10 deletions components/calendar/src/calendar-input/calendar-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export const CalendarInput = ({
dir,
locale,
numberingSystem,
weekDayFormat,
width,
cellSize,
weekDayFormat = 'narrow',
width = '300px',
cellSize = '32px',
clearable,
minDate,
maxDate,
Expand Down Expand Up @@ -228,13 +228,6 @@ export const CalendarInput = ({
)
}

CalendarInput.defaultProps = {
dataTest: 'dhis2-uiwidgets-calendar-inputfield',
cellSize: '32px',
width: '300px',
weekDayFormat: 'narrow',
}

CalendarInput.propTypes = {
/** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
calendar: PropTypes.any.isRequired,
Expand Down
12 changes: 3 additions & 9 deletions components/calendar/src/calendar/calendar-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ const backgroundColor = 'none'

export const CalendarContainer = React.memo(function CalendarContainer({
date,
width,
cellSize,
width = '240px',
cellSize = '32px',
calendarWeekDays,
weekDayLabels,
currMonth,
Expand All @@ -24,7 +24,7 @@ export const CalendarContainer = React.memo(function CalendarContainer({
prevYear,
languageDirection,
excludedRef,
unfocusable,
unfocusable = false,
}) {
const navigationProps = useMemo(() => {
return {
Expand Down Expand Up @@ -87,12 +87,6 @@ export const CalendarContainer = React.memo(function CalendarContainer({
)
})

CalendarContainer.defaultProps = {
cellSize: '32px',
width: '240px',
unfocusable: false,
}

CalendarContainer.propTypes = {
/** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
date: PropTypes.string,
Expand Down

0 comments on commit 98831a7

Please sign in to comment.