IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Converts DashboardRow tests to RTL (#49722)

Browse Source
This commit is contained in:
Joao Silva 2022-05-31 16:51:44 +01:00 committed by GitHub
parent 1595cc96e6
commit a91ecc566b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -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"]
],

37
public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
View File

@ -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);
expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(0);
render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
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(<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', () => {
expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2);
it('should have a row options and delete row button', () => {
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} />);
expect(wrapper.find('.dashboard-row__drag')).toHaveLength(0);
render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
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} />);
expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(0);
render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
expect(screen.queryByRole('button', { name: 'Delete row' })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: 'Row options' })).not.toBeInTheDocument();
});
});

6
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
View File

@ -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>
);
}

2
public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
View File

@ -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) });
}}