From a91ecc566b52986ef55e89f8a9f5abbcb1ee0002 Mon Sep 17 00:00:00 2001 From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com> Date: Tue, 31 May 2022 16:51:44 +0100 Subject: [PATCH] Chore: Converts DashboardRow tests to RTL (#49722) --- .betterer.results | 3 -- .../DashboardRow/DashboardRow.test.tsx | 37 ++++++++++++------- .../components/DashboardRow/DashboardRow.tsx | 6 +-- .../RowOptions/RowOptionsButton.tsx | 2 + 4 files changed, 28 insertions(+), 20 deletions(-) diff --git a/.betterer.results b/.betterer.results index 1c202963eb9..205b4896bb3 100644 --- a/.betterer.results +++ b/.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"] ], diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx index e35d6d1487e..64affcdc4b0 100644 --- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx +++ b/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(); }); it('Should not have collapsed class when collaped is false', () => { - expect(wrapper.find('.dashboard-row')).toHaveLength(1); - expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(0); + render(); + const row = screen.getByTestId('dashboard-row-container'); + expect(row).toBeInTheDocument(); + expect(row).not.toHaveClass('dashboard-row--collapsed'); }); - it('Should collapse after clicking title', () => { - wrapper.find('.dashboard-row__title').simulate('click'); + it('Should collapse after clicking title', async () => { + render(); + 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(); expect(dashboardMock.events.subscribe.mock.calls).toHaveLength(1); }); - it('should have two actions as admin', () => { - expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2); + it('should have a row options and delete row button', () => { + render(); + 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(); - expect(wrapper.find('.dashboard-row__drag')).toHaveLength(0); + render(); + 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(); - expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(0); + render(); + expect(screen.queryByRole('button', { name: 'Delete row' })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Row options' })).not.toBeInTheDocument(); }); }); diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx index c2fbc41dbd1..f6ff78d44d2 100644 --- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx +++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx @@ -86,7 +86,7 @@ export class DashboardRow extends React.Component { const canEdit = this.props.dashboard.meta.canEdit === true; return ( -
+ @@ -115,7 +115,7 @@ export class DashboardRow extends React.Component {  
)} - {canEdit &&
} + {canEdit &&
}
); } diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx index fa49740bc0e..7d90e64a3ba 100644 --- a/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx +++ b/public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx @@ -23,6 +23,8 @@ export const RowOptionsButton: FC = ({ repeat, title, onU return ( { showModal(RowOptionsModal, { title, repeat, onDismiss: hideModal, onUpdate: onUpdateChange(hideModal) }); }}