Chore: Converts DashboardRow tests to RTL (#49722)

.betterer.results

@@ -125,9 +125,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/api-keys/ApiKeysAddedModal.test.tsx:3246264379": [
       [0, 20, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:1463123173": [
-      [0, 17, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx:2357087833": [
       [0, 35, 13, "RegExp match", "2409514259"]
     ],

public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx

@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { PanelModel } from '../../state/PanelModel';
@@ -6,7 +7,7 @@ import { PanelModel } from '../../state/PanelModel';
 import { DashboardRow } from './DashboardRow';
 
 describe('DashboardRow', () => {
-  let wrapper: any, panel: PanelModel, dashboardMock: any;
+  let panel: PanelModel, dashboardMock: any;
 
   beforeEach(() => {
     dashboardMock = {
@@ -19,39 +20,47 @@ describe('DashboardRow', () => {
     };
 
     panel = new PanelModel({ collapsed: false });
-    wrapper = mount(<DashboardRow panel={panel} dashboard={dashboardMock} />);
   });
 
   it('Should not have collapsed class when collaped is false', () => {
-    expect(wrapper.find('.dashboard-row')).toHaveLength(1);
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
-    expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(0);
+    const row = screen.getByTestId('dashboard-row-container');
+    expect(row).toBeInTheDocument();
+    expect(row).not.toHaveClass('dashboard-row--collapsed');
   });
 
-  it('Should collapse after clicking title', () => {
+  it('Should collapse after clicking title', async () => {
-    wrapper.find('.dashboard-row__title').simulate('click');
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    await userEvent.click(screen.getByTestId('data-testid dashboard-row-title-'));
 
-    expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(1);
+    const row = screen.getByTestId('dashboard-row-container');
+    expect(row).toHaveClass('dashboard-row--collapsed');
     expect(dashboardMock.toggleRow.mock.calls).toHaveLength(1);
   });
 
   it('Should subscribe to event during mount', () => {
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
     expect(dashboardMock.events.subscribe.mock.calls).toHaveLength(1);
   });
 
-  it('should have two actions as admin', () => {
+  it('should have a row options and delete row button', () => {
-    expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2);
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    expect(screen.getByRole('button', { name: 'Delete row' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Row options' })).toBeInTheDocument();
   });
 
   it('should not show row drag handle when cannot edit', () => {
     dashboardMock.meta.canEdit = false;
-    wrapper = mount(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
-    expect(wrapper.find('.dashboard-row__drag')).toHaveLength(0);
+    expect(screen.queryByTestId('dashboard-row-container')).toBeInTheDocument();
+    expect(screen.queryByTestId('dashboard-row-drag')).not.toBeInTheDocument();
   });
 
   it('should have zero actions when cannot edit', () => {
     dashboardMock.meta.canEdit = false;
     panel = new PanelModel({ collapsed: false });
-    wrapper = mount(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
-    expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(0);
+    expect(screen.queryByRole('button', { name: 'Delete row' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Row options' })).not.toBeInTheDocument();
   });
 });

public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx

@@ -86,7 +86,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     const canEdit = this.props.dashboard.meta.canEdit === true;
 
     return (
-      <div className={classes}>
+      <div className={classes} data-testid="dashboard-row-container">
         <a
           className="dashboard-row__title pointer"
           data-testid={selectors.components.DashboardRow.title(title)}
@@ -105,7 +105,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
               repeat={this.props.panel.repeat}
               onUpdate={this.onUpdate}
             />
-            <a className="pointer" onClick={this.onDelete}>
+            <a className="pointer" onClick={this.onDelete} role="button" aria-label="Delete row">
               <Icon name="trash-alt" />
             </a>
           </div>
@@ -115,7 +115,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
             &nbsp;
           </div>
         )}
-        {canEdit && <div className="dashboard-row__drag grid-drag-handle" />}
+        {canEdit && <div data-testid="dashboard-row-drag" className="dashboard-row__drag grid-drag-handle" />}
       </div>
     );
   }

public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx

@@ -23,6 +23,8 @@ export const RowOptionsButton: FC<RowOptionsButtonProps> = ({ repeat, title, onU
         return (
           <a
             className="pointer"
+            role="button"
+            aria-label="Row options"
             onClick={() => {
               showModal(RowOptionsModal, { title, repeat, onDismiss: hideModal, onUpdate: onUpdateChange(hideModal) });
             }}