-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* (PC-33099) feat(venueMap): filter header v2 * refactor: FilterButton target * test: improve coverage + fix tests
- Loading branch information
1 parent
b657b4e
commit 7144094
Showing
16 changed files
with
396 additions
and
139 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
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
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
32 changes: 32 additions & 0 deletions
32
src/features/venueMap/components/FilterBannerContainer/FilterBannerContainer.native.test.tsx
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,32 @@ | ||
| import React from 'react' | ||
|
|
||
| import { FILTERS_VENUE_TYPE_MAPPING } from 'features/venueMap/constant' | ||
| import * as useFeatureFlagAPI from 'libs/firebase/firestore/featureFlags/useFeatureFlag' | ||
| import { render, screen } from 'tests/utils' | ||
|
|
||
| import { FilterBannerContainer } from './FilterBannerContainer' | ||
|
|
||
| const useFeatureFlagSpy = jest.spyOn(useFeatureFlagAPI, 'useFeatureFlag') | ||
|
|
||
| describe('FilterBannerConainer', () => { | ||
| beforeEach(() => { | ||
| useFeatureFlagSpy.mockReturnValue(true) | ||
| }) | ||
|
|
||
| it('should render FilterCategoriesBannerContainer if FF is enabled', async () => { | ||
| render(<FilterBannerContainer />) | ||
| await screen.findAllByTestId(/[A-Z]+Label/) | ||
|
|
||
| Object.keys(FILTERS_VENUE_TYPE_MAPPING).forEach((id) => { | ||
| expect(screen.getByTestId(`${id}Label`)).toBeOnTheScreen() | ||
| }) | ||
| }) | ||
|
|
||
| it('should render SingleFilterBannerContainer if FF is disabled', async () => { | ||
| useFeatureFlagSpy.mockReturnValueOnce(false) | ||
|
|
||
| render(<FilterBannerContainer />) | ||
|
|
||
| expect(await screen.findByLabelText('Tous les lieux')).toBeOnTheScreen() | ||
| }) | ||
| }) |
40 changes: 40 additions & 0 deletions
40
src/features/venueMap/components/FilterBannerContainer/FilterBannerContainer.tsx
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,40 @@ | ||
| import React from 'react' | ||
| import styled from 'styled-components/native' | ||
|
|
||
| import { FILTER_BANNER_HEIGHT } from 'features/venueMap/constant' | ||
| import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag' | ||
| import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' | ||
| import { useGetHeaderHeight } from 'ui/components/headers/PageHeaderWithoutPlaceholder' | ||
| import { getSpacing } from 'ui/theme' | ||
|
|
||
| import { FilterCategoriesBannerContainer } from './FilterCategoriesBannerContainer' | ||
| import { SingleFilterBannerContainer } from './SingleFilterBannerContainer' | ||
|
|
||
| export const FilterBannerContainer = () => { | ||
| const headerHeight = useGetHeaderHeight() | ||
|
|
||
| const filterCategoriesActive = useFeatureFlag( | ||
| RemoteStoreFeatureFlags.WIP_VENUE_MAP_TYPE_FILTER_V2 | ||
| ) | ||
|
|
||
| return ( | ||
| <Container headerHeight={headerHeight}> | ||
| {filterCategoriesActive ? ( | ||
| <FilterCategoriesBannerContainer /> | ||
| ) : ( | ||
| <SingleFilterBannerContainer /> | ||
| )} | ||
| </Container> | ||
| ) | ||
| } | ||
|
|
||
| const Container = styled.View<{ headerHeight: number }>(({ headerHeight }) => ({ | ||
| height: FILTER_BANNER_HEIGHT, | ||
| position: 'absolute', | ||
| zIndex: 1, | ||
| top: headerHeight, | ||
| left: 0, | ||
| right: 0, | ||
| paddingHorizontal: getSpacing(6), | ||
| paddingVertical: getSpacing(1), | ||
| })) |
48 changes: 48 additions & 0 deletions
48
...venueMap/components/FilterBannerContainer/FilterCategoriesBannerContainer.native.test.tsx
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,48 @@ | ||
| import React from 'react' | ||
|
|
||
| import { FILTERS_VENUE_TYPE_MAPPING } from 'features/venueMap/constant' | ||
| import { render, screen, userEvent } from 'tests/utils' | ||
|
|
||
| import { FilterCategoriesBannerContainer } from './FilterCategoriesBannerContainer' | ||
|
|
||
| describe('FilterCategoriesBannerContainer', () => { | ||
| const user = userEvent.setup() | ||
|
|
||
| it('should render correctly', async () => { | ||
| render(<FilterCategoriesBannerContainer />) | ||
|
|
||
| await screen.findAllByTestId(/[A-Z]+Label/) | ||
|
|
||
| Object.keys(FILTERS_VENUE_TYPE_MAPPING).forEach((id) => { | ||
| expect(screen.getByTestId(`${id}Label`)).toBeOnTheScreen() | ||
| }) | ||
| }) | ||
|
|
||
| it.each([ | ||
| { id: 'OUTINGS', label: 'Sorties : Filtre sélectionné' }, | ||
| { id: 'SHOPS', label: 'Boutiques : Filtre sélectionné' }, | ||
| { id: 'OTHERS', label: 'Autres : Filtre sélectionné' }, | ||
| ])(`should select $id group`, async ({ id, label }) => { | ||
| jest.useFakeTimers() | ||
| render(<FilterCategoriesBannerContainer />) | ||
|
|
||
| await user.press(screen.getByTestId(`${id}Label`)) | ||
|
|
||
| expect(screen.getByLabelText(label)).toBeOnTheScreen() | ||
|
|
||
| jest.useRealTimers() | ||
| }) | ||
|
|
||
| it('should deselect selected group', async () => { | ||
| jest.useFakeTimers() | ||
| render(<FilterCategoriesBannerContainer />) | ||
|
|
||
| await user.press(screen.getByTestId('OUTINGSLabel')) | ||
|
|
||
| await user.press(await screen.findByLabelText('Sorties : Filtre sélectionné')) | ||
|
|
||
| expect(screen.queryByLabelText('Sorties : Filtre sélectionné')).not.toBeOnTheScreen() | ||
|
|
||
| jest.useRealTimers() | ||
| }) | ||
| }) |
73 changes: 73 additions & 0 deletions
73
src/features/venueMap/components/FilterBannerContainer/FilterCategoriesBannerContainer.tsx
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,73 @@ | ||
| import colorAlpha from 'color-alpha' | ||
| import React from 'react' | ||
| import { View } from 'react-native' | ||
| import LinearGradient from 'react-native-linear-gradient' | ||
| import styled from 'styled-components/native' | ||
|
|
||
| import { FilterButton } from 'features/search/components/Buttons/FilterButton/FilterButton' | ||
| import { SingleFilterButton } from 'features/search/components/Buttons/SingleFilterButton/SingleFilterButton' | ||
| import { FILTERS_VENUE_TYPE_MAPPING } from 'features/venueMap/constant' | ||
| import { useVenueMapFilters } from 'features/venueMap/hook/useVenueMapFilters' | ||
| import { AccessibilityRole } from 'libs/accessibilityRole/accessibilityRole' | ||
| import { theme } from 'theme' | ||
| import { getSpacing } from 'ui/theme' | ||
|
|
||
| const BULLET_SIZE = 12 | ||
|
|
||
| type FilterGroupKey = keyof typeof FILTERS_VENUE_TYPE_MAPPING | ||
|
|
||
| type FilterGroupData = { | ||
| id: FilterGroupKey | ||
| label: string | ||
| color: string | ||
| } | ||
| const filterGroups: FilterGroupData[] = [ | ||
| { id: 'OUTINGS', label: 'Sorties', color: theme.colors.coral }, | ||
| { id: 'SHOPS', label: 'Boutiques', color: theme.colors.primary }, | ||
| { id: 'OTHERS', label: 'Autres', color: theme.colors.skyBlue }, | ||
| ] | ||
|
|
||
| export const FilterCategoriesBannerContainer = () => { | ||
| const { getSelectedMacroFilters, addMacroFilter, removeMacroFilter } = useVenueMapFilters() | ||
|
|
||
| const selectedGroups = getSelectedMacroFilters() | ||
|
|
||
| const handleCategoryPress = (categoryId: FilterGroupKey) => { | ||
| if (selectedGroups.includes(categoryId)) { | ||
| removeMacroFilter(categoryId) | ||
| } else { | ||
| addMacroFilter(categoryId) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Container accessibilityRole={AccessibilityRole.LIST}> | ||
| <FilterButton /> | ||
| {filterGroups.map(({ color, id, label }) => ( | ||
| <SingleFilterButton | ||
| key={id} | ||
| testID={id} | ||
| icon={<ColoredGradientBullet color={color} />} | ||
| label={label} | ||
| isSelected={selectedGroups.includes(id)} | ||
| onPress={() => handleCategoryPress(id)} | ||
| accessibilityRole={AccessibilityRole.LISTITEM} | ||
| /> | ||
| ))} | ||
| </Container> | ||
| ) | ||
| } | ||
|
|
||
| const Container = styled(View)({ | ||
| flexDirection: 'row', | ||
| columnGap: getSpacing(1), | ||
| }) | ||
|
|
||
| const ColoredGradientBullet = styled(LinearGradient).attrs(({ color }: { color: string }) => ({ | ||
| colors: [color, colorAlpha(color, 0.7)], | ||
| }))<{ color: string }>({ | ||
| backgroundColor: 'black', | ||
| width: BULLET_SIZE, | ||
| height: BULLET_SIZE, | ||
| borderRadius: BULLET_SIZE * 0.5, | ||
| }) |
Oops, something went wrong.