Skip to content

Commit

Permalink
[TSVB] Add more functional tests for Gauge and TopN
Browse files Browse the repository at this point in the history
  • Loading branch information
@DianaDerevyankina
DianaDerevyankina committed Jul 12, 2021
1 parent 0e83e99 commit 81b5648
Show file tree
Hide file tree
Showing 2 changed files with 224 additions and 83 deletions.
272 changes: 189 additions & 83 deletions test/functional/apps/visualize/_tsvb_chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,33 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const retry = getService('retry');
const security = getService('security');

const PageObjects = getPageObjects([
'visualize',
'visualBuilder',
const { timePicker, visChart, visualBuilder, visualize } = getPageObjects([
'timePicker',
'visChart',
'common',
'settings',
'visualBuilder',
'visualize',
]);

describe('visual builder', function describeIndexTests() {
this.tags('includeFirefox');

before(async () => {
await PageObjects.visualize.initTests();
await visualize.initTests();
});

beforeEach(async () => {
await security.testUser.setRoles(
['kibana_admin', 'test_logstash_reader', 'kibana_sample_admin'],
false
);
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisualBuilder();
await PageObjects.visualBuilder.checkVisualBuilderIsPresent();
await visualize.navigateToNewVisualization();
await visualize.clickVisualBuilder();
await visualBuilder.checkVisualBuilderIsPresent();
await visualBuilder.resetPage();
});

describe('metric', () => {
const { visualBuilder } = PageObjects;

beforeEach(async () => {
await visualBuilder.resetPage();
await visualBuilder.clickMetric();
await visualBuilder.checkMetricTabIsPresent();
await visualBuilder.clickPanelOptions('metric');
Expand Down Expand Up @@ -158,43 +154,160 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

describe('gauge', () => {
beforeEach(async () => {
await PageObjects.visualBuilder.resetPage();
await PageObjects.visualBuilder.clickGauge();
await PageObjects.visualBuilder.checkGaugeTabIsPresent();
await visualBuilder.clickGauge();
await visualBuilder.checkGaugeTabIsPresent();
});

it('should "Entire time range" selected as timerange mode for new visualization', async () => {
await PageObjects.visualBuilder.clickPanelOptions('gauge');
await PageObjects.visualBuilder.checkSelectedDataTimerangeMode('Entire time range');
await PageObjects.visualBuilder.clickDataTab('gauge');
await visualBuilder.clickPanelOptions('gauge');
await visualBuilder.checkSelectedDataTimerangeMode('Entire time range');
await visualBuilder.clickDataTab('gauge');
});

it('should verify gauge label and count display', async () => {
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
const labelString = await PageObjects.visualBuilder.getGaugeLabel();
expect(labelString).to.be('Count');
const gaugeCount = await PageObjects.visualBuilder.getGaugeCount();
await visChart.waitForVisualizationRenderingStabilized();
const gaugeLabel = await visualBuilder.getGaugeLabel();
const gaugeCount = await visualBuilder.getGaugeCount();
expect(gaugeLabel).to.be('Count');
expect(gaugeCount).to.be('13,830');
});

it('should display correct data for max aggregation with entire time range mode', async () => {
await visualBuilder.selectAggType('Max');
await visualBuilder.setFieldForAggregation('bytes');

const gaugeLabel = await visualBuilder.getGaugeLabel();
const gaugeCount = await visualBuilder.getGaugeCount();

expect(gaugeLabel).to.be('Max of bytes');
expect(gaugeCount).to.be('19,986');
});

it('should display correct data for sum aggregation with last value time range mode', async () => {
await visualBuilder.selectAggType('Sum');
await visualBuilder.setFieldForAggregation('memory');
await visualBuilder.clickPanelOptions('gauge');
await visualBuilder.setMetricsDataTimerangeMode('Last value');

const gaugeLabel = await visualBuilder.getGaugeLabel();
const gaugeCount = await visualBuilder.getGaugeCount();

expect(gaugeLabel).to.be('Sum of memory');
expect(gaugeCount).to.be('672,320');
});

it('should apply series color to gauge', async () => {
await visualBuilder.setColorPickerValue('#90CEEAFF');

const gaugeColor = await visualBuilder.getGaugeColor();
expect(gaugeColor).to.be('rgb(144, 206, 234)');
});

describe('Color rules', () => {
it('should apply color rules to visualization background and inner gauge circle', async () => {
await visualBuilder.selectAggType('Filter Ratio');
await visualBuilder.setFilterRatioNumerator('bytes < 0');
await visualBuilder.clickPanelOptions('gauge');
await visualBuilder.setColorRuleOperator('< less than');
await visualBuilder.setColorRuleValue(21);
await visualBuilder.setBackgroundColor('#FFCFDF');
await visualBuilder.setColorPickerValue('#AD7DE6', 1);

const backGroundStyle = await visualBuilder.getBackgroundStyle();
const gaugeInnerColor = await visualBuilder.getGaugeInnerColor();

expect(backGroundStyle).to.eql('background-color: rgb(255, 207, 223);');
expect(gaugeInnerColor).to.eql('rgba(173,125,230,1)');
});

it('should apply color rules to gauge and its value', async () => {
await visualBuilder.selectAggType('Cardinality');
await visualBuilder.setFieldForAggregation('machine.ram');
await visualBuilder.clickPanelOptions('gauge');
await visualBuilder.setColorRuleOperator('>= greater than or equal');
await visualBuilder.setColorRuleValue(20);
await visualBuilder.setColorPickerValue('#54B399', 2);
await visualBuilder.setColorPickerValue('#DA8B45', 3);

const gaugeColor = await visualBuilder.getGaugeColor();
const gaugeValueStyle = await visualBuilder.getGaugeValueStyle();

expect(gaugeColor).to.be('rgba(84,179,153,1)');
expect(gaugeValueStyle).to.eql('color: rgb(218, 139, 69);');
});
});
});

describe('topN', () => {
beforeEach(async () => {
await PageObjects.visualBuilder.resetPage();
await PageObjects.visualBuilder.clickTopN();
await PageObjects.visualBuilder.checkTopNTabIsPresent();
await PageObjects.visualBuilder.clickPanelOptions('topN');
await PageObjects.visualBuilder.setMetricsDataTimerangeMode('Last value');
await PageObjects.visualBuilder.setDropLastBucket(true);
await PageObjects.visualBuilder.clickDataTab('topN');
await visualBuilder.clickTopN();
await visualBuilder.checkTopNTabIsPresent();
await visualBuilder.clickPanelOptions('topN');
await visualBuilder.setMetricsDataTimerangeMode('Last value');
await visualBuilder.setDropLastBucket(true);
await visualBuilder.clickDataTab('topN');
});

it('should verify topN label and count display', async () => {
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
const labelString = await PageObjects.visualBuilder.getTopNLabel();
expect(labelString).to.be('Count');
const gaugeCount = await PageObjects.visualBuilder.getTopNCount();
expect(gaugeCount).to.be('156');
await visChart.waitForVisualizationRenderingStabilized();
const topNLabel = await visualBuilder.getTopNLabel();
const topNCount = await visualBuilder.getTopNCount();
expect(topNLabel).to.be('Count');
expect(topNCount).to.be('156');
});

it('should display correct data for counter rate aggregation with last value time range mode', async () => {
await visualBuilder.selectAggType('Counter rate');
await visualBuilder.setFieldForAggregation('memory');

const topNLabel = await visualBuilder.getTopNLabel();
const topNCount = await visualBuilder.getTopNCount();

expect(topNLabel).to.be('Counter Rate of memory');
expect(topNCount).to.be('29,520');
});

it('should display correct data for sum of squares aggregation with entire time range mode', async () => {
await visualBuilder.selectAggType('Sum of squares');
await visualBuilder.setFieldForAggregation('bytes');
await visualBuilder.clickPanelOptions('topN');
await visualBuilder.setMetricsDataTimerangeMode('Entire time range');

const topNLabel = await visualBuilder.getTopNLabel();
const topNCount = await visualBuilder.getTopNCount();

expect(topNLabel).to.be('Sum of Sq. of bytes');
expect(topNCount).to.be('630,170,001,503');
});

it('should apply series color to bar', async () => {
await visualBuilder.cloneSeries();
await visualBuilder.setColorPickerValue('#E5FFCF');
await visualBuilder.setColorPickerValue('#80e08a', 1);

const firstTopNBarStyle = await visualBuilder.getTopNBarStyle();
const secondTopNBarStyle = await visualBuilder.getTopNBarStyle(1);

expect(firstTopNBarStyle).to.contain('background-color: rgb(229, 255, 207);');
expect(secondTopNBarStyle).to.contain('background-color: rgb(128, 224, 138);');
});

describe('Color rules', () => {
it('should apply color rules to visualization background and bar', async () => {
await visualBuilder.selectAggType('Value Count');
await visualBuilder.setFieldForAggregation('machine.ram');
await visualBuilder.clickPanelOptions('topN');
await visualBuilder.setColorRuleOperator('<= less than or equal');
await visualBuilder.setColorRuleValue(153);
await visualBuilder.setBackgroundColor('#FBFFD4');
await visualBuilder.setColorPickerValue('#D6BF57', 1);

const backGroundStyle = await visualBuilder.getBackgroundStyle();
const topNBarStyle = await visualBuilder.getTopNBarStyle();

expect(backGroundStyle).to.eql('background-color: rgb(251, 255, 212);');
expect(topNBarStyle).to.contain('background-color: rgb(214, 191, 87);');
});
});
});

Expand All @@ -207,14 +320,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
});

beforeEach(async () => {
await PageObjects.visualBuilder.resetPage();
await PageObjects.visualBuilder.clickMetric();
await PageObjects.visualBuilder.checkMetricTabIsPresent();
await PageObjects.visualBuilder.clickPanelOptions('metric');
await PageObjects.visualBuilder.setMetricsDataTimerangeMode('Last value');
await PageObjects.visualBuilder.setDropLastBucket(true);
await PageObjects.visualBuilder.clickDataTab('metric');
await PageObjects.timePicker.setAbsoluteRange(
await visualBuilder.clickMetric();
await visualBuilder.checkMetricTabIsPresent();
await visualBuilder.clickPanelOptions('metric');
await visualBuilder.setMetricsDataTimerangeMode('Last value');
await visualBuilder.setDropLastBucket(true);
await visualBuilder.clickDataTab('metric');
await timePicker.setAbsoluteRange(
'Sep 22, 2019 @ 00:00:00.000',
'Sep 23, 2019 @ 00:00:00.000'
);
Expand All @@ -223,23 +335,23 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
after(async () => {
await security.testUser.restoreDefaults();
await esArchiver.load('test/functional/fixtures/es_archiver/empty_kibana');
await PageObjects.visualize.initTests();
await visualize.initTests();
});

const switchIndexTest = async (useKibanaIndexes: boolean) => {
await PageObjects.visualBuilder.clickPanelOptions('metric');
await PageObjects.visualBuilder.setIndexPatternValue('', false);
await visualBuilder.clickPanelOptions('metric');
await visualBuilder.setIndexPatternValue('', false);

const value = await PageObjects.visualBuilder.getMetricValue();
const value = await visualBuilder.getMetricValue();
expect(value).to.eql('0');

// Sometimes popovers take some time to appear in Firefox (#71979)
await retry.tryForTime(20000, async () => {
await PageObjects.visualBuilder.setIndexPatternValue('with-timefield', useKibanaIndexes);
await PageObjects.visualBuilder.waitForIndexPatternTimeFieldOptionsLoaded();
await PageObjects.visualBuilder.selectIndexPatternTimeField('timestamp');
await visualBuilder.setIndexPatternValue('with-timefield', useKibanaIndexes);
await visualBuilder.waitForIndexPatternTimeFieldOptionsLoaded();
await visualBuilder.selectIndexPatternTimeField('timestamp');
});
const newValue = await PageObjects.visualBuilder.getMetricValue();
const newValue = await visualBuilder.getMetricValue();
expect(newValue).to.eql('1');
};

Expand All @@ -254,79 +366,73 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

describe('browser history changes', () => {
it('should activate previous/next chart tab and panel config', async () => {
await PageObjects.visualBuilder.resetPage();

log.debug('Click metric chart');
await PageObjects.visualBuilder.clickMetric();
await PageObjects.visualBuilder.checkMetricTabIsPresent();
await PageObjects.visualBuilder.checkTabIsSelected('metric');
await visualBuilder.clickMetric();
await visualBuilder.checkMetricTabIsPresent();
await visualBuilder.checkTabIsSelected('metric');

log.debug('Click Top N chart');
await PageObjects.visualBuilder.clickTopN();
await PageObjects.visualBuilder.checkTopNTabIsPresent();
await PageObjects.visualBuilder.checkTabIsSelected('top_n');
await visualBuilder.clickTopN();
await visualBuilder.checkTopNTabIsPresent();
await visualBuilder.checkTabIsSelected('top_n');

log.debug('Go back in browser history');
await browser.goBack();

log.debug('Check metric chart and panel config is rendered');
await PageObjects.visualBuilder.checkMetricTabIsPresent();
await PageObjects.visualBuilder.checkTabIsSelected('metric');
await PageObjects.visualBuilder.checkPanelConfigIsPresent('metric');
await visualBuilder.checkMetricTabIsPresent();
await visualBuilder.checkTabIsSelected('metric');
await visualBuilder.checkPanelConfigIsPresent('metric');

log.debug('Go back in browser history');
await browser.goBack();

log.debug('Check timeseries chart and panel config is rendered');
await retry.try(async () => {
await PageObjects.visualBuilder.checkTimeSeriesChartIsPresent();
await PageObjects.visualBuilder.checkTabIsSelected('timeseries');
await PageObjects.visualBuilder.checkPanelConfigIsPresent('timeseries');
await visualBuilder.checkTimeSeriesChartIsPresent();
await visualBuilder.checkTabIsSelected('timeseries');
await visualBuilder.checkPanelConfigIsPresent('timeseries');
});

log.debug('Go forward in browser history');
await browser.goForward();

log.debug('Check metric chart and panel config is rendered');
await PageObjects.visualBuilder.checkMetricTabIsPresent();
await PageObjects.visualBuilder.checkTabIsSelected('metric');
await PageObjects.visualBuilder.checkPanelConfigIsPresent('metric');
await visualBuilder.checkMetricTabIsPresent();
await visualBuilder.checkTabIsSelected('metric');
await visualBuilder.checkPanelConfigIsPresent('metric');
});

it('should update panel config', async () => {
await PageObjects.visualBuilder.resetPage();

const initialLegendItems = ['Count: 156'];
const finalLegendItems = ['jpg: 106', 'css: 22', 'png: 14', 'gif: 8', 'php: 6'];

log.debug('Group metrics by terms: extension.raw');
await PageObjects.visualBuilder.clickPanelOptions('timeSeries');
await PageObjects.visualBuilder.setDropLastBucket(true);
await PageObjects.visualBuilder.clickDataTab('timeSeries');
await PageObjects.visualBuilder.setMetricsGroupByTerms('extension.raw');
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
const legendItems1 = await PageObjects.visualBuilder.getLegendItemsContent();
await visualBuilder.clickPanelOptions('timeSeries');
await visualBuilder.setDropLastBucket(true);
await visualBuilder.clickDataTab('timeSeries');
await visualBuilder.setMetricsGroupByTerms('extension.raw');
await visChart.waitForVisualizationRenderingStabilized();
const legendItems1 = await visualBuilder.getLegendItemsContent();
expect(legendItems1).to.eql(finalLegendItems);

log.debug('Go back in browser history');
await browser.goBack();
const isTermsSelected = await PageObjects.visualBuilder.checkSelectedMetricsGroupByValue(
'Terms'
);
const isTermsSelected = await visualBuilder.checkSelectedMetricsGroupByValue('Terms');
expect(isTermsSelected).to.be(true);

log.debug('Go back in browser history');
await browser.goBack();
await PageObjects.visualBuilder.checkSelectedMetricsGroupByValue('Everything');
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
const legendItems2 = await PageObjects.visualBuilder.getLegendItemsContent();
await visualBuilder.checkSelectedMetricsGroupByValue('Everything');
await visChart.waitForVisualizationRenderingStabilized();
const legendItems2 = await visualBuilder.getLegendItemsContent();
expect(legendItems2).to.eql(initialLegendItems);

log.debug('Go forward twice in browser history');
await browser.goForward();
await browser.goForward();
await PageObjects.visChart.waitForVisualizationRenderingStabilized();
const legendItems3 = await PageObjects.visualBuilder.getLegendItemsContent();
await visChart.waitForVisualizationRenderingStabilized();
const legendItems3 = await visualBuilder.getLegendItemsContent();
expect(legendItems3).to.eql(finalLegendItems);
});
});
Expand Down
Loading

0 comments on commit 81b5648

Please sign in to comment.