import * as React from 'react';
import { shallow } from 'enzyme';
import DataTable, { DataTableProps } from './DataTable';
import { Alert, Table } from 'reactstrap';
import SeriesName from './SeriesName';
describe('DataTable', () => {
describe('when data is null', () => {
it('renders an alert', () => {
const table = shallow();
const alert = table.find(Alert);
expect(Object.keys(alert.props())).toHaveLength(7);
expect(alert.prop('color')).toEqual('light');
expect(alert.prop('children')).toEqual('No data queried yet');
});
});
describe('when data.result is empty', () => {
it('renders an alert', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'vector',
result: [],
},
useLocalTime: false,
};
const table = shallow();
const alert = table.find(Alert);
expect(Object.keys(alert.props())).toHaveLength(7);
expect(alert.prop('color')).toEqual('secondary');
expect(alert.prop('children')).toEqual('Empty query result');
});
});
describe('when resultType is a vector with values', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'vector',
result: [
{
metric: {
__name__: 'metric_name_1',
label1: 'value_1',
labeln: 'value_n',
},
value: [1572098246.599, '0'],
},
{
metric: {
__name__: 'metric_name_2',
label1: 'value_1',
labeln: 'value_n',
},
value: [1572098246.599, '1'],
},
],
},
useLocalTime: false,
};
const dataTable = shallow();
it('renders a table', () => {
const table = dataTable.find(Table);
expect(table.prop('hover')).toBe(true);
expect(table.prop('size')).toEqual('sm');
expect(table.prop('className')).toEqual('data-table');
expect(table.find('tbody')).toHaveLength(1);
});
it('renders rows', () => {
const table = dataTable.find(Table);
table.find('tr').forEach((row, idx) => {
expect(row.find(SeriesName)).toHaveLength(1);
expect(row.find('td').at(1).text()).toEqual(`${idx}`);
});
});
});
describe('when resultType is a vector with too many values', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'vector',
result: Array.from(Array(10001).keys()).map((i) => {
return {
metric: {
__name__: `metric_name_${i}`,
label1: 'value_1',
labeln: 'value_n',
},
value: [1572098246.599, `${i}`],
};
}),
},
useLocalTime: false,
};
const dataTable = shallow();
it('renders limited rows', () => {
const table = dataTable.find(Table);
expect(table.find('tr')).toHaveLength(10000);
});
it('renders a warning', () => {
const alerts = dataTable.find(Alert);
expect(alerts.first().render().text()).toEqual('Warning: Fetched 10001 metrics, only displaying first 10000.');
});
});
describe('when resultType is vector and size is more than maximum limit of formatting', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'vector',
result: Array.from(Array(1001).keys()).map((i) => {
return {
metric: {
__name__: `metric_name_${i}`,
label1: 'value_1',
labeln: 'value_n',
},
value: [1572098246.599, `${i}`],
};
}),
},
useLocalTime: false,
};
const dataTable = shallow();
it('renders a warning', () => {
const alerts = dataTable.find(Alert);
expect(alerts.first().render().text()).toEqual(
'Notice: Showing more than 1000 series, turning off label formatting for performance reasons.'
);
});
});
describe('when result type is a matrix', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'matrix',
result: [
{
metric: {
__name__: 'promhttp_metric_handler_requests_total',
code: '200',
instance: 'localhost:9090',
job: 'prometheus',
},
values: [
[1572097950.93, '9'],
[1572097965.931, '10'],
[1572097980.929, '11'],
[1572097995.931, '12'],
[1572098010.932, '13'],
[1572098025.933, '14'],
[1572098040.93, '15'],
[1572098055.93, '16'],
[1572098070.93, '17'],
[1572098085.936, '18'],
[1572098100.936, '19'],
[1572098115.933, '20'],
[1572098130.932, '21'],
[1572098145.932, '22'],
[1572098160.933, '23'],
[1572098175.934, '24'],
[1572098190.937, '25'],
[1572098205.934, '26'],
[1572098220.933, '27'],
[1572098235.934, '28'],
],
},
{
metric: {
__name__: 'promhttp_metric_handler_requests_total',
code: '500',
instance: 'localhost:9090',
job: 'prometheus',
},
values: [
[1572097950.93, '0'],
[1572097965.931, '0'],
[1572097980.929, '0'],
[1572097995.931, '0'],
[1572098010.932, '0'],
[1572098025.933, '0'],
[1572098040.93, '0'],
[1572098055.93, '0'],
[1572098070.93, '0'],
[1572098085.936, '0'],
[1572098100.936, '0'],
[1572098115.933, '0'],
[1572098130.932, '0'],
[1572098145.932, '0'],
[1572098160.933, '0'],
[1572098175.934, '0'],
[1572098190.937, '0'],
[1572098205.934, '0'],
[1572098220.933, '0'],
[1572098235.934, '0'],
],
},
{
metric: {
__name__: 'promhttp_metric_handler_requests_total',
code: '503',
instance: 'localhost:9090',
job: 'prometheus',
},
values: [
[1572097950.93, '0'],
[1572097965.931, '0'],
[1572097980.929, '0'],
[1572097995.931, '0'],
[1572098010.932, '0'],
[1572098025.933, '0'],
[1572098040.93, '0'],
[1572098055.93, '0'],
[1572098070.93, '0'],
[1572098085.936, '0'],
[1572098100.936, '0'],
[1572098115.933, '0'],
[1572098130.932, '0'],
[1572098145.932, '0'],
[1572098160.933, '0'],
[1572098175.934, '0'],
[1572098190.937, '0'],
[1572098205.934, '0'],
[1572098220.933, '0'],
[1572098235.934, '0'],
],
},
],
},
useLocalTime: false,
};
const dataTable = shallow();
it('renders rows', () => {
const table = dataTable.find(Table);
const rows = table.find('tr');
expect(table.find('tr')).toHaveLength(3);
const row = rows.at(0);
expect(row.text()).toEqual(
`9 @1572097950.9310 @1572097965.93111 @1572097980.92912 @1572097995.93113 @1572098010.93214 @1572098025.93315 @1572098040.9316 @1572098055.9317 @1572098070.9318 @1572098085.93619 @1572098100.93620 @1572098115.93321 @1572098130.93222 @1572098145.93223 @1572098160.93324 @1572098175.93425 @1572098190.93726 @1572098205.93427 @1572098220.93328 @1572098235.934`
);
});
});
describe('when resultType is a scalar', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'scalar',
result: [1572098246.599, '5'],
},
useLocalTime: false,
};
const dataTable = shallow();
it('renders a scalar row', () => {
const table = dataTable.find(Table);
const rows = table.find('tr');
expect(rows.text()).toEqual('scalar5');
});
});
describe('when resultType is a string', () => {
const dataTableProps: DataTableProps = {
data: {
resultType: 'string',
result: 'string',
},
useLocalTime: false,
};
const dataTable = shallow();
it('renders a string row', () => {
const table = dataTable.find(Table);
const rows = table.find('tr');
expect(rows.text()).toEqual('stringt');
});
});
});