Explore: Relabel secondary actions buttons (#73605)

This commit is contained in:
Giordano Ricci 2023-08-22 14:36:53 +01:00 committed by GitHub
parent 997d21f6e5
commit 35818fa9ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 18 deletions

View File

@ -183,7 +183,7 @@ export const Components = {
QueryTab: {
content: 'Query editor tab content',
queryInspectorButton: 'Query inspector button',
queryHistoryButton: 'Rich history button',
queryHistoryButton: 'data-testid query-history-button',
addQuery: 'Query editor add query button',
},
QueryHistory: {

View File

@ -15,9 +15,9 @@ describe('SecondaryActions', () => {
/>
);
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();
expect(screen.getByRole('button', { name: /Add query/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query history/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector/i })).toBeInTheDocument();
});
it('should not render hidden elements', () => {
@ -31,9 +31,9 @@ describe('SecondaryActions', () => {
/>
);
expect(screen.queryByRole('button', { name: /Add row button/i })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: /Rich history button/i })).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector button/i })).toBeInTheDocument();
expect(screen.queryByRole('button', { name: /Add query/i })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: /Query history/i })).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector/i })).toBeInTheDocument();
});
it('should disable add row button if addQueryRowButtonDisabled=true', () => {
@ -46,9 +46,9 @@ describe('SecondaryActions', () => {
/>
);
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();
expect(screen.getByRole('button', { name: /Add query/i })).toBeDisabled();
expect(screen.getByRole('button', { name: /Query history/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Query inspector/i })).toBeInTheDocument();
});
it('should map click handlers correctly', async () => {
@ -66,13 +66,13 @@ describe('SecondaryActions', () => {
/>
);
await user.click(screen.getByRole('button', { name: /Add row button/i }));
await user.click(screen.getByRole('button', { name: /Add query/i }));
expect(onClickAddRow).toBeCalledTimes(1);
await user.click(screen.getByRole('button', { name: /Rich history button/i }));
await user.click(screen.getByRole('button', { name: /Query history/i }));
expect(onClickHistory).toBeCalledTimes(1);
await user.click(screen.getByRole('button', { name: /Query inspector button/i }));
await user.click(screen.getByRole('button', { name: /Query inspector/i }));
expect(onClickQueryInspector).toBeCalledTimes(1);
});
});

View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Components } from '@grafana/e2e-selectors';
import { HorizontalGroup, ToolbarButton, useTheme2 } from '@grafana/ui';
type Props = {
@ -33,7 +34,7 @@ export function SecondaryActions(props: Props) {
{!props.addQueryRowButtonHidden && (
<ToolbarButton
variant="canvas"
aria-label="Add row button"
aria-label="Add query"
onClick={props.onClickAddQueryRowButton}
disabled={props.addQueryRowButtonDisabled}
icon="plus"
@ -44,8 +45,9 @@ export function SecondaryActions(props: Props) {
{!props.richHistoryRowButtonHidden && (
<ToolbarButton
variant={props.richHistoryButtonActive ? 'active' : 'canvas'}
aria-label="Rich history button"
aria-label="Query history"
onClick={props.onClickRichHistoryButton}
data-testid={Components.QueryTab.queryHistoryButton}
icon="history"
>
Query history
@ -53,11 +55,11 @@ export function SecondaryActions(props: Props) {
)}
<ToolbarButton
variant={props.queryInspectorButtonActive ? 'active' : 'canvas'}
aria-label="Query inspector button"
aria-label="Query inspector"
onClick={props.onClickQueryInspectorButton}
icon="info-circle"
>
Inspector
Query inspector
</ToolbarButton>
</HorizontalGroup>
</div>

View File

@ -27,7 +27,7 @@ export const runQuery = async (exploreId = 'left') => {
export const openQueryHistory = async (exploreId = 'left') => {
const selector = withinExplore(exploreId);
const button = selector.getByRole('button', { name: 'Rich history button' });
const button = selector.getByRole('button', { name: 'Query history' });
await userEvent.click(button);
expect(await selector.findByPlaceholderText('Search queries')).toBeInTheDocument();
};