mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Dashboard: Migration - EditVariable Settings: Implement TextBox Variable (#80293)
Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>
This commit is contained in:
parent
c0918d41dd
commit
6c609051a0
@ -0,0 +1,34 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { TextBoxVariableForm } from './TextBoxVariableForm';
|
||||
|
||||
describe('TextBoxVariableForm', () => {
|
||||
it('renders correctly', () => {
|
||||
const onChange = jest.fn();
|
||||
const onBlur = jest.fn();
|
||||
const value = 'test value';
|
||||
|
||||
render(<TextBoxVariableForm value={value} onChange={onChange} onBlur={onBlur} />);
|
||||
|
||||
expect(screen.getByText('Text options')).toBeInTheDocument();
|
||||
expect(screen.getByRole('textbox', { name: 'Default value' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onChange when input value changes', async () => {
|
||||
const onChange = jest.fn();
|
||||
const onBlur = jest.fn();
|
||||
const value = 'test value';
|
||||
|
||||
render(<TextBoxVariableForm value={value} onChange={onChange} onBlur={onBlur} />);
|
||||
|
||||
const input = screen.getByRole('textbox', { name: 'Default value' });
|
||||
expect(input).toHaveValue(value);
|
||||
|
||||
// change input value
|
||||
const newValue = 'new value';
|
||||
await userEvent.type(input, newValue);
|
||||
expect(onChange).toHaveBeenCalledTimes(newValue.length);
|
||||
});
|
||||
});
|
@ -0,0 +1,28 @@
|
||||
import React, { FormEvent } from 'react';
|
||||
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { VariableLegend } from 'app/features/dashboard-scene/settings/variables/components/VariableLegend';
|
||||
import { VariableTextField } from 'app/features/dashboard-scene/settings/variables/components/VariableTextField';
|
||||
|
||||
interface TextBoxVariableFormProps {
|
||||
value: string;
|
||||
onChange: (event: FormEvent<HTMLInputElement>) => void;
|
||||
onBlur: (event: FormEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
export function TextBoxVariableForm({ onChange, onBlur, value }: TextBoxVariableFormProps) {
|
||||
return (
|
||||
<>
|
||||
<VariableLegend>Text options</VariableLegend>
|
||||
<VariableTextField
|
||||
value={value}
|
||||
name="Default value"
|
||||
placeholder="default value, if any"
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
width={30}
|
||||
testId={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
@ -0,0 +1,54 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { TextBoxVariable } from '@grafana/scenes';
|
||||
|
||||
import { TextBoxVariableEditor } from './TextBoxVariableEditor';
|
||||
|
||||
describe('TextBoxVariableEditor', () => {
|
||||
let textBoxVar: TextBoxVariable;
|
||||
beforeEach(async () => {
|
||||
const result = await buildTestScene();
|
||||
textBoxVar = result.textBoxVar;
|
||||
});
|
||||
|
||||
it('renders default value if any', () => {
|
||||
const onChange = jest.fn();
|
||||
render(<TextBoxVariableEditor variable={textBoxVar} onChange={onChange} />);
|
||||
|
||||
const input = screen.getByRole('textbox', { name: 'Default value' });
|
||||
expect(input).toBeInTheDocument();
|
||||
expect(input).toHaveValue('initial value test');
|
||||
});
|
||||
|
||||
it('changes the value', async () => {
|
||||
const onChange = jest.fn();
|
||||
render(<TextBoxVariableEditor variable={textBoxVar} onChange={onChange} />);
|
||||
|
||||
const input = screen.getByRole('textbox', { name: 'Default value' });
|
||||
expect(input).toBeInTheDocument();
|
||||
expect(input).toHaveValue('initial value test');
|
||||
|
||||
// change input value
|
||||
const newValue = 'new textbox value';
|
||||
await userEvent.clear(input);
|
||||
await userEvent.type(input, newValue);
|
||||
|
||||
expect(input).toHaveValue(newValue);
|
||||
|
||||
await userEvent.tab();
|
||||
expect(textBoxVar.state.value).toBe(newValue);
|
||||
});
|
||||
});
|
||||
|
||||
async function buildTestScene() {
|
||||
const textBoxVar = new TextBoxVariable({
|
||||
name: 'textBoxVar',
|
||||
label: 'textBoxVar',
|
||||
type: 'textbox',
|
||||
value: 'initial value test',
|
||||
});
|
||||
|
||||
return { textBoxVar };
|
||||
}
|
@ -1,12 +1,25 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { TextBoxVariable } from '@grafana/scenes';
|
||||
|
||||
import { TextBoxVariableForm } from '../components/TextBoxVariableForm';
|
||||
|
||||
interface TextBoxVariableEditorProps {
|
||||
variable: TextBoxVariable;
|
||||
onChange: (variable: TextBoxVariable) => void;
|
||||
}
|
||||
|
||||
export function TextBoxVariableEditor(props: TextBoxVariableEditorProps) {
|
||||
return <div>TextBoxVariableEditor</div>;
|
||||
export function TextBoxVariableEditor({ variable }: TextBoxVariableEditorProps) {
|
||||
const { value } = variable.useState();
|
||||
const [textValue, setTextValue] = useState(value);
|
||||
|
||||
const onTextValueChange = (event: React.FormEvent<HTMLInputElement>) => {
|
||||
setTextValue(event.currentTarget.value);
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
variable.setState({ value: textValue });
|
||||
};
|
||||
|
||||
return <TextBoxVariableForm value={textValue} onChange={onTextValueChange} onBlur={onBlur} />;
|
||||
}
|
||||
|
@ -1,9 +1,7 @@
|
||||
import React, { FormEvent, ReactElement, useCallback } from 'react';
|
||||
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { TextBoxVariableForm } from 'app/features/dashboard-scene/settings/variables/components/TextBoxVariableForm';
|
||||
|
||||
import { VariableLegend } from '../../dashboard-scene/settings/variables/components/VariableLegend';
|
||||
import { VariableTextField } from '../../dashboard-scene/settings/variables/components/VariableTextField';
|
||||
import { VariableEditorProps } from '../editor/types';
|
||||
import { TextBoxVariableModel } from '../types';
|
||||
|
||||
@ -22,18 +20,5 @@ export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Pro
|
||||
const onChange = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, false), [updateVariable]);
|
||||
const onBlur = useCallback((e: FormEvent<HTMLInputElement>) => updateVariable(e, true), [updateVariable]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<VariableLegend>Text options</VariableLegend>
|
||||
<VariableTextField
|
||||
value={query}
|
||||
name="Default value"
|
||||
placeholder="default value, if any"
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
width={30}
|
||||
testId={selectors.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
return <TextBoxVariableForm value={query} onChange={onChange} onBlur={onBlur} />;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user