use semantic queries for testing

Author: jjaquish

src/components/Header/HeaderTests/Tools.test.js

@@ -12,17 +12,22 @@ jest.mock('../ToolbarToggle', () => () => '<ToolbarToggle />');
 jest.mock('../SettingsToggle', () => {
   const MockSettingsToggle = (props) => {
     return (
-      <div id={props.id} onClick={() => props.setIsOpen && props.setIsOpen(true)} data-testid="settings-toggle">
-        {props.dropdownItems.map((group, groupIndex) => (
-          <div key={groupIndex}>
-            {group.items.map((item, itemIndex) => (
-              <a key={itemIndex} href={item.url} data-testid={item.ouiaId}>
-                {item.title}
-              </a>
-            ))}
-          </div>
-        ))}
-      </div>
+      <>
+        <button id={props.id} aria-label={props.ariaLabel} onClick={() => props.setIsOpen && props.setIsOpen(true)} data-testid="settings-toggle">
+          Settings
+        </button>
+        <div>
+          {props.dropdownItems.map((group, groupIndex) => (
+            <div key={groupIndex}>
+              {group.items.map((item, itemIndex) => (
+                <a key={itemIndex} href={item.url} data-testid={item.ouiaId}>
+                  {item.title}
+                </a>
+              ))}
+            </div>
+          ))}
+        </div>
+      </>
     );
   };
   MockSettingsToggle.displayName = 'MockSettingsToggle';
@@ -153,15 +158,15 @@ describe('Tools', () => {
       await renderTools(mockAuthContext);
 
       // Open the settings dropdown
-      const settingsButton = screen.getByTestId('settings-toggle');
+      const settingsButton = screen.getByRole('button', { name: 'Settings menu' });
       expect(settingsButton).toBeInTheDocument();
 
       await act(async () => {
         settingsButton.click();
       });
 
-      // Check that the link with correct href exists
-      const iamLink = screen.getByTestId('UserAccess');
+      // Check that the link with correct href exists (note: "Acess" is a typo in the source code)
+      const iamLink = screen.getByRole('link', { name: /Acess management/i });
       expect(iamLink).toBeInTheDocument();
       expect(iamLink).toHaveAttribute('href', '/iam/overview');
     });
@@ -176,15 +181,15 @@ describe('Tools', () => {
       await renderTools(mockAuthContext);
 
       // Open the settings dropdown
-      const settingsButton = screen.getByTestId('settings-toggle');
+      const settingsButton = screen.getByRole('button', { name: 'Settings menu' });
       expect(settingsButton).toBeInTheDocument();
 
       await act(async () => {
         settingsButton.click();
       });
 
       // Check that the link with correct href exists
-      const iamLink = screen.getByTestId('UserAccess');
+      const iamLink = screen.getByRole('link', { name: /User Access/i });
       expect(iamLink).toBeInTheDocument();
       expect(iamLink).toHaveAttribute('href', '/iam/user-access/overview');
     });
@@ -199,15 +204,15 @@ describe('Tools', () => {
       await renderTools(mockAuthContext);
 
       // Open the settings dropdown
-      const settingsButton = screen.getByTestId('settings-toggle');
+      const settingsButton = screen.getByRole('button', { name: 'Settings menu' });
       expect(settingsButton).toBeInTheDocument();
 
       await act(async () => {
         settingsButton.click();
       });
 
       // Check that the link with correct href exists
-      const iamLink = screen.getByTestId('UserAccess');
+      const iamLink = screen.getByRole('link', { name: /My User Access/i });
       expect(iamLink).toBeInTheDocument();
       expect(iamLink).toHaveAttribute('href', '/iam/my-user-access');
     });