test: update tests + snapshots

__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap

@@ -3817,7 +3817,7 @@ exports[`<Venue /> should match snapshot 1`] = `
             style={
               [
                 {
-                  "marginHorizontal": 24,
+                  "paddingHorizontal": 24,
                 },
               ]
             }
@@ -7516,7 +7516,7 @@ exports[`<Venue /> should match snapshot with practical information 1`] = `
             style={
               [
                 {
-                  "marginHorizontal": 24,
+                  "paddingHorizontal": 24,
                 },
               ]
             }

src/features/chronicle/api/useChronicles/useChronicles.test.ts

@@ -1,22 +1,54 @@
+import { OfferChronicle } from 'api/gen'
+import { offerChroniclesToChronicleCardData } from 'features/chronicle/adapters/offerChroniclesToChronicleCardData/offerChroniclesToChronicleCardData'
 import { useChronicles } from 'features/chronicle/api/useChronicles/useChronicles'
 import { offerChroniclesFixture } from 'features/chronicle/fixtures/offerChronicles.fixture'
+import { ChronicleCardData } from 'features/chronicle/type'
 import { offerResponseSnap } from 'features/offer/fixtures/offerResponse'
 import { mockServer } from 'tests/mswServer'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
-import { act, renderHook } from 'tests/utils'
+import { act, renderHook, waitFor } from 'tests/utils'
 
 describe('useChronicles', () => {
   beforeEach(() =>
     mockServer.getApi(`/v1/offer/${offerResponseSnap.id}/chronicles`, offerChroniclesFixture)
   )
 
   it('should call API otherwise', async () => {
-    const { result } = renderHook(() => useChronicles({ offerId: offerResponseSnap.id }), {
-      wrapper: ({ children }) => reactQueryProviderHOC(children),
-    })
+    const { result } = renderHook(
+      () =>
+        useChronicles({
+          offerId: offerResponseSnap.id,
+        }),
+      {
+        wrapper: ({ children }) => reactQueryProviderHOC(children),
+      }
+    )
+
+    await waitFor(() =>
+      expect(JSON.stringify(result.current.data)).toEqual(JSON.stringify(offerChroniclesFixture))
+    )
+  })
+
+  it('should call API and format output data', async () => {
+    const { result } = renderHook(
+      () =>
+        useChronicles<ChronicleCardData[]>({
+          offerId: offerResponseSnap.id,
+          select: (data) => offerChroniclesToChronicleCardData(data.chronicles),
+        }),
+      {
+        wrapper: ({ children }) => reactQueryProviderHOC(children),
+      }
+    )
 
     await act(async () => {})
 
-    expect(JSON.stringify(result.current.data)).toEqual(JSON.stringify(offerChroniclesFixture))
+    expect(JSON.stringify(result.current.data)).toEqual(
+      JSON.stringify(
+        offerChroniclesToChronicleCardData([
+          ...offerChroniclesFixture.chronicles,
+        ] as OfferChronicle[])
+      )
+    )
   })
 })

src/features/chronicle/components/ChronicleCardList/ChronicleCardList.web.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import { ChronicleCardList } from 'features/chronicle/components/ChronicleCardList/ChronicleCardList.web'
 import { chroniclesSnap } from 'features/chronicle/fixtures/chroniclesSnap'
-import { fireEvent, render, screen } from 'tests/utils/web'
+import { fireEvent, render, screen, waitFor } from 'tests/utils/web'
+
+import { ChronicleCardList } from './ChronicleCardList'
 
 describe('ChronicleCardList', () => {
   it('should render the ChronicleCardList correctly', () => {
@@ -36,15 +37,26 @@ describe('ChronicleCardList', () => {
     expect(screen.queryByText('L’Odyssée des Espèces')).not.toBeInTheDocument()
   })
 
-  it('should go to previous page when left arrow is pressed', () => {
+  it('should go to previous page when left arrow is pressed', async () => {
     render(<ChronicleCardList data={chroniclesSnap} horizontal />)
 
+    const listElement = screen.getByTestId('chronicle-list')
+    Object.defineProperty(listElement, 'scrollWidth', { get: () => 900 })
+    Object.defineProperty(listElement, 'offsetWidth', { get: () => 300 })
+
     fireEvent.click(screen.getByTestId('chronicle-list-right-arrow'))
+    // We have to force scroll event. onScroll is not triggered when using scrollToOffset via ref
+    fireEvent.scroll(listElement)
+
+    await screen.findByTestId('chronicle-list-left-arrow')
 
     fireEvent.click(screen.getByTestId('chronicle-list-left-arrow'))
+    fireEvent.scroll(listElement)
 
-    expect(screen.getByText('Le Voyage Extraordinaire')).toBeInTheDocument()
-    expect(screen.getByText('Explorateur du monde')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('Le Voyage Extraordinaire')).toBeInTheDocument()
+      expect(screen.getByText('Explorateur du monde')).toBeInTheDocument()
+    })
   })
 
   it('should disable the left arrow when on the first item', () => {
@@ -54,16 +66,19 @@ describe('ChronicleCardList', () => {
     expect(screen.queryByTestId('chronicle-list-left-arrow')).not.toBeInTheDocument()
   })
 
-  it('should disable the right arrow when on the last item', () => {
-    render(<ChronicleCardList data={chroniclesSnap} horizontal />)
+  it('should disable the right arrow when on the last item', async () => {
+    render(<ChronicleCardList data={chroniclesSnap.slice(0, 2)} horizontal />)
 
-    const rightArrow = screen.getByTestId('chronicle-list-right-arrow')
+    const listElement = screen.getByTestId('chronicle-list')
+    Object.defineProperty(listElement, 'scrollWidth', { get: () => 900 })
+    Object.defineProperty(listElement, 'offsetWidth', { get: () => 300 })
 
-    // Simulate clicks until the right arrow button is no longer visible
-    while (rightArrow && rightArrow.isConnected) {
-      fireEvent.click(rightArrow)
-    }
+    fireEvent.scroll(listElement, {
+      target: { scrollLeft: 600 },
+    })
 
-    expect(screen.queryByTestId('chronicle-list-right-arrow')).not.toBeInTheDocument()
+    await waitFor(() =>
+      expect(screen.queryByTestId('chronicle-list-right-arrow')).not.toBeInTheDocument()
+    )
   })
 })

src/features/chronicle/components/ChronicleCardList/ChronicleCardListBase.native.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { CHRONICLE_CARD_WIDTH } from 'features/chronicle/constant'
+import { chroniclesSnap } from 'features/chronicle/fixtures/chroniclesSnap'
+import { render, screen } from 'tests/utils'
+
+import { ChronicleCardListBase } from './ChronicleCardListBase'
+
+describe('ChronicleCardListBase', () => {
+  it('should display all chronicle cards in the list in horizontal', () => {
+    render(<ChronicleCardListBase data={chroniclesSnap} horizontal separatorSize={10} />)
+
+    expect(screen.getByText('Le Voyage Extraordinaire')).toBeOnTheScreen()
+  })
+
+  it('should display all chronicle cards in the list in vertical', () => {
+    render(<ChronicleCardListBase data={chroniclesSnap} separatorSize={20} />)
+
+    expect(screen.getByText('Le Voyage Extraordinaire')).toBeOnTheScreen()
+  })
+
+  it('should scroll to the correct page when offset is provided', () => {
+    render(<ChronicleCardListBase data={chroniclesSnap} offset={CHRONICLE_CARD_WIDTH} horizontal />)
+
+    expect(screen.getByText('La Nature Sauvage')).toBeOnTheScreen()
+  })
+})

src/features/offer/components/OfferBody/OfferBody.native.test.tsx

@@ -403,46 +403,6 @@ describe('<OfferBody />', () => {
     })
   })
 
-  it('should display social network section', async () => {
-    renderOfferBody({})
-
-    expect(await screen.findByText('Passe le bon plan\u00a0!')).toBeOnTheScreen()
-  })
-
-  it('should display container with divider on mobile', async () => {
-    renderOfferBody({})
-
-    await screen.findByText(offerResponseSnap.name)
-
-    expect(screen.getByTestId('messagingApp-container-with-divider')).toBeOnTheScreen()
-  })
-
-  it('should not display container with divider on desktop', async () => {
-    renderOfferBody({ isDesktopViewport: true })
-
-    await screen.findByText(offerResponseSnap.name)
-
-    expect(screen.queryByTestId('messagingApp-container-with-divider')).not.toBeOnTheScreen()
-  })
-
-  it('should display container without divider on desktop', async () => {
-    renderOfferBody({
-      isDesktopViewport: true,
-    })
-
-    await screen.findByText(offerResponseSnap.name)
-
-    expect(screen.getByTestId('messagingApp-container-without-divider')).toBeOnTheScreen()
-  })
-
-  it('should not display container without divider on mobile', async () => {
-    renderOfferBody({})
-
-    await screen.findByText(offerResponseSnap.name)
-
-    expect(screen.queryByTestId('messagingApp-container-without-divider')).not.toBeOnTheScreen()
-  })
-
   it('should redirect to artist page when FF is enabled, artist not contain a comma or a semicolon, and artist name is not collectif/s', async () => {
     const offer: OfferResponseV2 = {
       ...offerResponseSnap,
@@ -609,56 +569,22 @@ describe('<OfferBody />', () => {
     expect(mockNavigate).not.toHaveBeenCalled()
   })
 
-  describe('Chronicles section', () => {
-    it('should display "Voir tous les avis" button when wipOfferChronicleSection feature flag activated and viewport is not desktop', async () => {
-      renderOfferBody({})
-
-      expect(await screen.findByText('Voir tous les avis')).toBeOnTheScreen()
-    })
-
-    it('should not display "Voir tous les avis" button when wipOfferChronicleSection feature flag activated and viewport is desktop', async () => {
-      renderOfferBody({ isDesktopViewport: true })
-
-      await screen.findByText(offerResponseSnap.name)
-
-      expect(screen.queryByText('Voir tous les avis')).not.toBeOnTheScreen()
-    })
-
-    it('should not display "Voir tous les avis" button when wipOfferChronicleSection feature flag deactivated', async () => {
-      setFeatureFlags()
-
-      renderOfferBody({})
-
-      await screen.findByText(offerResponseSnap.name)
-
-      expect(screen.queryByText('Voir tous les avis')).not.toBeOnTheScreen()
-    })
-
-    it('should navigate to chronicles page when pressing "Voir tous les avis" button', async () => {
-      renderOfferBody({})
-
-      await user.press(await screen.findByText('Voir tous les avis'))
+  type RenderOfferBodyType = Partial<ComponentProps<typeof OfferBody>> & {
+    isDesktopViewport?: boolean
+  }
 
-      expect(mockNavigate).toHaveBeenNthCalledWith(1, 'Chronicles', { offerId: 116656 })
-    })
-  })
+  function renderOfferBody({
+    offer = offerResponseSnap,
+    subcategory = mockSubcategory,
+    isDesktopViewport,
+  }: RenderOfferBodyType) {
+    render(
+      reactQueryProviderHOC(
+        <OfferBody offer={offer} subcategory={subcategory} trackEventHasSeenOfferOnce={jest.fn()} />
+      ),
+      {
+        theme: { isDesktopViewport: isDesktopViewport ?? false },
+      }
+    )
+  }
 })
-
-type RenderOfferBodyType = Partial<ComponentProps<typeof OfferBody>> & {
-  isDesktopViewport?: boolean
-}
-
-function renderOfferBody({
-  offer = offerResponseSnap,
-  subcategory = mockSubcategory,
-  isDesktopViewport,
-}: RenderOfferBodyType) {
-  render(
-    reactQueryProviderHOC(
-      <OfferBody offer={offer} subcategory={subcategory} trackEventHasSeenOfferOnce={jest.fn()} />
-    ),
-    {
-      theme: { isDesktopViewport: isDesktopViewport ?? false },
-    }
-  )
-}

src/features/offer/components/OfferContent/OfferContent.native.test.tsx

@@ -9,6 +9,7 @@ import {
   SubcategoryIdEnumv2,
 } from 'api/gen'
 import * as useGoBack from 'features/navigation/useGoBack'
+import { chroniclePreviewToChronicalCardData } from 'features/offer/adapters/chroniclePreviewToChronicleCardData'
 import * as useSimilarOffers from 'features/offer/api/useSimilarOffers'
 import { CineContentCTAID } from 'features/offer/components/OfferCine/CineContentCTA'
 import { PlaylistType } from 'features/offer/enums'
@@ -612,6 +613,45 @@ describe('<OfferContent />', () => {
         expect(screen.queryByTestId(CineContentCTAID)).not.toBeOnTheScreen()
       })
     })
+
+    describe('Chronicles section', () => {
+      it('should not display chronicles section when there are no chronicles', async () => {
+        renderOfferContent({
+          offer: {
+            ...offerResponseSnap,
+            subcategoryId: SubcategoryIdEnum.LIVRE_PAPIER,
+            chronicles: [],
+          },
+        })
+
+        await waitFor(() => expect(screen.queryByText("L'avis du book club")).not.toBeOnTheScreen())
+      })
+
+      it('should display "Voir tous les avis" button', async () => {
+        renderOfferContent({
+          offer: { ...offerResponseSnap, subcategoryId: SubcategoryIdEnum.LIVRE_PAPIER },
+        })
+        await screen.findByText("L'avis du book club")
+
+        expect(screen.getByText('Voir tous les avis')).toBeOnTheScreen()
+      })
+
+      it('should navigate to chronicles page when pressing "Voir tous les avis" button', async () => {
+        renderOfferContent({
+          offer: { ...offerResponseSnap, subcategoryId: SubcategoryIdEnum.LIVRE_PAPIER },
+        })
+
+        await user.press(await screen.findByText('Voir tous les avis'))
+
+        expect(mockNavigate).toHaveBeenNthCalledWith(1, 'Chronicles', { offerId: 116656 })
+      })
+    })
+
+    it('should display social network section', async () => {
+      renderOfferContent({})
+
+      expect(await screen.findByText('Passe le bon plan\u00a0!')).toBeOnTheScreen()
+    })
   })
 })
 
@@ -623,14 +663,18 @@ function renderOfferContent({
   offer = offerResponseSnap,
   subcategory = mockSubcategory,
   isDesktopViewport,
+  chronicles,
 }: RenderOfferContentType) {
+  const chroniclesData =
+    chronicles || offer.chronicles.map((data) => chroniclePreviewToChronicalCardData(data))
   render(
     reactQueryProviderHOC(
       <NavigationContainer>
         <OfferContent
           offer={offer}
           searchGroupList={subcategoriesDataTest.searchGroups}
           subcategory={subcategory}
+          chronicles={chroniclesData}
         />
       </NavigationContainer>
     ),