fix: solve structure component display

src/packages/components/contributors/contributors.tsx

@@ -7,7 +7,7 @@ import { Select } from '../select-rmes';
 export const ContributorsVisualisation = ({
 	contributors,
 }: Readonly<{
-	contributors: string[];
+	contributors: string[] | string;
 }>) => {
 	return (
 		<>

src/packages/model/structures/Structure.ts

@@ -15,8 +15,8 @@ export type Structure = {
 	disseminationStatus: string;
 	creator: string;
 	identifiant: string;
-	created: string | Date;
-	modified: string | Date;
+	created: string;
+	modified: string;
 	contributor: string[] | string;
 	validationState: ValidationState;
 };

src/packages/modules-structures/visualization/components/components-panel.spec.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ComponentsPanel } from './components-panel';
+import { getFormattedCodeList } from '../../apis';
+import { ConceptsApi } from '../../../sdk';
+import { CodesListPanel } from '../../components/codes-list-panel/codes-list-panel';
+import { StructureComponentsSelector } from '../../components/structure-component-selector';
+
+jest.mock('../../components/codes-list-panel/codes-list-panel', () => ({
+	CodesListPanel: jest.fn(() => (
+		<div data-testid="codes-list-panel">CodesListPanel Mock</div>
+	)),
+}));
+
+jest.mock('../../components/structure-component-selector', () => ({
+	StructureComponentsSelector: jest.fn(() => (
+		<div data-testid="codes-list-panel">Structure Component Selector Mock</div>
+	)),
+}));
+
+jest.mock('../../components/component-specification-modal/index', () => ({
+	ComponentSpecificationModal: jest.fn(() => (
+		<div data-testid="component-specification-modal">
+			ComponentSpecificationModal Mock
+		</div>
+	)),
+}));
+
+jest.mock('../../apis', () => ({
+	getFormattedCodeList: jest.fn(),
+}));
+
+jest.mock('../../../sdk', () => ({
+	ConceptsApi: {
+		getConceptList: jest.fn(),
+	},
+}));
+
+describe('ComponentsPanel', () => {
+	beforeEach(() => {
+		// Mock des données
+		(ConceptsApi.getConceptList as jest.Mock).mockResolvedValue([]);
+		(getFormattedCodeList as jest.Mock).mockResolvedValue([]);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	fit('should render StructureComponentsSelector and CodesListPanel', async () => {
+		render(<ComponentsPanel componentDefinitions={[]} />);
+
+		expect((StructureComponentsSelector as jest.Mock).mock.calls).toHaveLength(
+			1
+		);
+		expect((CodesListPanel as jest.Mock).mock.calls).toHaveLength(1);
+	});
+});

src/packages/modules-structures/visualization/components/index.tsx → src/packages/modules-structures/visualization/components/components-panel.tsx

@@ -8,7 +8,7 @@ import { ConceptsApi } from '../../../sdk';
 import { Component } from '../../../model/structures/Component';
 import { CodesList, CodesLists } from '../../../model/CodesList';
 
-const Components = ({ componentDefinitions = [] }) => {
+export const ComponentsPanel = ({ componentDefinitions = [] }) => {
 	const [concepts, setConcepts] = useState([]);
 	const [codesLists, setCodesLists] = useState<CodesLists>([]);
 	const [modalOpened, setModalOpened] = useState(false);
@@ -32,12 +32,9 @@ const Components = ({ componentDefinitions = [] }) => {
 		setModalOpened(true);
 	}, []);
 
-	if (!selectedComponent) {
-		return null;
-	}
 	return (
 		<div className="row text-left">
-			{modalOpened && (
+			{modalOpened && selectedComponent && (
 				<ComponentSpecificationModal
 					onClose={() => setModalOpened(false)}
 					selectedComponent={selectedComponent}
@@ -68,5 +65,3 @@ const Components = ({ componentDefinitions = [] }) => {
 		</div>
 	);
 };
-
-export default Components;

src/packages/modules-structures/visualization/components/descriptions-panel.spec.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DescriptionsPanel } from './descriptions-panel';
+import { D1, D2 } from '../../../deprecated-locales';
+
+// Mock de useSecondLang
+jest.mock('../../../redux/second-lang', () => ({
+	useSecondLang: jest.fn(),
+}));
+
+describe('DescriptionsPanel', () => {
+	const mockDescriptionLg1 = 'Description in first language';
+	const mockDescriptionLg2 = 'Description in second language';
+	const mockUseSecondLang = jest.requireMock(
+		'../../../redux/second-lang'
+	).useSecondLang;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should display the first language description when secondLang is false', () => {
+		mockUseSecondLang.mockReturnValue(false);
+
+		render(
+			<DescriptionsPanel
+				descriptionLg1={mockDescriptionLg1}
+				descriptionLg2={mockDescriptionLg2}
+			/>
+		);
+
+		const titleLg1 = screen.getByText(D1.descriptionTitle);
+		const descriptionLg1 = screen.getByText(mockDescriptionLg1);
+
+		expect(titleLg1.innerHTML).toContain(D1.descriptionTitle);
+		expect(descriptionLg1.innerHTML).toContain(mockDescriptionLg1);
+
+		expect(screen.queryByText(mockDescriptionLg2)).toBeNull();
+	});
+
+	fit('should display both descriptions when secondLang is true', () => {
+		mockUseSecondLang.mockReturnValue(true);
+
+		render(
+			<DescriptionsPanel
+				descriptionLg1={mockDescriptionLg1}
+				descriptionLg2={mockDescriptionLg2}
+			/>
+		);
+
+		screen.getByText(mockDescriptionLg1);
+		screen.getByText(mockDescriptionLg2);
+	});
+});

src/packages/modules-structures/visualization/components/descriptions-panel.tsx

@@ -0,0 +1,34 @@
+import { Note } from '@inseefr/wilco';
+import { D1, D2 } from '../../../deprecated-locales';
+import { Row } from '../../../components';
+import { useSecondLang } from '../../../redux/second-lang';
+
+type DescriptionsPanelTypes = {
+	descriptionLg1: string;
+	descriptionLg2: string;
+};
+export const DescriptionsPanel = ({
+	descriptionLg1,
+	descriptionLg2,
+}: Readonly<DescriptionsPanelTypes>) => {
+	const secondLang = useSecondLang();
+
+	return (
+		<Row>
+			<Note
+				title={D1.descriptionTitle}
+				text={descriptionLg1}
+				alone={!secondLang}
+				allowEmpty={true}
+			/>
+			{secondLang && (
+				<Note
+					title={D2.descriptionTitle}
+					text={descriptionLg2}
+					alone={false}
+					allowEmpty={true}
+				/>
+			)}
+		</Row>
+	);
+};

src/packages/modules-structures/visualization/components/global-informations-panel.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { GlobalInformationsPanel } from './global-informations-panel';
+import { Structure } from '../../../model/structures/Structure';
+
+describe('GlobalInformationsPanel', () => {
+	const mockStructure: Structure = {
+		identifiant: '12345',
+		created: '2022-01-01',
+		modified: '2022-02-01',
+		creator: 'STAMP CREATOR',
+		contributor: ['STAMP CONTRIBUTOR'],
+		disseminationStatus:
+			'http:/id.insee.fr/codes/base/statutDiffusion/PublicGenerique',
+	} as Structure;
+
+	it('should render the structure information correctly', () => {
+		render(<GlobalInformationsPanel structure={mockStructure} />);
+
+		screen.getByText(/12345/);
+		screen.getByText(/Creation date : 01\/01\/2022/);
+		screen.getByText(/Modification date : 02\/01\/2022/);
+		screen.getByText(/Publication status : Temporary, never published/);
+		screen.getByText(/Creator : STAMP CREATOR/);
+		screen.getByText(/Contributor :/);
+		screen.getByText(/STAMP CONTRIBUTOR/);
+		screen.getByText(/Dissemination status : Public generic/);
+	});
+});

src/packages/modules-structures/visualization/components/global-informations-panel.tsx

@@ -0,0 +1,54 @@
+import { Structure } from '../../../model/structures/Structure';
+import { Note } from '@inseefr/wilco';
+import { D1 } from '../../../deprecated-locales';
+import {
+	ContributorsVisualisation,
+	CreationUpdateItems,
+	DisseminationStatusVisualisation,
+	PublicationFemale,
+	Row,
+} from '../../../components';
+import D from '../../i18n/build-dictionary';
+
+type GlobalInformationsPanelTypes = {
+	structure: Structure;
+};
+
+export const GlobalInformationsPanel = ({
+	structure,
+}: GlobalInformationsPanelTypes) => {
+	return (
+		<Row>
+			<Note
+				text={
+					<ul>
+						<li>
+							{D1.idTitle} : {structure.identifiant}
+						</li>
+						<CreationUpdateItems
+							creation={structure.created}
+							update={structure.modified}
+						/>
+						<li>
+							{D.componentValididationStatusTitle} :{' '}
+							<PublicationFemale object={structure} />
+						</li>
+						<li>
+							{D.creator} : {structure.creator}
+						</li>
+						<li>
+							<ContributorsVisualisation contributors={structure.contributor} />
+						</li>
+						<li>
+							<DisseminationStatusVisualisation
+								disseminationStatus={structure.disseminationStatus}
+							/>
+						</li>
+					</ul>
+				}
+				title={D1.globalInformationsTitle}
+				alone={true}
+			/>
+		</Row>
+	);
+};

src/packages/modules-structures/visualization/index.spec.tsx

@@ -3,8 +3,22 @@ import { Provider } from 'react-redux';
 import configureStore from '../../redux/configure-store';
 import { renderWithRouter } from '../../tests-utils/render';
 import { Structure } from '../../model/structures/Structure';
+import React from 'react';
+import { DescriptionsPanel } from './components/descriptions-panel';
+import { GlobalInformationsPanel } from './components/global-informations-panel';
+import { ComponentsPanel } from './components/components-panel';
 
-jest.mock('./components');
+jest.mock('./components/global-informations-panel', () => ({
+	GlobalInformationsPanel: jest.fn(() => <div></div>),
+}));
+
+jest.mock('./components/descriptions-panel', () => ({
+	DescriptionsPanel: jest.fn(() => <div></div>),
+}));
+
+jest.mock('./components/components-panel', () => ({
+	ComponentsPanel: jest.fn(() => <div></div>),
+}));
 
 const store = configureStore({
 	users: {
@@ -20,9 +34,6 @@ const store = configureStore({
 			},
 		},
 	},
-	stampList: {
-		results: [],
-	},
 });
 
 describe('<StructureView />', () => {
@@ -31,7 +42,6 @@ describe('<StructureView />', () => {
 			<Provider store={store}>
 				<StructureView
 					publish={jest.fn()}
-					secondLang={false}
 					structure={
 						{
 							labelLg1: 'labelLg1',
@@ -43,47 +53,29 @@ describe('<StructureView />', () => {
 
 		expect(container.querySelector('h2')!.innerHTML).toEqual('labelLg1');
 	});
-	it('should display the general informations block', () => {
-		const { container } = renderWithRouter(
+	it('should call sub components properly', () => {
+		renderWithRouter(
 			<Provider store={store}>
 				<StructureView
 					publish={jest.fn()}
-					secondLang={false}
 					structure={
 						{
-							identifiant: '1234',
-							created: new Date('2020-01-01'),
-							modified: new Date('2020-01-01'),
-							validationState: 'Validated',
-							contributor: ['STAMP CONTRIBUTOR'],
-							creator: 'STAMP CREATOR',
-							disseminationStatus:
-								'http:/id.insee.fr/codes/base/statutDiffusion/PublicGenerique',
+							labelLg1: 'labelLg1',
+							descriptionLg1: 'descriptionLg1',
+							descriptionLg2: 'descriptionLg2',
 						} as Structure
 					}
 				></StructureView>
 			</Provider>
 		);
-		expect(container.querySelector('ul li:nth-child(1)')!.innerHTML).toContain(
-			'1234'
-		);
-		expect(container.querySelector('ul li:nth-child(2)')!.innerHTML).toContain(
-			'Creation date : 01/01/2020'
-		);
-		expect(container.querySelector('ul li:nth-child(3)')!.innerHTML).toContain(
-			'Modification date : 01/01/2020'
-		);
-		expect(container.querySelector('ul li:nth-child(4)')!.innerHTML).toContain(
-			'Publication status : Published'
-		);
-		expect(container.querySelector('ul li:nth-child(5)')!.innerHTML).toContain(
-			'Creator : STAMP CREATOR'
-		);
-		expect(container.querySelector('ul li:nth-child(6)')!.innerHTML).toContain(
-			'Contributor :<ul><li>STAMP CONTRIBUTOR</li></ul>'
-		);
-		expect(container.querySelector('ul li:nth-child(7)')!.innerHTML).toContain(
-			'Dissemination status : Public generic'
-		);
+		expect((GlobalInformationsPanel as jest.Mock).mock.calls).toHaveLength(1);
+		expect((DescriptionsPanel as jest.Mock).mock.calls).toHaveLength(1);
+		expect(
+			(DescriptionsPanel as jest.Mock).mock.calls[0][0].descriptionLg1
+		).toBe('descriptionLg1');
+		expect(
+			(DescriptionsPanel as jest.Mock).mock.calls[0][0].descriptionLg2
+		).toBe('descriptionLg2');
+		expect((ComponentsPanel as jest.Mock).mock.calls).toHaveLength(1);
 	});
 });