AKR(Frontend): Try to fix tests [deploy]

Author: pkoivisto

frontend/packages/akr/src/components/publicTranslator/filters/PublicTranslatorFilters.tsx

@@ -283,7 +283,6 @@ export const PublicTranslatorFilters = ({
             </Caption>
           </div>
           <Box
-            data-testid="public-translator-filters__filter__language-pair"
             className="public-translator-filters__filter__language-pair"
             onClick={showTranslatorsAlreadySelectedToast}
           >

frontend/packages/akr/src/tests/cypress/support/page-objects/publicTranslatorFilters.ts

@@ -7,18 +7,8 @@ class PublicTranslatorFilters {
   elements = {
     fromLangComboBox: () =>
       cy.findByTestId('public-translator-filters__from-language-select'),
-    fromLangNativeSelect: () =>
-      cy
-        .findByTestId('public-translator-filters__filter__language-pair')
-        .findAllByRole('combobox')
-        .first(),
     toLangComboBox: () =>
       cy.findByTestId('public-translator-filters__to-language-select'),
-    toLangNativeSelect: () =>
-      cy
-        .findByTestId('public-translator-filters__filter__language-pair')
-        .findAllByRole('combobox')
-        .last(),
     name: () => cy.findByTestId('public-translator-filters__name-field'),
     town: () => cy.findByTestId('public-translator-filters__town-combobox'),
     empty: () => cy.findByTestId('public-translator-filters__empty-btn'),
@@ -32,7 +22,7 @@ class PublicTranslatorFilters {
 
   selectFromLangByName(isPhone: boolean, from: string) {
     if (isPhone) {
-      this.elements.fromLangNativeSelect().select(from);
+      this.elements.fromLangComboBox().findByRole('combobox').select(from);
     } else {
       this.clickFromLang();
       this.selectOptionByName(from);
@@ -41,7 +31,7 @@ class PublicTranslatorFilters {
 
   selectToLangByName(isPhone: boolean, to: string) {
     if (isPhone) {
-      this.elements.toLangNativeSelect().select(to);
+      this.elements.toLangComboBox().findByRole('combobox').select(to);
     } else {
       this.clickToLang();
       this.selectOptionByName(to);

frontend/packages/shared/src/components/LanguageSelect/LanguageSelect.tsx

@@ -81,6 +81,7 @@ export const LanguageSelect = ({
       value,
       helperText,
       showError,
+      'data-testid': rest['data-testid'],
     };
     for (const prop in rest) {
       if (prop in nativeSelectProps) {

frontend/packages/shared/src/components/NativeSelect/NativeSelect.tsx

@@ -62,7 +62,7 @@ export const NativeSelectWithLabel: FC<
   const errorStyles = showError ? { color: 'error.main' } : {};
 
   return (
-    <FormControl fullWidth error={showError}>
+    <FormControl data-testid={rest['data-testid']} fullWidth error={showError}>
       <label htmlFor={id}>
         <Text sx={errorStyles}>
           <b>{label}</b>

frontend/packages/shared/src/interfaces/comboBox.ts

@@ -5,6 +5,7 @@ import { TextFieldVariant } from '../enums/common';
 export type ComboBoxOption = { label: string; value: string };
 export type AutocompleteValue = ComboBoxOption | null;
 export interface ComboBoxProps {
+  'data-testid'?: string;
   label?: string;
   showInputLabel?: boolean;
   helperText?: string;