-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #169 from InseeFr/feat/bump-date-fns
feat: add unit test before migrating date-fns
- Loading branch information
Showing
5 changed files
with
192 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import BuildIcon from '@mui/icons-material/Build'; | ||
| import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import SupportAgentIcon from '@mui/icons-material/SupportAgent'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import Badge from '@mui/material/Badge'; | ||
| import Box from '@mui/material/Box'; | ||
| import Button from '@mui/material/Button'; | ||
| import Link from '@mui/material/Link'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import { useTheme } from '@mui/material/styles'; | ||
| import { formatDistance } from 'date-fns'; | ||
| import { useContext } from 'react'; | ||
| import { dateFnsLocal } from '../../utils'; | ||
| import { NOTIFICATION_TYPE_SYNC } from '../../utils/constants'; | ||
| import { deleteNotification, markNotificationAsRead } from '../../utils/hooks/useNotifications'; | ||
| import syncReportIdbService from '../../utils/indexeddb/services/syncReport-idb-service'; | ||
| import { Row } from '../Row'; | ||
| import { SyncContext } from '../Sync/SyncContextProvider'; | ||
| import { Typography } from '../Typography'; | ||
| import D from 'i18n'; | ||
|
|
||
| export function Notification({ notification, onExit }) { | ||
| const theme = useTheme(); | ||
| const date = `${formatDistance(notification.date || 0, new Date(), { | ||
| addSuffix: true, | ||
| locale: dateFnsLocal, | ||
| })}`; | ||
| const { setSyncResult } = useContext(SyncContext); | ||
| const handleOpen = async e => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (notification.type === NOTIFICATION_TYPE_SYNC) { | ||
| const report = await syncReportIdbService.getById(notification.id); | ||
| setSyncResult({ | ||
| date: date, | ||
| state: notification.state, | ||
| messages: notification.message, | ||
| details: report, | ||
| }); | ||
| onExit(); | ||
| } | ||
| }; | ||
|
|
||
| const handleExpand = (_, expanded) => { | ||
| if (!notification.read && expanded) { | ||
| markNotificationAsRead(notification); | ||
| } | ||
| }; | ||
|
|
||
| const handleDelete = () => deleteNotification(notification); | ||
|
|
||
| const isRead = notification.read; | ||
| const badge = notification.state === 'error' ? '!' : undefined; | ||
| const background = isRead ? undefined : theme.palette.surfaceTertiary.main; | ||
| const isSyncNotification = notification.type === NOTIFICATION_TYPE_SYNC; | ||
|
|
||
| return ( | ||
| <Accordion | ||
| elevation={0} | ||
| disableGutters | ||
| variant="dense" | ||
| bgcolor="accent" | ||
| onChange={handleExpand} | ||
| > | ||
| <AccordionSummary | ||
| sx={{ padding: 0, background: background, borderRadius: 2 }} | ||
| expandIcon={<ExpandMoreIcon fontSize="large" color="textPrimary" />} | ||
| aria-controls="panel1a-content" | ||
| id="panel1a-header" | ||
| > | ||
| <Row justifyContent="space-between"> | ||
| <Row gap={1}> | ||
| <Box p={2}> | ||
| <Badge badgeContent={badge} color="accent"> | ||
| {isSyncNotification ? <BuildIcon /> : <SupportAgentIcon />} | ||
| </Badge> | ||
| </Box> | ||
| <Stack gap={0.5} paddingBlock={1}> | ||
| <Link href="#" underline={isSyncNotification ? 'hover' : 'none'} onClick={handleOpen}> | ||
| <Typography color="black" variant="s" fontWeight={700}> | ||
| {notification.title} | ||
| </Typography> | ||
| </Link> | ||
| <Typography color="textTertiary" variant="s"> | ||
| {date} | ||
| </Typography> | ||
| </Stack> | ||
| </Row> | ||
| </Row> | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| <Stack gap={1}> | ||
| {notification.messages.map(message => ( | ||
| <Typography as="p" variant="s" key={message}> | ||
| {message} | ||
| </Typography> | ||
| ))} | ||
| <Button sx={{ alignSelf: 'flex-end' }} color="textPrimary" onClick={handleDelete}> | ||
| <DeleteOutlineIcon /> | ||
| {D.delete} | ||
| </Button> | ||
| </Stack> | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { fireEvent, render, screen } from '@testing-library/react'; | ||
| import { SyncContext } from 'ui/Sync/SyncContextProvider'; | ||
| import { Notification } from './Notification'; | ||
| import D from 'i18n'; | ||
|
|
||
| vi.mock('@mui/material/Button', () => ({ | ||
| default: props => <button {...props}>{props.children}</button>, | ||
| })); | ||
|
|
||
| const renderWithContext = notification => { | ||
| return render( | ||
| <SyncContext.Provider value={{}}> | ||
| <Notification notification={notification} /> | ||
| </SyncContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| describe('Notification Component', () => { | ||
| it('should render the notification with the correct date format', () => { | ||
| vi.setSystemTime(new Date(2023, 0, 2)); | ||
|
|
||
| const mockDate = new Date(2023, 0, 1); | ||
| const notification = { | ||
| title: 'Notification', | ||
| date: mockDate, | ||
| messages: ['New message'], | ||
| read: true, | ||
| }; | ||
|
|
||
| renderWithContext(notification); | ||
|
|
||
| screen.getByText('New message'); | ||
| screen.getByText('1 day ago'); | ||
|
|
||
| const button = screen.getByRole('button', { name: 'Notification 1 day ago' }); | ||
| fireEvent.click(button); | ||
|
|
||
| screen.getByRole('button', { name: D.delete }); | ||
|
|
||
| vi.useRealTimers(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters