feat: custom data-cy attribute for dropdownmenu (#993)

BREAKING CHANGE:
Previously the DropdownMenu may have been targeted for tests using "popover".
Now it will need to be targeted with "dropdownmenu".

Author: nataliepina

packages/dropdownMenu/components/DropdownMenu.tsx

@@ -93,6 +93,10 @@ export interface DropdownMenuProps {
    * Allows custom styling
    */
   className?: string;
+  /**
+   * Human-readable selector used for writing tests
+   */
+  "data-cy"?: string;
 }
 
 const defaultItemToString = (
@@ -116,7 +120,8 @@ const DropdownMenu = (props: DropdownMenuProps) => {
       Direction.TopCenter,
       Direction.TopLeft
     ],
-    trigger
+    trigger,
+    "data-cy": dataCy = "dropdownmenu"
   } = props;
 
   const handleSelection = (
@@ -172,6 +177,7 @@ const DropdownMenu = (props: DropdownMenuProps) => {
               footer={footer}
               key={`dropdown-${sectionIndex}`}
               sectionIndex={sectionIndex}
+              data-cy={`${dataCy}-section-${sectionIndex}`}
             >
               {childrenWithKeys}
             </SectionWrapper>
@@ -204,6 +210,7 @@ const DropdownMenu = (props: DropdownMenuProps) => {
               <PopoverBox
                 maxHeight={menuMaxHeight}
                 maxWidth={menuMaxWidth}
+                data-cy={dataCy}
                 {...getMenuProps(
                   { refKey: "menuRef" },
                   // The menu is not mounted when `isOpen` is false, so Downshift's ref check fails incorrectly
@@ -223,7 +230,11 @@ const DropdownMenu = (props: DropdownMenuProps) => {
                 })
               })
             ) : (
-              <button {...getToggleButtonProps()} className={buttonReset}>
+              <button
+                {...getToggleButtonProps()}
+                className={buttonReset}
+                data-cy={`${dataCy}-button`}
+              >
                 {trigger}
               </button>
             )}

packages/dropdownMenu/tests/__snapshots__/DropdownMenu.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Dropdown renders a closed dropdown 1`] = `
           aria-haspopup="true"
           aria-label="open menu"
           class="css-1m1ecn3"
+          data-cy="dropdownmenu-button"
           data-toggle="true"
           role="button"
           type="button"
@@ -42,6 +43,7 @@ exports[`Dropdown renders a dropdown with a max height 1`] = `
           aria-haspopup="true"
           aria-label="open menu"
           class="css-1m1ecn3"
+          data-cy="dropdownmenu-button"
           data-toggle="true"
           role="button"
           type="button"
@@ -70,6 +72,7 @@ exports[`Dropdown renders an open dropdown 1`] = `
           aria-haspopup="true"
           aria-label="close menu"
           class="css-1m1ecn3"
+          data-cy="dropdownmenu-button"
           data-toggle="true"
           role="button"
           type="button"
@@ -87,7 +90,7 @@ exports[`Dropdown renders an open dropdown 1`] = `
       <div
         aria-labelledby="downshift-1-label"
         class="css-1slvl4g"
-        data-cy="popover"
+        data-cy="dropdownmenu"
         id="downshift-1-menu"
         role="listbox"
       >
@@ -153,6 +156,7 @@ exports[`Dropdown renders an open dropdown with multiple sections 1`] = `
           aria-haspopup="true"
           aria-label="close menu"
           class="css-1m1ecn3"
+          data-cy="dropdownmenu-button"
           data-toggle="true"
           role="button"
           type="button"
@@ -170,7 +174,7 @@ exports[`Dropdown renders an open dropdown with multiple sections 1`] = `
       <div
         aria-labelledby="downshift-3-label"
         class="css-1slvl4g"
-        data-cy="popover"
+        data-cy="dropdownmenu"
         id="downshift-3-menu"
         role="listbox"
       >