public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Laura/chore/refactor test of secondary actions (#48745)

Browse Source 
* Chore: transfer three tests to testing-library

* Chore: transfer last test to testing-library

* chore: add suggestion from code review

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
This commit is contained in:
L-M-K-B
2022-05-05 15:55:59 +02:00
committed by GitHub
co-authored by Piotr Jamróz
parent 32a26d87a4
commit a98fae32fc
2 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
-3
View File
@@ -218,9 +218,6 @@ exports[`no enzyme tests`] = {
"public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx:3933225580": [ "public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx:3933225580": [
[0, 17, 13, "RegExp match", "2409514259"] [0, 17, 13, "RegExp match", "2409514259"]
], ],
"public/app/features/explore/SecondaryActions.test.tsx:1177396128": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/folders/FolderSettingsPage.test.tsx:1109052730": [ "public/app/features/folders/FolderSettingsPage.test.tsx:1109052730": [
[0, 19, 13, "RegExp match", "2409514259"] [0, 19, 13, "RegExp match", "2409514259"]
], ],
public/app/features/explore/SecondaryActions.test.tsx
+29 -22
View File
@@ -1,28 +1,27 @@
import { shallow } from 'enzyme'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { noop } from 'lodash'; import { noop } from 'lodash';
import React from 'react'; import React from 'react';
import { SecondaryActions } from './SecondaryActions'; import { SecondaryActions } from './SecondaryActions';
const addQueryRowButtonSelector = '[aria-label="Add row button"]';
const richHistoryButtonSelector = '[aria-label="Rich history button"]';
const queryInspectorButtonSelector = '[aria-label="Query inspector button"]';
describe('SecondaryActions', () => { describe('SecondaryActions', () => {
it('should render component two buttons', () => { it('should render component with three buttons', () => {
const wrapper = shallow( render(
<SecondaryActions <SecondaryActions
onClickAddQueryRowButton={noop} onClickAddQueryRowButton={noop}
onClickRichHistoryButton={noop} onClickRichHistoryButton={noop}
onClickQueryInspectorButton={noop} onClickQueryInspectorButton={noop}
/> />
); );
expect(wrapper.find(addQueryRowButtonSelector)).toHaveLength(1);
expect(wrapper.find(richHistoryButtonSelector)).toHaveLength(1); expect(screen.getByRole('button', { name: /Add row button/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Rich history button/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
}); });
it('should not render add row button if addQueryRowButtonHidden=true', () => { it('should not render add row button if addQueryRowButtonHidden=true', () => {
const wrapper = shallow( render(
<SecondaryActions <SecondaryActions
addQueryRowButtonHidden={true} addQueryRowButtonHidden={true}
onClickAddQueryRowButton={noop} onClickAddQueryRowButton={noop}
@@ -30,12 +29,14 @@ describe('SecondaryActions', () => {
onClickQueryInspectorButton={noop} onClickQueryInspectorButton={noop}
/> />
); );
expect(wrapper.find(addQueryRowButtonSelector)).toHaveLength(0);
expect(wrapper.find(richHistoryButtonSelector)).toHaveLength(1); expect(screen.queryByRole('button', { name: /Add row button/i })).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /Rich history button/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
}); });
it('should disable add row button if addQueryRowButtonDisabled=true', () => { it('should disable add row button if addQueryRowButtonDisabled=true', () => {
const wrapper = shallow( render(
<SecondaryActions <SecondaryActions
addQueryRowButtonDisabled={true} addQueryRowButtonDisabled={true}
onClickAddQueryRowButton={noop} onClickAddQueryRowButton={noop}
@@ -43,14 +44,20 @@ describe('SecondaryActions', () => {
onClickQueryInspectorButton={noop} onClickQueryInspectorButton={noop}
/> />
); );
expect(wrapper.find(addQueryRowButtonSelector).props().disabled).toBe(true);
expect(screen.getByRole('button', { name: /Add row button/i })).toBeDisabled();
expect(screen.getByRole('button', { name: /Rich history button/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
}); });
it('should map click handlers correctly', () => { it('should map click handlers correctly', async () => {
const user = userEvent.setup();
const onClickAddRow = jest.fn(); const onClickAddRow = jest.fn();
const onClickHistory = jest.fn(); const onClickHistory = jest.fn();
const onClickQueryInspector = jest.fn(); const onClickQueryInspector = jest.fn();
const wrapper = shallow(
render(
<SecondaryActions <SecondaryActions
onClickAddQueryRowButton={onClickAddRow} onClickAddQueryRowButton={onClickAddRow}
onClickRichHistoryButton={onClickHistory} onClickRichHistoryButton={onClickHistory}
@@ -58,13 +65,13 @@ describe('SecondaryActions', () => {
/> />
); );
wrapper.find(addQueryRowButtonSelector).simulate('click'); await user.click(screen.getByRole('button', { name: /Add row button/i }));
expect(onClickAddRow).toBeCalled(); expect(onClickAddRow).toBeCalledTimes(1);
wrapper.find(richHistoryButtonSelector).simulate('click'); await user.click(screen.getByRole('button', { name: /Rich history button/i }));
expect(onClickHistory).toBeCalled(); expect(onClickHistory).toBeCalledTimes(1);
wrapper.find(queryInspectorButtonSelector).simulate('click'); await user.click(screen.getByRole('button', { name: /Query inspector button/i }));
expect(onClickQueryInspector).toBeCalled(); expect(onClickQueryInspector).toBeCalledTimes(1);
}); });
}); });