From cd325f9357f5eee51e388de1f30b6d0fc2a05075 Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Wed, 7 Aug 2024 10:10:52 +0200
Subject: [PATCH] Use 3 options instead of 2

---
 src/components/Dropdown/Dropdown.stories.tsx  |  1 +
 src/components/Dropdown/Dropdown.test.tsx     |  4 +-
 .../__snapshots__/Dropdown.test.tsx.snap      | 48 +++++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index ba26085b..8b0ca71e 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -48,6 +48,7 @@ export default {
     values: [
       ["Option1", "Option 1"],
       ["Option2", "Option 2"],
+      ["Option3", "Option 3"],
     ],
   },
 } satisfies Meta<ComponentProps<typeof Dropdown>>;
diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx
index 78631ea3..6005a6a0 100644
--- a/src/components/Dropdown/Dropdown.test.tsx
+++ b/src/components/Dropdown/Dropdown.test.tsx
@@ -90,12 +90,12 @@ describe("Dropdown", () => {
     expect(getByRole("option", { name: "Option 1" })).toHaveFocus();
 
     await act(async () => userEvent.keyboard("{End}"));
-    expect(getByRole("option", { name: "Option 2" })).toHaveFocus();
+    expect(getByRole("option", { name: "Option 3" })).toHaveFocus();
 
     await act(async () => userEvent.keyboard("{Enter}"));
 
     await waitFor(() => {
-      expect(getByRole("combobox")).toHaveTextContent("Option 2");
+      expect(getByRole("combobox")).toHaveTextContent("Option 3");
       expect(getByRole("combobox")).toHaveAttribute("aria-expanded", "false");
     });
   });
diff --git a/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index ecbbcf0f..95dbd697 100644
--- a/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -59,6 +59,14 @@ exports[`Dropdown > can be opened 1`] = `
           Option 2
            
         </li>
+        <li
+          aria-selected="false"
+          role="option"
+          tabindex="0"
+        >
+          Option 3
+           
+        </li>
       </ul>
     </div>
   </div>
@@ -135,6 +143,14 @@ exports[`Dropdown > can select a value 1`] = `
             />
           </svg>
         </li>
+        <li
+          aria-selected="false"
+          role="option"
+          tabindex="0"
+        >
+          Option 3
+           
+        </li>
       </ul>
     </div>
   </div>
@@ -200,6 +216,14 @@ exports[`Dropdown > renders a Default dropdown 1`] = `
           Option 2
            
         </li>
+        <li
+          aria-selected="false"
+          role="option"
+          tabindex="0"
+        >
+          Option 3
+           
+        </li>
       </ul>
     </div>
   </div>
@@ -276,6 +300,14 @@ exports[`Dropdown > renders a dropdown with a default value  1`] = `
             />
           </svg>
         </li>
+        <li
+          aria-selected="false"
+          role="option"
+          tabindex="0"
+        >
+          Option 3
+           
+        </li>
       </ul>
     </div>
   </div>
@@ -341,6 +373,14 @@ exports[`Dropdown > renders a dropdown with a help label 1`] = `
           Option 2
            
         </li>
+        <li
+          aria-selected="false"
+          role="option"
+          tabindex="0"
+        >
+          Option 3
+           
+        </li>
       </ul>
     </div>
     <span
@@ -411,6 +451,14 @@ exports[`Dropdown > renders a dropdown with an error  1`] = `
           Option 2
            
         </li>
+        <li
+          aria-selected="false"
+          role="option"
+          tabindex="0"
+        >
+          Option 3
+           
+        </li>
       </ul>
     </div>
     <span