From d993207a376bfcdf8d88ac1b9f001cf9c41cbc42 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Fri, 29 Apr 2022 10:02:48 -0700 Subject: [PATCH 1/5] Fixed two thirds of cypress tests to have data-test-subj Signed-off-by: Eugene Lee --- .../integration/app_analytics.spec.js | 263 ++++++++---------- .../.cypress/utils/app_constants.js | 10 +- .../common/constants/application_analytics.ts | 12 +- .../components/app_table.tsx | 25 +- .../components/application.tsx | 22 +- .../config_components/log_config.tsx | 2 + .../config_components/service_config.tsx | 7 +- .../config_components/trace_config.tsx | 5 +- .../components/create.tsx | 13 +- .../service_detail_flyout.tsx | 4 +- .../flyout_components/trace_detail_flyout.tsx | 4 +- .../application_analytics/helpers/utils.tsx | 1 + .../custom_panels/custom_panel_table.tsx | 1 + .../custom_panels/custom_panel_view.tsx | 7 +- .../panel_modules/empty_panel.tsx | 2 +- .../visualization_container.tsx | 7 +- .../event_analytics/explorer/explorer.tsx | 2 +- .../config_panel/config_panel.tsx | 6 +- .../config_controls/config_thresholds.tsx | 7 +- .../components/event_analytics/home/home.tsx | 2 +- .../components/common/filters/filters.tsx | 4 +- .../components/dashboard/dashboard_table.tsx | 1 + .../components/traces/flyout_list_item.tsx | 12 +- .../components/traces/span_detail_flyout.tsx | 8 +- .../components/visualizations/plotly/plot.tsx | 1 + 25 files changed, 224 insertions(+), 204 deletions(-) diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js index 80a66b210..afdc78577 100644 --- a/dashboards-observability/.cypress/integration/app_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/app_analytics.spec.js @@ -41,28 +41,25 @@ describe('Creating application', () => { expectMessageOnHover('Name is required.'); cy.get('[data-test-subj="nameFormRow"]').type(nameOne); expectMessageOnHover('Provide at least one log source, service, entity or trace group.'); - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiButton').contains('Create').should('not.be.disabled'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear(); - expectMessageOnHover('Provide at least one log source, service, entity or trace group.'); - cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click();; + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); - cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiButton').contains('Create').should('not.be.disabled'); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsAccordion"]').scrollIntoView(); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); - cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click') - cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); - cy.get('.euiBadge').contains('2').should('exist'); - cy.get('.euiButton').contains('Create').should('not.be.disabled'); + cy.get('.euiFilterSelectItem').contains(trace_one).click({ force: true }); + cy.get('.euiFilterSelectItem').contains(trace_two).click({ force: true }); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); }); it('Suggests correct autocompletion', () => { - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); cy.get('.aa-List').find('.aa-Item').should('have.length', 1); cy.get('.aa-Item').contains('source').should('exist'); @@ -95,33 +92,32 @@ describe('Creating application', () => { it('Creates an application and redirects to application', () => { cy.get('[data-test-subj="nameFormRow"]').type(nameOne); cy.get('[data-test-subj="descriptionFormRow"]').type('This application is for testing.'); - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); - cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); - cy.get('.euiBadge').contains('2').should('exist'); - cy.get('.euiButton').contains('Create').should('not.be.disabled'); - cy.get('.euiButton').contains('Create').click(); - cy.wait(delay*3); - cy.get('.euiTitle').contains(nameOne).should('exist'); - cy.get('.euiTab').contains('Panel').click(); - cy.get('.euiText').contains('Start by adding your first visualization').should('exist'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="createButton"]').click(); + cy.wait(delay * 3); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); + cy.get('[data-test-subj="addFirstVisualizationText"]').should('exist'); }); it('Hides application panels in Operational Panels', () => { cy.visit( `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` ); - cy.wait(delay*4); if (cy.get('.euiButton').contains('Create panel').length < 2) { - cy.get('input.euiFieldSearch').type(`${nameOne}'s Panel`, {delay: TYPING_DELAY}); + cy.get('[data-test-subj="operationalPanelSearchBar"]').type(`${nameOne}'s Panel`, {delay: TYPING_DELAY}); cy.wait(delay); cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); cy.get('.euiFormControlLayoutClearButton').click(); @@ -130,70 +126,62 @@ describe('Creating application', () => { }); it('Redirects to home page on cancel', () => { - cy.get('.euiButton').contains('Cancel').click(); - cy.wait(delay); - cy.get('.euiTitle').contains('Applications').should('exist'); + cy.get('[data-test-subj="cancelCreateButton"]').contains('Cancel').click(); + cy.get('[data-test-subj="applicationHomePageTitle"]').should('exist'); }); it('Saves current input on reload', () => { cy.get('[data-test-subj="nameFormRow"]').type(nameOne); cy.get('[data-test-subj="descriptionFormRow"]').type(description); - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); cy .get('[data-test-subj="searchAutocompleteTextArea"]') .focus() .type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); - cy.wait(delay); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesComboBox"]').scrollIntoView(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); - cy.wait(delay); - cy.get('.euiFilterSelectItem').contains(service_one).trigger('click'); - cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('.euiFilterSelectItem').contains(service_one).click({ force: true }); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); - cy.get('.euiBadge').contains('2').should('exist'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); cy.reload(); cy.wait(delay); cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', nameOne); cy.get('[data-test-subj="descriptionFormRow"]').find('.euiFieldText').should('contain.value', description); - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', baseQuery); - cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiBadge').contains('2').should('exist'); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); }); it('Shows clear modals before clearing', () => { - cy.get('.euiAccordion').contains('Log source').click(); - cy.get('.euiButton-isDisabled').contains('Clear').should('exist'); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="clearLogSourceButton"]').should('be.disabled'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiButton').contains('Clear').click(); + cy.get('[data-test-subj="clearLogSourceButton"]').click(); cy.get('.euiButton--danger').contains('Clear').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', ''); - cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); cy.get('.euiFilterSelectItem').contains(service_one).trigger('click'); - cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiAccordion-isOpen').within(($service) => { - cy.get('.euiButton').contains('Clear all').click(); - }) + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="clearServicesEntitiesButton"]').click(); cy.get('.euiButton--danger').contains('Clear all').click(); - cy.get('.euiBadge').contains('1').should('not.exist'); - cy.get('.euiBadge').contains('0').should('exist'); - cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); - cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '0'); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); - cy.get('.euiBadge').contains('2').should('exist'); - cy.get('.euiAccordion-isOpen').within(($trace) => { - cy.get('.euiButton').contains('Clear all').click(); - }) + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="clearTraceGroupsButton"]').click(); cy.get('.euiButton--danger').contains('Clear all').click(); - cy.get('.euiBadge').contains('2').should('not.exist'); - cy.get('.euiBadge').contains('0').should('exist'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '0'); }); }); @@ -203,36 +191,33 @@ describe('Viewing application', () => { }); it('Has working breadcrumbs', () => { - cy.get('.euiBreadcrumb').contains('Cypress').click(); - cy.wait(delay); - cy.get('.euiTitle').contains(nameOne).should('exist'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); - cy.wait(delay); - cy.get('.euiTitle').contains('Applications').should('exist'); - cy.get('.euiBreadcrumb').contains('Observability').click(); - cy.wait(delay); - cy.get('.euiTitle').contains('Event analytics').should('exist'); + cy.get('.euiBreadcrumb').contains(nameOne).click(); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); + cy.get('[data-test-subj="applicationHomePageTitle"]').should('contain', 'Applications'); + cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click(); + cy.get('[data-test-subj="eventHomePageTitle"]').should('contain', 'Event analytics'); }); it('Shares time range among tabs', () => { moveToApplication(nameOne); changeTimeTo24('months'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Services').click(); + cy.get('[data-test-subj="app-analytics-serviceTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Traces & Spans').click(); + cy.get('[data-test-subj="app-analytics-traceTab"]').click(); supressResizeObserverIssue(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Log Events').click(); + cy.get('[data-test-subj="app-analytics-logTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Panel').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); }); it('Shows latency variance in dashboards table', () => { moveToApplication(nameOne); changeTimeTo24('months'); - cy.get('.euiBasicTable').first().within(($table) => { + cy.get('[data-test-subj="dashboardTable"]').first().within(($table) => { cy.get('.plot-container').should('have.length.at.least', 1); }) }); @@ -240,147 +225,136 @@ describe('Viewing application', () => { it('Saves time range for each application', () => { moveToCreatePage(); cy.get('[data-test-subj="nameFormRow"]').type(nameTwo); - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiButton').contains('Create').should('not.be.disabled'); - cy.get('.euiButton').contains('Create').click(); - cy.wait(delay); - cy.get('.euiTitle').contains(nameTwo).should('exist'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="createButton"]').click(); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo); changeTimeTo24('weeks'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.wait(delay); cy.get('.euiLink').contains(nameOne).click(); - cy.wait(delay); - cy.get('.euiTitle').contains(nameOne).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); - cy.wait(delay); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get('.euiLink').contains(nameTwo).click(); - cy.wait(delay); - cy.get('.euiTitle').contains(nameTwo).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); }); it('Adds filter when Trace group name is clicked', () => { moveToApplication(nameOne); - cy.get('.euiTab').contains('Overview').click(); - cy.wait(delay); + cy.get('[data-test-subj="app-analytics-overviewTab"]').click(); cy.get('.euiLink').contains('client_create_order').click(); cy.get('.euiTableRow').should('have.length', 1); - cy.get('.euiPopover').contains('traceGroup: client_create_order').should('exist'); - cy.get('[aria-label="Remove filter"]').click(); - cy.get('.euiPopover').contains('traceGroup: client_create_order').should('not.exist'); + cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist'); + cy.get('[data-test-subj="filterBadge"]').click(); + cy.get('[data-test-subj="deleteFilterIcon"]').click(); + cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('not.exist'); }); it('Opens service detail flyout when Service Name is clicked', () => { - cy.get('.euiTab').contains('Services').click(); + cy.get('[data-test-subj="app-analytics-serviceTab"]').click(); cy.wait(delay); cy.get('.euiLink').contains('authentication').click(); supressResizeObserverIssue(); - cy.wait(delay * 3); - cy.get('.euiFlyout').contains('Service detail').should('be.visible'); - cy.get('.euiFlyout').within(($flyout) => { - cy.get('.euiDescriptionList').contains('3.52').should('exist'); + cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible'); + cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => { + cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3'); cy.get('[data-text="Error rate"]').click(); cy.get('.ytitle').contains('Error rate').should('exist'); }); - cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiFlyout').should('not.be.visible'); - cy.get('.euiLink').contains('authentication').click(); - supressResizeObserverIssue(); - cy.wait(delay * 3); - cy.get('.euiFlyout').contains('Service detail').scrollIntoView().should('be.visible'); cy.get('[data-test-subj="dataGridRowCell"] button').contains('718dc32a693c8a17').click(); - cy.get('.euiFlyout').contains('Span detail').should('be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').contains('Span detail').should('be.visible'); + cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiFlyout').should('not.be.visible'); + cy.get('[data-test-subj="serviceDetailFlyout"]').should('not.be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible'); }); it('Opens trace detail flyout when Trace ID is clicked', () => { - cy.get('.euiTab').contains('Traces & Spans').click(); + cy.get('[data-test-subj="app-analytics-traceTab"]').click(); supressResizeObserverIssue(); cy.wait(delay); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); - cy.get('.euiFlyout').contains('Trace detail').should('be.visible'); - cy.get('.euiFlyout').within(($flyout) => { - cy.get('.euiDescriptionList').contains('224.99').should('exist'); + cy.get('[data-test-subj="traceDetailFlyoutTitle"]').should('be.visible'); + cy.get('[data-test-subj="traceDetailFlyout"]').within(($flyout) => { + cy.get('[data-test-subj="LatencyDescriptionList"]').should('contain', '224.99'); }); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); cy.wait(delay); - cy.get('.euiFlyout').should('not.be.visible'); + cy.get('[data-test-subj="traceDetailFlyout"]').should('not.be.visible'); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); cy.get('[data-text="Span list"]').click(); cy.wait(delay); cy.get('[data-test-subj="dataGridRowCell"] button').contains('d67c5bb617ba9203').click(); - cy.get('.euiFlyout').contains('Span detail').should('be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiFlyout').should('not.be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible'); }); it('Opens span detail flyout when Span ID is clicked', () => { - cy.get('.euiTab').contains('Traces & Spans').click(); + cy.get('[data-test-subj="app-analytics-traceTab"]').click(); supressResizeObserverIssue(); cy.wait(delay); - cy.get('.euiLink').contains('5ff3516909562c60').click(); - cy.get('.euiFlyout').contains('Span detail').should('be.visible'); - cy.get('.euiFlyout').within(($flyout) => { - cy.get('.euiText').contains('HTTP GET').should('exist'); + cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click(); + cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').within(($flyout) => { + cy.get('[data-test-subj="OperationDescriptionList"]').should('contain', 'HTTP GET'); }); cy.get('.euiText').contains('order').click(); cy.get('[aria-label="span-flyout-filter-icon"]').click(); cy.focused().blur(); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiPopover').contains('serviceName: order').should('exist'); + cy.get('[data-test-subj="filterBadge"][title="serviceName: order"]').should('exist'); cy.get('[aria-label="Remove filter"]').click(); - cy.get('.euiPopover').contains('serviceName: order').should('not.exist'); + cy.get('[data-test-subj="filterBadge"][title="serviceName: order"]').should('not.exist'); }); it('Shows base query', () => { - cy.get('.euiTab').contains('Log Events').click(); - cy.get('.euiBadge__text').contains('Base Query').should('exist'); + cy.get('[data-test-subj="app-analytics-logTab"]').click(); + cy.get('.euiBadge[title="Base Query"]').should('exist'); + cy.get('.euiBadge[title="Base Query"]').trigger('mouseover'); + cy.get('.euiToolTipPopover').contains('source = opensearch_dashboards_sample_data_flights').should('exist'); }); it('Saves visualization #1 to panel', () => { - cy.get('.euiTab').contains('Panel').click(); - cy.get('.euiButton').contains('Add').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); + cy.get('[data-test-subj="addVisualizationButton"]').eq(0).click(); cy.wait(delay); - cy.get('.plot-container').should('exist'); + cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); cy.get('.aa-List').find('.aa-Item').should('have.length', 11); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type('x', {delay: TYPING_DELAY}); - cy.focused().clear(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_one, {delay: TYPING_DELAY}); changeTimeTo24('months'); cy.wait(delay * 2); - cy.get('.euiTab').contains('Visualizations').click(); + cy.get('[data-test-subj="main-content-visTab"]').click(); supressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visOneName); cy.wait(delay); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); + // cy.wait(delay); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.wait(delay); - cy.get('.euiTab').contains('Panel').click(); - cy.wait(delay); - cy.get('.js-plotly-plot').should('exist'); + cy.get('[data-test-subj="Flights to VeniceVisualizationPanel"]').should('exist'); + cy.get('[id="explorerPlotComponent"]').should('exist'); + cy.get('[class="trace bars"]').should('exist'); }); it('Adds availability level to visualization #1', () => { - cy.get('.euiTab').contains('Panel').click(); - cy.wait(delay); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[aria-label="actionMenuButton"]').click(); - cy.get('.euiContextMenuItem').contains('Edit').click(); + cy.get('[data-test-subj="editVizContextMenuItem"]').click(); supressResizeObserverIssue(); - cy.wait(delay); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiBadge').contains('Bar').click(); + cy.get('[title="Bar"]').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); - cy.wait(delay); - cy.get('.euiButton').contains('+ Add availability level').click(); + cy.get('[data-test-subj="addThresholdButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #54B399 as the color"]').click(); - cy.wait(delay); cy.get('[data-test-subj="nameFieldText"]').click().type('Available'); cy.get('option').contains('≥').should('exist'); cy.get('option').contains('≤').should('exist'); @@ -391,18 +365,15 @@ describe('Viewing application', () => { cy.get('[data-test-subj="expressionSelect"]').select('>'); cy.get('[data-test-subj="valueFieldNumber"]').clear().type('0.5'); cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay); - cy.get('.euiTab').contains('Panel').click(); - cy.wait(delay); - cy.get('.js-plotly-plot').should('exist'); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); + cy.get('[id="explorerPlotComponent"]').should('exist'); + cy.get('[class="lines"]').should('exist'); cy.get('.textpoint').contains('Available').should('exist'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); - cy.wait(delay); - cy.get('.euiBadge').contains('Available').should('exist'); - cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); + cy.get('[data-test-subj="AvailableAvailabilityBadge"]').should('contain', 'Available'); + cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); }); it('Saves visualization #2 to panel with availability level', () => { diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js index 86e713879..6177b3487 100644 --- a/dashboards-observability/.cypress/utils/app_constants.js +++ b/dashboards-observability/.cypress/utils/app_constants.js @@ -17,20 +17,18 @@ export const moveToHomePage = () => { export const moveToCreatePage = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); - cy.wait(delay * 2); - cy.get('.euiButton__text').contains('Create application').click(); + cy.get('.euiButton[href="#/application_analytics/create"]').eq(0).click(); supressResizeObserverIssue(); - cy.wait(delay); - cy.get('.euiTitle').contains('Create application').should('exist'); + cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Create application'); }; export const moveToApplication = (name) => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); supressResizeObserverIssue(); cy.wait(delay * 6); - cy.get('.euiLink').contains(name).click(); + cy.get(`[data-test-subj="${name}ApplicationLink"]`).click(); cy.wait(delay); - cy.get('.euiTitle').contains(name).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', name); changeTimeTo24('years'); }; diff --git a/dashboards-observability/common/constants/application_analytics.ts b/dashboards-observability/common/constants/application_analytics.ts index dc24b495b..df675a704 100644 --- a/dashboards-observability/common/constants/application_analytics.ts +++ b/dashboards-observability/common/constants/application_analytics.ts @@ -3,12 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -export const TAB_OVERVIEW_ID_TXT_PFX = 'app-analytics-overview-'; -export const TAB_SERVICE_ID_TXT_PFX = 'app-analytics-service-'; -export const TAB_TRACE_ID_TXT_PFX = 'app-analytics-trace-'; -export const TAB_LOG_ID_TXT_PFX = 'app-analytics-log-'; -export const TAB_PANEL_ID_TXT_PFX = 'app-analytics-panel-'; -export const TAB_CONFIG_ID_TXT_PFX = 'app-analytics-config-'; +export const TAB_OVERVIEW_ID = 'app-analytics-overview'; +export const TAB_SERVICE_ID = 'app-analytics-service'; +export const TAB_TRACE_ID = 'app-analytics-trace'; +export const TAB_LOG_ID = 'app-analytics-log'; +export const TAB_PANEL_ID = 'app-analytics-panel'; +export const TAB_CONFIG_ID = 'app-analytics-config'; export const TAB_OVERVIEW_TITLE = 'Overview'; export const TAB_SERVICE_TITLE = 'Services'; export const TAB_TRACE_TITLE = 'Traces & Spans'; diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx index 96ce4dd06..2ff9a05ea 100644 --- a/dashboards-observability/public/components/application_analytics/components/app_table.tsx +++ b/dashboards-observability/public/components/application_analytics/components/app_table.tsx @@ -183,7 +183,10 @@ export function AppTable(props: AppTableProps) { sortable: true, truncateText: true, render: (value, record) => ( - + {_.truncate(record.name, { length: 100 })} ), @@ -195,10 +198,9 @@ export function AppTable(props: AppTableProps) { truncateText: true, render: (value) => ( - {value.join(', ')} + + {value.join(', ')} + ), }, @@ -210,7 +212,14 @@ export function AppTable(props: AppTableProps) { if (value.name === 'loading') { return ; } else if (value.name) { - return {value.name}; + return ( + + {value.name} + + ); } else { return Undefined; } @@ -238,7 +247,7 @@ export function AppTable(props: AppTableProps) { - +

Applications ({applications.length})

@@ -257,7 +266,7 @@ export function AppTable(props: AppTableProps) { - + {createButtonText} diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index 08ab10f22..af34a68ff 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -39,17 +39,17 @@ import { SpanDetailTable } from '../../../../public/components/trace_analytics/c import { Explorer } from '../../event_analytics/explorer/explorer'; import { Configuration } from './configuration'; import { - TAB_CONFIG_ID_TXT_PFX, + TAB_CONFIG_ID, TAB_CONFIG_TITLE, - TAB_LOG_ID_TXT_PFX, + TAB_LOG_ID, TAB_LOG_TITLE, - TAB_OVERVIEW_ID_TXT_PFX, + TAB_OVERVIEW_ID, TAB_OVERVIEW_TITLE, - TAB_PANEL_ID_TXT_PFX, + TAB_PANEL_ID, TAB_PANEL_TITLE, - TAB_SERVICE_ID_TXT_PFX, + TAB_SERVICE_ID, TAB_SERVICE_TITLE, - TAB_TRACE_ID_TXT_PFX, + TAB_TRACE_ID, TAB_TRACE_TITLE, } from '../../../../common/constants/application_analytics'; import { TAB_EVENT_ID, TAB_CHART_ID, NEW_TAB } from '../../../../common/constants/explorer'; @@ -64,12 +64,6 @@ import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/ import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout'; import { fetchAppById, initializeTabData } from '../helpers/utils'; -const TAB_OVERVIEW_ID = uniqueId(TAB_OVERVIEW_ID_TXT_PFX); -const TAB_SERVICE_ID = uniqueId(TAB_SERVICE_ID_TXT_PFX); -const TAB_TRACE_ID = uniqueId(TAB_TRACE_ID_TXT_PFX); -const TAB_LOG_ID = uniqueId(TAB_LOG_ID_TXT_PFX); -const TAB_PANEL_ID = uniqueId(TAB_PANEL_ID_TXT_PFX); -const TAB_CONFIG_ID = uniqueId(TAB_CONFIG_ID_TXT_PFX); const searchBarConfigs = { [TAB_EVENT_ID]: { showSaveButton: false, @@ -454,7 +448,7 @@ export function Application(props: AppDetailProps) { id: tabId, name: ( <> - + {tabTitle} @@ -502,7 +496,7 @@ export function Application(props: AppDetailProps) { - +

{application.name}

 diff --git a/dashboards-observability/public/components/application_analytics/components/config_components/log_config.tsx b/dashboards-observability/public/components/application_analytics/components/config_components/log_config.tsx index 923b68acd..fd0371bbd 100644 --- a/dashboards-observability/public/components/application_analytics/components/config_components/log_config.tsx +++ b/dashboards-observability/public/components/application_analytics/components/config_components/log_config.tsx @@ -93,6 +93,7 @@ export const LogConfig = (props: LogConfigProps) => {
@@ -107,6 +108,7 @@ export const LogConfig = (props: LogConfigProps) => { extraAction={ diff --git a/dashboards-observability/public/components/application_analytics/components/config_components/service_config.tsx b/dashboards-observability/public/components/application_analytics/components/config_components/service_config.tsx index 918cf94d4..569cb8609 100644 --- a/dashboards-observability/public/components/application_analytics/components/config_components/service_config.tsx +++ b/dashboards-observability/public/components/application_analytics/components/config_components/service_config.tsx @@ -135,11 +135,15 @@ export const ServiceConfig = (props: ServiceConfigProps) => {

- Services & entities {selectedServices.length} + Services & entities{' '} + + {selectedServices.length} +

@@ -151,6 +155,7 @@ export const ServiceConfig = (props: ServiceConfigProps) => { extraAction={ diff --git a/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx b/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx index 2e2727fa3..e7bcf1167 100644 --- a/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx +++ b/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx @@ -211,11 +211,13 @@ export const TraceConfig = (props: TraceConfigProps) => {

- Trace groups {selectedTraces.length} + Trace groups{' '} + {selectedTraces.length}

@@ -227,6 +229,7 @@ export const TraceConfig = (props: TraceConfigProps) => { extraAction={ diff --git a/dashboards-observability/public/components/application_analytics/components/create.tsx b/dashboards-observability/public/components/application_analytics/components/create.tsx index 7a209ac1f..e247878de 100644 --- a/dashboards-observability/public/components/application_analytics/components/create.tsx +++ b/dashboards-observability/public/components/application_analytics/components/create.tsx @@ -172,7 +172,7 @@ export const CreateApp = (props: CreateAppProps) => { - +

{editMode ? 'Edit' : 'Create'} application

 @@ -230,11 +230,18 @@ export const CreateApp = (props: CreateAppProps) => { - Cancel + + Cancel + - + {editMode ? 'Save' : 'Create'} diff --git a/dashboards-observability/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx b/dashboards-observability/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx index 4e80c64e4..07a7e0a5a 100644 --- a/dashboards-observability/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx +++ b/dashboards-observability/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx @@ -129,9 +129,9 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) { }, [serviceName, startTime, endTime]); return ( - + - +

Service detail

 diff --git a/dashboards-observability/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx b/dashboards-observability/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx index c96aa711c..ce687f306 100644 --- a/dashboards-observability/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx +++ b/dashboards-observability/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx @@ -20,9 +20,9 @@ export function TraceDetailFlyout(props: TraceFlyoutProps) { ); return ( - + - +

Trace detail

 diff --git a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx index 40f8e1f98..970957418 100644 --- a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx +++ b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx @@ -68,6 +68,7 @@ export const getListItem = (title: string, description: string | React.ReactElem return (
setSearchQuery(e.target.value)} diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx index 8cf91ba0c..4b248511f 100644 --- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx +++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx @@ -413,7 +413,12 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { ); const addButton = ( - + Add ); diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx index 5a5a821d3..32a1226b7 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx @@ -29,7 +29,7 @@ export const EmptyPanelView = ({ return (
- +

Start by adding your first visualization

diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx index 7e9931338..243971df2 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx @@ -88,6 +88,7 @@ export const VisualizationContainer = ({ let popoverPanel = [ { @@ -170,7 +171,11 @@ export const VisualizationContainer = ({ }, [editMode]); return ( - +
- + {tabTitle} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx index f2eea5902..190c2f68f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx @@ -17,7 +17,7 @@ import { EuiComboBox, EuiPanel, EuiIcon, - EuiComboBoxOptionOption + EuiComboBoxOptionOption, } from '@elastic/eui'; import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice'; import { getDefaultSpec } from '../visualization_specs/default_spec'; @@ -187,9 +187,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId }: any) => { gutterSize="none" responsive={false} > - + - + {addButtonText} diff --git a/dashboards-observability/public/components/event_analytics/home/home.tsx b/dashboards-observability/public/components/event_analytics/home/home.tsx index 5490d5b54..f25aa4c32 100644 --- a/dashboards-observability/public/components/event_analytics/home/home.tsx +++ b/dashboards-observability/public/components/event_analytics/home/home.tsx @@ -349,7 +349,7 @@ export const Home = (props: IHomeProps) => { - +

Event analytics

 diff --git a/dashboards-observability/public/components/trace_analytics/components/common/filters/filters.tsx b/dashboards-observability/public/components/trace_analytics/components/common/filters/filters.tsx index c3bb752e6..d5a296b15 100644 --- a/dashboards-observability/public/components/trace_analytics/components/common/filters/filters.tsx +++ b/dashboards-observability/public/components/trace_analytics/components/common/filters/filters.tsx @@ -159,7 +159,7 @@ export function Filters(props: FiltersOwnProps) { }, { name: 'Delete', - icon: , + icon: , onClick: () => setFilter(null, index), }, ], @@ -272,6 +272,7 @@ export function Filters(props: FiltersOwnProps) { setFilter(null, index); }} iconOnClickAriaLabel="Remove filter" + data-test-subj="filterBadge" > {filterLabel} @@ -279,6 +280,7 @@ export function Filters(props: FiltersOwnProps) { return ( setIsPopoverOpen(false)} panelPaddingSize="none" diff --git a/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx index 55af82ba4..cba174088 100644 --- a/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx +++ b/dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx @@ -401,6 +401,7 @@ export function DashboardTable(props: { {props.items?.length > 0 ? ( ) : ( - + {props.description} ); return ( <> -
setHover(true)} onMouseLeave={() => setHover(false)}> +
setHover(true)} + onMouseLeave={() => setHover(false)} + onFocus={() => setHover(true)} + > - +

Span detail

diff --git a/dashboards-observability/public/components/visualizations/plotly/plot.tsx b/dashboards-observability/public/components/visualizations/plotly/plot.tsx index 689225ba5..1d7a7f1e9 100644 --- a/dashboards-observability/public/components/visualizations/plotly/plot.tsx +++ b/dashboards-observability/public/components/visualizations/plotly/plot.tsx @@ -69,6 +69,7 @@ export function Plt(props: PltProps) { return ( Date: Mon, 2 May 2022 09:44:36 -0700 Subject: [PATCH 2/5] Finish adding data-test-subj to app analytics tests: Signed-off-by: Eugene Lee --- .../integration/app_analytics.spec.js | 183 ++++++++---------- .../.cypress/utils/app_constants.js | 6 +- .../components/app_table.tsx | 3 + .../components/configuration.tsx | 3 +- .../custom_panels/custom_panel_table.tsx | 3 + .../helpers/add_visualization_popover.tsx | 1 + .../helpers/custom_input_modal.tsx | 15 +- .../helpers/modal_containers.tsx | 2 +- .../visualization_container.tsx | 2 +- 9 files changed, 112 insertions(+), 106 deletions(-) diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js index afdc78577..12f176b73 100644 --- a/dashboards-observability/.cypress/integration/app_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/app_analytics.spec.js @@ -321,7 +321,7 @@ describe('Viewing application', () => { it('Saves visualization #1 to panel', () => { cy.get('[data-test-subj="app-analytics-panelTab"]').click(); - cy.get('[data-test-subj="addVisualizationButton"]').eq(0).click(); + cy.get('[data-test-subj="addVisualizationButton"]').first().click(); cy.wait(delay); cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); @@ -379,22 +379,22 @@ describe('Viewing application', () => { it('Saves visualization #2 to panel with availability level', () => { moveToApplication(nameOne); changeTimeTo24('months'); - cy.get('.euiTab').contains('Log Events').click(); + cy.get('[data-test-subj="app-analytics-logTab"]').click(); cy.wait(delay); - cy.get('.plot-container').should('exist'); + cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type('x', {delay: TYPING_DELAY}); cy.focused().clear(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_two, {delay: TYPING_DELAY}); - cy.get('.euiButton').contains('Refresh').click(); + cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click(); cy.wait(delay); - cy.get('.euiTab').contains('Visualizations').click(); + cy.get('[data-test-subj="main-content-visTab"]').click(); supressResizeObserverIssue(); - cy.get('.euiBadge').contains('Bar').click(); + cy.get('[title="Bar"]').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); cy.wait(delay); - cy.get('.euiButton').contains('+ Add availability level').click(); + cy.get('[data-test-subj="addThresholdButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #9170B8 as the color"]').click(); cy.wait(delay); @@ -403,7 +403,7 @@ describe('Viewing application', () => { cy.get('[data-test-subj="valueFieldNumber"]').clear().type('5.5'); cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); cy.wait(delay); - cy.get('.euiButton').contains('+ Add availability level').click(); + cy.get('[data-test-subj="addThresholdButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').first().click(); cy.get('[aria-label="Select #CA8EAE as the color"]').click(); cy.wait(delay); @@ -417,20 +417,19 @@ describe('Viewing application', () => { cy.wait(delay); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); cy.wait(delay); - cy.get('.euiTab').contains('Panel').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.wait(delay); - cy.get('.js-plotly-plot').should('have.length', 2); + cy.get('[id="explorerPlotComponent"]').should('have.length', 2); moveToHomePage(); - cy.get('.euiBadge').contains('Super').should('exist'); - cy.get('[style="background-color: rgb(145, 112, 184); color: rgb(0, 0, 0);"]').should('exist'); + cy.get('[data-test-subj="SuperAvailabilityBadge"][style="background-color: rgb(145, 112, 184); color: rgb(0, 0, 0);"]').should('contain', 'Super'); }); it('Configuration tab shows details', () => { - cy.get('.euiLink').contains(nameOne).click(); + cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).click(); cy.wait(delay); - cy.get('.euiTab').contains('Configuration').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); cy.wait(delay); - cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist'); + cy.get('[data-test-subj="configBaseQueryCode"]').should('contain', baseQuery); cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 1); cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 2); cy.get('option').should('have.length', 2); @@ -438,83 +437,78 @@ describe('Viewing application', () => { it('Changes availability visualization', () => { - cy.get('.euiTab').contains('Configuration').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); cy.wait(delay); cy.get('select').select(visOneName); cy.wait(delay); moveToHomePage(); - cy.get('.euiBadge').contains('Available').should('exist'); - cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); + cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('contain', 'Available'); moveToApplication(nameOne); - cy.get('.euiTab').contains('Configuration').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); cy.wait(delay); cy.get('select').find('option:selected').should('have.text', visOneName); }) it('Hides application visualizations in Event Analytics', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`); - cy.wait(delay*3); - if (cy.get('.euiButton').length == 2) { - cy.get('input.euiFieldSearch').type(visOneName, {delay: TYPING_DELAY}); - cy.wait(delay); - cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); - cy.get('input.euiFieldSearch').clear().type(visTwoName, {delay: TYPING_DELAY}); - cy.wait(delay); - cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); - cy.get('.euiFormControlLayoutClearButton').click(); - cy.wait(delay); - cy.get('[data-test-subj="tablePaginationPopoverButton"]').click(); - cy.get('.euiContextMenuItem__text').contains('50 rows').click(); - cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click(); - cy.wait(delay); - cy.get('.euiButton__text').contains('Actions').click(); - cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Delete').click(); - cy.wait(delay); - - cy.get('button.euiButton--danger').should('be.disabled'); - - cy.get('input.euiFieldText[placeholder="delete"]').type('delete'); - cy.get('button.euiButton--danger').should('not.be.disabled'); - cy.get('.euiButton__text').contains('Delete').click(); - cy.wait(delay); - } + cy.wait(delay * 3); + // When there are saved queries or visualizations there are two buttons + cy.get('body').then(($body) => { + if ($body.find('.euiButton').length == 2) { + cy.get('input.euiFieldSearch').type(visOneName, {delay: TYPING_DELAY}); + cy.wait(delay); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); + cy.get('input.euiFieldSearch').clear().type(visTwoName, {delay: TYPING_DELAY}); + cy.wait(delay); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); + cy.get('[class="euiFormControlLayoutClearButton"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="tablePaginationPopoverButton"]').click(); + cy.get('.euiContextMenuItem__text').contains('50 rows').click(); + cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="eventHomeAction"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="eventHomeAction__delete"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); + cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').click(); + cy.wait(delay); + } + }) }); it('Hides application visualizations in Operational Panels', () => { cy.visit( `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` ); - cy.wait(delay*3); - cy.get('.euiButton__text').contains('Actions').click(); + cy.get('[data-test-subj="operationalPanelsActionsButton"]').click(); cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Add samples').click(); + cy.get('[data-test-subj="addSampleContextMenuItem"]').click(); cy.wait(delay); - cy.get('.euiButton__text').contains('Yes').click(); - cy.wait(delay*2); + cy.get('[data-test-subj="confirmModalConfirmButton"]').click(); + cy.wait(delay * 2); cy.get('.euiLink').contains('[Logs] Web traffic Panel').first().click(); cy.wait(delay); - cy.get('.euiButton__text').contains('Add visualization').click(); + cy.get('[data-test-subj="addVisualizationButton"]').click(); cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click(); cy.get('option').contains(visOneName).should('not.exist'); cy.get('option').contains(visTwoName).should('not.exist'); cy.visit( `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` ); - cy.wait(delay*3); - cy.get('input.euiFieldSearch').type('[Logs] Web traffic Panel', {delay: TYPING_DELAY}); + cy.get('[data-test-subj="operationalPanelSearchBar"]').type('[Logs] Web traffic Panel', {delay: TYPING_DELAY}); cy.wait(delay); cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); }); - cy.get('.euiButton__text').contains('Actions').click(); - cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Delete').click(); - cy.wait(delay); - cy.get('input.euiFieldText[placeholder="delete"]').type('delete'); - cy.get('button.euiButton--danger').should('not.be.disabled'); - cy.get('.euiButton__text').contains('Delete').click(); - cy.wait(delay); + cy.get('[data-test-subj="operationalPanelsActionsButton"]').click(); + cy.get('[data-test-subj="deleteContextMenuItem"]').click(); + cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').click(); }); }); @@ -524,25 +518,23 @@ describe('Editing application', () => { }); it('Redirects to application after saving changes', () => { - cy.get('.euiAccordion').contains('Log source').click(); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('be.disabled'); - cy.get('.euiAccordion').contains('Trace groups').click(); - cy.get('[data-test-subj="comboBoxToggleListButton"]').filter(':visible').click(); - cy.get('.euiFilterSelectItem').contains(trace_three).trigger('click'); - cy.get('.euiBadge').contains('3').should('exist'); - cy.get('.euiAccordion').contains('Trace groups').click(); - cy.get('.euiAccordion').contains('Services & entities').click(); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); - cy.get('.euiFilterSelectItem').contains(service_two).trigger('click'); - cy.get('.euiBadge').contains('2').should('exist'); - cy.get('.euiButton').contains('Save').click(); - cy.wait(delay); - cy.get('.euiTab').contains('Configuration').click(); - cy.wait(delay); - cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist'); + cy.get('.euiFilterSelectItem').contains(service_two).click(); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiFilterSelectItem').contains(trace_three).trigger('click'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '3'); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="createButton"]').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); + cy.get('[data-test-subj="configBaseQueryCode"]').should('contain', baseQuery); cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 2); cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 3); - cy.get('.euiTitle').contains(nameOne).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); }); }); @@ -552,24 +544,22 @@ describe('Application Analytics home page', () => { }) it('Show correct information in table', () => { - cy.get('.euiLink').contains(nameOne).should('exist'); - cy.get('[data-test-subj="appAnalytics__compositionColumn"]').contains(composition).should('exist'); - cy.get('.euiBadge').contains('Available').should('exist'); - cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); + cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).should('exist'); + cy.get('[data-test-subj="appAnalytics__compositionColumn"]').should('contain', composition); + cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('contain', 'Available') }); it('Renames application', () => { - cy.get('.euiPopover').contains('Actions').click(); - cy.wait(delay); - cy.get('.euiContextMenuItem-isDisabled').contains('Rename').should('exist'); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="renameApplicationContextMenuItem"]').should('be.disabled'); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); }); - cy.wait(delay); - cy.get('.euiPopover').contains('Actions').click(); - cy.get('.euiContextMenuItem').contains('Rename').click(); - cy.get('.euiFieldText').clear().focus().type(newName); - cy.get('.euiButton--fill').contains('Rename').click(); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="renameApplicationContextMenuItem"]').click(); + cy.get('[data-test-subj="customModalFieldText"]').clear().focus().type(newName); + cy.get('[data-test-subj="runModalButton"]').click(); cy.wait(delay); cy.get('.euiToast').contains(`Application successfully renamed to "${newName}"`); cy.get('.euiTableRow').first().within(($row) => { @@ -578,21 +568,20 @@ describe('Application Analytics home page', () => { }); it('Deletes application', () => { - cy.get('.euiPopover').contains('Actions').click(); - cy.get('.euiContextMenuItem-isDisabled').contains('Delete').should('exist'); - cy.get('.euiTableRow').eq(0).within(($row) => { + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').should('exist'); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); }); cy.get('.euiTableRow').eq(1).within(($row) => { cy.get('.euiCheckbox').click(); }); - cy.wait(delay); - cy.get('.euiPopover').contains('Actions').click(); - cy.wait(delay); - cy.get('.euiContextMenuItem').contains('Delete').click(); - cy.get('.euiButton--fill').contains('Delete').click(); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').click(); + cy.get('[data-test-subj="confirmModalConfirmButton"]').click(); cy.wait(delay); cy.get('.euiToast').contains(`Applications successfully deleted!`); - cy.get('.euiLink').contains(newName).should('not.exist'); + cy.get(`[data-test-subj="${newName}ApplicationLink"]`).should('not.exist'); }); }); diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js index 6177b3487..a36a6fb50 100644 --- a/dashboards-observability/.cypress/utils/app_constants.js +++ b/dashboards-observability/.cypress/utils/app_constants.js @@ -34,11 +34,11 @@ export const moveToApplication = (name) => { export const moveToEditPage = () => { moveToApplication(nameOne); - cy.get('.euiTab').contains('Configuration').click(); - cy.get('.euiButton').contains('Edit').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); + cy.get('[data-test-subj="editApplicationButton"]').click(); supressResizeObserverIssue(); cy.wait(delay); - cy.get('.euiTitle').contains('Edit application'); + cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Edit application'); }; export const changeTimeTo24 = (timeUnit) => { diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx index 2ff9a05ea..5f6b33b37 100644 --- a/dashboards-observability/public/components/application_analytics/components/app_table.tsx +++ b/dashboards-observability/public/components/application_analytics/components/app_table.tsx @@ -138,6 +138,7 @@ export function AppTable(props: AppTableProps) { const popoverButton = ( setIsActionsPopoverOpen(!isActionsPopoverOpen)} @@ -149,6 +150,7 @@ export function AppTable(props: AppTableProps) { const popoverItems: ReactElement[] = [ { setIsActionsPopoverOpen(false); @@ -165,6 +167,7 @@ export function AppTable(props: AppTableProps) { // , { setIsActionsPopoverOpen(false); diff --git a/dashboards-observability/public/components/application_analytics/components/configuration.tsx b/dashboards-observability/public/components/application_analytics/components/configuration.tsx index c07fc9eab..c155b115f 100644 --- a/dashboards-observability/public/components/application_analytics/components/configuration.tsx +++ b/dashboards-observability/public/components/application_analytics/components/configuration.tsx @@ -71,6 +71,7 @@ export const Configuration = (props: ConfigProps) => { { window.location.assign( `${last(parentBreadcrumbs)!.href}application_analytics/edit/${appId}` @@ -92,7 +93,7 @@ export const Configuration = (props: ConfigProps) => {

- {application.baseQuery} + {application.baseQuery}

diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx index 9bbffcc95..8c3153f2f 100644 --- a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx +++ b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx @@ -199,6 +199,7 @@ export const CustomPanelTable = ({ const popoverButton = ( setIsActionsPopoverOpen(!isActionsPopoverOpen)} @@ -230,6 +231,7 @@ export const CustomPanelTable = ({ , { setIsActionsPopoverOpen(false); @@ -240,6 +242,7 @@ export const CustomPanelTable = ({ , { setIsActionsPopoverOpen(false); addSampledata(); diff --git a/dashboards-observability/public/components/custom_panels/helpers/add_visualization_popover.tsx b/dashboards-observability/public/components/custom_panels/helpers/add_visualization_popover.tsx index 7f289c081..b59b1c43d 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/add_visualization_popover.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/add_visualization_popover.tsx @@ -58,6 +58,7 @@ export const AddVisualizationPopover = ({ const addVisualizationButton = ( { - onChange(e)} /> + onChange(e)} + /> @@ -85,11 +90,15 @@ export const CustomInputModal = (props: CustomInputModalProps) => { {btn1txt} {optionalArgs === undefined ? ( - runModal(value)} fill> + runModal(value)} fill> {btn2txt} ) : ( - runModal(value, ...optionalArgs)} fill> + runModal(value, ...optionalArgs)} + fill + > {btn2txt} )} diff --git a/dashboards-observability/public/components/custom_panels/helpers/modal_containers.tsx b/dashboards-observability/public/components/custom_panels/helpers/modal_containers.tsx index 3350c9d29..e403d88bb 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/modal_containers.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/modal_containers.tsx @@ -149,7 +149,7 @@ export const DeletePanelModal = ({ Cancel - onConfirm()} color="danger" fill diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx index 243971df2..bb1a25e04 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx @@ -146,7 +146,7 @@ export const VisualizationContainer = ({
{isLoading ? ( - ) : isError != '' ? ( + ) : isError !== '' ? (
From 496ff81f2a06d245b6d5674a24c276c0cef84a87 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Mon, 2 May 2022 10:20:38 -0700 Subject: [PATCH 3/5] Update snapshots Signed-off-by: Eugene Lee --- .../__snapshots__/create.test.tsx.snap | 272 +++++++++++++++--- .../__snapshots__/log_config.test.tsx.snap | 12 + .../service_config.test.tsx.snap | 42 ++- .../__snapshots__/trace_config.test.tsx.snap | 42 ++- .../custom_panel_table.test.tsx.snap | 10 + .../custom_panel_view.test.tsx.snap | 20 ++ .../custom_input_model.test.tsx.snap | 4 + .../__snapshots__/utils.test.tsx.snap | 8 + .../__snapshots__/empty_panel.test.tsx.snap | 12 + .../visualization_container.test.tsx.snap | 2 + .../count_distribution.test.tsx.snap | 2 + .../service_map_scale.test.tsx.snap | 2 + .../dashboard_table.test.tsx.snap | 5 + .../flyout_list_item.test.tsx.snap | 1 + .../service_breakdown_panel.test.tsx.snap | 2 + .../span_detail_flyout.test.tsx.snap | 7 + .../span_detail_panel.test.tsx.snap | 2 + .../__tests__/__snapshots__/bar.test.tsx.snap | 2 + .../__snapshots__/line.test.tsx.snap | 2 + .../__tests__/__snapshots__/pie.test.tsx.snap | 2 + .../__snapshots__/plotly.test.tsx.snap | 2 + 21 files changed, 405 insertions(+), 48 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap index c93d4518e..c8710d638 100644 --- a/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap +++ b/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap @@ -27,6 +27,7 @@ Object { >

Create application @@ -156,6 +157,7 @@ Object {