IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

e2e: adds panel editor tests for test data queries (#23996)

Browse Source
This commit is contained in:
Hugo Häggmark
2020-04-30 09:26:59 +02:00
committed by GitHub
parent efeb4c1341
commit 55ac97dccc
9 changed files with 181 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
View File

@@ -1,7 +1,8 @@
import { IconName, IconButton, stylesFactory, useTheme } from '@grafana/ui';
import { IconButton, IconName, stylesFactory, useTheme } from '@grafana/ui';
import React from 'react';
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
interface QueryOperationActionProps {
icon: IconName;
@@ -27,7 +28,7 @@ export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({ icon
disabled={!!disabled}
onClick={onClick}
surface="header"
aria-label={`${title} query operation action`}
aria-label={selectors.components.QueryEditorRow.actionButton(title)}
/>
);
};

2
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { renderOrCallToRender, Icon, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
import { HorizontalGroup, Icon, renderOrCallToRender, stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion';
import { useUpdateEffect } from 'react-use';

6
public/app/features/dashboard/components/Inspector/QueryInspector.tsx
View File

@@ -198,7 +198,11 @@ export class QueryInspector extends PureComponent<Props, State> {
</p>
</div>
<div className={styles.toolbar}>
<Button icon="sync" onClick={this.onIssueNewQuery}>
<Button
icon="sync"
onClick={this.onIssueNewQuery}
aria-label={selectors.components.PanelInspector.Query.refreshButton}
>
Refresh
</Button>

7
public/app/features/dashboard/panel_editor/QueriesTab.tsx
View File

@@ -271,7 +271,12 @@ export class QueriesTab extends PureComponent<Props, State> {
return (
<HorizontalGroup spacing="md" align="flex-start">
{showAddButton && (
<Button icon="plus" onClick={this.onAddQueryClick} variant="secondary">
<Button
icon="plus"
onClick={this.onAddQueryClick}
variant="secondary"
aria-label={selectors.components.QueryTab.addQuery}
>
Query
</Button>
)}

13
public/app/features/dashboard/panel_editor/QueryEditorRow.tsx
View File

@@ -24,6 +24,7 @@ import { QueryEditorRowTitle } from './QueryEditorRowTitle';
import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
import { DashboardModel } from '../state/DashboardModel';
import { selectors } from '@grafana/e2e-selectors';
interface Props {
panel: PanelModel;
@@ -282,11 +283,13 @@ export class QueryEditorRow extends PureComponent<Props, State> {
const editor = this.renderPluginEditor();
return (
<QueryOperationRow title={this.renderTitle} actions={this.renderActions} onOpen={this.onOpen}>
<div className={rowClasses}>
<ErrorBoundaryAlert>{editor}</ErrorBoundaryAlert>
</div>
</QueryOperationRow>
<div aria-label={selectors.components.QueryEditorRows.rows}>
<QueryOperationRow title={this.renderTitle} actions={this.renderActions} onOpen={this.onOpen}>
<div className={rowClasses}>
<ErrorBoundaryAlert>{editor}</ErrorBoundaryAlert>
</div>
</QueryOperationRow>
</div>
);
}
}

3
public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { css } from 'emotion';
import { DataQuery, DataSourceApi, GrafanaTheme } from '@grafana/data';
import { HorizontalGroup, stylesFactory, useTheme } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
interface QueryEditorRowTitleProps {
query: DataQuery;
@@ -24,7 +25,7 @@ export const QueryEditorRowTitle: React.FC<QueryEditorRowTitleProps> = ({
const styles = getQueryEditorRowTitleStyles(theme);
return (
<HorizontalGroup align="center">
<div className={styles.refId}>
<div className={styles.refId} aria-label={selectors.components.QueryEditorRow.title(query.refId)}>
<span>{query.refId}</span>
{inMixedMode && <em className={styles.contextInfo}> ({datasource.name})</em>}
{disabled && <em className={styles.contextInfo}> Disabled</em>}