Skip to content

Commit 8a0ed5f

Browse files
Qxisyloloopensearch-changeset-bot[bot]ruanyl
authored
test(cypress) add tests for gauge and bar gauge (#10894)
* add tests for gauge and bar gauge Signed-off-by: Qxisylolo <[email protected]> --------- Signed-off-by: Qxisylolo <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Co-authored-by: Yulong Ruan <[email protected]>
1 parent 01af8e7 commit 8a0ed5f

File tree

13 files changed

+211
-48
lines changed

13 files changed

+211
-48
lines changed

‎changelogs/fragments/10894.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
feat:
2+
- Add tests for gauge and bar gauge ([#10894](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10894))

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_area.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ export const runCreateVisTests = () => {
3636
});
3737
it('should create a area visualization using a query with one metric and one categories', () => {
3838
const query = `source=${datasetName} | stats count() by category`;
39-
cy.explore.createVisualizationWithQuery(query, 'Area', datasetName, {
39+
cy.explore.createVisualizationWithQuery(query, 'area', datasetName, {
4040
shouldManualSelectChartType: true,
4141
});
4242
});
4343
it('should change axes style of area chart and reflect immediatly to the area visualization', () => {
4444
const query = `source=${datasetName} | stats count() by category`;
45-
cy.explore.createVisualizationWithQuery(query, 'Area', datasetName, {
45+
cy.explore.createVisualizationWithQuery(query, 'area', datasetName, {
4646
shouldManualSelectChartType: true,
4747
});
4848
let beforeCanvasDataUrl;
@@ -63,7 +63,7 @@ export const runCreateVisTests = () => {
6363

6464
it('should add threshold for area chart and reflect immediatly to the area visualization', () => {
6565
const query = `source=${datasetName} | stats count() by category`;
66-
cy.explore.createVisualizationWithQuery(query, 'Area', datasetName, {
66+
cy.explore.createVisualizationWithQuery(query, 'area', datasetName, {
6767
shouldManualSelectChartType: true,
6868
});
6969
let beforeCanvasDataUrl;

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar.spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
3636
});
3737
it('should create a bar visualization using a query with one metric and one category', () => {
3838
const query = `source=${datasetName} | stats count() by category`;
39-
cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
39+
cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
4040
});
4141
it('should change axes style of bar chart and reflect immediatly to the bar visualization', () => {
4242
const query = `source=${datasetName} | stats count() by category`;
43-
cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
43+
cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
4444
let beforeCanvasDataUrl;
4545
cy.get('canvas.marks')
4646
.should('be.visible')
@@ -58,7 +58,7 @@ export const runCreateVisTests = () => {
5858
});
5959
it('should add border for bar and reflect immediatly to the bar visualization', () => {
6060
const query = `source=${datasetName} | stats count() by category`;
61-
cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
61+
cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
6262
let beforeCanvasDataUrl;
6363
cy.get('canvas.marks')
6464
.should('be.visible')
@@ -75,7 +75,7 @@ export const runCreateVisTests = () => {
7575
});
7676
it('should add threshold for bar chart and reflect immediatly to the bar visualization', () => {
7777
const query = `source=${datasetName} | stats count() by category`;
78-
cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
78+
cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
7979
let beforeCanvasDataUrl;
8080
cy.get('canvas.marks')
8181
.should('be.visible')

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar_gauge.spec.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
import { INDEX_WITH_TIME_1, DATASOURCE_NAME } from '../../../../../../utils/apps/explore/constants';
6+
import { getRandomizedWorkspaceName } from '../../../../../../utils/apps/explore/shared';
7+
import { prepareTestSuite } from '../../../../../../utils/helpers';
8+
const workspaceName = getRandomizedWorkspaceName();
9+
const datasetName = `${INDEX_WITH_TIME_1}*`;
10+
11+
export const runCreateVisTests = () => {
12+
describe('create bar gauge visualization tests', () => {
13+
before(() => {
14+
cy.osd.setupWorkspaceAndDataSourceWithIndices(workspaceName, [INDEX_WITH_TIME_1]);
15+
cy.explore.createWorkspaceDataSets({
16+
workspaceName: workspaceName,
17+
indexPattern: INDEX_WITH_TIME_1,
18+
timefieldName: 'timestamp',
19+
dataSource: DATASOURCE_NAME,
20+
isEnhancement: true,
21+
});
22+
cy.osd.navigateToWorkSpaceSpecificPage({
23+
workspaceName: workspaceName,
24+
page: 'explore/logs',
25+
isEnhancement: true,
26+
});
27+
});
28+
beforeEach(() => {
29+
cy.getElementByTestId('discoverNewButton').click();
30+
cy.osd.waitForLoader(true);
31+
});
32+
after(() => {
33+
cy.osd.cleanupWorkspaceAndDataSourceAndIndices(workspaceName, [INDEX_WITH_TIME_1]);
34+
});
35+
it('should create a bar gauge visualization using a query with one metric and one category', () => {
36+
const query = `source=${datasetName} | stats count() by category`;
37+
cy.explore.createVisualizationWithQuery(query, 'bar_gauge', datasetName, {
38+
shouldManualSelectChartType: true,
39+
});
40+
});
41+
42+
it('should change style options and the changes reflect immediately to the bar gauge visualization', () => {
43+
const query = `source=${datasetName} | stats count() by category`;
44+
cy.explore.createVisualizationWithQuery(query, 'bar_gauge', datasetName, {
45+
shouldManualSelectChartType: true,
46+
});
47+
let beforeCanvasDataUrl;
48+
cy.get('canvas.marks')
49+
.should('be.visible')
50+
.then((canvas) => {
51+
beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
52+
});
53+
54+
cy.getElementByTestId('valueDisplayOption-text').click();
55+
// compare with new canvas
56+
cy.get('canvas.marks').then((canvas) => {
57+
const afterCanvasDataUrl = canvas[0].toDataURL();
58+
expect(afterCanvasDataUrl).not.to.eq(beforeCanvasDataUrl);
59+
});
60+
});
61+
it('should add threshold for bar gauge chart and reflect immediatly to the bar gauge visualization', () => {
62+
const query = `source=${datasetName} | stats count() by category`;
63+
cy.explore.createVisualizationWithQuery(query, 'bar_gauge', datasetName, {
64+
shouldManualSelectChartType: true,
65+
});
66+
let beforeCanvasDataUrl;
67+
cy.get('canvas.marks')
68+
.should('be.visible')
69+
.then((canvas) => {
70+
beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
71+
});
72+
73+
// Open thresholds setting
74+
cy.get('[aria-controls="thresholdSection"]').click();
75+
cy.getElementByTestId('exploreVisAddThreshold').click();
76+
// compare with new canvas
77+
cy.get('canvas.marks').then((canvas) => {
78+
const afterCanvasDataUrl = canvas[0].toDataURL();
79+
expect(afterCanvasDataUrl).not.to.eq(beforeCanvasDataUrl);
80+
});
81+
});
82+
});
83+
};
84+
85+
prepareTestSuite('Create Bar Gauge Visualization', runCreateVisTests);

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_gauge.spec.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import { INDEX_WITH_TIME_1, DATASOURCE_NAME } from '../../../../../../utils/apps/explore/constants';
7+
import { getRandomizedWorkspaceName } from '../../../../../../utils/apps/explore/shared';
8+
import { prepareTestSuite } from '../../../../../../utils/helpers';
9+
const workspaceName = getRandomizedWorkspaceName();
10+
const datasetName = `${INDEX_WITH_TIME_1}*`;
11+
12+
export const runCreateVisTests = () => {
13+
describe('create gauge visualization tests', () => {
14+
before(() => {
15+
cy.osd.setupWorkspaceAndDataSourceWithIndices(workspaceName, [INDEX_WITH_TIME_1]);
16+
cy.explore.createWorkspaceDataSets({
17+
workspaceName: workspaceName,
18+
indexPattern: INDEX_WITH_TIME_1,
19+
timefieldName: 'timestamp',
20+
dataSource: DATASOURCE_NAME,
21+
isEnhancement: true,
22+
});
23+
cy.osd.navigateToWorkSpaceSpecificPage({
24+
workspaceName: workspaceName,
25+
page: 'explore/logs',
26+
isEnhancement: true,
27+
});
28+
});
29+
beforeEach(() => {
30+
cy.getElementByTestId('discoverNewButton').click();
31+
cy.osd.waitForLoader(true);
32+
});
33+
after(() => {
34+
cy.osd.cleanupWorkspaceAndDataSourceAndIndices(workspaceName, [INDEX_WITH_TIME_1]);
35+
});
36+
it('should create a gauge visualization using a query with one metric', () => {
37+
const query = `source=${datasetName} | stats count()`;
38+
cy.explore.createVisualizationWithQuery(query, 'gauge', datasetName, {
39+
shouldManualSelectChartType: true,
40+
});
41+
});
42+
43+
it('should change style options and the changes reflect immediately to the gauge visualization', () => {
44+
const query = `source=${datasetName} | stats count()`;
45+
cy.explore.createVisualizationWithQuery(query, 'gauge', datasetName, {
46+
shouldManualSelectChartType: true,
47+
});
48+
let beforeCanvasDataUrl;
49+
cy.get('canvas.marks')
50+
.should('be.visible')
51+
.then((canvas) => {
52+
beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
53+
});
54+
cy.getElementByTestId('showTitleSwitch').click();
55+
// compare with new canvas
56+
cy.get('canvas.marks').then((canvas) => {
57+
const afterCanvasDataUrl = canvas[0].toDataURL();
58+
expect(afterCanvasDataUrl).not.to.eq(beforeCanvasDataUrl);
59+
});
60+
});
61+
it('should add threshold for gauge chart and reflect immediatly to the gauge visualization', () => {
62+
const query = `source=${datasetName} | stats count()`;
63+
cy.explore.createVisualizationWithQuery(query, 'gauge', datasetName, {
64+
shouldManualSelectChartType: true,
65+
});
66+
let beforeCanvasDataUrl;
67+
cy.get('canvas.marks')
68+
.should('be.visible')
69+
.then((canvas) => {
70+
beforeCanvasDataUrl = canvas[0].toDataURL(); // current representation of image
71+
});
72+
73+
cy.getElementByTestId('useThresholdColorButton').click();
74+
75+
// Open thresholds setting
76+
cy.get('[aria-controls="thresholdSection"]').click();
77+
cy.getElementByTestId('exploreVisAddThreshold').click();
78+
// compare with new canvas
79+
cy.get('canvas.marks').then((canvas) => {
80+
const afterCanvasDataUrl = canvas[0].toDataURL();
81+
expect(afterCanvasDataUrl).not.to.eq(beforeCanvasDataUrl);
82+
});
83+
});
84+
});
85+
};
86+
87+
prepareTestSuite('Create Gauge Visualization', runCreateVisTests);

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_heatmap.spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
3636
});
3737
it('should create a heatmap visualization using a query with one metric and two categories', () => {
3838
const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
39-
cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
39+
cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
4040
});
4141
it('should change axes style of heatmap chart and reflect immediatly to the heatmap visualization', () => {
4242
const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
43-
cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
43+
cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
4444
let beforeCanvasDataUrl;
4545
cy.get('canvas.marks')
4646
.should('be.visible')
@@ -58,7 +58,7 @@ export const runCreateVisTests = () => {
5858
});
5959
it('should turn off legend of heatmap chart and reflect immediatly to the heatmap visualization', () => {
6060
const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
61-
cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
61+
cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
6262
let beforeCanvasDataUrl;
6363
cy.get('canvas.marks')
6464
.should('be.visible')
@@ -76,7 +76,7 @@ export const runCreateVisTests = () => {
7676
});
7777
it('should update style of heatmap chart and reflect immediatly to the heatmap visualization', () => {
7878
const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
79-
cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
79+
cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
8080
let beforeCanvasDataUrl;
8181
cy.get('canvas.marks')
8282
.should('be.visible')

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_histogram.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const workspaceName = getRandomizedWorkspaceName();
1111
const datasetName = `${INDEX_WITH_TIME_1}*`;
1212

1313
export const runCreateVisTests = () => {
14-
describe('create Histogram visualization tests', () => {
14+
describe('create histogram visualization tests', () => {
1515
before(() => {
1616
cy.osd.setupWorkspaceAndDataSourceWithIndices(workspaceName, [INDEX_WITH_TIME_1]);
1717
cy.explore.createWorkspaceDataSets({
@@ -39,7 +39,7 @@ export const runCreateVisTests = () => {
3939

4040
it('should create a histogram visualization', () => {
4141
const query = `source=${datasetName} | fields response_time`;
42-
cy.explore.createVisualizationWithQuery(query, 'Histogram', datasetName, {
42+
cy.explore.createVisualizationWithQuery(query, 'histogram', datasetName, {
4343
shouldManualSelectChartType: true,
4444
});
4545
cy.getElementByTestId('field-x').contains('response_time');
@@ -48,7 +48,7 @@ export const runCreateVisTests = () => {
4848

4949
it('should change style options and the changes reflect immediately to the histogram visualization', () => {
5050
const query = `source=${datasetName} | fields response_time`;
51-
cy.explore.createVisualizationWithQuery(query, 'Histogram', datasetName, {
51+
cy.explore.createVisualizationWithQuery(query, 'histogram', datasetName, {
5252
shouldManualSelectChartType: true,
5353
});
5454

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_line.spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
3636
});
3737
it('should create a line visualization using a query with timestamp', () => {
3838
const query = `source=${datasetName} | stats count() by event_time`;
39-
cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
39+
cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
4040
});
4141
it('should change axes style of line chart and reflect immediatly to the line visualization', () => {
4242
const query = `source=${datasetName} | stats count() by event_time`;
43-
cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
43+
cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
4444
let beforeCanvasDataUrl;
4545
cy.get('canvas.marks')
4646
.should('be.visible')
@@ -59,7 +59,7 @@ export const runCreateVisTests = () => {
5959
});
6060
it('should change line interpolation of line chart and reflect immediatly to the line visualization', () => {
6161
const query = `source=${datasetName} | stats count() by event_time`;
62-
cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
62+
cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
6363
let beforeCanvasDataUrl;
6464
cy.get('canvas.marks')
6565
.should('be.visible')
@@ -76,7 +76,7 @@ export const runCreateVisTests = () => {
7676
});
7777
it('should add threshold for line chart and reflect immediatly to the line visualization', () => {
7878
const query = `source=${datasetName} | stats count() by event_time`;
79-
cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
79+
cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
8080
let beforeCanvasDataUrl;
8181
cy.get('canvas.marks')
8282
.should('be.visible')

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_metric.spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const workspaceName = getRandomizedWorkspaceName();
1111
const datasetName = `${INDEX_WITH_TIME_1}*`;
1212

1313
export const runCreateVisTests = () => {
14-
describe('create Metric visualization tests', () => {
14+
describe('create metric visualization tests', () => {
1515
before(() => {
1616
cy.osd.setupWorkspaceAndDataSourceWithIndices(workspaceName, [INDEX_WITH_TIME_1]);
1717
cy.explore.createWorkspaceDataSets({
@@ -36,14 +36,14 @@ export const runCreateVisTests = () => {
3636
});
3737
it('should create a metric visualization using a single metric query', () => {
3838
const query = `source=${datasetName} | stats count()`;
39-
cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName);
39+
cy.explore.createVisualizationWithQuery(query, 'metric', datasetName);
4040
cy.getElementByTestId('field-value').contains('count()');
4141
cy.get('canvas.marks').should('be.visible');
4242
});
4343

4444
it('should change style options and the changes reflect immediately to the metric visualization', () => {
4545
const query = `source=${datasetName} | stats count()`;
46-
cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName);
46+
cy.explore.createVisualizationWithQuery(query, 'metric', datasetName);
4747
let beforeCanvasDataUrl;
4848
cy.get('canvas.marks')
4949
.should('be.visible')
@@ -62,7 +62,7 @@ export const runCreateVisTests = () => {
6262

6363
it('should create a metric sparkline visualization using a metric query with time bucket', () => {
6464
const query = `source=${datasetName} | stats count() by span(timestamp, 1d)`;
65-
cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName, {
65+
cy.explore.createVisualizationWithQuery(query, 'metric', datasetName, {
6666
shouldManualSelectChartType: true,
6767
});
6868
cy.getElementByTestId('field-value').contains('count()');

‎cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_pie.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ export const runCreateVisTests = () => {
3737
it('should create a pie visualization using a query with one metric and one categories', () => {
3838
const query = `source=${datasetName} | stats count() by category`;
3939

40-
cy.explore.createVisualizationWithQuery(query, 'Pie', datasetName, {
40+
cy.explore.createVisualizationWithQuery(query, 'pie', datasetName, {
4141
shouldManualSelectChartType: true,
4242
});
4343
});
4444
it('should turn off legend of pie chart and reflect immediatly to the pie visualization', () => {
4545
const query = `source=${datasetName} | stats count() by category`;
46-
cy.explore.createVisualizationWithQuery(query, 'Pie', datasetName, {
46+
cy.explore.createVisualizationWithQuery(query, 'pie', datasetName, {
4747
shouldManualSelectChartType: true,
4848
});
4949

@@ -65,7 +65,7 @@ export const runCreateVisTests = () => {
6565

6666
it('should update pie chart style and reflect immediatly to the pie visualization', () => {
6767
const query = `source=${datasetName} | stats count() by category`;
68-
cy.explore.createVisualizationWithQuery(query, 'Pie', datasetName, {
68+
cy.explore.createVisualizationWithQuery(query, 'pie', datasetName, {
6969
shouldManualSelectChartType: true,
7070
});
7171

0 commit comments

Comments
 (0)