refactor(testing): DISCOVERY-523 Add attributes to aid UI tests

The goal is to add ouia ids to ease Camayoc UI testing. Where possible, ouia id used is the same as id for the element in old UI. ouiaId attribute is preferred. However, newer Patternfly does not support it in some elements, or made questionable decisions in other cases. data-ouia-component-id was used then. SimpleDropdown interface had to be changed to allow caller to specify ouia ids of dropdown elements. ouia ids are optional.
quipucords · Sep 27, 2024 · 349e103 · 349e103
1 parent b00c770
commit 349e103
Show file tree

Hide file tree

Showing 14 changed files with 460 additions and 68 deletions.
diff --git a/config/cspell.config.json b/config/cspell.config.json
@@ -19,6 +19,7 @@
     "mturley",
     "nocolor",
     "ouia",
+    "ouiaid",
     "paramiko",
     "patternfly",
     "pbrun",
@@ -32,9 +33,11 @@
     "runas",
     "scanjob",
     "srcset",
+    "sslv",
     "tabindex",
     "tbody",
     "thead",
+    "tlsv",
     "touchspin",
     "vals",
     "valuetext"

diff --git a/src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap b/src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
   </button>
   <div
     class="pf-v5-c-menu"
-    data-ouia-component-id="OUIA-Generated-Dropdown-2"
+    data-ouia-component-id="OUIA-Generated-Dropdown-4"
     data-ouia-component-type="PF5/Dropdown"
     data-ouia-safe="true"
     data-popper-escaped="true"
@@ -54,7 +54,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
       >
         <li
           class="pf-v5-c-menu__list-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-3"
           data-ouia-component-type="PF5/DropdownItem"
           data-ouia-safe="true"
           role="none"
@@ -78,7 +78,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
         </li>
         <li
           class="pf-v5-c-menu__list-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-2"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-4"
           data-ouia-component-type="PF5/DropdownItem"
           data-ouia-safe="true"
           role="none"
@@ -122,6 +122,151 @@ exports[`SimpleDropdown should have a dropdown label: label 1`] = `
 </span>
 `;
 
+exports[`SimpleDropdown should have a ouia id: button_ouiaid 1`] = `
+<button
+  aria-expanded="false"
+  aria-label="Dropdown menu"
+  class="pf-v5-c-menu-toggle pf-m-disabled"
+  data-ouia-component-id="lorem_ipsum"
+  disabled=""
+  type="button"
+>
+  <span
+    class="pf-v5-c-menu-toggle__text"
+  >
+    lorem ipsum
+  </span>
+  <span
+    class="pf-v5-c-menu-toggle__controls"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__toggle-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        />
+      </svg>
+    </span>
+  </span>
+</button>
+`;
+
+exports[`SimpleDropdown should have dropdown items with ouia id: expanded_ouiaid 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="true"
+    aria-label="Dropdown menu"
+    class="pf-v5-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="lorem_ipsum"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      lorem ipsum
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
+  <div
+    class="pf-v5-c-menu"
+    data-ouia-component-id="OUIA-Generated-Dropdown-3"
+    data-ouia-component-type="PF5/Dropdown"
+    data-ouia-safe="true"
+    data-popper-escaped="true"
+    data-popper-placement="bottom-start"
+    data-popper-reference-hidden="true"
+    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+  >
+    <div
+      class="pf-v5-c-menu__content"
+    >
+      <ul
+        class="pf-v5-c-menu__list"
+        role="menu"
+      >
+        <li
+          class="pf-v5-c-menu__list-item"
+          data-ouia-component-id="ouia-dolor"
+          data-ouia-component-type="PF5/DropdownItem"
+          data-ouia-safe="true"
+          role="none"
+        >
+          <button
+            class="pf-v5-c-menu__item"
+            role="menuitem"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                dolor
+              </span>
+            </span>
+          </button>
+        </li>
+        <li
+          class="pf-v5-c-menu__list-item"
+          data-ouia-component-id="ouia-sit"
+          data-ouia-component-type="PF5/DropdownItem"
+          data-ouia-safe="true"
+          role="none"
+        >
+          <button
+            class="pf-v5-c-menu__item"
+            role="menuitem"
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                sit
+              </span>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SimpleDropdown should render a basic component: basic 1`] = `
 <Dropdown
   isOpen={false}

diff --git a/src/components/simpleDropdown/__tests__/simpleDropdown.test.tsx b/src/components/simpleDropdown/__tests__/simpleDropdown.test.tsx
@@ -21,14 +21,41 @@ describe('SimpleDropdown', () => {
     expect(component.querySelector('button > span')).toMatchSnapshot('label');
   });
 
+  it('should have a ouia id', async () => {
+    const props = {
+      label: 'lorem ipsum',
+      menuToggleOuiaId: 'lorem_ipsum'
+    };
+    const component = await shallowComponent(<SimpleDropdown {...props} />);
+    expect(component.querySelector('button')).toMatchSnapshot('button_ouiaid');
+  });
+
+  it('should have dropdown items with ouia id', async () => {
+    const user = userEvent.setup();
+
+    const props = {
+      label: 'lorem ipsum',
+      menuToggleOuiaId: 'lorem_ipsum',
+      dropdownItems: [
+        { item: 'dolor', ouiaId: 'ouia-dolor' },
+        { item: 'sit', ouiaId: 'ouia-sit' }
+      ]
+    };
+
+    const { asFragment } = render(<SimpleDropdown {...props} />);
+
+    await user.click(screen.getByText(props.label));
+    expect(asFragment()).toMatchSnapshot('expanded_ouiaid');
+  });
+
   it('should display items and allow selecting after toggle is clicked', async () => {
     const user = userEvent.setup();
     const onMockSelect = jest.fn();
 
     const props = {
       label: 'Lorem ipsum',
       onSelect: onMockSelect,
-      dropdownItems: ['dolor', 'sit']
+      dropdownItems: [{ item: 'dolor' }, { item: 'sit' }]
     };
 
     const { asFragment } = render(<SimpleDropdown {...props} />);

diff --git a/src/components/simpleDropdown/simpleDropdown.tsx b/src/components/simpleDropdown/simpleDropdown.tsx
@@ -15,9 +15,15 @@ import {
   type MenuToggleProps
 } from '@patternfly/react-core';
 
+interface SimpleDropdownItemProps {
+  item: string;
+  ouiaId?: number | string;
+}
+
 interface SimpleDropdownProps {
   label: string;
-  dropdownItems?: string[];
+  menuToggleOuiaId?: number | string;
+  dropdownItems?: SimpleDropdownItemProps[];
   ariaLabel?: string;
   onSelect?: (item: string) => void;
   variant?: MenuToggleProps['variant'];
@@ -26,6 +32,7 @@ interface SimpleDropdownProps {
 
 const SimpleDropdown: React.FC<SimpleDropdownProps> = ({
   label,
+  menuToggleOuiaId,
   dropdownItems,
   ariaLabel = 'Dropdown menu',
   onSelect = Function.prototype,
@@ -50,15 +57,16 @@ const SimpleDropdown: React.FC<SimpleDropdownProps> = ({
           variant={variant}
           aria-label={ariaLabel}
           isDisabled={!dropdownItems || dropdownItems.length === 0}
+          data-ouia-component-id={menuToggleOuiaId}
         >
           {label}
         </MenuToggle>
       )}
     >
       <DropdownList>
         {Array.isArray(dropdownItems) &&
-          dropdownItems.map(item => (
-            <DropdownItem key={item} onClick={() => onSelect(item)}>
+          dropdownItems.map(({ item, ouiaId }) => (
+            <DropdownItem key={item} onClick={() => onSelect(item)} ouiaId={ouiaId}>
               {item}
             </DropdownItem>
           ))}

diff --git a/src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx b/src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx
@@ -24,13 +24,15 @@ interface TypeaheadCheckboxesProps {
   options: { value: string; label: string }[];
   selectedOptions?: string[];
   placeholder?: string;
+  menuToggleOuiaId?: number | string;
 }
 
 const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
   onChange = Function.prototype,
   options,
   selectedOptions = [],
-  placeholder = '0 items selected'
+  placeholder = '0 items selected',
+  menuToggleOuiaId
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState<string>('');
@@ -156,7 +158,14 @@ const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
   }, [selected, placeholder]);
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+      data-ouia-component-id={menuToggleOuiaId}
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}
@@ -171,6 +180,7 @@ const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
           role="combobox"
           isExpanded={isOpen}
           aria-controls="select-multi-typeahead-checkbox-listbox"
+          data-ouia-component-id="credentials_list_input"
         />
         <TextInputGroupUtilities>
           {selected.length > 0 && (
@@ -182,6 +192,7 @@ const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
                 textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
+              ouiaId="credentials_list_toggle_button"
             >
               <TimesIcon aria-hidden />
             </Button>

diff --git a/src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap b/src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap
@@ -107,7 +107,6 @@ exports[`ViewToolbar should render a basic component: basic 1`] = `
           isPlain={true}
           onOpenChange={[Function]}
           onSelect={[Function]}
-          ouiaId="user_dropdown"
           popperProps={
             {
               "position": "right",
@@ -116,6 +115,7 @@ exports[`ViewToolbar should render a basic component: basic 1`] = `
           toggle={[Function]}
         >
           <DropdownItem
+            data-ouia-component-id="logout"
             onClick={[Function]}
             value="logout"
           >
@@ -136,10 +136,10 @@ exports[`ViewToolbar should render a basic component: basic 1`] = `
         isOpen={false}
         onOpenChange={[Function]}
         onSelect={[Function]}
-        ouiaId="user_dropdown"
         toggle={[Function]}
       >
         <DropdownItem
+          data-ouia-component-id="logout"
           onClick={[Function]}
           value="logout"
         >