Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(PC-33187) feat(venueMap): apply filter when pressing checkbox in venue type modal filter #7291

Merged
merged 2 commits into from
Nov 28, 2024
Merged

(PC-33187) feat(venueMap): apply filter when pressing checkbox in venue type modal filter #7291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2aaf8a7
(PC-33187) feat(venueMap): apply filter when pressing checkbox in ven…
clesausse-pass Nov 27, 2024
be64301
(PC-33187) feat(venueMap): filtered only the selected venue type when…
clesausse-pass Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 221 additions & 0 deletions src/features/venueMap/components/VenueMapTypeFilter/VenueMapTypeFilter.native.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@ import { StackScreenProps } from '@react-navigation/stack'
import React from 'react'

import { navigate } from '__mocks__/@react-navigation/native'
import { VenueTypeCodeKey } from 'api/gen'
import { VenueMapFiltersModalStackParamList } from 'features/navigation/VenueMapFiltersStackNavigator/types'
import { VenueMapTypeFilter } from 'features/venueMap/components/VenueMapTypeFilter/VenueMapTypeFilter'
import { FILTERS_VENUE_TYPE_MAPPING } from 'features/venueMap/constant'
import { useVenuesFilter, useVenuesFilterActions } from 'features/venueMap/store/venuesFilterStore'
import { render, screen, userEvent } from 'tests/utils'

const mockGoBack = jest.fn()
Expand Down Expand Up @@ -31,6 +34,20 @@ const mockNavigation: StackScreenProps<
popToTop: jest.fn(),
}

jest.mock('features/venueMap/store/venuesFilterStore')
const mockUseVenuesFilter = useVenuesFilter as jest.Mock
mockUseVenuesFilter.mockReturnValue([])

const mockAddVenuesFilters = jest.fn()
const mockRemoveVenuesFilters = jest.fn()
const mockSetVenuesFilters = jest.fn()
const mockUseVenuesFilterActions = useVenuesFilterActions as jest.Mock
mockUseVenuesFilterActions.mockReturnValue({
addVenuesFilters: mockAddVenuesFilters,
removeVenuesFilters: mockRemoveVenuesFilters,
setVenuesFilters: mockSetVenuesFilters,
})

const user = userEvent.setup()

jest.useFakeTimers()
Expand Down Expand Up @@ -102,4 +119,208 @@ describe('VenueMapTypeFilter', () => {
expect(screen.getByText('Cinéma - Salle de projections')).toBeOnTheScreen()
expect(screen.getByText('Musée')).toBeOnTheScreen()
})

it('should toggle show all checkbox when venue filter is empty', () => {
mockUseVenuesFilter.mockReturnValueOnce([])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const showAllCheckbox = screen.getByRole('checkbox', { name: 'Tout afficher' })

expect(showAllCheckbox).toHaveAccessibilityState({ checked: true })
})

it('should toggle show all checkbox when complete venue type group selected', () => {
mockUseVenuesFilter.mockReturnValueOnce(FILTERS_VENUE_TYPE_MAPPING['OUTINGS'])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const showAllCheckbox = screen.getByRole('checkbox', { name: 'Tout afficher' })

expect(showAllCheckbox).toHaveAccessibilityState({ checked: true })
})

it('should not toggle show all checkbox when venue type are selected in an other group than the one consulted', () => {
mockUseVenuesFilter.mockReturnValueOnce([VenueTypeCodeKey.BOOKSTORE])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const showAllCheckbox = screen.getByRole('checkbox', { name: 'Tout afficher' })

expect(showAllCheckbox).toHaveAccessibilityState({ checked: false })
})

it('should not toggle venue type checkbox when complete venue type group selected', () => {
mockUseVenuesFilter.mockReturnValueOnce(FILTERS_VENUE_TYPE_MAPPING['OUTINGS'])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const concertHallCheckbox = screen.getByRole('checkbox', {
name: 'Musique - Salle de concerts',
})

expect(concertHallCheckbox).toHaveAccessibilityState({ checked: false })
})

it('should toggle venue type checkbox when it is included in venue filters', () => {
mockUseVenuesFilter.mockReturnValueOnce([VenueTypeCodeKey.CONCERT_HALL])

render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const concertHallCheckbox = screen.getByRole('checkbox', {
name: 'Musique - Salle de concerts',
})

expect(concertHallCheckbox).toHaveAccessibilityState({ checked: true })
})

it('should reset venue types filters when pressing show all checkbox (checked) and venue type filter is empty without the current venue type group', async () => {
mockUseVenuesFilter.mockReturnValueOnce(FILTERS_VENUE_TYPE_MAPPING['OUTINGS'])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const showAllCheckbox = screen.getByRole('checkbox', { name: 'Tout afficher' })

await user.press(showAllCheckbox)

expect(mockRemoveVenuesFilters).toHaveBeenNthCalledWith(
1,
FILTERS_VENUE_TYPE_MAPPING['OUTINGS']
)
})

it('should add venue types filters of the current group when pressing show all checkbox (not checked) and venue type filter is not empty without the current venue type group', async () => {
mockUseVenuesFilter.mockReturnValueOnce(FILTERS_VENUE_TYPE_MAPPING['SHOPS'])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const showAllCheckbox = screen.getByRole('checkbox', { name: 'Tout afficher' })

await user.press(showAllCheckbox)

expect(mockAddVenuesFilters).toHaveBeenNthCalledWith(1, FILTERS_VENUE_TYPE_MAPPING['OUTINGS'])
})

it('should remove venue type filter when pressing venue type checkbox (checked)', async () => {
mockUseVenuesFilter.mockReturnValueOnce([VenueTypeCodeKey.CONCERT_HALL])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const concertHallCheckbox = screen.getByRole('checkbox', {
name: 'Musique - Salle de concerts',
})

await user.press(concertHallCheckbox)

expect(mockRemoveVenuesFilters).toHaveBeenNthCalledWith(1, [VenueTypeCodeKey.CONCERT_HALL])
})

it('should add venue type filter when pressing venue type checkbox (not checked)', async () => {
mockUseVenuesFilter.mockReturnValueOnce([VenueTypeCodeKey.FESTIVAL])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const concertHallCheckbox = screen.getByRole('checkbox', {
name: 'Musique - Salle de concerts',
})

await user.press(concertHallCheckbox)

expect(mockAddVenuesFilters).toHaveBeenNthCalledWith(1, [VenueTypeCodeKey.CONCERT_HALL])
})

it('should add only the current selection in venue type filter when pressing venue type checkbox (not checked) and all venue type group filtered', async () => {
mockUseVenuesFilter.mockReturnValueOnce(FILTERS_VENUE_TYPE_MAPPING['OUTINGS'])
render(
<VenueMapTypeFilter
navigation={mockNavigation}
route={{
key: 'VenueMapTypeFilter',
name: 'VenueMapTypeFilter',
params: { title: 'Sorties', filterGroup: 'OUTINGS' },
}}
/>
)

const concertHallCheckbox = screen.getByRole('checkbox', {
name: 'Musique - Salle de concerts',
})

await user.press(concertHallCheckbox)

expect(mockSetVenuesFilters).toHaveBeenNthCalledWith(1, [VenueTypeCodeKey.CONCERT_HALL])
})
})
43 changes: 36 additions & 7 deletions src/features/venueMap/components/VenueMapTypeFilter/VenueMapTypeFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import React, { FunctionComponent } from 'react'
import styled from 'styled-components/native'
import { v4 as uuidv4 } from 'uuid'

import { VenueTypeCodeKey } from 'api/gen'
import { UseNavigationType } from 'features/navigation/RootNavigator/types'
import { VenueMapFiltersModalStackParamList } from 'features/navigation/VenueMapFiltersStackNavigator/types'
import { FILTERS_VENUE_TYPE_MAPPING } from 'features/venueMap/constant'
import { VenueMapFiltersModal } from 'features/venueMap/pages/modals/VenueMapFiltersModal/VenueMapFiltersModal'
import { useVenuesFilter, useVenuesFilterActions } from 'features/venueMap/store/venuesFilterStore'
import { MAP_VENUE_TYPE_TO_LABEL, VenueTypeCode } from 'libs/parsers/venueType'
import { Checkbox } from 'ui/components/inputs/Checkbox/Checkbox'
import { ViewGap } from 'ui/components/ViewGap/ViewGap'
Expand All @@ -20,6 +22,8 @@ const titleId = uuidv4()
export const VenueMapTypeFilter: FunctionComponent<Props> = ({ navigation, route }) => {
const { title, filterGroup } = route.params
const { navigate } = useNavigation<UseNavigationType>()
const venueFilters = useVenuesFilter()
const { addVenuesFilters, removeVenuesFilters, setVenuesFilters } = useVenuesFilterActions()

const onGoBack = () => {
navigation.goBack()
Expand All @@ -29,9 +33,34 @@ export const VenueMapTypeFilter: FunctionComponent<Props> = ({ navigation, route
navigate('VenueMap')
}

const items: VenueTypeCode[] = FILTERS_VENUE_TYPE_MAPPING[filterGroup].filter(
const toggleFilters = (isChecked: boolean, filters: VenueTypeCodeKey[]) => {
if (isChecked) {
if (hasAllFilters) {
// Only the current selection is filtered
setVenuesFilters(filters)
return
}
addVenuesFilters(filters)
return
}
removeVenuesFilters(filters)
}

const toggleAll = (isChecked: boolean) => {
toggleFilters(isChecked, FILTERS_VENUE_TYPE_MAPPING[filterGroup])
}

const toggleVenueType = (isChecked: boolean, venueType: VenueTypeCodeKey) => {
toggleFilters(isChecked, [venueType])
}

const venueTypes: VenueTypeCode[] = FILTERS_VENUE_TYPE_MAPPING[filterGroup].filter(
(item): item is VenueTypeCode => item in MAP_VENUE_TYPE_TO_LABEL
)
const hasAllFilters = FILTERS_VENUE_TYPE_MAPPING[filterGroup].every((filter) =>
venueFilters.includes(filter)
)
const isCheckedShowAll = venueFilters.length === 0 || hasAllFilters

return (
<VenueMapFiltersModal
Expand All @@ -43,13 +72,13 @@ export const VenueMapTypeFilter: FunctionComponent<Props> = ({ navigation, route
shouldDisplayCloseButton>
<Container gap={6}>
<TypoDS.Title1>{title}</TypoDS.Title1>
<Checkbox label="Tout afficher" isChecked onPress={() => null} />
{items.map((item) => (
<Checkbox label="Tout afficher" isChecked={isCheckedShowAll} onPress={toggleAll} />
{venueTypes.map((venueType) => (
<Checkbox
key={item}
label={MAP_VENUE_TYPE_TO_LABEL[item]}
isChecked={false}
onPress={() => null}
key={venueType}
label={MAP_VENUE_TYPE_TO_LABEL[venueType]}
isChecked={venueFilters.includes(venueType) && !hasAllFilters}
onPress={(isChecked: boolean) => toggleVenueType(isChecked, venueType)}
/>
))}
</Container>
Expand Down