fix: Trigger les services tiers à la navigation

src/pages/_app.page.test.tsx

@@ -8,9 +8,17 @@ import React from 'react';
 
 import { createMockRouter, mockUseRouter } from '~/client/components/useRouter.mock';
 import { mockUUID } from '~/client/components/window.mock';
+import { Dependencies } from '~/client/dependencies.container';
+import { aCookiesService } from '~/client/services/cookies/cookies.service.fixture';
 
 import App from './_app.page';
 
+
+const mockDependencies: Partial<Dependencies> = {
+	cookiesService: aCookiesService(),
+};
+jest.mock('~/client/dependencies.container', () => (() => mockDependencies));
+
 describe('<App />', () => {
 	beforeAll(() => {
 		mockUUID();
@@ -31,4 +39,39 @@ describe('<App />', () => {
 		const cible = screen.getByText('Cible');
 		await waitFor(() => expect(cible).toHaveFocus());
 	});
+	describe('Trigger services tiers', () => {
+		it('ne trigger pas les cookies à l’arrivée sur la page', () => {
+			// NOTE (GAFI 26-11-2024): Les services sont automatiquement triggered au chargement de tarteaucitron
+			const router = createMockRouter() as Router;
+			mockUseRouter({});
+			mockDependencies.cookiesService = aCookiesService({ triggerServices: jest.fn() });
+			const Component = Object.assign(
+				function Component() {
+					return null;
+				},
+				{ getLayout: (page: React.ReactElement) => <>{page}</> },
+			);
+
+			render(<App pageProps={{}} Component={Component} router={router} />);
+
+			expect(mockDependencies.cookiesService.triggerServices).not.toHaveBeenCalled();
+		});
+		it('trigger les cookies au changement de page', () => {
+			mockDependencies.cookiesService = aCookiesService({ triggerServices: jest.fn() });
+			const router = createMockRouter() as Router;
+			mockUseRouter({ asPath: '/page-1' });
+			const Component = Object.assign(
+				function Component() {
+					return null;
+				},
+				{ getLayout: (page: React.ReactElement) => <>{page}</> },
+			);
+			const { rerender } = render(<App pageProps={{}} Component={Component} router={router} />);
+
+			mockUseRouter({ asPath: '/page-2' });
+			rerender(<App pageProps={{}} Component={Component} router={router} />);
+
+			expect(mockDependencies.cookiesService.triggerServices).toHaveBeenCalledTimes(1);
+		});
+	});
 });

src/pages/_app.page.tsx

@@ -4,14 +4,15 @@ import { NextPage } from 'next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { ReactElement, ReactNode, useEffect, useMemo } from 'react';
+import React, { ReactElement, ReactNode, useEffect, useMemo, useRef } from 'react';
 
 import ErrorServer from '~/client/components/layouts/Error/ErrorServer';
 import { Layout } from '~/client/components/layouts/Layout';
 import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
 import dependenciesContainer from '~/client/dependencies.container';
 import usePageHistory from '~/client/hooks/usePageHistory';
 import useSessionId from '~/client/hooks/useSessionId';
+import { CookiesService } from '~/client/services/cookies/cookies.service';
 
 export type NextPageWithLayout<P = object> = NextPage<P, P> & {
 	getLayout?: (page: ReactElement) => ReactNode;
@@ -21,6 +22,19 @@ type AppPropsWithLayout = AppProps & {
 	Component: NextPageWithLayout;
 }
 
+function useTriggerServicesOnNavigation(cookiesService: CookiesService) {
+	const router = useRouter();
+
+	const previousPath = useRef(router.asPath);
+	useEffect(function triggerAnalyticsServices() {
+		if (previousPath.current === router.asPath) {
+			return;
+		}
+		cookiesService.triggerServices();
+		previousPath.current = router.asPath;
+	}, [cookiesService, router.asPath]);
+}
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
 	const sessionId = useSessionId();
 
@@ -33,13 +47,14 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
 	const router = useRouter();
 
 	usePageHistory();
+	useTriggerServicesOnNavigation(dependenciesContainerInstance.cookiesService);
 
-	useEffect(() => {
+	useEffect(function focusAnchor() {
 		const [/* full path */, targetId] = router.asPath.match(/^[^#]*#(.+)$/) ?? [];
 		if (targetId) {
 			document.getElementById(targetId)?.focus();
 		}
-	}, [router.asPath, sessionId]);
+	}, [router.asPath]);
 
 	const getLayout = Component.getLayout ?? defaultLayout;
 	return (
@@ -50,17 +65,13 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
 					content="width=device-width, height=device-height, initial-scale=1, viewport-fit=cover, minimum-scale=1.0" />
 				<meta name="description" content="Toutes les solutions pour l‘avenir des jeunes" />
 			</Head>
-			{
-				dependenciesContainerInstance && (
-					<DependenciesProvider {...dependenciesContainerInstance}>
-						{getLayout(
-							pageProps.error
-								? <ErrorServer error={pageProps.error} />
-								: <Component {...pageProps} />,
-						)}
-					</DependenciesProvider>
-				)
-			}
+			<DependenciesProvider {...dependenciesContainerInstance}>
+				{getLayout(
+					pageProps.error
+						? <ErrorServer error={pageProps.error} />
+						: <Component {...pageProps} />,
+				)}
+			</DependenciesProvider>
 		</>
 	);
 }