Selector improvements for E2E (#27271)

611d416f · Steven Vachon · GitHub · 7d72837d · 611d416f · 611d416f
Commit 611d416f authored Aug 28, 2020 by Steven Vachon Committed by GitHub Aug 28, 2020
7 changed files
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts
@@ -125,7 +125,9 @@ export const Pages = {
    url: '/explore',
    General: {
      container: 'Explore',
+      graph: 'Explore Graph',
      runButton: 'Run button',
+      table: 'Explore Table',
    },
    Toolbar: {
      navBar: '.explore-toolbar',

--- a/packages/grafana-ui/src/components/Graph/Graph.tsx
+++ b/packages/grafana-ui/src/components/Graph/Graph.tsx
@@ -13,6 +13,7 @@ import { GraphDimensions } from './GraphTooltip/types';
 import { graphTimeFormat, graphTickFormatter } from './utils';
 export interface GraphProps {
+  ariaLabel?: string;
  children?: JSX.Element | JSX.Element[];
  series: GraphSeriesXY[];
  timeRange: TimeRange; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs
@@ -361,12 +362,12 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
  }
  render() {
-    const { height, width, series } = this.props;
+    const { ariaLabel, height, width, series } = this.props;
    const noDataToBeDisplayed = series.length === 0;
    const tooltip = this.renderTooltip();
    const context = this.renderContextMenu();
    return (
-      <div className="graph-panel">
+      <div className="graph-panel" aria-label={ariaLabel}>
        <div
          className="graph-panel__chart"
          ref={e => (this.element = e)}

--- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
+++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
@@ -73,6 +73,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
    onHorizontalRegionSelected,
    timeZone,
    children,
+    ariaLabel,
  } = props;
  const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props);
@@ -91,7 +92,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
  }, []);
  return (
-    <div className={wrapper}>
+    <div className={wrapper} aria-label={ariaLabel}>
      <div className={graphContainer}>
        <Graph
          series={series}

--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -28,6 +28,7 @@ import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 const COLUMN_MIN_WIDTH = 150;
 export interface Props {
+  ariaLabel?: string;
  data: DataFrame;
  width: number;
  height: number;
@@ -111,6 +112,7 @@ function getInitialState(props: Props, columns: Column[]): Partial<ReactTableInt
 export const Table: FC<Props> = memo((props: Props) => {
  const {
+    ariaLabel,
    data,
    height,
    onCellFilterAdded,
@@ -182,7 +184,7 @@ export const Table: FC<Props> = memo((props: Props) => {
  const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
  return (
-    <div {...getTableProps()} className={tableStyles.table}>
+    <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel}>
      <CustomScrollbar hideVerticalTrack={true}>
        <div style={{ width: `${totalColumnsWidth}px` }}>
          {!noHeader && (

--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -389,6 +389,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                        <>
                          {showMetrics && (
                            <ExploreGraphPanel
+                              ariaLabel={selectors.pages.Explore.General.graph}
                              series={graphResult}
                              width={width}
                              loading={loading}
@@ -406,6 +407,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                          )}
                          {showTable && (
                            <TableContainer
+                              ariaLabel={selectors.pages.Explore.General.table}
                              width={width}
                              exploreId={exploreId}
                              onCellFilterAdded={

--- a/public/app/features/explore/ExploreGraphPanel.tsx
+++ b/public/app/features/explore/ExploreGraphPanel.tsx
@@ -40,6 +40,7 @@ const getStyles = (theme: GrafanaTheme) => ({
 });
 interface Props extends Themeable {
+  ariaLabel?: string;
  series?: GraphSeriesXY[] | null;
  width: number;
  absoluteRange: AbsoluteTimeRange;
@@ -87,6 +88,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
  renderGraph = () => {
    const {
+      ariaLabel,
      width,
      series,
      onHiddenSeriesChanged,
@@ -123,6 +125,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
        {({ onSeriesToggle, toggledSeries }: GraphSeriesTogglerAPI) => {
          return (
            <GraphWithLegend
+              ariaLabel={ariaLabel}
              displayMode={LegendDisplayMode.List}
              height={height}
              isLegendVisible={true}

--- a/public/app/features/explore/TableContainer.tsx
+++ b/public/app/features/explore/TableContainer.tsx
@@ -13,6 +13,7 @@ import { FilterItem } from '@grafana/ui/src/components/Table/types';
 import { getFieldLinksForExplore } from './utils/links';
 interface TableContainerProps {
+  ariaLabel?: string;
  exploreId: ExploreId;
  loading: boolean;
  width: number;
@@ -41,7 +42,7 @@ export class TableContainer extends PureComponent<TableContainerProps> {
  }
  render() {
-    const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range } = this.props;
+    const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range, ariaLabel } = this.props;
    const height = this.getTableHeight();
    const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER;
@@ -61,7 +62,13 @@ export class TableContainer extends PureComponent<TableContainerProps> {
    return (
      <Collapse label="Table" loading={loading} collapsible isOpen={showingTable} onToggle={this.onClickTableButton}>
        {hasTableResult ? (
-          <Table data={tableResult!} width={tableWidth} height={height} onCellFilterAdded={onCellFilterAdded} />
+          <Table
+            ariaLabel={ariaLabel}
+            data={tableResult!}
+            width={tableWidth}
+            height={height}
+            onCellFilterAdded={onCellFilterAdded}
+          />
        ) : (
          <MetaInfoText metaItems={[{ value: '0 series returned' }]} />
        )}