IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix tests for Explore - ErrorContainer, MetaInfoText & cleanup (#46744)

Browse Source 
* Move ErrorContainer.test.tsx to RTL

* Remove snapshots and unnecessary tests, change enzyme tests to RTL

* Add fixes to tests
This commit is contained in:
Kristina 2022-03-18 14:44:51 -05:00 committed by GitHub
parent a6dc8255af
commit 1afd278bd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 64 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.betterer.results
View File

@ -227,21 +227,9 @@ exports[`no enzyme tests`] = {
"public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:2556927610": [
[1, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/ErrorContainer.test.tsx:2082593062": [
[2, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/Explore.test.tsx:2684077338": [
[11, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/ExploreDrawer.test.tsx:2094071178": [
[1, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/LiveLogs.test.tsx:1667605379": [
[2, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/MetaInfoText.test.tsx:802018588": [
[1, 27, 13, "RegExp match", "2409514259"]
],
"public/app/features/explore/RichHistory/RichHistory.test.tsx:409631018": [
[1, 17, 13, "RegExp match", "2409514259"]
],

79
public/app/features/explore/ErrorContainer.test.tsx
View File

@ -1,35 +1,54 @@
import React from 'react';
import { DataQueryError } from '@grafana/data';
import { shallow } from 'enzyme';
import { ErrorContainer } from './ErrorContainer';
const makeError = (propOverrides?: DataQueryError): DataQueryError => {
const queryError: DataQueryError = {
data: {
message: 'Error data message',
error: 'Error data content',
},
message: 'Error message',
status: 'Error status',
statusText: 'Error status text',
refId: 'A',
};
Object.assign(queryError, propOverrides);
return queryError;
};
const setup = (propOverrides?: object) => {
const props = {
queryError: makeError(propOverrides),
};
const wrapper = shallow(<ErrorContainer {...props} />);
return wrapper;
};
import { render, screen } from '@testing-library/react';
import { ErrorContainer, ErrorContainerProps } from './ErrorContainer';
describe('ErrorContainer', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
it('should render component and show message', () => {
const props: ErrorContainerProps = {
queryError: {
data: {
message: 'Error data message',
error: 'Error data content',
},
message: 'Error message',
status: 'Error status',
statusText: 'Error status text',
refId: 'A',
},
};
render(<ErrorContainer {...props} />);
const alertEl = screen.getByRole('alert');
expect(alertEl).toBeInTheDocument();
expect(alertEl).toHaveTextContent(/query error/i);
expect(alertEl).toHaveTextContent('Error message');
});
it('should render component and show message if message is in data only', () => {
const props: ErrorContainerProps = {
queryError: {
data: {
message: 'Error data message',
error: 'Error data content',
},
status: 'Error status',
statusText: 'Error status text',
refId: 'A',
},
};
render(<ErrorContainer {...props} />);
const alertEl = screen.getByRole('alert');
expect(alertEl).toBeInTheDocument();
expect(alertEl).toHaveTextContent(/query error/i);
expect(alertEl).toHaveTextContent('Error data message');
});
it('should have hidden unknown error if prop is not passed in', () => {
const props: ErrorContainerProps = {};
render(<ErrorContainer {...props} />);
const alertEl = screen.getByRole('alert', { hidden: true });
expect(alertEl).toBeInTheDocument();
expect(alertEl).toHaveTextContent('Unknown error');
});
});

112
public/app/features/explore/Explore.test.tsx
View File

@ -1,112 +0,0 @@
import React from 'react';
import {
DataSourceApi,
LoadingState,
toUtc,
DataQueryError,
DataQueryRequest,
CoreApp,
createTheme,
} from '@grafana/data';
import { ExploreId } from 'app/types/explore';
import { shallow } from 'enzyme';
import { Explore, Props } from './Explore';
import { scanStopAction } from './state/query';
import { SecondaryActions } from './SecondaryActions';
const dummyProps: Props = {
logsResult: undefined,
changeSize: jest.fn(),
datasourceInstance: {
meta: {
metrics: true,
logs: true,
},
components: {
QueryEditorHelp: {},
},
} as DataSourceApi,
datasourceMissing: false,
exploreId: ExploreId.left,
loading: false,
modifyQueries: jest.fn(),
scanStart: jest.fn(),
scanStopAction: scanStopAction,
setQueries: jest.fn(),
queryKeys: [],
isLive: false,
syncedTimes: false,
updateTimeRange: jest.fn(),
makeAbsoluteTime: jest.fn(),
graphResult: [],
absoluteRange: {
from: 0,
to: 0,
},
timeZone: 'UTC',
queryResponse: {
state: LoadingState.NotStarted,
series: [],
request: {
requestId: '1',
dashboardId: 0,
interval: '1s',
panelId: 1,
scopedVars: {
apps: {
value: 'value',
},
},
targets: [
{
refId: 'A',
},
],
timezone: 'UTC',
app: CoreApp.Explore,
startTime: 0,
} as unknown as DataQueryRequest,
error: {} as DataQueryError,
timeRange: {
from: toUtc('2019-01-01 10:00:00'),
to: toUtc('2019-01-01 16:00:00'),
raw: {
from: 'now-6h',
to: 'now',
},
},
graphFrames: [],
logsFrames: [],
tableFrames: [],
traceFrames: [],
nodeGraphFrames: [],
graphResult: null,
logsResult: null,
tableResult: null,
},
addQueryRow: jest.fn(),
theme: createTheme(),
showMetrics: true,
showLogs: true,
showTable: true,
showTrace: true,
showNodeGraph: true,
splitOpen: (() => {}) as any,
logsVolumeData: undefined,
loadLogsVolumeData: () => {},
changeGraphStyle: () => {},
graphStyle: 'lines',
};
describe('Explore', () => {
it('should render component', () => {
const wrapper = shallow(<Explore {...dummyProps} />);
expect(wrapper).toMatchSnapshot();
});
it('renders SecondaryActions and add row button', () => {
const wrapper = shallow(<Explore {...dummyProps} />);
expect(wrapper.find(SecondaryActions)).toHaveLength(1);
expect(wrapper.find(SecondaryActions).props().addQueryRowButtonHidden).toBe(false);
});
});

11
public/app/features/explore/ExploreDrawer.test.tsx
View File

@ -1,11 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import { ExploreDrawer } from './ExploreDrawer';
describe('<ExploreDrawer />', () => {
it('renders child element', () => {
const childElement = <div>Child element</div>;
const wrapper = mount(<ExploreDrawer width={400}>{childElement}</ExploreDrawer>);
expect(wrapper.text()).toBe('Child element');
});
});

34
public/app/features/explore/MetaInfoText.test.tsx
View File

@ -1,34 +1,26 @@
import React from 'react';
import { shallow, render } from 'enzyme';
import { render, screen } from '@testing-library/react';
import { MetaInfoText, MetaItemProps } from './MetaInfoText';
describe('MetaInfoText', () => {
it('should render component', () => {
const items: MetaItemProps[] = [
{ label: 'label', value: 'value' },
{ label: 'label2', value: 'value2' },
];
const wrapper = shallow(<MetaInfoText metaItems={items} />);
expect(wrapper).toMatchSnapshot();
});
it('should render items', () => {
it('should render component and items', () => {
const items: MetaItemProps[] = [
{ label: 'label', value: 'value' },
{ label: 'label2', value: 'value2' },
];
const wrapper = render(<MetaInfoText metaItems={items} />);
expect(wrapper.find('label')).toBeTruthy();
expect(wrapper.find('value')).toBeTruthy();
expect(wrapper.find('label2')).toBeTruthy();
expect(wrapper.find('value2')).toBeTruthy();
render(<MetaInfoText metaItems={items} />);
expect(screen.getAllByTestId('meta-info-text')).toHaveLength(1);
expect(screen.getAllByTestId('meta-info-text-item')).toHaveLength(2);
expect(screen.getByText('label:')).toBeInTheDocument();
expect(screen.getByText('label2:')).toBeInTheDocument();
expect(screen.getByText(/^value$/)).toBeInTheDocument();
expect(screen.getByText(/^value2$/)).toBeInTheDocument();
});
it('should render no items when the array is empty', () => {
it('should render component with no items when the array is empty', () => {
const items: MetaItemProps[] = [];
const wrapper = shallow(<MetaInfoText metaItems={items} />);
expect(wrapper.find('div').exists()).toBeTruthy();
expect(wrapper.find('div').children()).toHaveLength(0);
render(<MetaInfoText metaItems={items} />);
expect(screen.getAllByTestId('meta-info-text')).toHaveLength(1);
expect(screen.queryByTestId('meta-info-text-item')).toBeNull();
});
});

4
public/app/features/explore/MetaInfoText.tsx
View File

@ -43,7 +43,7 @@ const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {
const { label, value } = props;
return (
<div className={style.metaItem}>
<div data-testid="meta-info-text-item" className={style.metaItem}>
{label && <span className={style.metaLabel}>{label}:</span>}
<span className={style.metaValue}>{value}</span>
</div>
@ -59,7 +59,7 @@ export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps)
const { metaItems } = props;
return (
<div className={style.metaContainer}>
<div className={style.metaContainer} data-testid="meta-info-text">
{metaItems.map((item, index) => (
<MetaInfoItem key={`${index}-${item.label}`} label={item.label} value={item.value} />
))}

16
public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
View File

@ -1,16 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ErrorContainer should render component 1`] = `
<FadeIn
duration={100}
in={true}
>
<Alert
className="css-x7g5ai"
severity="error"
title="Query error"
>
Error message
</Alert>
</FadeIn>
`;

49
public/app/features/explore/__snapshots__/Explore.test.tsx.snap
View File

@ -1,49 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Explore should render component 1`] = `
<CustomScrollbar
autoHeightMin="100%"
scrollRefCallback={[Function]}
>
<Connect(UnConnectedExploreToolbar)
exploreId="left"
onChangeTime={[Function]}
topOfExploreViewRef={
Object {
"current": null,
}
}
/>
<div
className="explore-container"
>
<div
className="panel-container css-18dr9jf-queryContainer"
>
<QueryRows
exploreId="left"
/>
<SecondaryActions
addQueryRowButtonDisabled={false}
addQueryRowButtonHidden={false}
onClickAddQueryRowButton={[Function]}
onClickQueryInspectorButton={[Function]}
onClickRichHistoryButton={[Function]}
queryInspectorButtonActive={false}
richHistoryButtonActive={false}
/>
<ResponseErrorContainer
exploreId="left"
/>
</div>
<AutoSizer
disableHeight={true}
disableWidth={false}
onResize={[Function]}
style={Object {}}
>
<Component />
</AutoSizer>
</div>
</CustomScrollbar>
`;

18
public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
View File

@ -1,18 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MetaInfoText should render component 1`] = `
<div
className="css-mecrmv"
>
<Memo(MetaInfoItem)
key="0-label"
label="label"
value="value"
/>
<Memo(MetaInfoItem)
key="1-label2"
label="label2"
value="value2"
/>
</div>
`;