diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 459c164c4..703f59297 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,3 +1,12 @@ +## June 26, 2024 + +- **Feature** Redesigned Engagement Cards & added Suggested Engagements to the engagement page [🎟️ DESENG-634](https://citz-gdx.atlassian.net/browse/DESENG-634) + - Redesigned the engagement cards to match the new design system + - Added a new section to the engagement page to display suggested engagements + - Engagement cards now take you to the "new look" route + - Tweaks to the engagement list page layout + - Minor tweaks to the engagement view page layout + ## June 24, 2024 - **Feature** Add a new survey block to the engagement page [🎟️ DESENG-633](https://citz-gdx.atlassian.net/browse/DESENG-633) diff --git a/met-web/src/components/common/Indicators/StatusChip.tsx b/met-web/src/components/common/Indicators/StatusChip.tsx index 5a0a697f8..3ae08476c 100644 --- a/met-web/src/components/common/Indicators/StatusChip.tsx +++ b/met-web/src/components/common/Indicators/StatusChip.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import { Chip as MuiChip, Skeleton } from '@mui/material'; +import { Chip as MuiChip, Skeleton, useTheme } from '@mui/material'; import { colors } from '..'; import { SubmissionStatus } from 'constants/engagementStatus'; export interface ChipProps { label?: string; - invert?: boolean; statusId: SubmissionStatus; } @@ -24,8 +23,10 @@ export const getStatusFromStatusId = (statusId: SubmissionStatus): StatusText => } }; -export const EngagementStatusChip: React.FC = ({ label: customLabel, statusId: status, invert }) => { +export const EngagementStatusChip: React.FC = ({ label: customLabel, statusId: status }) => { const statusText = getStatusFromStatusId(status); + const theme = useTheme(); + const invert = theme.palette.mode === 'dark'; return ( = ({ label: customLabel, alignItems: 'center', gap: '10px', flexShrink: 0, - borderWidth: '1px', + border: '2px solid', borderColor: 'transparent', borderRadius: '24px', + boxSizing: 'border-box', '&>.MuiChip-label': { padding: '4px 16px', fontSize: '14px', fontWeight: 700, lineHeight: '16px', + position: 'relative', + bottom: '1px', }, '&.status-chip-open': { backgroundColor: colors.surface.blue[80], color: colors.type.inverted.primary, '&.status-chip-invert': { backgroundColor: 'transparent', - borderWidth: '2px', borderColor: colors.surface.white, }, }, diff --git a/met-web/src/components/common/Navigation/Link.tsx b/met-web/src/components/common/Navigation/Link.tsx index 64b4bfad9..0309781b2 100644 --- a/met-web/src/components/common/Navigation/Link.tsx +++ b/met-web/src/components/common/Navigation/Link.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material'; -import { NavLink } from 'react-router-dom'; +import { LinkProps, NavLink } from 'react-router-dom'; import { colors } from '..'; interface FocusableNavLinkProps extends MuiLinkProps { @@ -59,3 +59,8 @@ export const Link: React.FC = ({ ); }; + +/* Adapter for elements expecting Mui's Link component, allowing them to use react-router's Link component */ +export const RouterLinkRenderer = ({ href, ...props }: Omit & { href: string }) => ( + +); diff --git a/met-web/src/components/common/Typography/Headers.tsx b/met-web/src/components/common/Typography/Headers.tsx index 0bd963171..ad0be5d21 100644 --- a/met-web/src/components/common/Typography/Headers.tsx +++ b/met-web/src/components/common/Typography/Headers.tsx @@ -45,15 +45,18 @@ export const Header2 = ({ children, decorated = false, weight, + component, ...props }: { children: React.ReactNode; decorated?: boolean; weight?: 'bold' | 'regular' | 'thin'; + component?: React.ElementType; } & TypographyProps) => { return ( { - - }> - - - {(resolvedWidgets: Widget[]) => { - const widget = resolvedWidgets?.[0]; - return widget && ; - }} - - - - + }> + + + {(resolvedWidgets: Widget[]) => { + const widget = resolvedWidgets?.[0]; + if (widget) + return ( + + ; + + ); + }} + + + diff --git a/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx b/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx index 17139d44c..e7fac7f56 100644 --- a/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx +++ b/met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx @@ -16,6 +16,7 @@ import { faChevronRight } from '@fortawesome/pro-regular-svg-icons'; import { Switch, Case } from 'react-if'; import { useAppSelector, useAppTranslation } from 'hooks'; import EmailModal from 'components/engagement/view/EmailModal'; +import { RouterLinkRenderer } from 'components/common/Navigation/Link'; const gridContainerStyles = { width: '100%', @@ -104,7 +105,7 @@ export const EngagementSurveyBlock = () => { item sx={{ width: { xs: '100%', md: '47.5%' }, - display: 'flex', + display: statusBlock?.block_text ? 'flex' : 'none', flexDirection: 'column', minHeight: '120px', marginBottom: '48px', @@ -116,12 +117,14 @@ export const EngagementSurveyBlock = () => { toolbarHidden editorState={getEditorStateFromRaw(statusBlock?.block_text ?? '')} /> - handleCloseEmailModal()} - /> + + handleCloseEmailModal()} + /> + - } + iconPosition="right" + href={ + isLoggedIn + ? `/engagements/${engagement.id}/dashboard/public` + : `/engagements/${engagement.id}/dashboard/public/${language}` + } + LinkComponent={RouterLinkRenderer} > - - + {translate('buttonText.viewFeedback')} + @@ -164,7 +162,7 @@ export const EngagementSurveyBlock = () => { item sx={{ width: { xs: '100%', md: '47.5%' }, - display: 'flex', + display: widget ? 'flex' : 'none', minHeight: '360px', marginBottom: '48px', }} diff --git a/met-web/src/components/engagement/new/view/SuggestedEngagements.tsx b/met-web/src/components/engagement/new/view/SuggestedEngagements.tsx index 9ec720cd4..d42f7ddfd 100644 --- a/met-web/src/components/engagement/new/view/SuggestedEngagements.tsx +++ b/met-web/src/components/engagement/new/view/SuggestedEngagements.tsx @@ -1,143 +1,89 @@ -import React, { useEffect } from 'react'; -import { Box, Grid, MobileStepper, ThemeProvider } from '@mui/material'; +import React, { Suspense } from 'react'; +import { Box, Grid } from '@mui/material'; import { TileSkeleton } from 'components/landing/TileSkeleton'; import { getEngagements } from 'services/engagementService'; import { Engagement } from 'models/engagement'; import EngagementTile from 'components/landing/EngagementTile'; -import { RepeatedGrid } from 'components/common'; import { Header2 } from 'components/common/Typography'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowLeft, faChevronLeft, faChevronRight } from '@fortawesome/pro-regular-svg-icons'; -import { Button } from 'components/common/Input'; +import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons'; import { Link } from 'components/common/Navigation'; -import { useLoaderData } from 'react-router-dom'; -import { engagementMetadata } from '../../../../../tests/unit/components/factory'; +import { Await, useLoaderData } from 'react-router-dom'; +import { RepeatedGrid } from 'components/common'; export const SuggestedEngagements = () => { - const [suggestedEngagements, setSuggestedEngagements] = React.useState([] as Engagement[]); - const [totalEngagements, setTotalEngagements] = React.useState(3); - const [page, setPage] = React.useState(0); - const [pageLength, setPageLength] = React.useState(3); - const [isLoading, setIsLoading] = React.useState(true); const { engagement } = useLoaderData() as { engagement: Promise }; - const allEngagementsPromise = getEngagements({ size: 13, page: 1, include_banner_url: true }); - - const handleResize = () => { - if (window.innerWidth < 930) { - setPageLength(1); - } else if (window.innerWidth < 1500) { - setPageLength(2); - if (page > 5) { - setPage(5); - } - } else if (window.innerWidth < 1800) { - setPageLength(3); - if (page > 3) { - setPage(3); - } - } else { - setPageLength(4); - if (page > 4) { - setPage(4); - } - } - }; - useEffect(() => { - handleResize(); - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, [page]); - - useEffect(() => { - const fetchData = async () => { - try { - // preload all 12 suggested engagements to keep things snappy - // a 13th engagement is loaded in case one of the 12 is the current engagement - const currentEngagement = await engagement; - const allEngagements = await allEngagementsPromise; - const filteredEngagements = allEngagements.items - .filter((engagement) => engagement.id !== currentEngagement.id) - .slice(0, 12) - .map((value) => ({ value, sort: Math.random() })) - .sort((a, b) => a.sort - b.sort) - .map(({ value }) => value); - setSuggestedEngagements(filteredEngagements); - setTotalEngagements(allEngagements.total); - setIsLoading(false); - } catch (error) { - console.error('Error fetching suggested engagements:', error); - } - }; - setPage(0); - fetchData(); - }, [engagement]); - - const pages = Math.ceil((totalEngagements - 1) / pageLength); - const engagementSlice = suggestedEngagements.slice(page * pageLength, (page + 1) * pageLength); + const suggestedEngagementsPromise = getEngagements({ size: 5, page: 1, include_banner_url: true }).then( + async (response) => { + const currentEngagement = await engagement; + return response.items + .filter((engagement) => engagement.id !== currentEngagement.id) + .slice(0, 4) + .map((value) => ({ value, sort: Math.random() })) + .sort((a, b) => a.sort - b.sort) + .map(({ value }) => value); + }, + ); return ( -
- - +
+ + You may also be interested in - - - {isLoading - ? Array.from({ length: 3 }).map((_, index) => ( - - - - )) - : engagementSlice.map((engagement, index) => ( - - - - ))} - - - theme.palette.primary.main as string, - }, - }, - }} - /> - - + + {(engagements: Engagement[]) => + engagements.map((engagement, index) => { + return ( + + + + ); + }) + } + + + + + theme.palette.text.primary, textDecoration: 'none' }}> All engagements diff --git a/met-web/src/components/engagement/new/view/index.tsx b/met-web/src/components/engagement/new/view/index.tsx index f1246d9b7..a591f4777 100644 --- a/met-web/src/components/engagement/new/view/index.tsx +++ b/met-web/src/components/engagement/new/view/index.tsx @@ -3,15 +3,19 @@ import { EngagementHero } from './EngagementHero'; import { EngagementDescription } from './EngagementDescription'; import { EngagementContentTabs } from './EngagementContentTabs'; import { EngagementSurveyBlock } from './EngagementSurveyBlock'; +import { SuggestedEngagements } from './SuggestedEngagements'; export const ViewEngagement = () => { return ( -
- - - - -
+ <> +
+ + + + + +
+ ); }; diff --git a/met-web/src/components/landing/EngagementTile.tsx b/met-web/src/components/landing/EngagementTile.tsx index 5a0d5f638..ff7a07648 100644 --- a/met-web/src/components/landing/EngagementTile.tsx +++ b/met-web/src/components/landing/EngagementTile.tsx @@ -1,21 +1,19 @@ import React, { useEffect, useState } from 'react'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; +import { Box, Grid, Card, CardContent, CardMedia, CardActionArea, ThemeProvider } from '@mui/material'; import { Engagement } from 'models/engagement'; -import { Box, Stack } from '@mui/material'; -import { MetBodyOld, MetHeader4, MetLabel, MetParagraphOld } from 'components/common'; import { getEngagement } from 'services/engagementService'; -import { If, Then, When } from 'react-if'; import dayjs from 'dayjs'; -import { EngagementStatusChip } from 'components/engagement/status'; -import { SubmissionStatus } from 'constants/engagementStatus'; +import { EngagementStatusChip } from 'components/common/Indicators/StatusChip'; import { TileSkeleton } from './TileSkeleton'; import { getSlugByEngagementId } from 'services/engagementSlugService'; import { getBaseUrl } from 'helper'; import { useAppTranslation } from 'hooks'; -import { Button } from 'components/common/Input/Button'; +import { BodyText, Header2 } from 'components/common/Typography'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowRight } from '@fortawesome/pro-regular-svg-icons'; +import { colors, elevations, globalFocusShadow } from 'components/common'; +import { BaseTheme, DarkTheme } from 'styles/Theme'; +import { RouterLinkRenderer } from 'components/common/Navigation/Link'; interface EngagementTileProps { passedEngagement?: Engagement; @@ -26,9 +24,15 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps) const [loadedEngagement, setLoadedEngagement] = useState(passedEngagement || null); const [isLoadingEngagement, setIsLoadingEngagement] = useState(true); const [slug, setSlug] = useState(''); - const dateFormat = 'MMM DD, YYYY'; + const [isHovered, setIsHovered] = useState(false); + const [isFocused, setIsFocused] = useState(false); + const [isActive, setIsActive] = useState(false); + const startDate = dayjs(loadedEngagement?.start_date); + const endDate = dayjs(loadedEngagement?.end_date); + const dateFormat = 'MMMM DD, YYYY'; + const semanticDateFormat = 'YYYY-MM-DD'; const languagePath = `/${sessionStorage.getItem('languageId')}`; - const engagementPath = `/${slug}`; + const engagementPath = `/new-look/${slug}`; const engagementUrl = `${getBaseUrl()}${engagementPath}${languagePath}`; const loadEngagement = async () => { @@ -76,78 +80,125 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps) } if (!loadedEngagement) { - return {translate('landingPage.tile.error')}; + return {translate('landingPage.tile.error')}; } - const { name, end_date, start_date, description, banner_url, submission_status } = loadedEngagement; - const EngagementDate = `${dayjs(start_date).format(dateFormat)} to ${dayjs(end_date).format(dateFormat)}`; - - const handleClick = (event: React.MouseEvent) => { - event.stopPropagation(); - window.location.href = engagementUrl; - }; + const { name, banner_url } = loadedEngagement; return ( - + { - window.location.href = engagementUrl; - }} - > - - - - - - {name} - - {description} - - - - {EngagementDate} - - - {translate('landingPage.tile.status')} - - - - - - - - - - + setIsHovered(true)} + onMouseLeave={() => { + setIsHovered(false); + setIsActive(false); + }} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + onMouseDown={() => setIsActive(true)} + onMouseUp={() => setIsActive(false)} + LinkComponent={RouterLinkRenderer} + href={engagementUrl} + sx={{ + '&:focus-visible': { + // focus visible styling is applied by the parent Card component + border: 'none', + outline: 'none', + boxShadow: 'none', + padding: 'unset', + margin: 'unset', + }, + }} > - - - - - - + {Boolean(banner_url) && } + + + + {name} + + + + + + + + + + {' '} + to + + + + + + + + + + ); }; diff --git a/met-web/src/components/landing/FilterDrawer.tsx b/met-web/src/components/landing/FilterDrawer.tsx index 864a6440e..de463d9fe 100644 --- a/met-web/src/components/landing/FilterDrawer.tsx +++ b/met-web/src/components/landing/FilterDrawer.tsx @@ -1,11 +1,12 @@ import React, { useContext, useMemo } from 'react'; import { LandingContext } from './LandingContext'; -import { SwipeableDrawer, IconButton, Typography, Stack, Button, Grid, useTheme, useMediaQuery } from '@mui/material'; +import { SwipeableDrawer, IconButton, Typography, Stack, Grid, useTheme, useMediaQuery } from '@mui/material'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faXmark } from '@fortawesome/pro-regular-svg-icons/faXmark'; import { MetadataFilterChip } from './MetadataFilterChip'; import { EngagementDisplayStatus } from 'constants/engagementStatus'; import { useAppTranslation } from 'hooks'; +import { Button } from 'components/common/Input'; const FilterDrawer = () => { const { searchFilters, setSearchFilters, setPage, metadataFilters, clearFilters, drawerOpened, setDrawerOpened } = @@ -59,7 +60,7 @@ const FilterDrawer = () => { PaperProps={{ sx: { width: isSmallScreen ? '100%' : '50%', - background: theme.palette.primary.main, + background: theme.palette.background.default, color: 'white', padding: '3em', }, @@ -139,10 +140,9 @@ const FilterDrawer = () => { diff --git a/met-web/src/components/landing/LandingComponent.tsx b/met-web/src/components/landing/LandingComponent.tsx index 8d600ebbb..7d4b789f3 100644 --- a/met-web/src/components/landing/LandingComponent.tsx +++ b/met-web/src/components/landing/LandingComponent.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import { Grid } from '@mui/material'; +import { Grid, ThemeProvider } from '@mui/material'; import { Banner } from 'components/banner/Banner'; -import { MetHeader1Old, MetParagraphOld } from 'components/common'; import TileBlock from './TileBlock'; import { Container } from '@mui/system'; import LandingPageBanner from 'assets/images/LandingPageBanner.png'; @@ -9,13 +8,17 @@ import FilterBlock from './FilterBlock'; import FilterDrawer from './FilterDrawer'; import { TenantState } from 'reduxSlices/tenantSlice'; import { useAppSelector } from '../../hooks'; +import { BodyText, Header1 } from 'components/common/Typography'; +import { DarkTheme } from 'styles/Theme'; const LandingComponent = () => { const tenant: TenantState = useAppSelector((state) => state.tenant); return ( - + + + { rowSpacing={2} > - {tenant.title} + {tenant.title} - {tenant.description} + {tenant.description} - + diff --git a/met-web/src/components/landing/MetadataFilterChip.tsx b/met-web/src/components/landing/MetadataFilterChip.tsx index 72b3d8cd3..8a27d3c6a 100644 --- a/met-web/src/components/landing/MetadataFilterChip.tsx +++ b/met-web/src/components/landing/MetadataFilterChip.tsx @@ -24,7 +24,11 @@ export const MetadataFilterChip = ({ .replace('{0}', name) .replace('{1}', selectionHint)} color="default" - avatar={selected ? : undefined} + avatar={ + selected ? ( + + ) : undefined + } variant={selected ? 'filled' : 'outlined'} onClick={onClick} sx={{ @@ -36,7 +40,7 @@ export const MetadataFilterChip = ({ borderColor: selected ? '#053662' : '#D8EAFD', borderRadius: '2em', backgroundColor: selected ? '#D8EAFD' : 'transparent', - color: selected ? theme.palette.primary.main : 'white', + color: selected ? theme.palette.primary.light : 'white', fontSize: '16px', '&.MuiChip-clickable:hover': { backgroundColor: selected ? '#F1F8FE' : '#1E5189', diff --git a/met-web/src/components/landing/TileBlock.tsx b/met-web/src/components/landing/TileBlock.tsx index d7a75b7a9..f3ff9f6d9 100644 --- a/met-web/src/components/landing/TileBlock.tsx +++ b/met-web/src/components/landing/TileBlock.tsx @@ -16,14 +16,26 @@ const TileBlock = () => { - + @@ -34,9 +46,9 @@ const TileBlock = () => { { - {engagements.map((engagement) => { + {engagements.map((engagement, index) => { return ( - + diff --git a/met-web/src/components/landing/TileSkeleton.tsx b/met-web/src/components/landing/TileSkeleton.tsx index b17b02c86..a2fd8e8fa 100644 --- a/met-web/src/components/landing/TileSkeleton.tsx +++ b/met-web/src/components/landing/TileSkeleton.tsx @@ -1,6 +1,48 @@ import React from 'react'; -import { Skeleton } from '@mui/material'; +import { Card, CardActionArea, CardContent, Grid, Skeleton } from '@mui/material'; +import { Header2, BodyText } from 'components/common/Typography'; +import { StatusChipSkeleton } from 'components/common/Indicators/StatusChip'; +import { colors } from 'styles/Theme'; export const TileSkeleton = () => { - return ; + return ( + + + + + + + + + + + + + + + + + Feb 02, 2022 to + + + + + Feb 02, 2022 + + + + + + + + ); }; diff --git a/met-web/src/routes/UnauthenticatedRoutes.tsx b/met-web/src/routes/UnauthenticatedRoutes.tsx index 7ac1f2697..b0945847a 100644 --- a/met-web/src/routes/UnauthenticatedRoutes.tsx +++ b/met-web/src/routes/UnauthenticatedRoutes.tsx @@ -26,7 +26,7 @@ const RedirectLoginWrapper = withLanguageParam(RedirectLogin); const UnauthenticatedRoutes = () => { return ( <> - } /> + } /> } /> } /> diff --git a/met-web/src/styles/Theme.ts b/met-web/src/styles/Theme.ts index 79b593af2..2b566eb15 100644 --- a/met-web/src/styles/Theme.ts +++ b/met-web/src/styles/Theme.ts @@ -289,8 +289,9 @@ export const DarkPalette = { mode: 'dark' as PaletteMode, primary: { main: colors.surface.white, - light: colors.surface.blue[10], - dark: colors.surface.blue[20], + light: colors.surface.blue[90], + dark: colors.surface.blue[100], + contrastText: colors.type.inverted.primary, }, secondary: { main: colors.surface.gold.bc, @@ -299,7 +300,7 @@ export const DarkPalette = { }, background: { default: colors.surface.blue[90], - paper: colors.surface.gray[110], + paper: colors.surface.blue[90], }, hover: { light: colors.surface.blue[10], @@ -321,7 +322,7 @@ export const DarkTheme = createTheme({ MuiPaper: { styleOverrides: { root: { - backgroundColor: colors.surface.gray[110], + backgroundColor: DarkPalette.background.paper, }, }, }, diff --git a/met-web/tests/unit/components/landingPage/LandingPage.test.tsx b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx index dfa0f6c6c..ed4761a4a 100644 --- a/met-web/tests/unit/components/landingPage/LandingPage.test.tsx +++ b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx @@ -6,6 +6,7 @@ import { setupEnv } from '../setEnvVars'; import { LandingContext } from 'components/landing/LandingContext'; import * as reactRedux from 'react-redux'; import { openEngagement, closedEngagement } from '../factory'; +import { RouterProvider, createMemoryRouter } from 'react-router-dom'; const MOCK_TENANT = { title: 'Mock Tenant', @@ -74,27 +75,36 @@ describe('Landing page tests', () => { test('LandingComponent is rendered correctly with engagements listed', async () => { render( - + + + ), }, - metadataFilters: [], - clearFilters: jest.fn(), - drawerOpened: false, - setDrawerOpened: jest.fn(), - setSearchFilters: jest.fn(), - setPage: jest.fn(), - page: 1, - engagements: [openEngagement, closedEngagement], - loadingEngagements: false, - totalEngagements: 0, - }} - > - - , + ])} + />, ); await waitFor(() => { @@ -120,27 +130,36 @@ describe('Landing page tests', () => { const setSearchFiltersMock = jest.fn(); render( - + + + ), }, - metadataFilters: [], - clearFilters: jest.fn(), - drawerOpened: false, - setDrawerOpened: jest.fn(), - setSearchFilters: setSearchFiltersMock, - setPage: jest.fn(), - page: 1, - engagements: [], - loadingEngagements: false, - totalEngagements: 0, - }} - > - - , + ])} + />, ); const searchInput = screen.getByPlaceholderText('landing.filters.searchPlaceholder'); @@ -155,27 +174,36 @@ describe('Landing page tests', () => { const setSearchFiltersMock = jest.fn(); render( - + + + ), }, - metadataFilters: [], - clearFilters: jest.fn(), - drawerOpened: false, - setDrawerOpened: jest.fn(), - setSearchFilters: setSearchFiltersMock, - setPage: jest.fn(), - page: 1, - engagements: [], - loadingEngagements: false, - totalEngagements: 0, - }} - > - - , + ])} + />, ); // Find all elements with role "button" @@ -202,27 +230,36 @@ describe('Landing page tests', () => { const setDrawerOpenedMock = jest.fn(); render( - + + + ), }, - metadataFilters: [], - clearFilters: jest.fn(), - drawerOpened: false, - setDrawerOpened: setDrawerOpenedMock, - setSearchFilters: jest.fn(), - setPage: jest.fn(), - page: 1, - engagements: [], - loadingEngagements: false, - totalEngagements: 0, - }} - > - - , + ])} + />, ); const filterButton = screen.getByText('landing.filters.drawer.openButton'); @@ -246,27 +283,36 @@ describe('Landing page tests', () => { const setDrawerOpenedMock = jest.fn(); render( - + + + ), }, - metadataFilters: [], - clearFilters: jest.fn(), - drawerOpened: false, - setDrawerOpened: setDrawerOpenedMock, - setSearchFilters: jest.fn(), - setPage: jest.fn(), - page: 1, - engagements: [], - loadingEngagements: false, - totalEngagements: 0, - }} - > - - , + ])} + />, ); expect(screen.getByTestId('NoResultsHeader')).toBeInTheDocument();