OPHJOD-286: Refactor dropdown menu component

lib/components/DropdownMenu/DropdownMenu.test.tsx

@@ -8,45 +8,45 @@ afterEach(() => {
   cleanup();
 });
 
+const options = [
+  { value: 'fi', label: 'Suomi' },
+  { value: 'sv', label: 'Svenska' },
+  { value: 'en', label: 'English' },
+];
+
 describe('Snapshot testing', () => {
   it('should render with defaults', () => {
-    const { container } = render(<DropdownMenu label="" options={[]} />);
+    const { container } = render(<DropdownMenu label="Label" options={options} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should not show label', () => {
-    const { container } = render(<DropdownMenu hideLabel={true} label="" options={[]} />);
+    const { container } = render(<DropdownMenu hideLabel={true} label="Label" options={options} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should render as disabled', () => {
-    const { container } = render(<DropdownMenu disabled={true} label="" options={[]} />);
+    const { container } = render(<DropdownMenu disabled={true} label="Label" options={options} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
 
 describe('defaultValue', () => {
-  const options = [
-    { value: 'fi', label: 'Suomi' },
-    { value: 'sv', label: 'Svenska' },
-    { value: 'en', label: 'English' },
-  ];
-
   it('should select first by default', () => {
-    render(<DropdownMenu label="" options={options} />);
+    render(<DropdownMenu label="Label" options={options} />);
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     expect((screen.getByRole('option', { name: 'Suomi' }) as HTMLOptionElement).selected).toBe(true);
   });
 
   it('should select the wanted one', () => {
-    render(<DropdownMenu label="" options={options} defaultValue="sv" />);
+    render(<DropdownMenu label="Label" options={options} defaultValue="sv" />);
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     expect((screen.getByRole('option', { name: 'Svenska' }) as HTMLOptionElement).selected).toBe(true);
     //
   });
 
   it('should still allow user to another', async () => {
-    render(<DropdownMenu label="" options={options} defaultValue="fi" />);
+    render(<DropdownMenu label="Label" options={options} defaultValue="fi" />);
     const user = userEvent.setup();
     await user.selectOptions(screen.getByRole('combobox'), 'English');
 
@@ -66,7 +66,7 @@ describe('onChange', () => {
     const mockCallback = vi.fn();
     const user = userEvent.setup();
 
-    render(<DropdownMenu label="" options={options} onChange={mockCallback} />);
+    render(<DropdownMenu label="Label" options={options} onChange={mockCallback} />);
 
     await user.selectOptions(screen.getByRole('combobox'), 'English');
     expect(mockCallback).toHaveBeenCalledTimes(1);
@@ -76,7 +76,7 @@ describe('onChange', () => {
     const mockCallback = vi.fn();
     const user = userEvent.setup();
 
-    render(<DropdownMenu label="" options={options} onChange={mockCallback} disabled={true} />);
+    render(<DropdownMenu label="Label" options={options} onChange={mockCallback} disabled={true} />);
 
     await user.selectOptions(screen.getByRole('combobox'), 'English');
     expect(mockCallback).toHaveBeenCalledTimes(0);

lib/components/DropdownMenu/DropdownMenu.tsx

@@ -43,7 +43,7 @@ export const DropdownMenu = <
       )}
       <select
         disabled={disabled}
-        id={labelId}
+        id={hideLabel ? undefined : labelId}
         aria-label={hideLabel ? label : undefined}
         className="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
         onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {

lib/components/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap

@@ -5,10 +5,25 @@ exports[`Snapshot testing > should not show label 1`] = `
   class="flex flex-row"
 >
   <select
-    aria-label=""
+    aria-label="Label"
     class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
-    id=":r1:"
-  />
+  >
+    <option
+      value="fi"
+    >
+      Suomi
+    </option>
+    <option
+      value="sv"
+    >
+      Svenska
+    </option>
+    <option
+      value="en"
+    >
+      English
+    </option>
+  </select>
 </div>
 `;
 
@@ -19,12 +34,30 @@ exports[`Snapshot testing > should render as disabled 1`] = `
   <label
     class="mr-2 self-center font-bold text-jod-black"
     for=":r2:"
-  />
+  >
+    Label
+  </label>
   <select
     class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
     disabled=""
     id=":r2:"
-  />
+  >
+    <option
+      value="fi"
+    >
+      Suomi
+    </option>
+    <option
+      value="sv"
+    >
+      Svenska
+    </option>
+    <option
+      value="en"
+    >
+      English
+    </option>
+  </select>
 </div>
 `;
 
@@ -35,10 +68,28 @@ exports[`Snapshot testing > should render with defaults 1`] = `
   <label
     class="mr-2 self-center font-bold text-jod-black"
     for=":r0:"
-  />
+  >
+    Label
+  </label>
   <select
     class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
     id=":r0:"
-  />
+  >
+    <option
+      value="fi"
+    >
+      Suomi
+    </option>
+    <option
+      value="sv"
+    >
+      Svenska
+    </option>
+    <option
+      value="en"
+    >
+      English
+    </option>
+  </select>
 </div>
 `;