(BSR) fix(Stories): SubcategoryButton and SubcategoryButtonList stori…

…es (#7303) * fix: SubcategoryButton and SubcategoryButtonList stories * refactor: remove redundant story * fix: attempt to fix flaky test
pass-culture · Nov 29, 2024 · 2da4ca2 · 2da4ca2
1 parent 5ea528c
commit 2da4ca2
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 131 deletions.
diff --git a/src/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx b/src/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx
@@ -78,6 +78,8 @@ describe('EndedBookings', () => {
 
     await screen.findAllByText('Avez-vous déjà vu\u00a0?')
 
+    await screen.findByText('Réservations terminées')
+
     expect(screen).toMatchSnapshot()
   })
 

diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButton.native.test.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButton.native.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { initialSearchState } from 'features/search/context/reducer'
-import { BooksNativeCategoriesEnum } from 'features/search/types'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
 import { render, screen } from 'tests/utils'
 import { theme } from 'theme'
@@ -26,7 +25,7 @@ describe('<SubcategoryButton/>', () => {
           label="Mangas"
           backgroundColor={theme.colors.deepPink}
           borderColor={theme.colors.deepPinkDark}
-          nativeCategory={BooksNativeCategoriesEnum.MANGAS}
+          onPress={jest.fn()}
         />
       )
     )

diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButton.stories.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButton.stories.tsx
diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButton.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButton.tsx
@@ -1,18 +1,6 @@
-import { useRoute } from '@react-navigation/native'
 import React from 'react'
 import { Platform, useWindowDimensions } from 'react-native'
 
-import { SearchGroupNameEnumv2 } from 'api/gen'
-import { defaultDisabilitiesProperties } from 'features/accessibility/context/AccessibilityFiltersWrapper'
-import { UseRouteType } from 'features/navigation/RootNavigator/types'
-import { SearchStackRouteName } from 'features/navigation/SearchStackNavigator/types'
-import { useSearch } from 'features/search/context/SearchWrapper'
-import { CategoriesModalView } from 'features/search/enums'
-import { handleCategoriesSearchPress } from 'features/search/helpers/categoriesHelpers/categoriesHelpers'
-import { useNavigateToSearch } from 'features/search/helpers/useNavigateToSearch/useNavigateToSearch'
-import { CategoriesModalFormProps } from 'features/search/pages/modals/CategoriesModal/CategoriesModal'
-import { NativeCategoryEnum, SearchState } from 'features/search/types'
-import { useSubcategories } from 'libs/subcategories/useSubcategories'
 import { styledButton } from 'ui/components/buttons/styledButton'
 import { Touchable } from 'ui/components/touchable/Touchable'
 import { getShadow, Typo } from 'ui/theme'
@@ -26,7 +14,7 @@ export type SubcategoryButtonProps = {
   label: string
   backgroundColor: ColorsEnum
   borderColor: ColorsEnum
-  nativeCategory: NativeCategoryEnum
+  onPress: VoidFunction
 }
 
 export const SUBCATEGORY_BUTTON_HEIGHT = getSpacing(14)
@@ -36,40 +24,13 @@ export const SubcategoryButton = ({
   label,
   backgroundColor,
   borderColor,
-  nativeCategory,
+  onPress,
 }: SubcategoryButtonProps) => {
-  const { data: subcategories } = useSubcategories()
-  const { navigateToSearch: navigateToSearchResults } = useNavigateToSearch('SearchResults')
-  const { params } = useRoute<UseRouteType<SearchStackRouteName>>()
-  const { dispatch, searchState } = useSearch()
   const windowWidth = useWindowDimensions().width
 
-  const handleSubcategoryButtonPress = () => {
-    if (!subcategories) return
-
-    const offerCategories = params?.offerCategories as SearchGroupNameEnumv2[]
-    const form: CategoriesModalFormProps = {
-      category: offerCategories?.[0] as SearchGroupNameEnumv2,
-      currentView: CategoriesModalView.GENRES,
-      genreType: null,
-      nativeCategory,
-    }
-    const searchPayload = handleCategoriesSearchPress(form, subcategories)
-
-    const additionalSearchState: SearchState = {
-      ...searchState,
-      ...searchPayload?.payload,
-      offerCategories,
-      isFullyDigitalOffersCategory: searchPayload?.isFullyDigitalOffersCategory || undefined,
-    }
-
-    dispatch({ type: 'SET_STATE', payload: additionalSearchState })
-    navigateToSearchResults(additionalSearchState, defaultDisabilitiesProperties)
-  }
-
   return (
     <StyledTouchable
-      onPress={handleSubcategoryButtonPress}
+      onPress={onPress}
       testID={`SubcategoryButton ${label}`}
       accessibilityLabel={label}
       windowWidth={windowWidth}

diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonList.native.test.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonList.native.test.tsx
@@ -5,10 +5,13 @@ import { BooksNativeCategoriesEnum } from 'features/search/types'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
 import { render, screen } from 'tests/utils'
 import { theme } from 'theme'
-import { SubcategoryButtonList } from 'ui/components/buttons/SubcategoryButton/SubcategoryButtonList'
+import {
+  SubcategoryButtonItem,
+  SubcategoryButtonList,
+} from 'ui/components/buttons/SubcategoryButton/SubcategoryButtonList'
 
 const colors = { backgroundColor: theme.colors.deepPink, borderColor: theme.colors.deepPinkDark }
-const subcategoryButtonContent = [
+const subcategoryButtonContent: SubcategoryButtonItem[] = [
   {
     label: 'Romans et littérature',
     ...colors,
@@ -41,7 +44,10 @@ describe('<SubcategoryButtonList/>', () => {
   it('should render SubcategoryButtonList', async () => {
     render(
       reactQueryProviderHOC(
-        <SubcategoryButtonList subcategoryButtonContent={subcategoryButtonContent} />
+        <SubcategoryButtonList
+          onPress={jest.fn()}
+          subcategoryButtonContent={subcategoryButtonContent}
+        />
       )
     )
 

diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonList.stories.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonList.stories.tsx
@@ -1,24 +1,13 @@
-import { NavigationContainer } from '@react-navigation/native'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
 import { BooksNativeCategoriesEnum } from 'features/search/types'
-import { ReactQueryClientProvider } from 'libs/react-query/ReactQueryClientProvider'
 import { theme } from 'theme'
 import { SubcategoryButtonList } from 'ui/components/buttons/SubcategoryButton/SubcategoryButtonList'
 
 const meta: ComponentMeta<typeof SubcategoryButtonList> = {
   title: 'ui/buttons/SubcategoryButtonList',
   component: SubcategoryButtonList,
-  decorators: [
-    (Story) => (
-      <ReactQueryClientProvider>
-        <NavigationContainer>
-          <Story />
-        </NavigationContainer>
-      </ReactQueryClientProvider>
-    ),
-  ],
 }
 export default meta
 
@@ -30,8 +19,7 @@ const colors = {
   backgroundColor: theme.colors.aquamarine,
   borderColor: theme.colors.aquamarineDark,
 }
-// TODO(PC-28526): Fix this stories
-const Default = Template.bind({})
+export const Default = Template.bind({})
 Default.args = {
   subcategoryButtonContent: [
     {
@@ -81,3 +69,4 @@ Default.args = {
     },
   ],
 }
+Default.storyName = 'SubcategoryButtonList'
diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonList.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonList.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { FlatList, ScrollView, ScrollViewProps, StyleSheet, View, ViewStyle } from 'react-native'
 import styled, { useTheme } from 'styled-components/native'
 
+import { NativeCategoryEnum } from 'features/search/types'
 import {
   SubcategoryButton,
   SubcategoryButtonProps,
@@ -13,25 +14,31 @@ import { getSpacing, Spacer } from 'ui/theme'
 type StyledScrollViewProps = ScrollViewProps & {
   contentContainerStyle?: ViewStyle
 }
+export type SubcategoryButtonItem = Omit<SubcategoryButtonProps, 'onPress'> & {
+  nativeCategory: NativeCategoryEnum
+}
 
-type Props = {
-  subcategoryButtonContent: SubcategoryButtonProps[]
-  scrollViewProps?: StyledScrollViewProps
+type SubcategoryButtonListProps = {
+  subcategoryButtonContent: SubcategoryButtonItem[]
+  onPress: (nativeCategory: NativeCategoryEnum) => void
 }
 
-export const SubcategoryButtonList: React.FC<Props> = ({ subcategoryButtonContent }) => {
+export const SubcategoryButtonList: React.FC<SubcategoryButtonListProps> = ({
+  subcategoryButtonContent,
+  onPress,
+}) => {
   const [webViewWidth, setWebViewWidth] = useState<number>(0)
 
   const { isDesktopViewport } = useTheme()
   const numColumns = Math.max(Math.floor(webViewWidth / SUBCATEGORY_BUTTON_WIDTH), 1)
 
-  const renderItem = ({ item }: { item: SubcategoryButtonProps; index: number }) => (
+  const renderItem = ({ item }: { item: SubcategoryButtonItem; index: number }) => (
     <React.Fragment>
       <SubcategoryButton
         label={item.label}
         backgroundColor={item.backgroundColor}
         borderColor={item.borderColor}
-        nativeCategory={item.nativeCategory}
+        onPress={() => onPress(item.nativeCategory)}
       />
       <Spacer.Row numberOfSpaces={4} />
     </React.Fragment>
@@ -44,7 +51,7 @@ export const SubcategoryButtonList: React.FC<Props> = ({ subcategoryButtonConten
           const { width } = event.nativeEvent.layout
           setWebViewWidth(width)
         }}>
-        <FlatList<SubcategoryButtonProps>
+        <FlatList
           listAs="ul"
           itemAs="li"
           key={numColumns}
@@ -69,11 +76,19 @@ export const SubcategoryButtonList: React.FC<Props> = ({ subcategoryButtonConten
           <React.Fragment key={JSON.stringify([topContent, bottomContent])}>
             <View>
               <Spacer.Row numberOfSpaces={4} />
-              {topContent ? <SubcategoryButton {...topContent} /> : null}
+              {topContent ? (
+                <SubcategoryButton
+                  {...topContent}
+                  onPress={() => onPress(topContent.nativeCategory)}
+                />
+              ) : null}
               {bottomContent ? (
                 <React.Fragment>
                   <Spacer.Column numberOfSpaces={4} />
-                  <SubcategoryButton {...bottomContent} />
+                  <SubcategoryButton
+                    {...bottomContent}
+                    onPress={() => onPress(bottomContent.nativeCategory)}
+                  />
                 </React.Fragment>
               ) : null}
             </View>

diff --git a/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonListWrapper.tsx b/src/ui/components/buttons/SubcategoryButton/SubcategoryButtonListWrapper.tsx
@@ -1,12 +1,26 @@
+import { useRoute } from '@react-navigation/native'
 import React, { useMemo } from 'react'
 import { ScrollViewProps, ViewStyle } from 'react-native'
 import { useTheme } from 'styled-components/native'
 
 import { SearchGroupNameEnumv2 } from 'api/gen'
-import { CATEGORY_CRITERIA } from 'features/search/enums'
-import { useNativeCategories } from 'features/search/helpers/categoriesHelpers/categoriesHelpers'
-import { NativeCategoryEnum } from 'features/search/types'
-import { SubcategoryButtonList } from 'ui/components/buttons/SubcategoryButton/SubcategoryButtonList'
+import { defaultDisabilitiesProperties } from 'features/accessibility/context/AccessibilityFiltersWrapper'
+import { UseRouteType } from 'features/navigation/RootNavigator/types'
+import { SearchStackRouteName } from 'features/navigation/SearchStackNavigator/types'
+import { useSearch } from 'features/search/context/SearchWrapper'
+import { CategoriesModalView, CATEGORY_CRITERIA } from 'features/search/enums'
+import {
+  handleCategoriesSearchPress,
+  useNativeCategories,
+} from 'features/search/helpers/categoriesHelpers/categoriesHelpers'
+import { useNavigateToSearch } from 'features/search/helpers/useNavigateToSearch/useNavigateToSearch'
+import { CategoriesModalFormProps } from 'features/search/pages/modals/CategoriesModal/CategoriesModal'
+import { NativeCategoryEnum, SearchState } from 'features/search/types'
+import { useSubcategories } from 'libs/subcategories/useSubcategories'
+import {
+  SubcategoryButtonItem,
+  SubcategoryButtonList,
+} from 'ui/components/buttons/SubcategoryButton/SubcategoryButtonList'
 
 type StyledScrollViewProps = ScrollViewProps & {
   contentContainerStyle?: ViewStyle
@@ -18,6 +32,8 @@ type Props = {
 }
 
 export const SubcategoryButtonListWrapper: React.FC<Props> = ({ offerCategory }) => {
+  const { data: subcategories } = useSubcategories()
+
   const { colors } = useTheme()
   const nativeCategories = useNativeCategories(offerCategory)
   const offerCategoryTheme = useMemo(
@@ -28,17 +44,23 @@ export const SubcategoryButtonListWrapper: React.FC<Props> = ({ offerCategory })
     [offerCategory]
   )
 
+  const { navigateToSearch: navigateToSearchResults } = useNavigateToSearch('SearchResults')
+  const { params } = useRoute<UseRouteType<SearchStackRouteName>>()
+  const { dispatch, searchState } = useSearch()
+
   const subcategoryButtonContent = useMemo(
     () =>
-      nativeCategories.map((nativeCategory) => ({
-        label:
-          nativeCategory[1].label === 'Séances de cinéma'
-            ? 'Films à l’affiche'
-            : nativeCategory[1].label,
-        backgroundColor: offerCategoryTheme.backgroundColor || colors.white,
-        borderColor: offerCategoryTheme.borderColor || colors.black,
-        nativeCategory: nativeCategory[0] as NativeCategoryEnum,
-      })),
+      nativeCategories.map(
+        (nativeCategory): SubcategoryButtonItem => ({
+          label:
+            nativeCategory[1].label === 'Séances de cinéma'
+              ? 'Films à l’affiche'
+              : nativeCategory[1].label,
+          backgroundColor: offerCategoryTheme.backgroundColor || colors.white,
+          borderColor: offerCategoryTheme.borderColor || colors.black,
+          nativeCategory: nativeCategory[0] as NativeCategoryEnum,
+        })
+      ),
     [
       colors.black,
       colors.white,
@@ -48,5 +70,32 @@ export const SubcategoryButtonListWrapper: React.FC<Props> = ({ offerCategory })
     ]
   )
 
-  return <SubcategoryButtonList subcategoryButtonContent={subcategoryButtonContent} />
+  if (!subcategories) return null
+
+  const handleSubcategoryButtonPress = (nativeCategory: NativeCategoryEnum) => {
+    const offerCategories = params?.offerCategories as SearchGroupNameEnumv2[]
+    const form: CategoriesModalFormProps = {
+      category: offerCategories?.[0] as SearchGroupNameEnumv2,
+      currentView: CategoriesModalView.GENRES,
+      genreType: null,
+      nativeCategory,
+    }
+    const searchPayload = handleCategoriesSearchPress(form, subcategories)
+
+    const additionalSearchState: SearchState = {
+      ...searchState,
+      ...searchPayload?.payload,
+      offerCategories,
+      isFullyDigitalOffersCategory: searchPayload?.isFullyDigitalOffersCategory || undefined,
+    }
+
+    dispatch({ type: 'SET_STATE', payload: additionalSearchState })
+    navigateToSearchResults(additionalSearchState, defaultDisabilitiesProperties)
+  }
+  return (
+    <SubcategoryButtonList
+      subcategoryButtonContent={subcategoryButtonContent}
+      onPress={handleSubcategoryButtonPress}
+    />
+  )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -78,6 +78,8 @@ describe('EndedBookings', () => { @@
         await screen.findAllByText('Avez-vous déjà vu\u00a0?')
+        await screen.findByText('Réservations terminées')
         expect(screen).toMatchSnapshot()
       })
@@ Expand Down @@