Try fixing flaky tests

Author: rebeccaalpert

packages/module/src/ResponseActions/ResponseActions.test.tsx

@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 import { RhUiExportIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-export-icon';
 import { RhMicronsInformationFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-microns-information-fill-icon';
 import { RhUiRedoIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-redo-icon';
-import Message from '../Message';
 
 // Mock the icon components
 jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-like-icon', () => ({
@@ -368,82 +367,80 @@ describe('ResponseActions', () => {
 
   // we are testing for the reverse case already above
   it('should not deselect when clicking outside when persistActionSelection is true', async () => {
+    const user = userEvent.setup();
+
     render(
-      <Message
-        name="Bot"
-        role="bot"
-        avatar=""
-        content="Test content"
-        actions={{
-          positive: {},
-          negative: {}
-        }}
-        persistActionSelection
-      />
+      <div>
+        <ResponseActions
+          actions={{
+            positive: { onClick: jest.fn() },
+            negative: { onClick: jest.fn() }
+          }}
+          persistActionSelection
+        />
+        <div data-testid="outside">Outside</div>
+      </div>
     );
     const goodBtn = screen.getByRole('button', { name: 'Good response' });
 
-    await userEvent.click(goodBtn);
+    await user.click(goodBtn);
     expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
 
-    await userEvent.click(screen.getByText('Test content'));
+    await user.click(screen.getByTestId('outside'));
 
     expect(screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass(
       'pf-chatbot__button--response-action-clicked'
     );
   });
 
   it('should switch selection to another button when persistActionSelection is true', async () => {
+    const user = userEvent.setup();
+
     render(
-      <Message
-        name="Bot"
-        role="bot"
-        avatar=""
-        content="Test content"
+      <ResponseActions
         actions={{
-          positive: {},
-          negative: {}
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
         }}
         persistActionSelection
       />
     );
     const goodBtn = screen.getByRole('button', { name: 'Good response' });
     const badBtn = screen.getByRole('button', { name: 'Bad response' });
 
-    await userEvent.click(goodBtn);
+    await user.click(goodBtn);
     expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
 
-    await userEvent.click(badBtn);
+    await user.click(badBtn);
     expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
 
   it('should toggle off when clicking the same button when persistActionSelection is true', async () => {
+    const user = userEvent.setup();
+
     render(
-      <Message
-        name="Bot"
-        role="bot"
-        avatar=""
-        content="Test content"
+      <ResponseActions
         actions={{
-          positive: {},
-          negative: {}
+          positive: { onClick: jest.fn() },
+          negative: { onClick: jest.fn() }
         }}
         persistActionSelection
       />
     );
     const goodBtn = screen.getByRole('button', { name: 'Good response' });
 
-    await userEvent.click(goodBtn);
+    await user.click(goodBtn);
     expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
 
-    await userEvent.click(goodBtn);
+    await user.click(goodBtn);
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
 
   it('should work with custom actions when persistActionSelection is true', async () => {
+    const user = userEvent.setup();
     const actions = {
       positive: { 'data-testid': 'positive', onClick: jest.fn() },
       negative: { 'data-testid': 'negative', onClick: jest.fn() },
@@ -458,10 +455,10 @@ describe('ResponseActions', () => {
     render(<ResponseActions actions={actions} persistActionSelection />);
 
     const customBtn = screen.getByTestId('custom');
-    await userEvent.click(customBtn);
+    await user.click(customBtn);
     expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
 
-    await userEvent.click(customBtn);
+    await user.click(customBtn);
     expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });