diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js index a12f866af..cbbeeae47 100644 --- a/.cypress/integration/1_event_analytics.spec.js +++ b/.cypress/integration/1_event_analytics.spec.js @@ -12,12 +12,7 @@ import { SAVE_QUERY2, SAVE_QUERY3, SAVE_QUERY4, - querySearch, YEAR_TO_DATE_DOM_ID, - landOnEventHome, - landOnEventExplorer, - landOnEventVisualizations, - landOnPanels, HOST_TEXT_1, HOST_TEXT_2, HOST_TEXT_3, @@ -31,7 +26,15 @@ import { FIELD_AGENT } from '../utils/event_analytics/constants'; import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants'; -import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers'; + +import { + querySearch, + landOnEventHome, + landOnEventExplorer, + landOnEventVisualizations, + landOnPanels, + clearQuerySearchBoxText, +} from '../utils/event_analytics/helpers'; describe('Adding sample data and visualization', () => { it('Adds sample flights data for event analytics', () => { diff --git a/.cypress/integration/8_metrics_analytics.spec.js b/.cypress/integration/8_metrics_analytics.spec.js index 511d65a66..36eb6cea4 100644 --- a/.cypress/integration/8_metrics_analytics.spec.js +++ b/.cypress/integration/8_metrics_analytics.spec.js @@ -13,8 +13,10 @@ import { TESTING_PANEL, } from '../utils/metrics_constants'; import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants'; -import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers'; -import { landOnPanels } from '../utils/event_analytics/constants'; +import { + landOnPanels, + clearQuerySearchBoxText, +} from '../utils/event_analytics/helpers'; const moveToMetricsHome = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-metrics#/`); diff --git a/.cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js new file mode 100644 index 000000000..36e58fdf6 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js @@ -0,0 +1,214 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, +} from '../../utils/event_analytics/constants'; + +import { + querySearch, + landOnEventVisualizations, +} from '../../utils/event_analytics/helpers'; + +const numberOfWindow = 6; +const labelSize = 20; +const rotateLevel = 45; +const groupWidth = 10; +const groupWidthUpdated = 0.8; +const barWidth = 10; +const barWidthUpdated = .87; +const lineWidth = 7; +const lineWidthUpdated = 7; +const fillOpacity = 10; +const fillOpacityUpdated = 90; +const numberOfColor = 24; + +const renderHorizontalBarChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Horizontal bar').click({ force: true }); +}; + +describe('Adding sample data for visualizations', () => { + it('Adds sample flights data for visualizations to use', () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); + cy.get('div[data-test-subj="sampleDataSetCardlogs"]') + .contains(/(Add|View) data/) + .click(); + }); +}); + +describe('Render horizontal bar chart and verify default behaviour ', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render horizontal bar chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('breakdowns').should('exist'); + cy.get('.euiButton__text').contains('Update chart').should('exist'); + + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); + }); + + it('Render horizontal bar chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); + }); +}); + +describe('Render horizontal bar chart for data configuration panel', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify data config panel', () => { + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); + }); + + it('Render horizontal bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(4).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('host'); + }); + + it('Render horizontal bar chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { + cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('count'); + cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); + }); + + it('Render horizontal bar chart and verify data config panel no result found if metric is missing', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxOptionsList "]').contains('host').click(); + cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); + cy.get('.euiButton__text').contains('Update chart').click().then(() => { + cy.wait(delay);//not updating correctly without + cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); + }); + }); +}); + +describe('Render horizontal bar chart for panel options', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type('horizontal bar chart'); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('horizontal bar chart').should('exist'); + }); +}); + +describe('Render horizontal bar chart for legend', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify legends for Show and Hidden', () => { + cy.get('#configPanel__legend').contains('Legend'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); + cy.get('[data-text="Show"]').eq(0).contains('Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').eq(0).contains('Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); + }); + + it('Render horizontal bar chart and verify legends for position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + }); +}); + +describe('Render horizontal bar chart for chart style options', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and increase Label Size ', () => { + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(labelSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('[data-unformatted="0"]').should('have.css', 'font-size', '20px'); + }); + + it('Render horizontal bar chart and "Rotate bar labels"', () => { + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); + }); + + it('Render horizontal bar chart and change "Group Width"', () => { + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepUp(groupWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated); + }); + + it('Render horizontal bar chart and change "Bar Width"', () => { + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepDown(barWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(2).should('have.value', barWidthUpdated); + }); + + it('Render horizontal bar chart and change "Line Width"', () => { + cy.get('input[type="range"]') + .eq(3) + .then(($el) => $el[0].stepUp(lineWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated); + }); + + it('Render horizontal bar chart and change "Fill Opacity"', () => { + cy.get('input[type="range"]') + .eq(4) + .then(($el) => $el[0].stepDown(fillOpacity)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); + }); +}); + +describe('Render horizontal bar chart for color theme', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and "Add color theme"', () => { + cy.get('.euiButton__text').contains('+ Add color theme').click({ force: true }); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click({ force: true }); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click({ force: true }); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js b/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js deleted file mode 100644 index 0c093812e..000000000 --- a/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js +++ /dev/null @@ -1,228 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, - querySearch, - landOnEventVisualizations - } from '../../utils/event_analytics/constants'; - - const numberOfWindow = 4; - const legendSize = 20; - const pointSize = 30; - const pointSizeUpdated = 35; - const lineWidth = 7; - const lineWidthUpdated = 9; - const fillOpacity = 10; - const fillOpacityUpdated = 50; - const rotateLevel = 45; - const thresholdValue = 50; - - const renderScatterChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[6].query, TEST_QUERIES[6].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('scatter').type('{enter}'); - }; - - describe('Render scatter chart and verify default behaviour ', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render scatter chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); - cy.get('.euiIEFlexWrapFix').contains('Thresholds').click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - - it('Render scatter chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - }); - - describe('Render scatter chart for data configuration panel', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart and verify data config panel', () => { - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'span(timestamp,1d)'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); - }); - - it('Render scatter chart and verify data config panel no result found if metric is missing', () => { - cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); - cy.get('.euiComboBoxOption__content').contains('count()').click(); - cy.get('.main-svg').contains('No results found').should('not.exist'); - }); - }); - - describe('Render scatter chart for panel options', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type("scatter Chart"); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('scatter Chart').should('exist'); - }); - }); - - describe('Render scatter chart for legend', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart and verify legends for Show and Hidden', () => { - cy.get('[data-text="Show"]').should('have.text', 'Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); - }); - - it('Render scatter chart and verify legends for position Right and Bottom', () => { - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - }); - - it('Render scatter chart and increase Legend Size', () => { - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(legendSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.legendtext').should('have.css', 'font-size', '20px'); - }); - }); - - describe('Render scatter chart for Chart Styles ', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render ltime serires and verify chart style of Marker Mode', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Points'); - cy.get('[data-text="Marker"]').should('have.text', 'Marker').click(); - cy.get('[data-text="Marker"] [data-test-subj="markers"]').should('have.attr', 'checked'); - - }); - - it('Render scatter chart and verify chart style of Marker Mode with larger Point size', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Points'); - cy.get('[data-text="Marker"]').should('have.text', 'Marker').click(); - cy.get('[data-text="Marker"] [data-test-subj="markers"]').should('have.attr', 'checked'); - cy.get('input[type="range"]') - .then($el => $el[0].stepUp(pointSize)) - .trigger('change') - cy.get('.euiRangeSlider').should('have.value', pointSizeUpdated) - - }); - - it('Render scatter chart and verify chart style of Lines+Marker Mode', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Lines and Marker'); - cy.get('[data-text="Lines + Markers"]').should('have.text', 'Lines + Markers').click(); - cy.get('[data-text="Lines + Markers"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); - - }); - - it('Render scatter chart and verify chart style of Lines+Marker Mode with Line Width, Fill Opacity and Point Size', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Lines and Marker'); - cy.get('[data-text="Lines + Markers"]').should('have.text', 'Lines + Markers').click(); - cy.get('[data-text="Lines + Markers"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); - cy.get('input[type="range"]').eq(0) - .then($el => $el[0].stepUp(lineWidth)) - .trigger('change') - cy.get('.euiRangeSlider').eq(0).should('have.value', lineWidthUpdated) - cy.get('input[type="range"]').eq(1) - .then($el => $el[0].stepUp(fillOpacity)) - .trigger('change') - cy.get('.euiRangeSlider').eq(1).should('have.value', fillOpacityUpdated) - cy.get('input[type="range"]').eq(2) - .then($el => $el[0].stepUp(pointSize)) - .trigger('change') - cy.get('.euiRangeSlider').eq(2).should('have.value', pointSizeUpdated) - cy.get('input[type="range"]').eq(3) - .then($el => $el[0].stepUp(rotateLevel)) - .trigger('change') - cy.get('.euiRangeSlider').eq(3).should('have.value', rotateLevel) - }); - }); - - describe('Render scatter chart for color theme', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart and "Add Color theme"', () => { - cy.get('.euiButton__text').contains('+ Add color theme').click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxInput"]').eq(5).click(); - cy.get('.euiComboBoxOption__content').contains('count()').click(); - cy.get('path[style*="rgb(252, 5, 5)"]').should('exist'); - - }); - }); - - describe('Render scatter chart and work with Thresholds', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart and add threshold', () => { - cy.get('.euiButton__text').contains('+ Add threshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('scatter chart Threshold'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type(thresholdValue); - cy.get('[data-unformatted="scatter chart Threshold"]').should('be.visible'); - cy.get('path[style*="rgb(252, 5, 5)"]').should('exist'); - }); - }); - - describe('Render scatter chart and verify if reset works properly', () => { - beforeEach(() => { - renderScatterChart(); - }); - - it('Render scatter chart with all feild data then click on reset and verify reset works properly', () => { - cy.get('input[placeholder="Title"]').type('scatter chart'); - cy.get('textarea[placeholder="Description"]').type('Description For scatter chart'); - cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(legendSize); - cy.get('.euiButton__text').contains('+ Add color theme').click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxInput"]').eq(5).click(); - cy.get('.euiComboBoxOption__content').contains('count()').click(); - cy.get('.euiButton__text').contains('+ Add threshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('scatter chart Threshold'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type(thresholdValue); - cy.get('.euiButtonEmpty__text').contains('Reset').click(); - cy.get('input[placeholder="Title"]').should('not.have.value', 'scatter chart'); - cy.get('textarea[placeholder="Description"]').should('not.have.value', 'Description For scatter chart') - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value', ''); - }); - }); - \ No newline at end of file diff --git a/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js deleted file mode 100644 index d8eba981e..000000000 --- a/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js +++ /dev/null @@ -1,244 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, - querySearch, - landOnEventVisualizations, - } from '../../utils/event_analytics/constants'; - - const numberOfWindow = 4; - const labelSize = 20; - const rotateLevel = 45; - const groupWidth = 10; - const groupWidthUpdated = 0.8; - const barWidth = 10; - const barWidthUpdated = 80; - const lineWidth = 7; - const lineWidthUpdated = 8; - const fillOpacity = 10; - const fillOpacityUpdated = 90; - const numberOfColor = 24; - - const renderHorizontalBarChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Horizontal Bar') - .type('{enter}'); - }; - - describe('Render horizontal bar chart and verify default behaviour ', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render horizontal bar chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - - it('Render horizontal bar chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - }); - - describe('Render horizontal bar chart for data configuration panel', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify data config panel', () => { - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host'); - }); - - it('Render horizontal bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').should('have.length', 1); - cy.get('.euiComboBoxOption__content').contains('tags'); - }); - - it('Render horizontal bar chart and verify data config panel Restrict user to select a duplicate field on Metrics field', () => { - cy.get('.euiText.euiText--extraSmall').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); - cy.get('.euiComboBoxOption__content').should('have.length', 2); - }); - - it('Render horizontal bar chart and verify data config panel no result found if metric is missing', () => { - cy.get('.euiText.euiText--extraSmall').eq(0).click(); - cy.get('.euiText.euiText--extraSmall').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(0).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.main-svg').contains('No results found').should('not.exist'); - }); - }); - - describe('Render horizontal bar chart for panel options', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type('horizontal bar chart'); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('horizontal bar chart').should('exist'); - }); - }); - - describe('Render horizontal bar chart for legend', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify legends for Show and Hidden', () => { - cy.get('[data-text="Show"]').should('have.text', 'Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); - }); - - it('Render horizontal bar chart and verify legends for position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - }); - }); - - describe('Render horizontal bar chart for chart style options', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and increase Label Size ', () => { - cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('[data-unformatted="login"]').should('have.css', 'font-size', '20px'); - }); - - it('Render horizontal bar chart and "Rotate bar labels"', () => { - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); - }); - - it('Render horizontal bar chart and change "Group Width"', () => { - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepUp(groupWidth)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated); - }); - - it('Render horizontal bar chart and change "Bar Width"', () => { - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepDown(barWidth)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(4).should('have.value', barWidthUpdated); - }); - - it('Render horizontal bar chart and change "Line Width"', () => { - cy.get('input[type="range"]') - .eq(3) - .then(($el) => $el[0].stepUp(lineWidth)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated); - }); - - it('Render horizontal bar chart and change "Fill Opacity"', () => { - cy.get('input[type="range"]') - .eq(4) - .then(($el) => $el[0].stepUp(fillOpacity)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); - }); - }); - - describe('Render horizontal bar chart for color theme', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and "Add color theme"', () => { - cy.get('.euiButton__text').contains('+ Add color theme').click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxInput"]').eq(9).click(); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); - cy.get('.point').find('path[style*="rgb(252, 5, 5)"]').should('have.length', numberOfColor); - }); - }); - - describe('Render horizontal bar chart and verify if reset works properly', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart with all feild data then click on reset and verify reset works properly', () => { - cy.get('input[placeholder="Title"]').type('horizontal bar chart'); - cy.get('textarea[placeholder="Description"]').type('Description For horizontal bar chart'); - cy.get('.euiButton__text').contains('Hidden').click(); - cy.get('.euiButton__text').contains('Stack').click(); - cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepUp(groupWidth)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepDown(barWidth)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(3) - .then(($el) => $el[0].stepUp(lineWidth)) - .trigger('change'); - cy.get('.euiButtonEmpty__text').contains('Reset').click(); - cy.get('input[placeholder="Title"]').should('not.have.value', 'horizontal bar chart'); - cy.get('textarea[placeholder="Description"]').should( - 'not.have.value', - 'Description For horizontal bar chart' - ); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Vertical"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Group"] [data-test-subj="group"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', ''); - }); - }); diff --git a/.cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js b/.cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js new file mode 100644 index 000000000..432f9d462 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js @@ -0,0 +1,196 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, +} from '../../utils/event_analytics/constants'; + +import { + querySearch, + landOnEventVisualizations, +} from '../../utils/event_analytics/helpers'; + +const numberOfWindow = 6; +const timeInterval = 1; +const labelSize = 20; +const rotateLevel = 45; +const lineWidth = 7; +const lineWidthUpdated = 7; +const fillOpacity = 10; +const fillOpacityUpdated = 90; +const numberOfColor = 24; + +const renderTimeSeriesChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true }); +}; + +describe('Adding sample data for visualizations', () => { + it('Adds sample flights data for visualizations to use', () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); + cy.get('div[data-test-subj="sampleDataSetCardlogs"]') + .contains(/(Add|View) data/) + .click(); + }); +}); + +describe('Render Time series chart and verify default behaviour ', () => { + beforeEach(() => { + renderTimeSeriesChart(); + }); + + it('Render Time series chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render Time series chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('breakdowns').should('exist'); + cy.get('.euiButton__text').contains('Update chart').should('exist'); + + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + }); + + it('Render Time series chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); + }); +}); + +describe('Render Time series chart for data configuration panel', () => { + beforeEach(() => { + renderTimeSeriesChart(); + }); + + it('Render Time series chart and verify data config panel', () => { + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); + }); + + it('Render Time series chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(4).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('host'); + }); + + it('Render Time series chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { + cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('count'); + cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); + }); + + it('Render Time series chart and verify data config panel no result found if metric is missing', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxOptionsList "]').contains('timestamp').click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(timeInterval); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxOptionsList "]').contains('Hour').click(); + cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); + cy.get('.euiButton__text').contains('Update chart').click().then(() => { + cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); + }); + }); +}); + +describe('Render Time series chart for panel options', () => { + beforeEach(() => { + renderTimeSeriesChart(); + }); + + it('Render Time series chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type('horizontal bar chart'); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('horizontal bar chart').should('exist'); + }); +}); + +describe('Render Time series chart for legend', () => { + beforeEach(() => { + renderTimeSeriesChart(); + }); + + it('Render Time series chart and verify legends for Show and Hidden', () => { + cy.get('#configPanel__legend').contains('Legend'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); + cy.get('[data-text="Show"]').eq(0).contains('Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').eq(0).contains('Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); + }); + + it('Render Time series chart and verify legends for position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + }); +}); + +describe('Render Time series chart for chart style options', () => { + beforeEach(() => { + renderTimeSeriesChart(); + }); + + it('Render Time series chart and increase Label Size ', () => { + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(labelSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('[data-unformatted="0"]').should('have.css', 'font-size', '20px'); + }); + + it('Render Time series chart and "Rotate bar labels"', () => { + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(2).should('have.value', rotateLevel); + }); + + it('Render Time series chart and change "Line Width"', () => { + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(lineWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(0).should('have.value', lineWidthUpdated); + }); + + it('Render Time series chart and change "Fill Opacity"', () => { + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepDown(fillOpacity)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(1).should('have.value', fillOpacityUpdated); + }); +}); + +describe('Render Time series chart threshold', () => { + beforeEach(() => { + renderTimeSeriesChart(); + }); + + it('Render Time series chart and "Add color theme"', () => { + cy.get('.euiButton__text').contains('+ Add threshold').click({ force: true }); + cy.get('[data-test-subj="nameFieldText"]').type('ThresholdTestLine',{ force: true }) + cy.get('[data-unformatted="ThresholdTestLine"]').should('exist'); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js b/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js deleted file mode 100644 index be143450b..000000000 --- a/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js +++ /dev/null @@ -1,248 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, - querySearch, - landOnEventVisualizations, -} from '../../utils/event_analytics/constants'; - -const numberOfWindow = 4; -const labelSize = 20; -const rotateLevel = 45; -const boxSize = 7; -const boxSizeUpdated = 1; -const markerSize = 5; -const markerSizeUpdated = 1; -const jitter = 2; -const jitterUpdated = .1; -const fillOpacity = 10; -const fillOpacityUpdated = 50; -const numberOfColor = 24; - -const renderBoxPlot = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Box plot') - .type('{enter}'); -}; - -describe('Render box plot and verify default behaviour ', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render box plot and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('.euiIEFlexWrapFix').contains('Color Theme').click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - - it('Render box plot and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); -}); - -describe('Render box plot for data configuration panel', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot and verify data config panel', () => { - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host'); - }); - - it('Render box plot and verify data config panel restrict user to select a duplicate field on dimension field', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').should('have.length', 1); - cy.get('.euiComboBoxOption__content').contains('tags'); - }); - - it('Render box plot and verify data config panel Restrict user to select a duplicate field on Metrics field', () => { - cy.get('.euiText.euiText--extraSmall').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); - cy.get('.euiComboBoxOption__content').should('have.length', 2); - }); - - it('Render box plot and verify data config panel no result found if metric is missing', () => { - cy.get('.euiText.euiText--extraSmall').eq(0).click(); - cy.get('.euiText.euiText--extraSmall').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(0).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.main-svg').contains('No results found').should('not.exist'); - }); -}); - -describe('Render box plot for panel options', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type('box plot'); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('box plot').should('exist'); - }); -}); - -describe('Render box plot for legend', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot and verify legends for Show and Hidden', () => { - cy.get('[data-text="Show"]').should('have.text', 'Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); - }); - - it('Render box plot and verify legends for position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - }); -}); - -describe('Render box plot for chart style options', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot and increase Label Size ', () => { - cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('[data-unformatted="count()"]').should('have.css', 'font-size', '20px'); - }); - - it('Render box plot and "Rotate box labels"', () => { - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); - }); - - it('Render box plot and change "Box gap"', () => { - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepUp(boxSize)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(1).should('have.value', boxSizeUpdated); - }); - - it('Render box plot and change "Marker size"', () => { - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepDown(markerSize)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(2).should('have.value', markerSizeUpdated); - }); - - it('Render box plot and change "Jitter"', () => { - cy.get('input[type="range"]') - .eq(3) - .then(($el) => $el[0].stepDown(jitter)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(3).should('have.value', jitterUpdated); - }); - - it('Render box plot and change "Fill opacity"', () => { - cy.get('input[type="range"]') - .eq(4) - .then(($el) => $el[0].stepUp(fillOpacity)) - .trigger('change'); - cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); - }); -}); - -describe('Render box plot for color theme', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot and "Add color theme"', () => { - cy.get('.euiButton__text').contains('+ Add color theme').click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxInput"]').eq(9).click(); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); - cy.get('.points').find('path[style*="rgb(252, 5, 5)"]').should('have.length', numberOfColor); - }); -}); - -describe('Render box plot and verify if reset works properly', () => { - beforeEach(() => { - renderBoxPlot(); - }); - - it('Render box plot with all feild data then click on reset and verify reset works properly', () => { - cy.get('input[placeholder="Title"]').type('box plot'); - cy.get('textarea[placeholder="Description"]').type('Description For box plot'); - cy.get('.euiButton__text').contains('Hidden').click(); - cy.get('.euiButton__text').contains('Horizontal').click(); - cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepUp(boxSize)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepDown(markerSize)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(3) - .then(($el) => $el[0].stepUp(jitter)) - .trigger('change'); - cy.get('input[type="range"]') - .eq(4) - .then(($el) => $el[0].stepUp(fillOpacity)) - .trigger('change'); - cy.get('.euiButtonEmpty__text').contains('Reset').click(); - cy.get('input[placeholder="Title"]').should('not.have.value', 'box plot'); - cy.get('textarea[placeholder="Description"]').should( - 'not.have.value', - 'Description For box plot' - ); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Vertical"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Overlay"] [data-test-subj="overlay"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', ''); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/12_pie_chart.spec.js b/.cypress/integration/VisualizationCharts/12_pie_chart.spec.js new file mode 100644 index 000000000..29d039b99 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/12_pie_chart.spec.js @@ -0,0 +1,153 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + TEST_QUERIES, + aggregationValues, +} from '../../utils/event_analytics/constants'; + +import { + querySearch, + landOnEventVisualizations, + saveVisualizationAndVerify, + deleteVisualization, +} from '../../utils/event_analytics/helpers'; + +const renderPieChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click({ force: true }); +}; + +describe('Adding sample data and visualization', () => { + it('Adds sample flights data for visualizations to use', () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); + cy.get('div[data-test-subj="sampleDataSetCardflights"]') + .contains(/(Add|View) data/) + .click(); + }); +}); + +describe('Render Pie chart and verify default behavior', () => { + beforeEach(() => { + renderPieChart(); + }); + + it('Render Pie chart and verify the default data', () => { + cy.get('.plot-container.plotly').should('exist'); + }); + + it('Render Pie chart and verify Data Configuration panel default behavior', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxxsmall').contains('Query fields').should('exist'); + cy.get('.euiButton__text').contains('Update chart').should('exist'); + }); + + it('Render Pie chart and verify Style section for Pie chart', () => { + cy.get('#data-panel').contains('Style').should('exist'); + cy.get('[aria-controls="configPanel__panelOptions"]').contains('Panel options').should('exist'); + cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); + cy.get('.euiForm.visEditorSidebar__form .euiIEFlexWrapFix') + .contains('Tooltip options') + .should('exist'); + cy.get('[aria-controls="configPanel__chartStyles"]').should('exist'); + }); + + it('Options under Legend section', () => { + cy.get('#configPanel__legend').contains('Legend'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); + cy.get('[data-text="Show"]').eq(0).contains('Show'); + cy.get('[data-text="Hidden"]').eq(0).contains('Hidden'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Position'); + cy.get('[data-text="Right"]').contains('Right'); + cy.get('[data-text="Bottom"]').contains('Bottom'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Legend size').should('exist'); + }); + + it('Options under Tooltip options section', () => { + cy.get('.euiIEFlexWrapFix').contains('Tooltip options').should('exist'); + cy.get('[data-text="Show"]').eq(1).contains('Show'); + cy.get('[data-text="Hidden"]').eq(1).contains('Hidden'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Tooltip text'); + cy.get('[data-text="All"]').contains('All'); + cy.get('[data-text="Label"]').contains('Label'); + cy.get('[data-text="Value"]').contains('Value'); + cy.get('[data-text="Percent"]').contains('Percent'); + }); + + it('Options under Chart Styles section', () => { + cy.get('.euiIEFlexWrapFix').contains('Chart styles').should('exist'); + cy.get('#configPanel__chartStyles').contains('Mode'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(9).contains('Label size'); + }); + + it('Table view should be enabled for Pie chart', () => { + cy.get('.euiSwitch__label').contains('Table view').should('exist'); + cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click(); + cy.get('.ag-header.ag-pivot-off').should('exist'); + }); + + it('Render Pie chart and verify legends for Position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); + }); + + it('Render Pie chart and verify legends for Show and Hidden', () => { + cy.get('[data-text="Show"]').eq(0).should('have.text', 'Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').eq(0).should('have.text', 'Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); + }); + + it('Render Pie chart and verify Chart Style works', () => { + cy.get('[data-test-subj="pie"]').should('exist'); + cy.get('[data-test-subj="pie"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="donut"]').should('exist').click({ force: true }); + cy.get('[data-test-subj="donut"]').should('not.have.attr', 'checked'); + }); +}); + +describe('Save and Delete Visualization', () => { + beforeEach(() => { + renderPieChart(); + }); + + it('Render Pie chart, Save and Delete Visualization', () => { + saveVisualizationAndVerify(); + deleteVisualization(); + }); +}); + +describe('Renders Pie chart and Configurations section for Pie chart', () => { + beforeEach(() => { + landOnEventVisualizations(); + renderPieChart(); + }); + + it('Verify drop down values for Series Aggregation', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('series').should('exist'); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + aggregationValues.forEach(function (value) { + cy.get('.euiComboBoxOption__content').contains(value); + }); + cy.get('[data-test-subj="panelCloseBtn"]').eq(0).click(); + }); + + it('Render Pie chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); + cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(0).should('exist'); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); + cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js b/.cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js new file mode 100644 index 000000000..a0151e6c2 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js @@ -0,0 +1,139 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, +} from '../../utils/event_analytics/constants'; + +import { + querySearch, + landOnEventVisualizations, +} from '../../utils/event_analytics/helpers'; + +const numberOfWindow = 6; + +const renderHeatMapChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Heatmap').click({ force: true }); +}; + +describe('Adding sample data for visualizations', () => { + it('Adds sample flights data for visualizations to use', () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); + cy.get('div[data-test-subj="sampleDataSetCardlogs"]') + .contains(/(Add|View) data/) + .click(); + }); +}); + +describe('Render Heatmap chart and verify default behaviour ', () => { + beforeEach(() => { + renderHeatMapChart(); + }); + + it('Render Heatmap chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render Heatmap chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); + cy.get('.euiButton__text').contains('Update chart').should('exist'); + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + }); + + it('Render Heatmap chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); + }); +}); + +describe('Render Heatmap chart for data configuration panel', () => { + beforeEach(() => { + renderHeatMapChart(); + }); + + it('Render Heatmap chart and verify data config panel', () => { + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); + }); + + it('Render Heatmap chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('host'); + }); + + it('Render Heatmap chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { + cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('count'); + cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); + }); + + it('Render Heatmap chart and verify data config panel no result found if metric is missing', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(2).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxOptionsList "]').contains('host').click(); + cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); + cy.get('.euiButton__text').contains('Update chart').click().then(() => { + cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); + }); + }); +}); + +describe('Render Heatmap chart for panel options', () => { + beforeEach(() => { + renderHeatMapChart(); + }); + + it('Render Heatmap chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type('horizontal bar chart'); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('horizontal bar chart').should('exist'); + }); +}); + +describe('Render Heatmap chart for legend', () => { + beforeEach(() => { + renderHeatMapChart(); + }); + + it('Render Heatmap chart and verify legends for Show and Hidden', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Show colorscale'); + cy.get('[data-text="Show"]').eq(1).contains('Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').eq(1).contains('Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + + }); +}); + +describe('Render Heatmap chart for color theme', () => { + beforeEach(() => { + renderHeatMapChart(); + }); + + it('Render Heatmap chart and change color theme', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click({ force: true }); + cy.get('.euiComboBoxOption__content').contains('opacity').click({ force: true }); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).contains('opacity').should('exist'); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/13_logsView.spec.js b/.cypress/integration/VisualizationCharts/13_logsView.spec.js deleted file mode 100644 index 8f8b163da..000000000 --- a/.cypress/integration/VisualizationCharts/13_logsView.spec.js +++ /dev/null @@ -1,241 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, - querySearch, - landOnEventVisualizations, - saveVisualizationAndVerify, - deleteVisualization, -} from '../../utils/event_analytics/constants'; - -const renderLogsView = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[8].query, TEST_QUERIES[8].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Logs view') - .type('{enter}'); -}; - -const renderLogsViewChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[2].query, TEST_QUERIES[2].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Logs view') - .type('{enter}'); -}; - -const fieldName = 'host'; - -describe('Render Logs view and verify default behavior', () => { - beforeEach(() => { - renderLogsView(); - }); - - it('Render Logs view and verify the default data', () => { - cy.get('.logs-view-container').should('exist'); - }); - - it('Render Logs view and verify Data Configuration panel default behavior', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns'); - cy.get('.euiFormLabel.euiFormRow__label').contains('Field'); - cy.get('.euiButton.euiButton--primary.euiButton--fullWidth.euiButton-isDisabled').should( - 'be.disabled' - ); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').should('be.disabled'); - }); - - it('Render Logs view and verify Style section for Logs view', () => { - cy.get('.vis-config-tabs .euiTab__content').contains('Style').should('exist'); - cy.get('.euiAccordion__triggerWrapper').contains('Panel options').should('exist'); - cy.get('#configPanel__panelOptions .euiFormRow__labelWrapper') - .contains('Title') - .should('exist'); - cy.get('#configPanel__panelOptions .euiFormRow__labelWrapper') - .contains('Description') - .should('exist'); - }); - - it('Table view should be enabled for Logs view', () => { - cy.get('.euiSwitch__label').contains('Table view').should('exist'); - cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click(); - cy.get('.ag-header.ag-pivot-off').should('exist'); - }); - - it('Verify Style section for Logs view', () => { - cy.get('#data-panel').contains('Style').should('exist'); - cy.get('.euiAccordion__button').contains('Panel options').should('exist'); - cy.get('#configPanel__panelOptions').contains('Title').should('exist'); - cy.get('.euiFormHelpText.euiFormRow__text').contains('Name your visualization').should('exist'); - cy.get('#configPanel__panelOptions').contains('Description').should('exist'); - }); - - it('Add and Remove toggle buttons for fields section', () => { - cy.get('#available_fields').contains('Available Fields').should('exist'); - cy.get('[aria-label="Add agent to table"]').should('be.disabled'); - cy.get('#selected_fields').contains('Query fields').should('exist'); - cy.get('[aria-label="Remove clientip from table"]').should('be.disabled'); - }); -}); - -describe('Save and Delete Visualization', () => { - beforeEach(() => { - renderLogsView(); - }); - - it('Render Logs view, Save and Delete Visualization', () => { - saveVisualizationAndVerify(); - deleteVisualization(); - }); -}); - -describe('Render Logs view with no stats section in the query', () => { - beforeEach(() => { - renderLogsViewChart(); - }); - - it('Disabled Table view toogle button', () => { - cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').should('be.disabled'); - }); - - it('Save toast message', () => { - const vis_name_sub_string = Math.floor(Math.random() * 100); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); - cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); - cy.get( - '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]' - ) - .eq(0) - .click(); - cy.get('.euiPopover__panel input') - .eq(1) - .type(`Test visualization` + vis_name_sub_string); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.get('[data-test-subj="euiToastHeader"]') - .contains('There is no query or(and) visualization to save') - .should('exist'); - }); - - it('Verify Logs view details when PPL query does not have stats section ', () => { - cy.get('[data-test-subj="docTable"]').should('exist'); - cy.get('.osdDocTableHeader').contains('Time').should('exist'); - cy.get('.osdDocTableHeader').contains('_source').should('exist'); - }); - - it('Add and Remove toggle buttons for fields section should be enabled', () => { - //Add field - cy.get('[data-test-subj="fieldToggle-agent"]').click(); - cy.get('[data-test-subj="field-agent"]').should('exist'); - //Remove field - cy.get('[data-test-subj="fieldToggle-agent"]').click(); - cy.get('[aria-labelledby="selected_fields"] [data-test-subj="field-agent-showDetails"]').should( - 'not.exist' - ); - }); - - it('Search engine for fields under Visualizations', () => { - cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').should('exist').type(fieldName); - cy.get('[data-test-subj="fieldToggle-host"]').click(); - cy.get('[data-test-subj="fieldList-selected"]').should('exist'); - }); - - it('View surrounding events button enabled', () => { - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - cy.get('.euiButton__text').eq(4).should('not.be.disabled'); - }); -}); - -describe('Event Details overlay', () => { - beforeEach(() => { - renderLogsView(); - }); - - it('Verify Event Details overaly should get opened after clicking on details toggle button', () => { - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - }); - - it('Options in Event Details overlay', () => { - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - cy.get('.euiTabs .euiTab__content').contains('Table'); - cy.get('.table.table-condensed.osdDocViewerTable').should('exist'); - cy.get('.euiTabs .euiTab__content').contains('JSON').click(); - cy.get('.euiCodeBlock__code.json').should('exist'); - cy.get('.euiTabs .euiTab__content').contains('Traces').click(); - cy.get('.euiCallOutHeader__title').contains('No Trace Id found in the event.').should('exist'); - cy.get('.euiLink.euiLink--primary').contains('Trace Analytics').click(); - cy.get('#trace-analytics').contains('Trace Analytics').should('exist'); - cy.get('.euiLink.euiLink--primary').contains('Log Correlation').click(); - cy.get('#log-correlation').contains('Log Correlation').should('exist'); - }); - - it('View surrounding events button disabled', () => { - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - cy.get('.euiButton.euiButton--primary.euiButton-isDisabled.header-button') - .contains('View surrounding events') - .should('be.disabled'); - }); - - it('Event Details overlay resizable and "X" buttons', () => { - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - cy.get('[title="Resize"]').click(); - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - cy.get('[data-test-subj="euiFlyoutCloseButton"]').should('exist').click(); - }); - - it('Table details on Event Details overlay', () => { - cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') - .eq(2) - .click({ force: true }); - cy.get('#eventsDocFyout').contains('Event Details').should('exist'); - cy.get('[data-test-subj="docTable"]').should('exist'); - }); -}); - -describe('Data Configuration panel when no stats in the query', () => { - beforeEach(() => { - renderLogsViewChart(); - }); - - it('Data Configuration panel default behavior', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns').should('exist'); - cy.get('.euiButton__text').eq(2).contains('Add').should('not.be.disabled'); - cy.get('.euiButton__text').eq(3).contains('Update Chart').should('not.be.disabled'); - }); - - it('Add button in Data Configuration panel', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns').should('exist'); - cy.get('.euiButton__text').eq(2).contains('Add').should('not.be.disabled').click(); - cy.get('.euiFormLabel.euiFormRow__label').contains('Field'); - cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').should('exist'); - cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click(); - cy.get('.euiFlexItem.euiFilterSelectItem__content').eq(1).click(); - cy.get('.euiButton__text').contains('Update Chart').should('not.be.disabled').click(); - cy.get('[data-test-subj="docTable"]').should('exist'); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js b/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js deleted file mode 100644 index f3c6c561a..000000000 --- a/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js +++ /dev/null @@ -1,211 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, - querySearch, - landOnEventVisualizations -} from '../../utils/event_analytics/constants'; - -const numberOfWindow = 4; -const metricsPrecisionUpdated = 2; -const metricUnit = 'cm' ; -const titleSize = '25.5px'; -const titleSizeUpdated = '40px'; -const valueSize = '60.8px'; -const valueSizeUpdated = '73.0px'; - -const renderStatsChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Stats').type('{enter}'); -}; - -describe('Render stats chart and verify default behaviour ', () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render scatter chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('.euiIEFlexWrapFix').contains('Thresholds').click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - - it('Render stats chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); -}); - -describe('Render stats chart for data configuration panel', () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verify data config panel', () => { - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)'); - cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host'); - }); - - it('Render stats chart and verify no result found message if the dimension is removed' , () => { - cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('.main-svg').contains('No results found').should('not.exist'); - }); - - it('Render stats chart and verify data config panel no result found if metric is missing', () => { - cy.get('.euiText.euiText--extraSmall').eq(0).click(); - cy.get('.euiText.euiText--extraSmall').eq(1).click(); - cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(0).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.main-svg').contains('No results found').should('not.exist'); - }); -}); - -describe('Render stats chart for panel options', () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type("stats chart"); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('stats chart').should('exist'); - }); -}); - -describe('Render stats chart verfiy functionality for Tooltip mode', () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verfiy the Show and Hidden Tooltip modes', () => { - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(0).should('have.text', 'Show'); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(1).should('have.text', 'Hidden') - .click(); - }); -}); - -describe('Render stats chart verfiy functionality for Tooltip text', () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verfiy the Tootltip text -> All , Dimension , Metric', () => { - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(2).should('have.text', 'All'); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(3).should('have.text', 'Dimension') - .click(); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(4).should('have.text', 'Series') - .click(); - }); -}); - -describe('Render stats chart for Chart Styles ', () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verify the various chart type selected', () => { - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(5).should('have.text', 'Auto'); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(6).should('have.text', 'Horizontal').click(); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(7).should('have.text', 'Text mode').click(); - }); - - it('Render stats chart and verify the various chart orientation selected', () => { - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(8).should('have.text', 'Auto'); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(9).should('have.text', 'Horizontal').click(); - cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(10).should('have.text', 'Vertical').click(); - }); - - it('Render stats chart and verify Metric unit and Metric Precision on chart ', () => { - cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - }); - - it('Render stats chart and verify behaviour for Title size and Value size on chart ', () => { - cy.get('.annotation-text').eq(0).should('have.css', 'font-size', titleSize); - cy.get('.annotation-text').eq(2).should('have.css', 'font-size', titleSize); - cy.get('.annotation-text').eq(4).should('have.css', 'font-size', titleSize); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - cy.get('.annotation-text').eq(1).should('have.css', 'font-size', valueSize); - cy.get('.annotation-text').eq(3).should('have.css', 'font-size', valueSize); - cy.get('.annotation-text').eq(5).should('have.css', 'font-size', valueSize); - cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - }); -}); - -describe('Render stats chart and verify the Text Mode options' , () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verify text modes ', () => { - cy.get('[data-text="Names"]').should('have.text', 'Names').click(); - cy.get('[data-text="Values"]').should('have.text', 'Values').click(); - cy.get('[data-text="Values + Names"]').should('have.text', 'Values + Names').click(); - cy.wait(delay); - }); -}); - -describe('Render stats chart and verify the +add threshold button option' , () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and verify the +Add Threshold button for color picker' , () => { - cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); - cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click(); - cy.wait(delay); - }); -}); - -describe('Render stats chart and verify the reset button' , () => { - beforeEach(() => { - renderStatsChart(); - }); - - it('Render stats chart and test the Reset button functionality' , () => { - cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated); - cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); - cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); - cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click(); - cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); - }); -}); \ No newline at end of file diff --git a/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js b/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js deleted file mode 100644 index 0167f6059..000000000 --- a/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js +++ /dev/null @@ -1,202 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, - querySearch, - landOnEventVisualizations, - renderDataConfig, - saveVisualizationAndVerify, - deleteVisualization, - } from '../../utils/event_analytics/constants'; - - const renderPieChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click(); - }; - - const aggregationValues = [ - 'COUNT', - 'SUM', - 'AVERAGE', - 'MAX', - 'MIN', - 'VAR_SAMP', - 'VAR_POP', - 'STDDEV_SAMP', - 'STDDEV_POP', - ]; - - describe.only('Render Pie chart and verify default behavior', () => { - beforeEach(() => { - renderPieChart(); - }); - - it('Render Pie chart and verify the default data', () => { - cy.get('.plot-container.plotly').should('exist'); - }); - - it('Render Pie chart and verify Data Configuration panel default behavior', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); - cy.get('.first-division .euiFormRow__labelWrapper').contains('Aggregation').should('exist'); - cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Field').should('exist'); - cy.get('.first-division .euiFormLabel.euiFormRow__label') - .contains('Custom label') - .should('exist'); - cy.get('.first-division .euiButton__text').contains('Add').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); - cy.get('.euiButton__text').contains('Update chart').should('exist'); - }); - - it('Render Pie chart and verify Style section for Pie chart', () => { - cy.get('#data-panel').contains('Style').should('exist'); - cy.get('[aria-controls="configPanel__panelOptions"]').contains('Panel options').should('exist'); - cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); - cy.get('.euiForm.visEditorSidebar__form .euiIEFlexWrapFix') - .contains('Tooltip options') - .should('exist'); - cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart styles').should('exist'); - }); - - it('Options under Legend section', () => { - cy.get('#configPanel__legend').contains('Legend'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(3).contains('Show legend'); - cy.get('[data-text="Show"]').eq(0).contains('Show'); - cy.get('[data-text="Hidden"]').eq(0).contains('Hidden'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Position'); - cy.get('[data-text="Right"]').contains('Right'); - cy.get('[data-text="Bottom"]').contains('Bottom'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Legend size').should('exist'); - }); - - it('Options under Tooltip options section', () => { - cy.get('.euiIEFlexWrapFix').contains('Tooltip options').should('exist'); - cy.get('[data-text="Show"]').eq(1).contains('Show'); - cy.get('[data-text="Hidden"]').eq(1).contains('Hidden'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Tooltip text'); - cy.get('[data-text="All"]').contains('All'); - cy.get('[data-text="Label"]').contains('Label'); - cy.get('[data-text="Value"]').contains('Value'); - cy.get('[data-text="Percent"]').contains('Percent'); - }); - - it('Options under Chart Styles section', () => { - cy.get('.euiIEFlexWrapFix').contains('Chart styles').should('exist'); - cy.get('#configPanel__chartStyles').contains('Mode'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(9).contains('Label size'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Color theme'); - }); - - it('Table view should be enabled for Pie chart', () => { - cy.get('.euiSwitch__label').contains('Table view').should('exist'); - cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click(); - cy.get('.ag-header.ag-pivot-off').should('exist'); - }); - - it('Render Pie chart and verify legends for Position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); - }); - - it('Render Pie chart and verify legends for Show and Hidden', () => { - cy.get('[data-text="Show"]').eq(0).should('have.text', 'Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').eq(0).should('have.text', 'Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); - }); - }); - - describe('Save and Delete Visualization', () => { - beforeEach(() => { - renderPieChart(); - }); - - it('Render Pie chart, Save and Delete Visualization', () => { - saveVisualizationAndVerify(); - deleteVisualization(); - }); - }); - - describe('Color Theme section', () => { - beforeEach(() => { - renderPieChart(); - }); - - it('Default option in Color Theme', () => { - cy.get('.euiTitle.euiTitle--xxsmall') - .contains('Color Theme') - .scrollIntoView() - .should('be.visible'); - cy.get('.euiSuperSelectControl').contains('Default').should('exist'); - }); - - it('Render pie chart with single color option', () => { - cy.get('.euiTitle.euiTitle--xxsmall') - .contains('Color Theme') - .scrollIntoView() - .should('be.visible'); - cy.get('.euiSuperSelectControl').contains('Default').click(); - cy.get('.euiColorPalettePicker__item').contains('Single Color').click(); - cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); - cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(2).click(); - cy.get('.pielayer').should('exist'); - }); - }); - - describe('Renders Pie chart and Data Configurations section for Pie chart', () => { - beforeEach(() => { - landOnEventVisualizations(); - renderPieChart(); - }); - - it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => { - renderDataConfig(); - }); - - it('Validate "Add" and "X" buttons', () => { - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); - cy.get('.euiText.euiText--extraSmall').eq(0).click(); - cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field'); - cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click(); - cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist'); - }); - - it('Verify drop down values for Aggregation', () => { - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist'); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); - cy.get('.euiText.euiText--extraSmall').eq(0).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - aggregationValues.forEach(function (value) { - cy.get('.euiComboBoxOption__content').contains(value); - }); - }); - - it('Collapsible mode for Data Configuration panel', () => { - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); - cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click(); - cy.get('[data-test-subj="panel-1-toggle"]').click(); - cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); - cy.get('.euiResizablePanel.euiResizablePanel--middle') - .contains('Data Configurations') - .should('not.be.focused'); - }); - }); - \ No newline at end of file diff --git a/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js b/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js deleted file mode 100644 index 10569fe03..000000000 --- a/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js +++ /dev/null @@ -1,195 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - TEST_QUERIES, - querySearch, - landOnEventVisualizations -} from '../../utils/event_analytics/constants'; - -const numberOfWindow = 4; -const labelSize = 20; -const latitudeRangeMin = 40; -const latitudeRangeMax = 70; -const longitudeRangeMin = -130; -const longitudeRangeMax = -55; - -const renderCoordinateMap = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Coordinate Map').type('{enter}'); -}; - -const renderDataForCoordinateMap = () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').contains('DestLocation').click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(4).click(); - cy.get('.euiComboBoxOption__content').contains('Dest').click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.layer.land').should('exist'); - cy.get('stop[stop-color="rgb(5, 10, 172)"]').should('exist'); -} - -describe('Render coordinate map and verify default behaviour ', () => { - beforeEach(() => { - renderCoordinateMap(); - }); - - it('Render coordinate map and verify by default the data dont gets render', () => { - cy.get('.layer.land').should('not.exist'); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); - }); - - it('Render coordinate map and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Text').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); - - it('Render coordinate map and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); - cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); - }); -}); - -describe('Render coordinate map for data configuration panel', () => { - beforeEach(() => { - renderCoordinateMap(); - }); - - it('Render coordinate map and verify data config panel', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(1).contains('Select a field').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).contains('Select a field').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(4).contains('Select a field').should('exist'); - }); - - it('Render coordinate map and verify data gets render only after selecting the field value in data configuration panel', () => { - renderDataForCoordinateMap(); - }); - - it('Render coordinate map and verify data config dimensions panel "Field" contains only location', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').contains('DestLocation').should('exist'); - cy.get('.euiComboBoxOption__content').contains('OriginLocation').should('exist'); - }); - - it('Render coordinate map and verify data config metrics panel "Field" contains only value which return either integer or float value', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').should('exist'); - cy.get('.euiComboBoxOption__content').contains('DistanceMiles').should('exist'); - cy.get('.euiComboBoxOption__content').should('not.contain', 'DestLocation'); - cy.get('.euiComboBoxOption__content').should('have.length', 6); - }); - - it('Render coordinate map and verify data config metric panel "Plot Label" contains a combination of string value and integer value', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(4).click(); - cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').should('exist'); - cy.get('.euiComboBoxOption__content').contains('Dest').should('exist'); - cy.get('.euiComboBoxOption__content').contains('DestLocation').should('exist'); - }); -}); - -describe('Render coordinate map for panel options', () => { - beforeEach(() => { - renderCoordinateMap(); - renderDataForCoordinateMap(); - }); - - it('Render coordinate map and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type("coordinate map"); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('coordinate map').should('exist'); - }); -}); - -describe('Render coordinate map for text', () => { - beforeEach(() => { - renderCoordinateMap(); - renderDataForCoordinateMap(); - }); - - it('Render coordinate map and verify by default the "Show" is enabled for "Show Text"', () => { - cy.get('[data-text="Show"]').should('have.text', 'Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-unformatted="Duluth International Airport"]').should('exist'); - }); - - it('Render coordinate map and change "Show Text" to "Hidden"', () => { - cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="Duluth International Airport"]').should('not.exist'); - }); - - it('Render coordinate map and verify by default the "Top" is enabled for "Position"', () => { - cy.get('[data-text="Top"]').should('have.text', 'Top'); - cy.get('[data-text="Top"] [data-test-subj="top center"]').should('have.attr', 'checked'); - }); - - it('Render coordinate map and change "Position" to "Right", "Bottom" and "Left"', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right').click(); - cy.get('[data-text="Right"] [data-test-subj="middle right"]').should('not.have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="bottom center"]').should('not.have.attr', 'checked'); - cy.get('[data-text="Left"]').should('have.text', 'Left').click(); - cy.get('[data-text="Left"] [data-test-subj="middle left"]').should('not.have.attr', 'checked'); - }); -}); - -describe('Render coordinate map for chart style options', () => { - beforeEach(() => { - renderCoordinateMap(); - renderDataForCoordinateMap(); - }); - - it('Render coordinate map and change Label Size ', () => { - cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('[data-unformatted="Duluth International Airport"]').should('have.css', 'font-size', '20px'); - cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', labelSize) - }); - - it('Render coordinate map and change "Latitude Range"', () => { - cy.get('input[type="number"]').eq(1).should('have.value', latitudeRangeMin); - cy.get('input[type="number"]').eq(2).should('have.value', latitudeRangeMax); - cy.get('input[type="number"]').eq(1).click().clear().type(30); - }); - - it('Render coordinate map and change "Longitude Range"', () => { - cy.get('input[type="number"]').eq(3).should('have.value', longitudeRangeMin); - cy.get('input[type="number"]').eq(4).should('have.value', longitudeRangeMax); - cy.get('input[type="number"]').eq(4).click().clear().type(40); - }); -}); - -describe('Render coordinate map and verify if reset works properly', () => { - beforeEach(() => { - renderCoordinateMap(); - renderDataForCoordinateMap(); - }); - - it('Render coordinate map with all feild data then click on reset and verify reset works properly', () => { - cy.get('input[placeholder="Title"]').type('coordinate map'); - cy.get('textarea[placeholder="Description"]').type('Description For coordinate map'); - cy.get('.euiButton__text').contains('Hidden').click(); - cy.get('.euiButton__text').contains('Right').click(); - cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); - cy.get('.euiButtonEmpty__text').contains('Reset').click(); - cy.get('input[placeholder="Title"]').should('not.have.value', 'coordinate map'); - cy.get('textarea[placeholder="Description"]').should('not.have.value', 'Description For coordinate map'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Top"] [data-test-subj="top center"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', ''); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js new file mode 100644 index 000000000..fce5bc392 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js @@ -0,0 +1,215 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, +} from '../../utils/event_analytics/constants'; + +import { + querySearch, + landOnEventVisualizations, +} from '../../utils/event_analytics/helpers'; + +const numberOfWindow = 6; +const labelSize = 20; +const rotateLevel = 45; +const groupWidth = 10; +const groupWidthUpdated = 0.8; +const barWidth = 10; +const barWidthUpdated = .87; +const lineWidth = 7; +const lineWidthUpdated = 7; +const fillOpacity = 10; +const fillOpacityUpdated = 90; +const numberOfColor = 24; + +const renderVerticalBarChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Vertical bar').click({ force: true }); +}; + +describe('Adding sample data for visualizations', () => { + it('Adds sample flights data for visualizations to use', () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); + cy.get('div[data-test-subj="sampleDataSetCardlogs"]') + .contains(/(Add|View) data/) + .click(); + }); +}); + +describe('Render vertical bar chart and verify default behaviour ', () => { + beforeEach(() => { + renderVerticalBarChart(); + }); + + it('Render vertical bar chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render vertical bar chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('breakdowns').should('exist'); + cy.get('.euiButton__text').contains('Update chart').should('exist'); + + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); + }); + + it('Render vertical bar chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); + cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(0).should('exist'); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); + cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); + }); +}); + +describe('Render vertical bar chart for data configuration panel', () => { + beforeEach(() => { + renderVerticalBarChart(); + }); + + it('Render vertical bar chart and verify data config panel', () => { + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); + }); + + it('Render vertical bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(4).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('host'); + }); + + it('Render vertical bar chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { + cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').contains('count'); + cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); + }); + + it('Render vertical bar chart and verify data config panel no result found if metric is missing', () => { + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); + cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); + cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxOptionsList "]').contains('host').click(); + cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); + cy.get('.euiButton__text').contains('Update chart').click().then(() => { + cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); + }); + }); +}); + +describe('Render vertical bar chart for panel options', () => { + beforeEach(() => { + renderVerticalBarChart(); + }); + + it('Render vertical bar chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type('horizontal bar chart'); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('horizontal bar chart').should('exist'); + }); +}); + +describe('Render vertical bar chart for legend', () => { + beforeEach(() => { + renderVerticalBarChart(); + }); + + it('Render vertical bar chart and verify legends for Show and Hidden', () => { + cy.get('#configPanel__legend').contains('Legend'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); + cy.get('[data-text="Show"]').eq(0).contains('Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').eq(0).contains('Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); + }); + + it('Render vertical bar chart and verify legends for position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + }); +}); + +describe('Render vertical bar chart for chart style options', () => { + beforeEach(() => { + renderVerticalBarChart(); + }); + + it('Render vertical bar chart and increase Label Size ', () => { + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(labelSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('[data-unformatted="0"]').should('have.css', 'font-size', '20px'); + }); + + it('Render vertical bar chart and "Rotate bar labels"', () => { + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); + }); + + it('Render vertical bar chart and change "Group Width"', () => { + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepUp(groupWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated); + }); + + it('Render vertical bar chart and change "Bar Width"', () => { + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepDown(barWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(2).should('have.value', barWidthUpdated); + }); + + it('Render vertical bar chart and change "Line Width"', () => { + cy.get('input[type="range"]') + .eq(3) + .then(($el) => $el[0].stepUp(lineWidth)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated); + }); + + it('Render vertical bar chart and change "Fill Opacity"', () => { + cy.get('input[type="range"]') + .eq(4) + .then(($el) => $el[0].stepDown(fillOpacity)) + .trigger('change', { force: true }); + cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); + }); +}); + +describe('Render vertical bar chart for color theme', () => { + beforeEach(() => { + renderVerticalBarChart(); + }); + + it('Render vertical bar chart and "Add color theme"', () => { + cy.get('.euiButton__text').contains('+ Add color theme').click({ force: true }); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click({ force: true }); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click({ force: true }); + }); +}); \ No newline at end of file diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js index 5c5063a36..bbbe86ef2 100644 --- a/.cypress/utils/event_analytics/constants.js +++ b/.cypress/utils/event_analytics/constants.js @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue } from '../constants'; - export const delay = 1000; export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]'; @@ -54,202 +52,23 @@ export const TEST_QUERIES = [ }, ]; +export const aggregationValues = [ + 'count', + 'sum', + 'avg', + 'max', + 'min', + 'var_samp', + 'var_pop', + 'stddev_samp', + 'stddev_pop', +]; + export const TESTING_PANEL = 'Mock Testing Panels'; export const SAVE_QUERY1 = 'Mock Flight Events Overview'; export const SAVE_QUERY2 = 'Mock Flight count by destination'; export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel'; export const SAVE_QUERY4 = 'Mock Flight peek'; - -export const aggregationValues = [ - 'COUNT', - 'SUM', - 'AVERAGE', - 'MAX', - 'MIN', - 'VAR_SAMP', - 'VAR_POP', - 'STDDEV_SAMP', - 'STDDEV_POP', -]; - -export const querySearch = (query, rangeSelected) => { - cy.get('[data-test-subj="searchAutocompleteTextArea"]', { timeout: COMMAND_TIMEOUT_LONG }) - .clear() - .focus() - .type(query, { delay: 50 }); - suppressResizeObserverIssue(); - cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); - cy.get(rangeSelected).click(); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); -}; - -export const landOnEventHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs/`); -}; - -export const landOnEventExplorer = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` - ); -}; - -export const landOnEventVisualizations = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` - ); - suppressResizeObserverIssue(); // have to add - cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); -}; - -export const landOnPanels = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/` - ); - cy.wait(delay); -}; - -const vis_name_sub_string = Math.floor(Math.random() * 100); -export const saveVisualizationAndVerify = () => { - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); - cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); - cy.get( - '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]' - ) - .eq(0) - .click(); - cy.get('.euiPopover__panel input') - .eq(1) - .type(`Test visualization` + vis_name_sub_string); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay); - cy.get('.euiHeaderBreadcrumbs a').eq(1).click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') - .eq(0) - .type(`Test visualization` + vis_name_sub_string) - .type('{enter}'); - cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); -}; - -export const deleteVisualization = () => { - cy.get('a[href = "#/event_analytics"]').click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') - .eq(0) - .type(`Test visualization` + vis_name_sub_string) - .type('{enter}'); - cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); - cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); - cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); - cy.get('input[placeholder = "delete"]').clear().type('delete'); - cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click(); - cy.get('.euiToastHeader').should('exist'); -}; - -export const renderTreeMapchart = () => { - querySearch(TEST_QUERIES[7].query, TEST_QUERIES[7].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Tree Map') - .type('{enter}'); - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]') - .click() - .type('This is the description for Tree Map'); - cy.get('.euiIEFlexWrapFix').eq(1).contains('Treemap').should('exist'); - cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist'); - cy.get('[data-test-subj = "comboBoxInput"]').eq(3).click(); - cy.get('button[name="Slice Dice"]').click(); -}; - -export const renderPieChart = () => { - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click(); - cy.wait(delay); - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]') - .click() - .type('This is the description for Pie chart'); - cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); - cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(0).contains('Show Legend'); - cy.get('span[data-text="Show"]').contains('Show').should('exist'); - cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(1).contains('Position'); - cy.get('span[data-text="Right"]').contains('Right').should('exist'); - cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(2).contains('Legend Size'); - cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart Styles').should('exist'); - cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(0).contains('Mode').click(); - cy.get( - '#configPanel__chartStyles .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap.euiComboBox__inputWrap-isClearable' - ).click(); - cy.get('.euiComboBoxOption__content').contains('Donut').click(); - cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(1).contains('Label Size'); - cy.get('#configPanel__chartStyles input[type="number"]').click().type('10'); - cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(2).contains('Color Theme'); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__item').eq(1).contains('Single Color').click(); - cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); - cy.get('[aria-label="Select #D36086 as the color"]').click(); - cy.get('.visEditorSidebar__controls [data-test-subj="visualizeEditorRenderButton"]') - .contains('Preview') - .click(); - cy.get('.plot-container.plotly').should('exist'); -}; - -export const renderDataConfig = () => { - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Cofigurations'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist'); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(1).contains('Field'); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiFieldText[placeholder="Custom label"]').eq(0).type('Average field'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(2).contains('Metrics').should('exist'); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); - cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(4).click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Min field'); - cy.get('.euiButton__text').contains('Right').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').contains('Update chart').click(); - cy.get('.js-plotly-plot').should('exist'); -}; - -export const renderLineChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Line') - .type('{enter}'); -}; - -export const renderAddParent = () => { - cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 1').should('exist'); - cy.get('p.euiComboBoxPlaceholder').eq(0).click({ force: true }); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 2').should('exist'); - cy.get('p.euiComboBoxPlaceholder').click({ force: true }); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 3').should('exist'); - cy.get('p.euiComboBoxPlaceholder').click({ force: true }); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Line') - .type('{enter}'); -}; - -export const renderGaugeChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Gauge') - .type('{enter}'); -}; - export const HOST_TEXT_1 = "artifacts.opensearch.org"; export const HOST_TEXT_2 = "www.opensearch.org"; export const HOST_TEXT_3 = "cdn.opensearch-opensearch-opensearch.org"; diff --git a/.cypress/utils/event_analytics/helpers.js b/.cypress/utils/event_analytics/helpers.js index 32944db75..a2f5c392f 100644 --- a/.cypress/utils/event_analytics/helpers.js +++ b/.cypress/utils/event_analytics/helpers.js @@ -3,10 +3,80 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { COMMAND_TIMEOUT_LONG } from '../constants'; +import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue, delay } from '../constants'; export const clearQuerySearchBoxText = (testSubjectName) => { cy.get(`[data-test-subj="${testSubjectName}"]`, { timeout: COMMAND_TIMEOUT_LONG, }).clear({ force: true }); }; + +export const querySearch = (query, rangeSelected) => { + cy.get('[data-test-subj="searchAutocompleteTextArea"]', { timeout: COMMAND_TIMEOUT_LONG }) + .clear() + .focus() + .type(query); + suppressResizeObserverIssue(); + cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); + cy.get(rangeSelected).click(); + cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); +}; + +export const landOnEventHome = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs/`); +}; + +export const landOnEventExplorer = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` + ); +}; + +export const landOnEventVisualizations = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` + ); + suppressResizeObserverIssue(); // have to add + cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); +}; + +export const landOnPanels = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/` + ); + cy.wait(delay); +}; + +const vis_name_sub_string = Math.floor(Math.random() * 100); +export const saveVisualizationAndVerify = () => { + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); + cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); + cy.get('.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]') + .eq(0) + .click({ force: true }); + cy.get('.euiPopover__panel input') + .eq(1) + .type(`Test visualization` + vis_name_sub_string, { force: true }); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true }); + cy.wait(delay); + cy.get('.euiHeaderBreadcrumbs a').eq(1).click({ force: true }); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') + .eq(0) + .type(`Test visualization` + vis_name_sub_string) + .type('{enter}'); + cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); +}; + +export const deleteVisualization = () => { + cy.get('a[href = "#/"]').click(); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') + .eq(0) + .type(`Test visualization` + vis_name_sub_string) + .type('{enter}'); + cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); + cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); + cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); + cy.get('input[placeholder = "delete"]').clear().type('delete'); + cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click(); + cy.get('.euiToastHeader').should('exist'); +}; diff --git a/auto_sync_commit_metadata.json b/auto_sync_commit_metadata.json index 0c1467550..53e8203ee 100644 --- a/auto_sync_commit_metadata.json +++ b/auto_sync_commit_metadata.json @@ -1,4 +1,4 @@ { - "last_github_commit": "fe3df805b9143f211ead1013c0c979f88b0a2b33", - "last_gitfarm_commit": "27432fee92db1deb40131fbbc9628e02e4ce23b3" + "last_github_commit": "ebf2c6ac8628d7ad8ca1058e3d7e171362b3c1d6", + "last_gitfarm_commit": "d2b69cfd58bfa288241119fb4edf70e49505e25f" } \ No newline at end of file