fix selected item

umputun · Sep 13, 2022 · f1e72c1 · f1e72c1
1 parent e77dc33
commit f1e72c1
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 14 deletions.
diff --git a/frontend/apps/remark42/app/components/select/select.spec.tsx b/frontend/apps/remark42/app/components/select/select.spec.tsx
@@ -21,15 +21,11 @@ describe('<Select/>', () => {
   });
 
   it('should render selected item', () => {
-    render(<Select items={items} selected={items[0]} />);
-
-    const selectedItem = items[0];
-    const selectedOption = screen.getAllByRole<HTMLOptionElement>('option')[0];
+    const selectedIndex = 1;
+    const selectedItem = items[selectedIndex];
 
-    expect(screen.getAllByText(selectedItem.label)).toHaveLength(2);
-    expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption.selected).toBeTruthy();
-    expect(selectedOption.textContent).toBe(selectedItem.label);
+    render(<Select items={items} selected={selectedItem} />);
+    expect(screen.getAllByRole<HTMLOptionElement>('option')[selectedIndex].selected).toBeTruthy();
   });
 
   it('should highlight select on focus', async () => {

diff --git a/frontend/apps/remark42/app/components/select/select.tsx b/frontend/apps/remark42/app/components/select/select.tsx
@@ -45,12 +45,9 @@ export function Select({ items, selected, size = 'md', ...props }: Props) {
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
         className={clsx('select-element', styles.select)}
-        // wrong typings in preact lib
-        // @ts-ignore
-        selected={selectedItem.value}
       >
         {items.map((i) => (
-          <option key={i.value} value={i.value}>
+          <option key={i.value} value={i.value} selected={selectedItem.value === i.value}>
             {i.label}
           </option>
         ))}

diff --git a/frontend/apps/remark42/app/components/sort-picker.spec.tsx b/frontend/apps/remark42/app/components/sort-picker.spec.tsx
@@ -26,8 +26,7 @@ describe('<SortPicker />', () => {
 
   it('should render selected element', () => {
     render(<SortPicker />, { comments: { sort: '-active' } as StoreState['comments'] });
-    expect(screen.getAllByText('Recently updated')).toHaveLength(2);
-    expect(screen.getAllByRole('option')[0].parentElement).toHaveAttribute('selected', '-active');
+    expect(screen.getAllByText<HTMLOptionElement>('Recently updated')[1].selected).toBeTruthy();
   });
 
   it('should change selected store', async () => {