add tests for sort picker and update select tests

frontend/app/components/select/select.spec.tsx

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import { fireEvent, waitFor } from '@testing-library/preact';
 import { h } from 'preact';
 import { render } from 'tests/utils';
 import { Select } from './select';
@@ -29,18 +30,31 @@ const items = [
 describe('<Select/>', () => {
   it('should has static class names', () => {
     const { container } = render(<Select items={items} selected={items[0]} />);
+    const selectElement = container.querySelector('.select-element');
 
     expect(container.querySelector('.select')).toBeInTheDocument();
     expect(container.querySelector('.select-arrow')).toBeInTheDocument();
-    expect(container.querySelector('.select-element')).toBeInTheDocument();
+    expect(selectElement).toBeInTheDocument();
+    fireEvent.focus(selectElement as HTMLSelectElement);
+    expect(container.querySelector('.select_focused')).toBeInTheDocument();
   });
 
   it('should render selected item', () => {
     const { container, getAllByText } = render(<Select items={items} selected={items[0]} />);
-    const selectedOption = container.querySelectorAll('option')[0];
+    const selectedOption = container.querySelector('option');
 
     expect(getAllByText(items[0].label)).toHaveLength(2);
-    expect(selectedOption.selected).toBeTruthy();
-    expect(selectedOption.textContent).toBe(items[0].label);
+    expect(selectedOption).toBeInTheDocument();
+    expect(selectedOption?.selected).toBeTruthy();
+    expect(selectedOption?.textContent).toBe(items[0].label);
+  });
+
+  it('should highlight selet on focus', async () => {
+    const { container } = render(<Select items={items} selected={items[0]} />);
+    const select = container.querySelector('select');
+
+    expect(container.querySelector('select')).toBeInTheDocument();
+    fireEvent.focus(select as HTMLSelectElement);
+    expect(container.querySelector('.rootFocused')).toBeInTheDocument();
   });
 });

frontend/app/components/select/select.tsx

@@ -12,21 +12,20 @@ type Item = {
 type Props = {
   items: Item[];
   selected: Item;
-  onChange?: JSX.GenericEventHandler<HTMLSelectElement>;
-};
+} & Omit<JSX.HTMLAttributes<HTMLSelectElement>, 'className' | 'onFocus' | 'onBlur' | 'selected'>;
 
-export function Select({ items, selected, onChange }: Props) {
+export function Select({ items, selected, ...props }: Props) {
   const [focus, setFocus] = useState(false);
 
   return (
-    <span className={clsx('select', styles.root, focus && styles.rootFocused)}>
+    <span className={clsx('select', styles.root, { [styles.rootFocused]: focus, select_focused: focus })}>
       {selected.label}
       <Arrow className={clsx('select-arrow', styles.arrow)} />
       <select
+        {...props}
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
         className={clsx('select-element', styles.select)}
-        onChange={onChange}
       >
         {items.map((i) => (
           <option key={i.value} value={i.value} selected={selected.value === i.value}>