From 2f9a4357f7fd61ab89277669434d0fc060bd1808 Mon Sep 17 00:00:00 2001
From: Emile Rolley <emile.rolley@tuta.io>
Date: Tue, 10 Dec 2024 15:42:46 +0100
Subject: [PATCH] fix: correctly manage multiple choices

---
 .../components/MultipleChoiceAnswer.svelte    |  18 ++-
 src/lib/components/Question.svelte            |   6 +-
 src/lib/components/Questions.svelte           |   2 +-
 tests/navigation.spec.js                      | 104 +++++++++---------
 4 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/lib/components/MultipleChoiceAnswer.svelte b/src/lib/components/MultipleChoiceAnswer.svelte
index acb6e09..9a43a5d 100644
--- a/src/lib/components/MultipleChoiceAnswer.svelte
+++ b/src/lib/components/MultipleChoiceAnswer.svelte
@@ -5,16 +5,14 @@
 	$: isSelected = group === value;
 </script>
 
-{#key value}
-	<label
-		class="border rounded px-4 py-2 shadow-sm flex items-center gap-x-2 cursor-pointer {isSelected
-			? 'bg-green-500 text-white'
-			: 'bg-white hover:bg-green-200 text-gray-700'}"
-	>
-		<input type="radio" bind:group {value} />
-		<span class="text-current"><slot /></span>
-	</label>
-{/key}
+<label
+	class="border rounded px-4 py-2 shadow-sm flex items-center gap-x-2 cursor-pointer {isSelected
+		? 'bg-green-500 text-white'
+		: 'bg-white hover:bg-green-200 text-gray-700'}"
+>
+	<input type="radio" bind:group {value} />
+	<span class="text-current"><slot /></span>
+</label>
 
 <style>
 	input[type='radio'] {
diff --git a/src/lib/components/Question.svelte b/src/lib/components/Question.svelte
index 35da640..dec5aa4 100644
--- a/src/lib/components/Question.svelte
+++ b/src/lib/components/Question.svelte
@@ -71,13 +71,13 @@
 	{:else if possibilités?.length > 0}
 		<div class="flex gap-2 mt-2 flex-wrap">
 			{#each possibilités as possibilité}
-				<MultipleChoiceAnswer value={possibilité} bind:group={value}
-					>{engine.getRule(ruleParent + ' . ' + possibilité).rawNode.titre ??
+				<MultipleChoiceAnswer value={`'${possibilité}'`} bind:group={value}
+					>{engine.getRule(rule + ' . ' + possibilité).rawNode.titre ??
 						possibilité}</MultipleChoiceAnswer
 				>
 			{/each}
 		</div>
 	{:else}
-		<NumberField bind:value unité={ruleInfos.unité} id={domId} />
+		<NumberField id={domId} unité={ruleInfos.unité} bind:value />
 	{/if}
 </div>
diff --git a/src/lib/components/Questions.svelte b/src/lib/components/Questions.svelte
index a79a2e3..ad1e2b8 100644
--- a/src/lib/components/Questions.svelte
+++ b/src/lib/components/Questions.svelte
@@ -72,7 +72,7 @@
 			€
 		</div>
 		<p class="text-gray-600 text-md -mt-7 pl-3 italic">
-			Répondez {#if questions.length === 1}à la question{:else}aux questions{/if} pour calculer l’aide
+			Répondez {#if questions.length === 1}à la question{:else}aux questions{/if} pour calculer l'aide
 			:
 		</p>
 		{#each questions as question}
diff --git a/tests/navigation.spec.js b/tests/navigation.spec.js
index be1650b..f59546e 100644
--- a/tests/navigation.spec.js
+++ b/tests/navigation.spec.js
@@ -2,18 +2,9 @@ import { test, expect } from '@playwright/test';
 
 const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:5173';
 
-test.describe('Navigation scenarios', () => {
+test.describe.parallel('Navigation scenarios', () => {
 	test('simple navigation', async ({ page }) => {
-		await page.goto(baseUrl);
-
-		await page.waitForLoadState();
-		searchAndGoTo(page, 'toulou');
-		await expect(page).toHaveURL(baseUrl + '/ville/toulouse');
-
-		// Hide evaporate animation
-		await page.addStyleTag({
-			content: '.evaporate { display: none !important; }',
-		});
+		startNavigation(page, 'toulouse');
 
 		await page.click("text=Achat d'un vélo électrique");
 		const totalAides = page.locator('text=Total des aides >> ..');
@@ -35,16 +26,7 @@ test.describe('Navigation scenarios', () => {
 	});
 
 	test('PMR scenario', async ({ page }) => {
-		await page.goto(baseUrl);
-
-		await page.waitForLoadState();
-		searchAndGoTo(page, 'toulou');
-		await expect(page).toHaveURL(baseUrl + '/ville/toulouse');
-
-		// Hide evaporate animation
-		await page.addStyleTag({
-			content: '.evaporate { display: none !important; }',
-		});
+		startNavigation(page, 'toulouse');
 
 		await page.click("text=Achat d'un vélo adapté pour PMR");
 		const totalAides = page.locator('text=Total des aides >> ..');
@@ -61,16 +43,7 @@ test.describe('Navigation scenarios', () => {
 	});
 
 	test('age scenario', async ({ page }) => {
-		await page.goto(baseUrl);
-
-		await page.waitForLoadState();
-		searchAndGoTo(page, 'toulou');
-		await expect(page).toHaveURL(baseUrl + '/ville/toulouse');
-
-		// Hide evaporate animation
-		await page.addStyleTag({
-			content: '.evaporate { display: none !important; }',
-		});
+		startNavigation(page, 'toulouse');
 
 		await page.click("text=Achat d'un vélo électrique");
 		const totalAides = page.locator('text=Total des aides >> ..');
@@ -91,6 +64,24 @@ test.describe('Navigation scenarios', () => {
 		await expect(totalAides).toHaveText('Total des aides 850 €', { useInnerText: true });
 		expect(page.getByTestId('question-demandeur-age-value-25')).toBeTruthy();
 	});
+
+	test('multiple choices scenario', async ({ page }) => {
+		startNavigation(page, 'reims');
+
+		await page.click("text=Achat d'un vélo électrique");
+		const totalAides = page.locator('text=Total des aides >> ..');
+		await expect(totalAides).toHaveText('Total des aides 850 €', { useInnerText: true });
+
+		await page.click('text=Étudiant·e');
+		await expect(totalAides).toHaveText('Total des aides 925 €', { useInnerText: true });
+
+		await page.fill('input:below(label:text("Quel est votre âge ?"))', '15');
+		expect(page.getByTestId('question-demandeur-age-value-15')).toBeTruthy();
+		await expect(totalAides).toHaveText('Total des aides 525 €', { useInnerText: true });
+
+		await page.click('text=Autre');
+		await expect(totalAides).toHaveText('Total des aides 0 €', { useInnerText: true });
+	});
 });
 
 test('Liste aides do not crash', async ({ page }) => {
@@ -131,6 +122,25 @@ test('Revenu selector', async ({ page }) => {
 	await expect(page.locator('.playwright-revenuoptions input[type=radio]')).toHaveCount(3);
 });
 
+test('New or second hand bike', async ({ page }) => {
+	await page.goto(baseUrl + '/ville/toulouse?velo=électrique');
+	expect(page.locator("text=neuf ou d'occasion ?")).toBeTruthy();
+
+	await page.goto(baseUrl + '/ville/lyon?velo=mécanique simple');
+	expect(page.locator("text=uniquement pour l'achat d'un vélo d'occasion")).toBeTruthy();
+
+	await page.goto(baseUrl + '/ville/lyon?velo=électrique');
+	expect(page.locator("text=uniquement pour l'achat d'un vélo neuf")).toBeTruthy();
+
+	await page.goto(baseUrl + '/ville/pantin?velo=mécanique simple');
+	expect(page.locator("text=pour un vélo neuf ou un vélo d'occasion")).toBeTruthy();
+});
+
+test('Text generation', async ({ page }) => {
+	await page.goto(baseUrl + '/ville/landerneau');
+	expect(page.locator("text=Malheureusement il n'existe aucune aide locale")).toBeTruthy();
+});
+
 test('Persisting answers', async ({ page }) => {
 	await page.goto(baseUrl + '/ville/lyon');
 	await page.waitForTimeout(100);
@@ -157,25 +167,6 @@ test('Persisting answers', async ({ page }) => {
 	expect(page.getByTestId('question-velo-prix-value-100')).toBeTruthy();
 });
 
-test('New or second hand bike', async ({ page }) => {
-	await page.goto(baseUrl + '/ville/toulouse?velo=électrique');
-	expect(page.locator("text=neuf ou d'occasion ?")).toBeTruthy();
-
-	await page.goto(baseUrl + '/ville/lyon?velo=mécanique simple');
-	expect(page.locator("text=uniquement pour l'achat d'un vélo d'occasion")).toBeTruthy();
-
-	await page.goto(baseUrl + '/ville/lyon?velo=électrique');
-	expect(page.locator("text=uniquement pour l'achat d'un vélo neuf")).toBeTruthy();
-
-	await page.goto(baseUrl + '/ville/pantin?velo=mécanique simple');
-	expect(page.locator("text=pour un vélo neuf ou un vélo d'occasion")).toBeTruthy();
-});
-
-test('Text generation', async ({ page }) => {
-	await page.goto(baseUrl + '/ville/landerneau');
-	expect(page.locator("text=Malheureusement il n'existe aucune aide locale")).toBeTruthy();
-});
-
 // FIXME: This test is not working although it works in the browser
 // test('Redirection from details', async ({ page }) => {
 // 	await page.goto(baseUrl + '/ville/toulouse?velo=électrique');
@@ -189,6 +180,19 @@ test('Text generation', async ({ page }) => {
 // 	expect(page.locator('text=Toulouse')).not.toBeTruthy();
 // });
 
+async function startNavigation(page, ville) {
+	await page.goto(baseUrl);
+
+	await page.waitForLoadState();
+	searchAndGoTo(page, ville);
+	await expect(page).toHaveURL(baseUrl + '/ville/' + ville);
+
+	// Hide evaporate animation
+	await page.addStyleTag({
+		content: '.evaporate { display: none !important; }',
+	});
+}
+
 async function searchAndGoTo(page, commune) {
 	await page.getByLabel('Localisation').first().fill(commune);
 	await page.click('.autocomplete-list-item:first-child');