Use 3 options instead of 2

element-hq · Aug 7, 2024 · cd325f9 · cd325f9
1 parent d6f7bb9
commit cd325f9
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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