From 009716a408576f53a24edd75f99d5f4be62b570a Mon Sep 17 00:00:00 2001 From: grafakus Date: Tue, 25 Nov 2025 18:21:29 +0100 Subject: [PATCH] test(CustomVariableEditor): Add unit tests --- .../CustomVariableEditor.test.tsx | 288 ++++++++++++------ 1 file changed, 195 insertions(+), 93 deletions(-) diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx index a7315d37a76..425dc472671 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx @@ -5,117 +5,219 @@ import { CustomVariable } from '@grafana/scenes'; import { CustomVariableEditor } from './CustomVariableEditor'; +function setup(options: Partial[0]> = {}) { + return { + variable: new CustomVariable({ + name: 'customVar', + ...options, + }), + onRunQuery: jest.fn(), + }; +} + +function renderEditor(ui: React.ReactNode) { + const renderResult = render(ui); + + const elements = { + formatButton: (label: string) => renderResult.queryByLabelText(label) as HTMLElement, + queryInput: () => + renderResult.queryByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput + ) as HTMLTextAreaElement, + multiValueCheckbox: () => + renderResult.queryByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch + ) as HTMLInputElement, + allowCustomValueCheckbox: () => + renderResult.queryByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsAllowCustomValueSwitch + ) as HTMLInputElement, + includeAllCheckbox: () => + renderResult.queryByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch + ) as HTMLInputElement, + customAllValueInput: () => + renderResult.queryByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput + ) as HTMLInputElement, + }; + + return { + ...renderResult, + elements, + actions: { + updateValuesInput(newQuery: string) { + fireEvent.change(elements.queryInput(), { target: { value: newQuery } }); + fireEvent.blur(elements.queryInput()); + }, + changeValuesFormat(newFormat: 'csv' | 'json') { + const targetLabel = newFormat === 'json' ? 'Object values in a JSON array' : 'Values separated by comma'; + fireEvent.click(elements.formatButton(targetLabel)); + }, + }, + }; +} + describe('CustomVariableEditor', () => { - it('should render the CustomVariableForm with correct initial values', () => { - const variable = new CustomVariable({ - name: 'customVar', - query: 'test, test2', - value: 'test', - isMulti: true, - includeAll: true, - allValue: 'test', + describe('CSV values format', () => { + it('should render CustomVariableForm with the correct initial values', () => { + const { variable, onRunQuery } = setup({ + query: 'test, test2', + value: 'test', + isMulti: true, + includeAll: true, + allowCustomValue: true, + allValue: 'all', + }); + + const { elements } = renderEditor(); + + expect(elements.queryInput().value).toBe('test, test2'); + expect(elements.multiValueCheckbox().checked).toBe(true); + expect(elements.allowCustomValueCheckbox().checked).toBe(true); + expect(elements.includeAllCheckbox().checked).toBe(true); + expect(elements.customAllValueInput().value).toBe('all'); }); - const onRunQuery = jest.fn(); - const { getByTestId } = render(); + it('should update the variable state when some input values change ("Multi-value", "Allow custom values" & "Include All option")', () => { + const { variable, onRunQuery } = setup({ + query: 'test, test2', + value: 'test', + isMulti: false, + allowCustomValue: false, + includeAll: false, + }); - const queryInput = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput - ) as HTMLInputElement; - const allValueInput = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput - ) as HTMLInputElement; - const multiCheckbox = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch - ) as HTMLInputElement; - const includeAllCheckbox = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch - ) as HTMLInputElement; + const { elements } = renderEditor(); - expect(queryInput.value).toBe('test, test2'); - expect(allValueInput.value).toBe('test'); - expect(multiCheckbox.checked).toBe(true); - expect(includeAllCheckbox.checked).toBe(true); + expect(elements.multiValueCheckbox().checked).toBe(false); + expect(elements.allowCustomValueCheckbox().checked).toBe(false); + expect(elements.includeAllCheckbox().checked).toBe(false); + // include-all-custom input appears after include-all checkbox is checked only + expect(elements.customAllValueInput()).not.toBeInTheDocument(); + + fireEvent.click(elements.multiValueCheckbox()); + fireEvent.click(elements.allowCustomValueCheckbox()); + fireEvent.click(elements.includeAllCheckbox()); + + expect(variable.state.isMulti).toBe(true); + expect(variable.state.allowCustomValue).toBe(true); + expect(variable.state.includeAll).toBe(true); + expect(elements.customAllValueInput()).toBeInTheDocument(); + }); + + describe('when the values textarea loses focus after its value has changed', () => { + it('should update the query in the variable state and call the onRunQuery callback', async () => { + const { variable, onRunQuery } = setup({ query: 'test, test2', value: 'test' }); + + const { actions } = renderEditor(); + + actions.updateValuesInput('test3, test4'); + + expect(variable.state.query).toBe('test3, test4'); + expect(onRunQuery).toHaveBeenCalled(); + }); + }); + + describe('when the "Custom all value" input loses focus after its value has changed', () => { + it('should update the variable state', () => { + const { variable, onRunQuery } = setup({ + query: 'test, test2', + value: 'test', + isMulti: true, + includeAll: true, + }); + + const { elements } = renderEditor(); + + fireEvent.change(elements.customAllValueInput(), { target: { value: 'new custom all' } }); + fireEvent.blur(elements.customAllValueInput()); + + expect(variable.state.allValue).toBe('new custom all'); + }); + }); }); - it('should update the variable state when input values change', () => { - const variable = new CustomVariable({ - name: 'customVar', - query: 'test, test2', - value: 'test', + describe('JSON values format', () => { + const initialQuery = `[ + {"value":1,"text":"Development","aws":"dev","azure":"development"}, + {"value":2,"text":"Production","aws":"prod","azure":"production"} + ]`; + + it('should render CustomVariableForm with the correct initial values', () => { + const { variable, onRunQuery } = setup({ + valuesFormat: 'json', + query: initialQuery, + isMulti: true, + includeAll: true, + }); + + const { elements } = renderEditor(); + + expect(elements.queryInput().value).toBe(initialQuery); + expect(elements.multiValueCheckbox().checked).toBe(true); + expect(elements.allowCustomValueCheckbox()).not.toBeInTheDocument(); + expect(elements.includeAllCheckbox().checked).toBe(true); + expect(elements.customAllValueInput()).not.toBeInTheDocument(); }); - const onRunQuery = jest.fn(); - const { getByTestId } = render(); + describe('when the values textarea loses focus after its value has changed', () => { + describe('if the value is valid JSON', () => { + it('should update the query in the variable state and call the onRunQuery callback', async () => { + const { variable, onRunQuery } = setup({ valuesFormat: 'json', query: initialQuery }); - const multiCheckbox = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch - ); - const includeAllCheckbox = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch - ); + const { actions } = renderEditor(); - const allowCustomValueCheckbox = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsAllowCustomValueSwitch - ); + actions.updateValuesInput('[]'); - // It include-all-custom input appears after include-all checkbox is checked only - expect(() => - getByTestId(selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput) - ).toThrow('Unable to find an element'); + expect(variable.state.query).toBe('[]'); + expect(onRunQuery).toHaveBeenCalled(); + }); + }); - fireEvent.click(allowCustomValueCheckbox); + describe('if the value is NOT valid JSON', () => { + it('should display a validation error message and neither update the query in the variable state nor call the onRunQuery callback', async () => { + const { variable, onRunQuery } = setup({ valuesFormat: 'json', query: initialQuery }); - fireEvent.click(multiCheckbox); + const { actions, getByRole } = renderEditor( + + ); - fireEvent.click(includeAllCheckbox); - const allValueInput = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput - ); + actions.updateValuesInput('[x]'); - expect(variable.state.isMulti).toBe(true); - expect(variable.state.includeAll).toBe(true); - expect(variable.state.allowCustomValue).toBe(false); - expect(allValueInput).toBeInTheDocument(); + expect(getByRole('alert')).toHaveTextContent(`Unexpected token 'x', "[x]" is not valid JSON`); + expect(variable.state.query).toBe(initialQuery); + expect(onRunQuery).not.toHaveBeenCalled(); + }); + }); + }); }); - it('should call update query and re-run query when input loses focus', async () => { - const variable = new CustomVariable({ - name: 'customVar', - query: 'test, test2', - value: 'test', + describe('when switching values format', () => { + it('should switch the visibility of the proper form inputs ("Allow custom values" and "Custom all value")', () => { + const { variable, onRunQuery } = setup({ + valuesFormat: 'csv', + query: '', + isMulti: true, + includeAll: true, + allowCustomValue: true, + allValue: '', + }); + + const { elements, actions } = renderEditor(); + + expect(elements.allowCustomValueCheckbox()).toBeInTheDocument(); + expect(elements.customAllValueInput()).toBeInTheDocument(); + + actions.changeValuesFormat('json'); + + expect(elements.allowCustomValueCheckbox()).not.toBeInTheDocument(); + expect(elements.customAllValueInput()).not.toBeInTheDocument(); + + actions.changeValuesFormat('csv'); + + expect(elements.allowCustomValueCheckbox()).toBeInTheDocument(); + expect(elements.customAllValueInput()).toBeInTheDocument(); }); - const onRunQuery = jest.fn(); - - const { getByTestId } = render(); - - const queryInput = getByTestId(selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput); - fireEvent.change(queryInput, { target: { value: 'test3, test4' } }); - fireEvent.blur(queryInput); - - expect(onRunQuery).toHaveBeenCalled(); - expect(variable.state.query).toBe('test3, test4'); - }); - - it('should update the variable state when all-custom-value input loses focus', () => { - const variable = new CustomVariable({ - name: 'customVar', - query: 'test, test2', - value: 'test', - isMulti: true, - includeAll: true, - }); - const onRunQuery = jest.fn(); - - const { getByTestId } = render(); - - const allValueInput = getByTestId( - selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput - ) as HTMLInputElement; - - fireEvent.change(allValueInput, { target: { value: 'new custom all' } }); - fireEvent.blur(allValueInput); - - expect(variable.state.allValue).toBe('new custom all'); }); });