fix tests

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

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { fireEvent } from '@testing-library/preact';
+import { fireEvent, screen, waitFor } from '@testing-library/preact';
 
 import { render } from 'tests/utils';
 import { Select } from './select';
@@ -14,32 +14,32 @@ 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(selectElement).toBeInTheDocument();
-    fireEvent.focus(selectElement as HTMLSelectElement);
-    expect(container.querySelector('.select_focused')).toBeInTheDocument();
+    render(<Select items={items} selected={items[0]} />);
+    expect(screen.getByRole('combobox')).toHaveClass('select-element');
+    expect(screen.getByTestId('select-root')).toHaveClass('select');
+    expect(screen.getByTestId('select-arrow')).toHaveClass('select-arrow');
   });
 
   it('should render selected item', () => {
-    const { container, getAllByText } = render(<Select items={items} selected={items[0]} />);
-    const selectedOption = container.querySelector('option');
+    render(<Select items={items} selected={items[0]} />);
 
-    expect(getAllByText(items[0].label)).toHaveLength(2);
+    const selectedItem = items[0];
+    const selectedOption = screen.getAllByRole<HTMLOptionElement>('option')[0];
+
+    expect(screen.getAllByText(selectedItem.label)).toHaveLength(2);
     expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption?.selected).toBeTruthy();
-    expect(selectedOption?.textContent).toBe(items[0].label);
+    expect(selectedOption.selected).toBeTruthy();
+    expect(selectedOption.textContent).toBe(selectedItem.label);
   });
 
   it('should highlight select 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();
+    render(<Select items={items} selected={items[0]} />);
+
+    fireEvent.focus(screen.getByRole('combobox'));
+    await waitFor(() => {
+      const rootElement = screen.getByTestId('select-root');
+      expect(rootElement).toHaveClass('select_focused');
+      expect(rootElement).toHaveClass('rootFocused');
+    });
   });
 });

frontend/app/components/select/select.tsx

@@ -31,14 +31,15 @@ export function Select({ items, selected, size = 'md', ...props }: Props) {
 
   return (
     <span
+      data-testid="select-root"
       className={clsx('select', styles.root, size && styles[size], {
         [styles.rootFocused]: focus,
         select_focused: focus,
         [`select_${size}`]: size,
       })}
     >
       {selectedItem.label}
-      <ArrowIcon size={iconSize[size]} className={clsx('select-arrow', styles.arrow)} />
+      <ArrowIcon data-testid="select-arrow" size={iconSize[size]} className={clsx('select-arrow', styles.arrow)} />
       <select
         {...props}
         onFocus={() => setFocus(true)}

frontend/package.json

@@ -62,7 +62,7 @@
     "@types/eslint": "^8.4.5",
     "@types/jest": "^28.1.4",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.0.0",
+    "@types/node": "^18.0.1",
     "@types/node-emoji": "^1.8.1",
     "@types/react-redux": "^7.1.24",
     "@types/redux-mock-store": "^1.0.3",