@inseefr/lunatic 3.4.17 → 3.4.19

package/src/components/shared/utils/getCharactersCountId.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { getCharactersCountId } from './getCharactersCountId';
+
+describe('getCharacterCountId', () => {
+	it('should return the correct ID when maxLength is provided', () => {
+		expect(getCharactersCountId('test-id', 100)).toBe(
+			'characters-count-test-id'
+		);
+	});
+
+	it('should return undefined when maxLength is not provided', () => {
+		expect(getCharactersCountId('test-id')).toBeUndefined();
+	});
+});

package/src/components/shared/utils/getCharactersCountId.ts

@@ -0,0 +1,6 @@
+/**
+ * Get the correct id for characters count div, used for both input and textarea.
+ */
+export function getCharactersCountId(id: string, maxLength?: number) {
+	return maxLength ? `characters-count-${id}` : undefined;
+}

package/src/css/components/Input.scss

@@ -43,3 +43,13 @@
 		}
 	}
 }
+
+.characters-count {
+	display: block;
+	font-size: 12px;
+	padding-top: 0.3rem;
+}
+
+.max-length-reached {
+	color: red;
+}

package/src/use-lunatic/hooks/use-page-has-response.test.ts

@@ -156,3 +156,45 @@ describe('usePageHasResponse', () => {
 		expect(result.current()).toBeTruthy();
 	});
 });
+
+it('should be true for a loop component with values', () => {
+	const mockExecuteExpression = vi.fn();
+	mockExecuteExpression.mockReturnValueOnce('my value');
+
+	const values = {
+		VOTREPRENO: ['Alice', 'Bob', 'Charlie'],
+		VOTREAGE: [22, 30, 40],
+	};
+
+	const components = [
+		{
+			...defaultComponentValues,
+			componentType: 'Loop',
+			components: [
+				{
+					...defaultComponentValues,
+					componentType: 'Question',
+					components: [
+						{
+							...defaultComponentValues,
+							componentType: 'Input',
+							response: { name: 'VOTREPRENO' },
+						},
+						{
+							...defaultComponentValues,
+							componentType: 'InputNumber',
+							response: { name: 'VOTREAGE' },
+						},
+					],
+				},
+			],
+			value: values,
+		},
+	] as any as LunaticComponentProps[];
+
+	const { result } = renderHook(() =>
+		usePageHasResponse(components, mockExecuteExpression)
+	);
+
+	expect(result.current()).toBeTruthy();
+});

package/src/use-lunatic/hooks/use-page-has-response.ts

@@ -60,7 +60,7 @@ function hasOneResponse(
 			return !isSubComponentsEmpty(childrenComponent, executeExpression);
 		}
 
-		// We found a value in one of the root component
+		// We found a value in one of the root component. Used for Loop
 		if ('value' in component && !isEmpty(component.value)) {
 			return true;
 		}

package/src/use-lunatic/props/propValue.spec.ts

@@ -25,7 +25,7 @@ describe('fillComponentValue', () => {
 		);
 	};
 
-	describe('response', () => {
+	describe('single response', () => {
 		const component = {
 			response: { name: 'PRENOM' },
 		} as LunaticComponentDefinition<'Input'>;
@@ -44,7 +44,7 @@ describe('fillComponentValue', () => {
 			);
 		});
 	});
-	describe('responses', () => {
+	describe('multiple responses', () => {
 		const component = {
 			responses: times(3, (k) => ({
 				response: { name: `NAME${k}` },
@@ -64,4 +64,55 @@ describe('fillComponentValue', () => {
 			});
 		});
 	});
+
+	describe('Loop component with nested components', () => {
+		const loopComponent = {
+			id: 'm7j9kwro',
+			componentType: 'Loop',
+			components: [
+				{
+					id: 'm7j9iem8',
+					componentType: 'Sequence',
+				},
+				{
+					id: 'question-m7j9q1ep',
+					componentType: 'Question',
+					components: [
+						{
+							id: 'm7j9q1ep',
+							componentType: 'Input',
+							response: { name: 'VOTREPRENO' },
+						},
+					],
+				},
+				{
+					id: 'question-m7jb81xh',
+					componentType: 'Question',
+					components: [
+						{
+							id: 'm7jb81xh',
+							componentType: 'InputNumber',
+							response: { name: 'VOTREAGE' },
+						},
+					],
+				},
+			],
+		} as LunaticComponentDefinition;
+
+		it('should correctly extract values from nested responses as arrays', () => {
+			const values = {
+				VOTREPRENO: ['Alice', 'Bob', 'Charlie'],
+				VOTREAGE: [22, 30, 40],
+			};
+
+			expectFilledComponent(loopComponent, values).toEqual(values);
+		});
+
+		it('should return null for missing responses', () => {
+			expectFilledComponent(loopComponent).toEqual({
+				VOTREPRENO: null,
+				VOTREAGE: null,
+			});
+		});
+	});
 });

package/src/use-lunatic/props/propValue.ts

@@ -29,12 +29,27 @@ export function getValueProp(
 	}
 	// For loop, value will be a map of child component values
 	if ('components' in component) {
-		return Object.fromEntries(
-			component.components
-				.map((c) => ('response' in c ? c.response.name : null))
-				.filter((name) => name !== null)
-				.map((name) => [name, args.variables.get(name!)])
-		);
+		return getChildResponseValues(component.components, args.variables);
 	}
 	return null;
 }
+
+/**
+ * Get the values of every child components recursively.
+ */
+function getChildResponseValues(
+	components: LunaticComponentDefinition[],
+	variables: LunaticVariablesStore
+): Record<string, unknown> {
+	return Object.fromEntries(
+		components.flatMap((c) => {
+			if ('response' in c) {
+				return [[c.response.name, variables.get(c.response.name)]];
+			}
+			if ('components' in c) {
+				return Object.entries(getChildResponseValues(c.components, variables));
+			}
+			return [];
+		})
+	);
+}