created test for graph disclaimer

This commit is contained in:
Peter Holmberg 2018-09-25 11:50:55 +02:00
parent ecf08b060c
commit bb20e5cb94
3 changed files with 1305 additions and 0 deletions

View File

@ -0,0 +1,60 @@
import React from 'react';
import { shallow } from 'enzyme';
import Graph from './Graph';
import { mockData } from './__mocks__/mockData';
const setup = (propOverrides?: object) => {
const props = Object.assign(
{
data: mockData().slice(0, 19),
options: {
interval: '20s',
range: { from: 'now-6h', to: 'now' },
targets: [
{
format: 'time_series',
instant: false,
hinting: true,
expr: 'prometheus_http_request_duration_seconds_bucket',
},
],
},
},
propOverrides
);
// Enzyme.shallow did not work well with jquery.flop. Mocking the draw function.
Graph.prototype.draw = jest.fn();
const wrapper = shallow(<Graph {...props} />);
const instance = wrapper.instance() as Graph;
return {
wrapper,
instance,
};
};
describe('Render', () => {
it('should render component', () => {
const { wrapper } = setup();
expect(wrapper).toMatchSnapshot();
});
it('should render component with disclaimer', () => {
const { wrapper } = setup({
data: mockData(),
});
expect(wrapper).toMatchSnapshot();
});
it('should show query return no time series', () => {
const { wrapper } = setup({
data: [],
});
expect(wrapper).toMatchSnapshot();
});
});

View File

@ -0,0 +1,274 @@
export const mockData = () => {
return [
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '+Inf',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.1',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.2',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.4',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '1',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '120',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '20',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '3',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '60',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/label/:name/values',
instance: 'localhost:9090',
job: 'prometheus',
le: '8',
},
values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '+Inf',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.1',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.4',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '1',
},
values: [[1537847900, '953'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '120',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '20',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '3',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '60',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/metrics',
instance: 'localhost:9090',
job: 'prometheus',
le: '8',
},
values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '+Inf',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.1',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.2',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '0.4',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '1',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '120',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '20',
},
values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']],
},
{
metric: {
__name__: 'prometheus_http_request_duration_seconds_bucket',
handler: '/query',
instance: 'localhost:9090',
job: 'prometheus',
le: '3',
},
values: [[1537857260, '55'], [1537861960, '1'], [1537861980, '1']],
},
];
};

View File

@ -0,0 +1,971 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<div>
<div
className="panel-container"
>
<div
className="explore-graph"
style={
Object {
"height": undefined,
}
}
/>
<Legend
data={
Array [
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.2",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537847900,
"953",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
]
}
/>
</div>
</div>
`;
exports[`Render should render component with disclaimer 1`] = `
<div>
<div
className="time-series-disclaimer"
>
<i
className="fa fa-fw fa-warning disclaimer-icon"
/>
Showing only 20 time series.
<span
className="show-all-time-series"
onClick={[Function]}
>
Show all 27
</span>
</div>
<div
className="panel-container"
>
<div
className="explore-graph"
style={
Object {
"height": undefined,
}
}
/>
<Legend
data={
Array [
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.2",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537847900,
"953",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/query",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858100,
"55",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
]
}
/>
</div>
</div>
`;
exports[`Render should show query return no time series 1`] = `
<div
className="panel-container"
>
<div
className="muted m-a-1"
>
The queries returned no time series to graph.
</div>
</div>
`;