mirror of https://github.com/grafana/grafana
Alerting: moving data source uid to query instead of model (#33416)
* initial commit. * Some more improvements to the expression data source support. * added tests to verify that time range picker and data source picker only is visible when callbacks is passed to row. * fixing issue with filter in alerting list. * minor refactoring. * removed guarding code, should be fixed in backend. * cleaning the data query if we change to a different data source.pull/33506/head
Marcus Andersson
5 years ago
committed by
GitHub
parent
28ec96788c
commit
9de2f1bb8f
@ -0,0 +1,124 @@ |
||||
import React from 'react'; |
||||
import { fireEvent, render, screen } from '@testing-library/react'; |
||||
import { Props, QueryEditorRowHeader } from './QueryEditorRowHeader'; |
||||
import { DataSourceInstanceSettings, dateTime } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
|
||||
jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => { |
||||
return { |
||||
getDataSourceSrv: () => ({ |
||||
getInstanceSettings: jest.fn(), |
||||
getList: jest.fn().mockReturnValue([]), |
||||
}), |
||||
}; |
||||
}); |
||||
|
||||
describe('QueryEditorRowHeader', () => { |
||||
it('Can edit title', () => { |
||||
const scenario = renderScenario({}); |
||||
screen.getByTestId('query-name-div').click(); |
||||
|
||||
const input = screen.getByTestId('query-name-input'); |
||||
fireEvent.change(input, { target: { value: 'new name' } }); |
||||
fireEvent.blur(input); |
||||
|
||||
expect((scenario.props.onChange as any).mock.calls[0][0].refId).toBe('new name'); |
||||
}); |
||||
|
||||
it('Show error when other query with same name exists', async () => { |
||||
renderScenario({}); |
||||
|
||||
screen.getByTestId('query-name-div').click(); |
||||
const input = screen.getByTestId('query-name-input'); |
||||
fireEvent.change(input, { target: { value: 'B' } }); |
||||
const alert = await screen.findByRole('alert'); |
||||
|
||||
expect(alert.textContent).toBe('Query name already exists'); |
||||
}); |
||||
|
||||
it('Show error when empty name is specified', async () => { |
||||
renderScenario({}); |
||||
|
||||
screen.getByTestId('query-name-div').click(); |
||||
const input = screen.getByTestId('query-name-input'); |
||||
fireEvent.change(input, { target: { value: '' } }); |
||||
const alert = await screen.findByRole('alert'); |
||||
|
||||
expect(alert.textContent).toBe('An empty query name is not allowed'); |
||||
}); |
||||
|
||||
it('should show data source picker when callback is passed', async () => { |
||||
renderScenario({ onChangeDataSource: () => {} }); |
||||
|
||||
expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).not.toBeNull(); |
||||
}); |
||||
|
||||
it('should not show data source picker when no callback is passed', async () => { |
||||
renderScenario({ onChangeDataSource: undefined }); |
||||
|
||||
expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).toBeNull(); |
||||
}); |
||||
|
||||
it('should show time range picker when callback and value is passed', async () => { |
||||
renderScenario({ |
||||
onChangeTimeRange: () => {}, |
||||
timeRange: { |
||||
from: dateTime(), |
||||
to: dateTime(), |
||||
raw: { from: 'now', to: 'now' }, |
||||
}, |
||||
}); |
||||
|
||||
expect(screen.queryByLabelText(selectors.components.TimePicker.openButton)).not.toBeNull(); |
||||
}); |
||||
|
||||
it('should not show time range picker when no value is passed', async () => { |
||||
renderScenario({ |
||||
onChangeTimeRange: () => {}, |
||||
timeRange: undefined, |
||||
}); |
||||
|
||||
expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).toBeNull(); |
||||
}); |
||||
|
||||
it('should not show time range picker when no callback is passed', async () => { |
||||
renderScenario({ |
||||
onChangeTimeRange: undefined, |
||||
timeRange: { |
||||
from: dateTime(), |
||||
to: dateTime(), |
||||
raw: { from: 'now', to: 'now' }, |
||||
}, |
||||
}); |
||||
|
||||
expect(screen.queryByLabelText(selectors.components.DataSourcePicker.container)).toBeNull(); |
||||
}); |
||||
}); |
||||
|
||||
function renderScenario(overrides: Partial<Props>) { |
||||
const props: Props = { |
||||
query: { |
||||
refId: 'A', |
||||
}, |
||||
queries: [ |
||||
{ |
||||
refId: 'A', |
||||
}, |
||||
{ |
||||
refId: 'B', |
||||
}, |
||||
], |
||||
dataSource: {} as DataSourceInstanceSettings, |
||||
disabled: false, |
||||
onChange: jest.fn(), |
||||
onClick: jest.fn(), |
||||
collapsedText: '', |
||||
}; |
||||
|
||||
Object.assign(props, overrides); |
||||
|
||||
return { |
||||
props, |
||||
renderResult: render(<QueryEditorRowHeader {...props} />), |
||||
}; |
||||
} |
||||
@ -1,66 +0,0 @@ |
||||
import React from 'react'; |
||||
import { fireEvent, render, screen } from '@testing-library/react'; |
||||
import { Props, QueryEditorRowTitle } from './QueryEditorRowTitle'; |
||||
|
||||
function renderScenario(overrides: Partial<Props>) { |
||||
const props: Props = { |
||||
query: { |
||||
refId: 'A', |
||||
}, |
||||
queries: [ |
||||
{ |
||||
refId: 'A', |
||||
}, |
||||
{ |
||||
refId: 'B', |
||||
}, |
||||
], |
||||
dataSourceName: 'hello', |
||||
disabled: false, |
||||
onChange: jest.fn(), |
||||
onClick: jest.fn(), |
||||
collapsedText: '', |
||||
}; |
||||
|
||||
Object.assign(props, overrides); |
||||
|
||||
return { |
||||
props, |
||||
renderResult: render(<QueryEditorRowTitle {...props} />), |
||||
}; |
||||
} |
||||
|
||||
describe('QueryEditorRowTitle', () => { |
||||
it('Can edit title', () => { |
||||
const scenario = renderScenario({}); |
||||
screen.getByTestId('query-name-div').click(); |
||||
|
||||
const input = screen.getByTestId('query-name-input'); |
||||
fireEvent.change(input, { target: { value: 'new name' } }); |
||||
fireEvent.blur(input); |
||||
|
||||
expect((scenario.props.onChange as any).mock.calls[0][0].refId).toBe('new name'); |
||||
}); |
||||
|
||||
it('Show error when other query with same name exists', async () => { |
||||
renderScenario({}); |
||||
|
||||
screen.getByTestId('query-name-div').click(); |
||||
const input = screen.getByTestId('query-name-input'); |
||||
fireEvent.change(input, { target: { value: 'B' } }); |
||||
const alert = await screen.findByRole('alert'); |
||||
|
||||
expect(alert.textContent).toBe('Query name already exists'); |
||||
}); |
||||
|
||||
it('Show error when empty name is specified', async () => { |
||||
renderScenario({}); |
||||
|
||||
screen.getByTestId('query-name-div').click(); |
||||
const input = screen.getByTestId('query-name-input'); |
||||
fireEvent.change(input, { target: { value: '' } }); |
||||
const alert = await screen.findByRole('alert'); |
||||
|
||||
expect(alert.textContent).toBe('An empty query name is not allowed'); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue