Merge pull request #111 from grafana/visual-builder/e2e

Visual query builder: Update e2e selectors

package.json

@@ -27,6 +27,7 @@
   "peerDependencies": {
     "@emotion/css": "11.11.2",
     "@grafana/data": "^10.0.0",
+    "@grafana/e2e-selectors": "^10.0.0",
     "@grafana/runtime": "^10.0.0",
     "@grafana/ui": "^10.0.0",
     "react": "17.0.2",
@@ -36,6 +37,7 @@
   },
   "devDependencies": {
     "@grafana/data": "^10.0.0",
+    "@grafana/e2e-selectors": "^10.0.0",
     "@grafana/eslint-config": "^6.0.0",
     "@grafana/runtime": "^10.0.0",
     "@grafana/tsconfig": "^1.3.0-rc1",
@@ -65,6 +67,7 @@
     "pretty-format": "25.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-select-event": "^5.5.1",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "2.79.1",

src/VisualQueryBuilder/components/LabelFilterItem.tsx

@@ -1,5 +1,6 @@
 import  { uniqBy } from 'lodash';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import { v4 } from 'uuid';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -70,15 +71,16 @@ export function LabelFilterItem({
   };
 
   const isConflicting = isConflictingLabelFilter(item, items);
+  const { current: id } = useRef(v4());
 
   return (
     <div data-testid="visual-query-builder-dimensions-filter-item">
       <InlineField error={CONFLICTING_LABEL_FILTER_ERROR_MESSAGE} invalid={isConflicting ? true : undefined}>
         <InputGroup>
           <Select<string>
             placeholder="Select label"
-            aria-label={selectors.components.QueryBuilder.labelSelect}
-            inputId="visual-query-builder-dimensions-filter-item-key"
+            data-testid={selectors.components.QueryBuilder.labelSelect}
+            inputId={`visual-query-builder-dimensions-filter-item-key-${id}`}
             width="auto"
             value={item.label ? toOption(item.label) : null}
             allowCustomValue
@@ -107,7 +109,7 @@ export function LabelFilterItem({
           />
 
           <Select<string>
-            aria-label={selectors.components.QueryBuilder.matchOperatorSelect}
+            data-testid={selectors.components.QueryBuilder.matchOperatorSelect}
             value={toOption(item.op ?? defaultOp)}
             options={operators}
             width="auto"
@@ -125,8 +127,8 @@ export function LabelFilterItem({
 
           <Select<string>
             placeholder="Select value"
-            aria-label={selectors.components.QueryBuilder.valueSelect}
-            inputId="visual-query-builder-dimensions-filter-item-value"
+            data-testid={selectors.components.QueryBuilder.valueSelect}
+            inputId={`visual-query-builder-dimensions-filter-item-value-${id}`}
             width="auto"
             value={
               isMultiSelect()

src/VisualQueryBuilder/components/OperationEditor.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Draggable, DraggableProvided } from 'react-beautiful-dnd';
 import { v4 } from 'uuid';
 
@@ -49,7 +49,7 @@ export function OperationEditor<T extends VisualQuery>({
 }: Props<T>) {
   const def = queryModeller.getOperationDefinition(operation.id);
   const shouldFlash = useFlash(flash);
-  const id = v4();
+  const { current: id } = useRef(v4());
 
   const theme = useTheme2();
   const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;

src/VisualQueryBuilder/components/QueryBuilderHints.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 import React, { useState, useEffect } from 'react';
 
-import { DataSourceApi, GrafanaTheme2, PanelData, QueryHint } from '@grafana/data';
+import { DataSourceApi, GrafanaTheme2, PanelData, QueryHint, DataQuery } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { DataQuery } from '@grafana/schema';
 import { Button, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { VisualQuery, VisualQueryModeller } from '../types';

yarn.lock

@@ -673,6 +673,15 @@
     tslib "2.5.0"
     typescript "4.8.4"
 
+"@grafana/e2e-selectors@^10.0.0":
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/@grafana/e2e-selectors/-/e2e-selectors-10.3.1.tgz#b13676250ee5d80a7f65a58269f0c3a2d63397be"
+  integrity sha512-+qWAXViafuJYH7rN54iQmt7nbCWcA+FTpMGlzfezCdXAwcU3NiIvo4PD5kxR7nYcm1+s5G5pTZ00DQHxO5vBRw==
+  dependencies:
+    "@grafana/tsconfig" "^1.2.0-rc1"
+    tslib "2.6.0"
+    typescript "5.2.2"
+
 "@grafana/eslint-config@^6.0.0":
   version "6.0.0"
   resolved "https://registry.npmjs.org/@grafana/eslint-config/-/eslint-config-6.0.0.tgz"
@@ -6000,7 +6009,7 @@ [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-select-event@^5.1.0:
+react-select-event@^5.1.0, react-select-event@^5.5.1:
   version "5.5.1"
   resolved "https://registry.npmjs.org/react-select-event/-/react-select-event-5.5.1.tgz"
   integrity sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==
@@ -6829,6 +6838,11 @@ [email protected], tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
+[email protected]:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
+  integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
+
 tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
@@ -6889,6 +6903,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
+[email protected]:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+
 typescript@^4.5.2:
   version "4.9.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"