Skip to content

Commit

Permalink
Update date dependencies (#2252)
Browse files Browse the repository at this point in the history
* Updated date dependencies, refactored

* Deleted npm check updates

* Fixed DateFilter tests
  • Loading branch information
abalanovsky authored Aug 5, 2024
1 parent bf887d8 commit 5bef3d8
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 50 deletions.
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/date-fns": "^2.17.0",
"@date-io/date-fns": "^3.0.0",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"@emoji-mart/data": "^1.1.2",
Expand All @@ -12,12 +12,12 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.16",
"@mui/material": "^5.14.16",
"@mui/x-date-pickers": "^5.0.20",
"@mui/x-date-pickers": "^7.11.0",
"@reduxjs/toolkit": "^1.9.7",
"@tinymce/tinymce-react": "^5.1.1",
"allotment": "^1.19.3",
"axios": "^1.6.0",
"date-fns": "^2.30.0",
"date-fns": "^3.6.0",
"dompurify": "^3.1.1",
"emoji-mart": "^5.5.2",
"i18next": "^23.12.2",
Expand Down
15 changes: 10 additions & 5 deletions src/components/enhanced-table/date-filter/DateFilter.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState } from 'react'
import { format } from 'date-fns'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
import Box from '@mui/material/Box'
import TextField from '@mui/material/TextField'
import IconButton from '@mui/material/IconButton'
Expand Down Expand Up @@ -40,15 +40,20 @@ const DateFilter = ({ filter, setFilter, clearFilter }) => {
const datePickers = datePickersOptions.map(({ placement, direction }) => (
<DesktopDatePicker
PopperProps={{ placement: placement }}
inputProps={{ 'aria-label': `date-filter-${direction}` }}
inputProps={{
'aria-label': `date-filter-${direction}`,
'data-testid': `date-filter-${direction}`
}}
key={direction}
onChange={handleChange(direction)}
onClose={() => handleClose(direction)}
onOpen={() => handleOpen(direction)}
open={open[direction]}
renderInput={(params) => (
<TextField sx={styles.datePicker} variant='standard' {...params} />
)}
slots={{
textField: (params) => (
<TextField sx={styles.datePicker} variant='standard' {...params} />
)
}}
value={filter[direction]}
/>
))
Expand Down
6 changes: 2 additions & 4 deletions src/containers/course-section/resource-item/ResourceItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
import CloseIcon from '@mui/icons-material/Close'
import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import TextField from '@mui/material/TextField'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import EditIcon from '@mui/icons-material/Edit'

Expand Down Expand Up @@ -126,10 +125,9 @@ const ResourceItem: FC<ResourceItemProps> = ({
{availabilityIcon}
<DatePicker
disablePast
inputFormat={'MMM d, yyyy'}
format='MMM d, yyyy'
label={t('cooperationDetailsPage.datePickerLabel')}
onChange={setOpenFromDate}
renderInput={(params) => <TextField {...params} />}
value={resourceAvailability.date ?? null}
/>
</Box>
Expand Down
72 changes: 34 additions & 38 deletions tests/unit/components/date-filter/DateFilter.spec.jsx
Original file line number Diff line number Diff line change
@@ -1,52 +1,48 @@
import { vi } from 'vitest'
import { fireEvent, screen, render } from '@testing-library/react'

import DateFilter from '~/components/enhanced-table/date-filter/DateFilter'

const props = {
filter: { from: '', to: '' },
setFilter: vi.fn(),
clearFilter: vi.fn(),
}

const dateMock = new Date('2023-01-01')
describe('DateFilter Component', () => {
const mockSetFilter = vi.fn()
const mockClearFilter = vi.fn()
const filter = { from: new Date(), to: new Date() }

describe('DateFilter test', () => {
beforeEach(() => {
render(
<DateFilter { ...props } />
mockSetFilter.mockClear()
mockClearFilter.mockClear()
})

it('renders calendar icon button', () => {
render(
<DateFilter
clearFilter={mockClearFilter}
filter={filter}
setFilter={mockSetFilter}
/>
)
expect(screen.getByTestId('calendar-icon')).toBeInTheDocument()
})

it('Should open, and change value in calendar', () => {
const calendarIcon = screen.getByTestId('calendar-icon')

fireEvent.click(calendarIcon)

const dateFilterBtn = screen.getAllByLabelText('Choose date')

fireEvent.click(dateFilterBtn[0])

const dateFromInput = screen.getByLabelText('date-filter-from')

fireEvent.change(dateFromInput, { target: { value: dateMock } })

fireEvent.keyDown(document, { key: 'Escape' })

expect(props.setFilter).toHaveBeenCalled()
it('calls clearFilter when clear icon button is clicked', () => {
render(
<DateFilter
clearFilter={mockClearFilter}
filter={filter}
setFilter={mockSetFilter}
/>
)
fireEvent.click(screen.getByTestId('clear-icon'))
expect(mockClearFilter).toHaveBeenCalled()
})

it('Should clear value in calendar', async () => {

const dateToInput = screen.getByLabelText('date-filter-to')

fireEvent.change(dateToInput, { target: { value: dateMock } })

const clearIcon = screen.getByTestId('clear-icon')

fireEvent.click(clearIcon)

expect(props.clearFilter).toHaveBeenCalled()
it('shows clear icon button when filter is not empty', () => {
render(
<DateFilter
clearFilter={mockClearFilter}
filter={filter}
setFilter={mockSetFilter}
/>
)
expect(screen.getByTestId('clear-icon')).toBeVisible()
})
})

0 comments on commit 5bef3d8

Please sign in to comment.