(PC-33638) feat(chronicle): add anchor on chronicle when see more button used

[clesausse-pass]

Link to JIRA ticket: https://passculture.atlassian.net/browse/PC-33638

Flakiness

If I had to re-run tests in the CI due to flakiness, I add the incident on Notion

Checklist

I have:

• Made sure my feature is working on web.
• Made sure my feature is working on mobile (depending on relevance : real or virtual devices)
• Written unit tests native (and web when implementation is different) for my feature.
• Added a screenshot for UI tickets or deleted the screenshot section if no UI change
• If my PR is a bugfix, I add the link of the "résolution de problème sur le bug" on Notion
• I am aware of all the best practices and respected them.

Screenshots

iOS:

Enregistrement.de.l.ecran.2025-01-30.a.13.57.04.mov

Android :

Enregistrement.de.l.ecran.2025-01-30.a.14.00.42.mov

Web mobile :

Enregistrement.de.l.ecran.2025-01-30.a.13.55.30.mov

Web desktop :

Enregistrement.de.l.ecran.2025-01-30.a.13.56.16.mov

Best Practices

Click to expand

These rules apply to files that you make changes to. If you can't respect one of these rules, be sure to explain why with a comment. If you consider correcting the issue is too time consuming/complex: create a ticket. Link the ticket in the code.

• In the production code: remove type assertions with as (type assertions are removed at compile-time, there is no runtime checking associated with a type assertion. There won’t be an exception or null generated if the type assertion is wrong). In certain cases as const is acceptable (for example when defining readonly arrays/objects). Using as in tests is tolerable.
• Remove bypass type checking with any (when you want to accept anything because you will be blindly passing it through without interacting with it, you can use unknown). Using any in tests is tolerable.
• Remove non-null assertion operators (just like other type assertions, this doesn’t change the runtime behavior of your code, so it’s important to only use ! when you know that the value can’t be null or undefined).
• Remove all @ts-expect-error and @eslint-disable.
• Remove all warnings, and errors that we are used to ignore (yarn test:lint, yarn test:types, yarn start:web...).
• Use gap (ViewGap) instead of <Spacer.Column />, <Spacer.Row /> or <Spacer.Flex />.
• Don't add new "alias hooks" (hooks created to group other hooks together). When adding new logic, this hook will progressively become more complex and harder to maintain.
• Remove logic from components that should be dumb.

Test specific:

• Avoid mocking internal parts of our code. Ideally, mock only external calls.
• When you see a local variable that is over-written in every test, mock it.
• Prefer user to fireEvent.
• When mocking feature flags, use setFeatureFlags. If not possible, mention which one(s) you want to mock in a comment (example: jest.spyOn(useFeatureFlagAPI, 'useFeatureFlag').mockReturnValue(true) // WIP_NEW_OFFER_TILE in renderPassPlaylist.tsx )
• In component tests, replace await act(async () => {}) and await waitFor(/* ... */) by await screen.findBySomething().
• In hooks tests, use act by default and waitFor as a last resort.
• Make a snapshot test for pages and modals ONLY.
• Make a web specific snapshot when your web page/modal is specific to the web.
• Make an a11y test for web pages.

Advice:

• Use TDD
• Use Storybook
• Use pair programming/mobs

[clesausse-pass]

L'un ne va pas sans l'autre mais shouldShowSeeMoreButton est plus clair que si on avait juste offerId, qu'en pensez-vous ?

[mmeissonnier-pass]

Effectivement, si l'affichage de ton bouton dépend uniquement du fait d'avoir une offre, il n'y a aucune utilité à utiliser une autre propre pour faire la même chose. Mais est-ce que tu as vraiment besoin de ce test finalement ? Est-ce qu'on va avoir le cas où certaines chroniques auront des liens et pas d'autres ?

[mmeissonnier-pass]

Tu peux aussi écrire PropsWithChildren<ChronicleCardData & {...}>

[mmeissonnier-pass]

Effectivement, si l'affichage de ton bouton dépend uniquement du fait d'avoir une offre, il n'y a aucune utilité à utiliser une autre propre pour faire la même chose. Mais est-ce que tu as vraiment besoin de ce test finalement ? Est-ce qu'on va avoir le cas où certaines chroniques auront des liens et pas d'autres ?

[mmeissonnier-pass]

Comme vu ensemble, dans le composant ChronicleCardListBase plutôt exposer une prop onShowMore optionnelle. si la prop est définie on sait qu'on doit afficher le bouton voir plus.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
96.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mmeissonnier-pass]