chore(footer): migrate Footer.test.js to react-testing-library

Co-Authored-By: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

src/elements/content-picker/__tests__/Footer.test.js

@@ -1,55 +1,59 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import '@testing-library/jest-dom';
+import { screen, render } from '../../../test-utils/testing-library';
 import Footer from '../Footer';
 
 describe('elements/content-picker/Footer', () => {
     const defaultProps = {
-        children: <div className="footer-child" />,
+        children: <div data-testid="footer-child" className="footer-child" />,
         currentCollection: { id: '123', name: 'Folder' },
         hasHitSelectionLimit: false,
         isSingleSelect: false,
-        onCancel: () => {},
-        onChoose: () => {},
-        onSelectedClick: () => {},
+        onCancel: jest.fn(),
+        onChoose: jest.fn(),
+        onSelectedClick: jest.fn(),
         selectedCount: 0,
         selectedItems: [],
+        showSelectedButton: false,
     };
 
-    const getWrapper = props => mount(<Footer {...defaultProps} {...props} />);
+    const renderComponent = (props = {}) => render(<Footer {...defaultProps} {...props} />);
 
     describe('render()', () => {
-        test('should render Footer', () => {
-            const wrapper = getWrapper();
+        test('should render Footer with basic elements', () => {
+            renderComponent();
 
-            expect(wrapper.find('ButtonGroup').length).toBe(1);
-            expect(wrapper.find('.footer-child').length).toBe(1);
+            const footer = screen.getByRole('contentinfo');
+            const child = screen.getByTestId('footer-child');
+
+            expect(footer).toBeInTheDocument();
+            expect(footer).toHaveClass('bcp-footer');
+            expect(child).toBeInTheDocument();
         });
 
-        test('should render footer with disabled button', () => {
-            const buttons = getWrapper().find('Button');
-            const chooseButton = buttons.at(1);
+        test('should render footer with disabled choose button', () => {
+            renderComponent();
 
-            // https://www.w3.org/WAI/ARIA/apg/patterns/button/
-            // When the action associated with a button is unavailable, the button has aria-disabled set to true.
-            expect(chooseButton.html().includes('aria-disabled')).toBe(true);
-            expect(chooseButton.prop('disabled')).toBe(true);
+            const chooseButton = screen.getByRole('button', { name: 'Choose' });
+            expect(chooseButton).toBeDisabled();
+            expect(chooseButton).toHaveAttribute('aria-disabled', 'true');
         });
 
-        test('should render Footer buttons with aria-label', () => {
-            const buttons = getWrapper().find('Button');
+        test('should render Footer buttons with correct aria-labels', () => {
+            renderComponent();
 
-            expect(buttons.at(0).prop('aria-label')).toBe('Cancel');
-            expect(buttons.at(1).prop('aria-label')).toBe('Choose');
+            expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+            expect(screen.getByRole('button', { name: 'Choose' })).toBeInTheDocument();
         });
 
         test('should render Footer with custom action button', () => {
-            const renderCustomActionButtons = jest.fn();
+            const renderCustomActionButtons = jest.fn().mockReturnValue(<div data-testid="custom-button" />);
 
-            const wrapper = getWrapper({
-                renderCustomActionButtons: renderCustomActionButtons.mockReturnValue(<div className="custom-button" />),
+            renderComponent({
+                renderCustomActionButtons,
             });
 
-            expect(wrapper.find('.custom-button').length).toBe(1);
+            expect(screen.getByTestId('custom-button')).toBeInTheDocument();
             expect(renderCustomActionButtons).toHaveBeenCalledWith({
                 currentFolderId: defaultProps.currentCollection.id,
                 currentFolderName: defaultProps.currentCollection.name,
@@ -60,16 +64,41 @@ describe('elements/content-picker/Footer', () => {
             });
         });
 
-        test.each`
-            showSelectedButton | isSingleSelect | shown    | should
-            ${false}           | ${false}       | ${false} | ${'should not show selected button'}
-            ${false}           | ${true}        | ${false} | ${'should not show selected button'}
-            ${true}            | ${false}       | ${true}  | ${'should show selected button'}
-            ${true}            | ${true}        | ${false} | ${'should not show selected button'}
-        `('$should', ({ isSingleSelect, shown, showSelectedButton }) => {
-            const wrapper = getWrapper({ isSingleSelect, showSelectedButton });
+        test.each([
+            {
+                showSelectedButton: false,
+                isSingleSelect: false,
+                shown: false,
+                description: 'should not show selected button when showSelectedButton is false',
+            },
+            {
+                showSelectedButton: false,
+                isSingleSelect: true,
+                shown: false,
+                description: 'should not show selected button when isSingleSelect is true',
+            },
+            {
+                showSelectedButton: true,
+                isSingleSelect: false,
+                shown: true,
+                description: 'should show selected button when conditions are met',
+            },
+            {
+                showSelectedButton: true,
+                isSingleSelect: true,
+                shown: false,
+                description:
+                    'should not show selected button when isSingleSelect is true regardless of showSelectedButton',
+            },
+        ])('$description', ({ isSingleSelect, shown, showSelectedButton }) => {
+            renderComponent({ isSingleSelect, showSelectedButton });
 
-            expect(wrapper.exists('.bcp-selected')).toBe(shown);
+            const selectedButton = screen.queryByRole('button', { name: /selected/i });
+            if (shown) {
+                expect(selectedButton).toBeInTheDocument();
+            } else {
+                expect(selectedButton).not.toBeInTheDocument();
+            }
         });
     });
 });