Merge pull request #1117 from InseeFr/1116-module-operation-gérer-pou…

…r-les-famille

feat: display errors when back return 500 for Operations/Families

src/packages/components/errors-bloc/errors-bloc.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { ClientSideError, GlobalClientSideErrorBloc, ErrorBloc } from './index';
+
+const mockD = {
+	errors: {
+		GlobalClientSideErrorBloc: 'A global client-side error occurred.',
+		SOME_ERROR_CODE: () => 'Error related to SOME_ERROR_CODE.',
+	},
+};
+
+describe('ClientSideError', () => {
+	it('renders error message when error is provided', () => {
+		render(
+			<ClientSideError error="<strong>Error occurred</strong>" id="error1" />,
+		);
+		screen.getByText('Error occurred');
+	});
+
+	it('does not render anything when error is not provided', () => {
+		render(<ClientSideError id="error1" />);
+		screen.queryByText('Error occurred');
+	});
+});
+
+describe('GlobalClientSideErrorBloc', () => {
+	it('renders global error message when clientSideErrors are provided', () => {
+		render(
+			<GlobalClientSideErrorBloc clientSideErrors={['error1']} D={mockD} />,
+		);
+		const errorElement = screen.getByRole('alert');
+		expect(errorElement).toHaveTextContent(
+			'A global client-side error occurred.',
+		);
+	});
+
+	it('does not render anything when clientSideErrors is undefined', () => {
+		render(<GlobalClientSideErrorBloc D={mockD} />);
+		const errorElement = screen.queryByRole('alert');
+		expect(errorElement).toBeNull();
+	});
+
+	it('does not render anything when clientSideErrors is an empty array', () => {
+		render(<GlobalClientSideErrorBloc clientSideErrors={[]} D={mockD} />);
+		const errorElement = screen.queryByRole('alert');
+		expect(errorElement).toBeNull();
+	});
+});
+
+describe('ErrorBloc', () => {
+	it('renders formatted errors for an array of error messages', () => {
+		const errors = [
+			JSON.stringify({ code: 'SOME_ERROR_CODE' }),
+			JSON.stringify({ status: 500 }),
+			'Plain error message',
+		];
+		render(<ErrorBloc error={errors} D={mockD} />);
+
+		screen.getByText('Error related to SOME_ERROR_CODE.');
+		screen.getByText(
+			'An error has occurred. Please contact the RMéS administration team and provide them with the following message: {"status":500}',
+		);
+		screen.getByText('Plain error message');
+	});
+
+	it('renders a single error message when error is a string', () => {
+		render(<ErrorBloc error="Plain error message" D={mockD} />);
+		screen.getByText('Plain error message');
+	});
+
+	it('renders fallback message when JSON parsing fails', () => {
+		const invalidError = 'Invalid JSON';
+		render(<ErrorBloc error={[invalidError]} D={mockD} />);
+		screen.getByText('Invalid JSON');
+	});
+});

src/packages/components/errors-bloc/index.tsx

@@ -1,3 +1,4 @@
+import NewDictionnary from '../../i18n';
 import './errors-bloc.css';
 
 export const ClientSideError = ({
@@ -55,6 +56,8 @@ export const ErrorBloc = ({
 				errorMsg = D.errors[parsedError.code](parsedError);
 			} else if (parsedError.message && D.errors[parsedError.message]) {
 				errorMsg = D.errors[parsedError.message](parsedError);
+			} else if (parsedError.status === 500) {
+				errorMsg = NewDictionnary.errors.serversideErrors['500'](e);
 			} else {
 				errorMsg = parsedError.message;
 			}
@@ -63,7 +66,6 @@ export const ErrorBloc = ({
 		}
 		return errorMsg;
 	});
-
 	return (
 		<>
 			{formattedErrors.map((e, index) => (

src/packages/i18n.ts

@@ -50,6 +50,14 @@ const dictionary = {
 		},
 	},
 	errors: {
+		serversideErrors: {
+			500: {
+				fr: (error: string) =>
+					`Une erreur s'est produite. Veuillez contacter l'équipe d'administration RMéS en lui communiquant le message suivant: ${error}`,
+				en: (error: string) =>
+					`An error has occurred. Please contact the RMéS administration team and provide them with the following message: ${error}`,
+			},
+		},
 		mandatoryProperty: {
 			fr: (propertyName: string) =>
 				`La propriété <strong>${propertyName}</strong> est obligatoire.`,

src/packages/modules-operations/families/visualization/index.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 
 import { CheckSecondLang } from '@components/check-second-lang';
 import { ErrorBloc } from '@components/errors-bloc';
-import { Loading } from '@components/loading';
+import { Loading, Publishing } from '@components/loading';
 import { PageTitleBlock } from '@components/page-title-block';
 
 import { OperationsApi } from '@sdk/operations-api';
@@ -39,7 +39,7 @@ export const Component = () => {
 	}, [family, id]);
 
 	if (!family) return <Loading />;
-	if (publishing) return <Loading text="publishing" />;
+	if (publishing) return <Publishing />;
 
 	return (
 		<div className="container">