Skip to content

Commit

Permalink
EDSC-4125 changes display value in datepicker, updates tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniel-zamora
daniel-zamora committed Jan 24, 2025
1 parent 281886f commit 105ef55
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 60 deletions.
23 changes: 16 additions & 7 deletions static/src/js/components/Datepicker/__tests__/Datepicker.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,11 +304,12 @@ describe('Datepicker component', () => {
// June state in days view
await waitFor(() => {
expect(currentMonthSwitch).toHaveTextContent('June')
expect(currentMonthSwitch).not.toHaveTextContent('2024')
expect(currentPrevNav).toBeVisible()
expect(currentNextNav).toBeVisible()
})

expect(currentMonthSwitch).not.toHaveTextContent('2024')
expect(currentPrevNav).toBeVisible()
expect(currentNextNav).toBeVisible()

// Navigate to January using prev nav
await user.click(currentPrevNav) // May
await user.click(currentPrevNav) // April
Expand All @@ -319,11 +320,15 @@ describe('Datepicker component', () => {
// January state in days view
await waitFor(() => {
expect(currentMonthSwitch).toHaveTextContent('January')
})

await waitFor(() => {
expect(currentMonthSwitch).not.toHaveTextContent('2024')
expect(currentPrevNav).not.toBeVisible() // Hidden in January
expect(currentNextNav).toBeVisible()
})

expect(currentPrevNav).not.toBeVisible() // Hidden in January
expect(currentNextNav).toBeVisible()

// Navigate from February to December
await user.click(currentNextNav) // February
await user.click(currentNextNav) // March
Expand All @@ -340,10 +345,14 @@ describe('Datepicker component', () => {
// December state in days view
await waitFor(() => {
expect(currentMonthSwitch).toHaveTextContent('December')
})

await waitFor(() => {
expect(currentMonthSwitch).not.toHaveTextContent('2024')
expect(currentPrevNav).toBeVisible()
expect(currentNextNav).not.toBeVisible() // Hidden in December
})

expect(currentPrevNav).toBeVisible()
expect(currentNextNav).not.toBeVisible() // Hidden in December
})
})
})
Expand Down
26 changes: 26 additions & 0 deletions static/src/js/components/TemporalDisplay/TemporalSelectionDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,18 @@ const TemporalSelectionDropdown = ({
recurringDayEnd,
isRecurring
})
const [datesSelected, setDatesSelected] = useState({
start: false,
end: false
})

useEffect(() => {
setTemporal(temporalSearch)

setDatesSelected({
start: !!temporalSearch.startDate,
end: !!temporalSearch.endDate
})
}, [temporalSearch])

/**
Expand Down Expand Up @@ -98,6 +107,11 @@ const TemporalSelectionDropdown = ({
* Clears the current temporal values internally and within the Redux store
*/
const onClearClick = () => {
setDatesSelected({
start: false,
end: false
})

setTemporal({
startDate: '',
endDate: '',
Expand Down Expand Up @@ -251,6 +265,11 @@ const TemporalSelectionDropdown = ({
startDate: existingStartDate
} = temporal

setDatesSelected((prev) => ({
...prev,
start: true
}))

if (shouldCallMetrics && onMetricsTemporalFilter) {
onMetricsTemporalFilter({
type: `Set Start Date - ${metricType}`,
Expand Down Expand Up @@ -286,6 +305,11 @@ const TemporalSelectionDropdown = ({
isRecurring: existingIsRecurring
} = temporal

setDatesSelected((prev) => ({
...prev,
end: true
}))

if (shouldCallMetrics && onMetricsTemporalFilter) {
onMetricsTemporalFilter({
type: `Set End Date - ${metricType}`,
Expand Down Expand Up @@ -337,6 +361,8 @@ const TemporalSelectionDropdown = ({
setEndDate={setEndDate}
setStartDate={setStartDate}
temporal={temporal}
displayStartDate={datesSelected.start ? temporal.startDate : ''}
displayEndDate={datesSelected.end ? temporal.endDate : ''}
/>
)
}
Expand Down
14 changes: 11 additions & 3 deletions static/src/js/components/TemporalDisplay/TemporalSelectionDropdownMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ const TemporalSelectionDropdownMenu = ({
onValid,
setEndDate,
setStartDate,
temporal
temporal,
displayStartDate,
displayEndDate
}) => {
const classes = {
btnApply: classNames(
Expand Down Expand Up @@ -68,6 +70,8 @@ const TemporalSelectionDropdownMenu = ({
onSliderChange={onSliderChange}
onValid={onValid}
onInvalid={onInvalid}
displayStartDate={displayStartDate}
displayEndDate={displayEndDate}
/>
<div className="temporal-selection-dropdown-menu__actions">
<Button
Expand Down Expand Up @@ -95,16 +99,20 @@ const TemporalSelectionDropdownMenu = ({

TemporalSelectionDropdownMenu.defaultProps = {
allowRecurring: true,
filterType: null
filterType: null,
displayStartDate: '',
displayEndDate: ''
}

TemporalSelectionDropdownMenu.propTypes = {
disabled: PropTypes.bool.isRequired,
displayEndDate: PropTypes.string,
displayStartDate: PropTypes.string,
filterType: PropTypes.string,
onApplyClick: PropTypes.func.isRequired,
onClearClick: PropTypes.func.isRequired,
onChangeQuery: PropTypes.func.isRequired,
onChangeRecurring: PropTypes.func.isRequired,
onClearClick: PropTypes.func.isRequired,
onInvalid: PropTypes.func.isRequired,
onRecurringToggle: PropTypes.func.isRequired,
onSliderChange: PropTypes.func.isRequired,
Expand Down
48 changes: 19 additions & 29 deletions static/src/js/components/TemporalDisplay/__tests__/TemporalSelectionDropdown.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,11 +591,9 @@ describe('TemporalSelectionDropdown component', () => {
const recurringCheckbox = screen.getByRole('checkbox', { checked: true })

// Uncheck it
await act(async () => {
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).not.toBeChecked()
})
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).not.toBeChecked()
})

// Apply non-recurring state
Expand Down Expand Up @@ -642,11 +640,9 @@ describe('TemporalSelectionDropdown component', () => {

// Toggle recurring on
const recurringCheckbox = screen.getByRole('checkbox', { checked: false })
await act(async () => {
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})

// In recurring mode, dates should show without year and use minimum year
Expand Down Expand Up @@ -701,15 +697,13 @@ describe('TemporalSelectionDropdown component', () => {
expect(screen.queryByText('Year Range:')).not.toBeInTheDocument()

const recurringCheckbox = screen.getByRole('checkbox', { name: 'Recurring?' })
await act(async () => {
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})

expect(startDateInput).toHaveValue('01-01 00:00:00')
expect(endDateInput).toHaveValue('02-01 06:00:00')
expect(endDateInput).toHaveValue('')
expect(screen.getByText('Year Range:')).toBeInTheDocument()
expect(screen.getByText('1960 - 2024')).toBeInTheDocument()

Expand Down Expand Up @@ -758,15 +752,13 @@ describe('TemporalSelectionDropdown component', () => {
expect(screen.queryByText('Year Range:')).not.toBeInTheDocument()

const recurringCheckbox = screen.getByRole('checkbox', { checked: false })
await act(async () => {
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})

expect(startDateInput).toHaveValue('01-01 00:00:00')
expect(endDateInput).toHaveValue('02-01 06:00:00')
expect(startDateInput).toHaveValue('')
expect(endDateInput).toHaveValue('')
expect(screen.getByText('Year Range:')).toBeInTheDocument()
expect(screen.getByText('1960 - 2024')).toBeInTheDocument()

Expand Down Expand Up @@ -815,14 +807,12 @@ describe('TemporalSelectionDropdown component', () => {
expect(screen.queryByText('Year Range:')).not.toBeInTheDocument()

const recurringCheckbox = screen.getByRole('checkbox', { checked: false })
await act(async () => {
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})
await user.click(recurringCheckbox)
await waitFor(() => {
expect(recurringCheckbox).toBeChecked()
})

expect(startDateInput).toHaveValue('01-01 00:00:00')
expect(startDateInput).toHaveValue('')
expect(endDateInput).toHaveValue('01-25 00:00:00')
expect(screen.getByText('Year Range:')).toBeInTheDocument()
expect(screen.getByText('1960 - 2020')).toBeInTheDocument()
Expand Down
16 changes: 11 additions & 5 deletions static/src/js/components/TemporalSelection/TemporalSelection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,9 @@ export class TemporalSelection extends Component {
onSliderChange,
size,
temporal,
validate
validate,
displayStartDate,
displayEndDate
} = this.props

let { isRecurring } = temporal
Expand Down Expand Up @@ -174,7 +176,7 @@ export class TemporalSelection extends Component {
type="start"
size={size}
format={format}
value={temporal.startDate}
value={displayStartDate}
minDate={minimumTemporalDateString}
maxDate={moment().utc().toISOString()}
shouldValidate={!isRecurring}
Expand All @@ -195,7 +197,7 @@ export class TemporalSelection extends Component {
type="end"
size={size}
format={format}
value={temporal.endDate}
value={displayEndDate}
minDate={minimumTemporalDateString}
maxDate={moment().utc().toISOString()}
shouldValidate={!isRecurring}
Expand Down Expand Up @@ -285,7 +287,9 @@ TemporalSelection.defaultProps = {
onSliderChange: null,
onValid: null,
size: '',
validate: true
validate: true,
displayStartDate: '',
displayEndDate: ''
}

TemporalSelection.propTypes = {
Expand All @@ -306,7 +310,9 @@ TemporalSelection.propTypes = {
isRecurring: PropTypes.bool,
startDate: PropTypes.string
}).isRequired,
validate: PropTypes.bool
validate: PropTypes.bool,
displayEndDate: PropTypes.string,
displayStartDate: PropTypes.string
}

export default TemporalSelection
24 changes: 8 additions & 16 deletions static/src/js/components/TemporalSelection/__tests__/TemporalSelection.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,8 @@ describe('TemporalSelection component', () => {
test('when passed a start date renders DatePickerContainer component correctly', () => {
const { enzymeWrapper } = setup()
enzymeWrapper.setProps({
temporal: {
startDate: '2019-03-30T00:00:00.000Z',
endDate: ''
}
displayStartDate: '2019-03-30T00:00:00.000Z',
displayEndDate: ''
})

expect(enzymeWrapper.find(DatepickerContainer).at(0).prop('type')).toBe('start')
Expand All @@ -54,10 +52,8 @@ describe('TemporalSelection component', () => {
test('when passed a end date renders DatePickerContainer component correctly', () => {
const { enzymeWrapper } = setup()
enzymeWrapper.setProps({
temporal: {
startDate: '',
endDate: '2019-03-30T00:00:00.000Z'
}
displayStartDate: '',
displayEndDate: '2019-03-30T00:00:00.000Z'
})

expect(enzymeWrapper.find(DatepickerContainer).at(0).prop('type')).toBe('start')
Expand All @@ -69,10 +65,8 @@ describe('TemporalSelection component', () => {
test('when passed a both start and end dates renders DatePickerContainer components correctly', () => {
const { enzymeWrapper } = setup()
enzymeWrapper.setProps({
temporal: {
endDate: '2019-03-30T00:00:00.000Z',
startDate: '2019-03-29T00:00:00.000Z'
}
displayEndDate: '2019-03-30T00:00:00.000Z',
displayStartDate: '2019-03-29T00:00:00.000Z'
})

expect(enzymeWrapper.find(DatepickerContainer).at(0).prop('type')).toBe('start')
Expand All @@ -84,10 +78,8 @@ describe('TemporalSelection component', () => {
test('when passed a start date after the end date renders DatePickerContainer components correctly', () => {
const { enzymeWrapper } = setup()
enzymeWrapper.setProps({
temporal: {
endDate: '2019-03-29T00:00:00.000Z',
startDate: '2019-03-30T00:00:00.000Z'
}
displayEndDate: '2019-03-29T00:00:00.000Z',
displayStartDate: '2019-03-30T00:00:00.000Z'
})

expect(enzymeWrapper.find(DatepickerContainer).at(0).prop('type')).toBe('start')
Expand Down

0 comments on commit 105ef55

Please sign in to comment.