Panel edit: Add e2e selectors to input fields (#83246)

add selectors for input fields
This commit is contained in:
Erik Sundell 2024-03-12 09:17:41 +01:00 committed by GitHub
parent 6ea9f0c447
commit 8c06c0dea7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 0 deletions

View File

@ -221,6 +221,7 @@ export const Components = {
content: 'Panel editor option pane content', content: 'Panel editor option pane content',
select: 'Panel editor option pane select', select: 'Panel editor option pane select',
fieldLabel: (type: string) => `${type} field property editor`, fieldLabel: (type: string) => `${type} field property editor`,
fieldInput: (title: string) => `data-testid Panel editor option pane field input ${title}`,
}, },
// not sure about the naming *DataPane* // not sure about the naming *DataPane*
DataPane: { DataPane: {

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { VizPanel } from '@grafana/scenes'; import { VizPanel } from '@grafana/scenes';
import { DataLinksInlineEditor, Input, RadioButtonGroup, Select, Switch, TextArea } from '@grafana/ui'; import { DataLinksInlineEditor, Input, RadioButtonGroup, Select, Switch, TextArea } from '@grafana/ui';
@ -50,6 +51,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
render: function renderTitle() { render: function renderTitle() {
return ( return (
<Input <Input
data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Title')}
id="PanelFrameTitle" id="PanelFrameTitle"
defaultValue={panel.title} defaultValue={panel.title}
onBlur={(e) => onPanelConfigChange('title', e.currentTarget.value)} onBlur={(e) => onPanelConfigChange('title', e.currentTarget.value)}
@ -67,6 +69,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
render: function renderDescription() { render: function renderDescription() {
return ( return (
<TextArea <TextArea
data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Description')}
id="description-text-area" id="description-text-area"
defaultValue={panel.description} defaultValue={panel.description}
onBlur={(e) => onPanelConfigChange('description', e.currentTarget.value)} onBlur={(e) => onPanelConfigChange('description', e.currentTarget.value)}
@ -84,6 +87,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
render: function renderTransparent() { render: function renderTransparent() {
return ( return (
<Switch <Switch
data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Transparent background')}
value={panel.transparent} value={panel.transparent}
id="transparent-background" id="transparent-background"
onChange={(e) => onPanelConfigChange('transparent', e.currentTarget.checked)} onChange={(e) => onPanelConfigChange('transparent', e.currentTarget.checked)}