add aggregation tests

This commit is contained in:
Erik Sundell
2019-01-03 16:00:42 +01:00
parent d23c3d2b64
commit cc7b754e77
4 changed files with 179 additions and 9 deletions

View File

@ -0,0 +1,56 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { Aggregations, Props } from './Aggregations';
import { shallow } from 'enzyme';
import { ValueTypes, MetricKind } from '../constants';
const props: Props = {
onChange: () => {},
templateSrv: {},
metricDescriptor: {
valueType: '',
metricKind: '',
},
crossSeriesReducer: '',
groupBys: [],
children: renderProps => <div />,
};
describe('Aggregations', () => {
let wrapper;
it('renders correctly', () => {
const tree = renderer.create(<Aggregations {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
describe('options', () => {
describe('when DOUBLE and DELTA is passed as props', () => {
beforeEach(() => {
const newProps = { ...props, metricDescriptor: { valueType: ValueTypes.DOUBLE, metricKind: MetricKind.GAUGE } };
wrapper = shallow(<Aggregations {...newProps} />);
});
it('', () => {
const options = wrapper.state().aggOptions[0].options;
expect(options.length).toEqual(11);
expect(options.map(o => o.value)).toEqual(
expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE'])
);
});
});
describe('when MONEY and CUMULATIVE is passed as props', () => {
beforeEach(() => {
const newProps = {
...props,
metricDescriptor: { valueType: ValueTypes.MONEY, metricKind: MetricKind.CUMULATIVE },
};
wrapper = shallow(<Aggregations {...newProps} />);
});
it('', () => {
const options = wrapper.state().aggOptions[0].options;
expect(options.length).toEqual(1);
expect(options.map(o => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE']));
});
});
});
});

View File

@ -16,7 +16,7 @@ export interface Props {
children?: (renderProps: any) => JSX.Element;
}
interface State {
export interface State {
aggOptions: any[];
displayAdvancedOptions: boolean;
}
@ -79,13 +79,9 @@ export class Aggregations extends React.Component<Props, State> {
<div className="gf-form gf-form--grow">
<label className="gf-form-label gf-form-label--grow">
<a onClick={() => this.handleToggleDisplayAdvanced()}>
{displayAdvancedOptions ? (
<i className="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions" />
) : (
<React.Fragment>
<i className="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions" /> Advanced Options
</React.Fragment>
)}
<React.Fragment>
<i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
</React.Fragment>
</a>
</label>
</div>

View File

@ -0,0 +1,119 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Aggregations renders correctly 1`] = `
Array [
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<label
className="gf-form-label query-keyword width-9"
>
Aggregation
</label>
<div
className="css-0 gf-form-input gf-form-input--form-dropdown width-15"
onKeyDown={[Function]}
>
<div
className="css-0 gf-form-select-box__control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className="css-0 gf-form-select-box__value-container"
>
<div
className="css-0 gf-form-select-box__placeholder"
>
Select Aggregation
</div>
<div
className="css-0"
>
<div
className="gf-form-select-box__input"
style={
Object {
"display": "inline-block",
}
}
>
<input
aria-autocomplete="list"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
disabled={false}
id="react-select-2-input"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
spellCheck="false"
style={
Object {
"background": 0,
"border": 0,
"boxSizing": "content-box",
"color": "inherit",
"fontSize": "inherit",
"opacity": 1,
"outline": 0,
"padding": 0,
"width": "1px",
}
}
tabIndex="0"
type="text"
value=""
/>
<div
style={
Object {
"height": 0,
"left": 0,
"overflow": "scroll",
"position": "absolute",
"top": 0,
"visibility": "hidden",
"whiteSpace": "pre",
}
}
>
</div>
</div>
</div>
</div>
<div
className="css-0 gf-form-select-box__indicators"
>
<span
className="gf-form-select-box__select-arrow "
/>
</div>
</div>
</div>
</div>
<div
className="gf-form gf-form--grow"
>
<label
className="gf-form-label gf-form-label--grow"
>
<a
onClick={[Function]}
>
<i
className="fa fa-caret-right"
/>
Advanced Options
</a>
</label>
</div>
</div>,
<div />,
]
`;

View File

@ -276,7 +276,6 @@ Array [
>
<i
className="fa fa-caret-right"
ng-hide="ctrl.target.showAggregationOptions"
/>
Advanced Options
</a>