test: fix failing e2e tests after HDS 5 upgrade

Author: jorilindell

src/common/components/form/fields/MultiDropdownField.tsx

@@ -34,10 +34,12 @@ const MultiDropdownField: React.FC<Props> = ({
   className,
   field: { name, onBlur, onChange, value, ...field },
   form: { errors, touched },
+  clearButtonAriaLabel,
   helper,
   label,
   options,
   placeholder,
+  selectedItemRemoveButtonAriaLabel,
   setFieldValue,
   texts,
   ...rest
@@ -77,6 +79,9 @@ const MultiDropdownField: React.FC<Props> = ({
       {...field}
       texts={{
         assistive: helper,
+        clearButtonAriaLabel_multiple: clearButtonAriaLabel,
+        clearButtonAriaLabel_one: clearButtonAriaLabel,
+        tagRemoveSelectionAriaLabel: selectedItemRemoveButtonAriaLabel,
         error: errorText,
         label,
         language: locale,

src/domain/app/i18n/en.json

@@ -488,19 +488,19 @@
     "accessibility": {
       "audienceDropdown": {
         "clearButtonAriaLabel": "Delete all audience selections",
-        "selectedItemRemoveButtonAriaLabel": "Delete audience selection"
+        "selectedItemRemoveButtonAriaLabel": "Delete audience selection \"{{label}}\""
       },
       "categoryDropdown": {
         "clearButtonAriaLabel": "Delete all categories",
-        "selectedItemRemoveButtonAriaLabel": "Delete category selection"
+        "selectedItemRemoveButtonAriaLabel": "Delete category selection \"{{label}}\""
       },
       "activityDropdown": {
         "clearButtonAriaLabel": "Delete all activity selections",
-        "selectedItemRemoveButtonAriaLabel": "Delete activity selection"
+        "selectedItemRemoveButtonAriaLabel": "Delete activity selection \"{{label}}\""
       },
       "inLanguageDropdown": {
         "clearButtonAriaLabel": "Delete all language selections",
-        "selectedItemRemoveButtonAriaLabel": "Delete language selection"
+        "selectedItemRemoveButtonAriaLabel": "Delete language selection \"{{label}}\""
       }
     },
     "occurrences": {

src/domain/app/i18n/fi.json

@@ -494,19 +494,19 @@
     "accessibility": {
       "audienceDropdown": {
         "clearButtonAriaLabel": "Poista kaikki kohderyhmävalinnat",
-        "selectedItemRemoveButtonAriaLabel": "Poista kohderyhmä"
+        "selectedItemRemoveButtonAriaLabel": "Poista kohderyhmä \"{{label}}\""
       },
       "categoryDropdown": {
         "clearButtonAriaLabel": "Poista kaikki kategoriavalinnat",
-        "selectedItemRemoveButtonAriaLabel": "Poista kategoriavalinta"
+        "selectedItemRemoveButtonAriaLabel": "Poista kategoriavalinta \"{{label}}\""
       },
       "activityDropdown": {
         "clearButtonAriaLabel": "Poista kaikki aktiviteettivalinnat",
-        "selectedItemRemoveButtonAriaLabel": "Poista aktiviteettivalinta"
+        "selectedItemRemoveButtonAriaLabel": "Poista aktiviteettivalinta \"{{label}}\""
       },
       "inLanguageDropdown": {
         "clearButtonAriaLabel": "Poista kaikki kielivalinnat",
-        "selectedItemRemoveButtonAriaLabel": "Poista kielivalinta"
+        "selectedItemRemoveButtonAriaLabel": "Poista kielivalinta \"{{label}}\""
       }
     },
     "occurrences": {

src/domain/app/i18n/sv.json

@@ -495,19 +495,19 @@
     "accessibility": {
       "audienceDropdown": {
         "clearButtonAriaLabel": "Ta bort alla publikval",
-        "selectedItemRemoveButtonAriaLabel": "Ta bort publikval"
+        "selectedItemRemoveButtonAriaLabel": "Ta bort publikval \"{{label}}\""
       },
       "categoryDropdown": {
         "clearButtonAriaLabel": "Ta bort alla kategorier",
-        "selectedItemRemoveButtonAriaLabel": "Ta bort kategorival"
+        "selectedItemRemoveButtonAriaLabel": "Ta bort kategorival \"{{label}}\""
       },
       "activityDropdown": {
         "clearButtonAriaLabel": "Ta bort alla aktiviteter",
-        "selectedItemRemoveButtonAriaLabel": "Ta bort aktivitet"
+        "selectedItemRemoveButtonAriaLabel": "Ta bort aktivitet \"{{label}}\""
       },
       "inLanguageDropdown": {
         "clearButtonAriaLabel": "Ta bort alla språkval",
-        "selectedItemRemoveButtonAriaLabel": "Ta bort språkval"
+        "selectedItemRemoveButtonAriaLabel": "Ta bort språkval \"{{label}}\""
       }
     },
     "occurrences": {

src/domain/app/layout/__tests__/PageLayout.test.tsx

@@ -127,12 +127,12 @@ async function fillAndSubmitProfileForm() {
 
   expect(
     screen.getByRole('button', {
-      name: 'Poista valinta "Organisaatio 1".',
+      name: 'Organisaatio 1',
     })
   ).toBeInTheDocument();
   expect(
     screen.getByRole('button', {
-      name: 'Poista valinta "Organisaatio 2".',
+      name: 'Organisaatio 2',
     })
   ).toBeInTheDocument();
 

src/domain/event/__tests__/CreateEventPage.test.tsx

@@ -352,10 +352,12 @@ const mocks = [
 ];
 
 const testMultiDropdownValues = async ({
+  deleteButtonName,
   dropdownTestId,
   dropdownLabel,
   values,
 }: {
+  deleteButtonName: (value: string) => string;
   dropdownTestId: string;
   dropdownLabel: RegExp | string;
   values: string[];
@@ -374,7 +376,9 @@ const testMultiDropdownValues = async ({
   const dropdown = within(await screen.findByTestId(dropdownTestId));
 
   for (const value of values) {
-    await dropdown.findByRole('button', { name: `Poista valinta "${value}".` });
+    await dropdown.getByRole('button', {
+      name: deleteButtonName(value),
+    });
   }
 };
 
@@ -480,18 +484,22 @@ const fillForm = async (eventFormData: typeof partialDefaultFormData) => {
     dropdownLabel: /kategoriat/i,
     dropdownTestId: 'categories-dropdown',
     values: categoryKeywords.map((k) => k.name),
+    deleteButtonName: (value: string) => `Poista kategoriavalinta "${value}"`,
   });
 
   await testMultiDropdownValues({
     dropdownLabel: /aktiviteetit/i,
     dropdownTestId: 'additional-criteria-dropdown',
     values: criteriaKeywords.map((k) => k.name),
+    deleteButtonName: (value: string) =>
+      `Poista aktiviteettivalinta "${value}"`,
   });
 
   await testMultiDropdownValues({
     dropdownLabel: /kohderyhmät/i,
     dropdownTestId: 'audience-dropdown',
     values: audienceKeywords.map((k) => k.name),
+    deleteButtonName: (value: string) => `Poista kohderyhmä "${value}"`,
   });
 
   vi.spyOn(ApolloClient.prototype, 'readQuery').mockReturnValueOnce(

src/playwright/pages/authenticated.page.ts

@@ -48,12 +48,6 @@ export class AuthenticatedPage extends BasePage {
     await this.userMenuButton(lang).click();
   }
 
-  async hasVisibleHeadingInUserMenuDropdown(name: string | RegExp) {
-    await expect(
-      this.userMenuDropdown.getByRole('heading', { name })
-    ).toBeVisible();
-  }
-
   async hasVisibleButtonInUserMenuDropdown(name: string | RegExp) {
     await expect(this.userMenuDropdownButton(name)).toBeVisible();
   }
@@ -160,7 +154,6 @@ export class AuthenticatedPage extends BasePage {
     await option.hover(); // Hover so that the option and the listbox change state
     const optionId = await option.getAttribute('id');
     expect(optionId).not.toBeNull();
-    await expect(listBox).toHaveAttribute('aria-activedescendant', optionId!);
     await option.click();
   }
 

src/playwright/pages/createEventBasicInfo.page.ts

@@ -270,44 +270,38 @@ export class CreateEventBasicInfoPage extends AuthenticatedPage {
 
   get targetGroupsDropdownButton() {
     return this.eventClassificationsSection
-      .getByRole('button', {
+      .getByRole('combobox', {
         name: this.t('targetGroups'),
       })
       .and(this.hasListBoxPopUp); // To distinguish from the selected tags
   }
 
   get targetGroupsListBox() {
-    return this.eventClassificationsSection.getByRole('listbox', {
-      name: this.t('targetGroups'),
-    });
+    return this.eventClassificationsSection.getByRole('listbox');
   }
 
   get categoriesDropdownButton() {
     return this.eventClassificationsSection
-      .getByRole('button', {
+      .getByRole('combobox', {
         name: this.t('categories'),
       })
       .and(this.hasListBoxPopUp); // To distinguish from the selected tags
   }
 
   get categoriesListBox() {
-    return this.eventClassificationsSection.getByRole('listbox', {
-      name: this.t('categories'),
-    });
+    return this.eventClassificationsSection.getByRole('listbox');
   }
 
   get activitiesDropdownButton() {
     return this.eventClassificationsSection
-      .getByRole('button', {
+      .getByRole('combobox', {
         name: this.t('activities'),
       })
       .and(this.hasListBoxPopUp); // To distinguish from the selected tags
   }
 
   get activitiesListBox() {
-    return this.eventClassificationsSection.getByRole('listbox', {
-      name: this.t('activities'),
-    });
+    return this.eventClassificationsSection.getByRole('listbox');
   }
 
   get eventKeywordsTextBox() {
@@ -351,15 +345,13 @@ export class CreateEventBasicInfoPage extends AuthenticatedPage {
   }
 
   get contactPersonNameDropdownButton() {
-    return this.contactPersonSection.getByRole('button', {
+    return this.contactPersonSection.getByRole('combobox', {
       name: this.t('contactPersonName'),
     });
   }
 
   get contactPersonNameListBox() {
-    return this.contactPersonSection.getByRole('listbox', {
-      name: this.t('contactPersonName'),
-    });
+    return this.contactPersonSection.getByRole('listbox');
   }
 
   get emailTextBox() {

src/playwright/pages/createEventOccurrences.page.ts

@@ -509,16 +509,14 @@ export class CreateEventOccurrencesPage extends AuthenticatedPage {
 
   get occurrenceLanguageDropdownButton() {
     return this.occurrencesForm
-      .getByRole('button', {
+      .getByRole('combobox', {
         name: this.t('occurrenceLanguage'),
       })
       .and(this.hasListBoxPopUp); // To distinguish from the selected tags
   }
 
   get occurrenceLanguageListBox() {
-    return this.occurrencesForm.getByRole('listbox', {
-      name: this.t('occurrenceLanguage'),
-    });
+    return this.occurrencesForm.getByRole('listbox');
   }
 
   get totalSeatsSpinButton() {

src/playwright/pages/myProfile.page.ts

@@ -105,7 +105,7 @@ export class MyProfilePage extends AuthenticatedPage {
   }
 
   get languageDropdownButton() {
-    return this.mainContent.getByRole('button', {
+    return this.mainContent.getByRole('combobox', {
       name: this.t('language'),
     });
   }