Fix UX E2E tests (#85722)

They look for `.kbnLoadingIndicator` which is no longer there in the new loading indicator design. This changes it to look for an element that does exist and makes it a function in utils.

Change not.be.visible to not.exist in places where the element does not exist at in that state.

Author: smith

x-pack/plugins/apm/e2e/cypress/integration/snapshots.js

@@ -1,3 +1,3 @@
 module.exports = {
-  "__version": "5.4.0"
+  "__version": "6.0.1"
 }

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts

@@ -6,13 +6,13 @@
 
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 /** The default time in ms to wait for a Cypress command to complete */
 
 Given(`a user clicks the page load breakdown filter`, () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  waitForLoadingToFinish();
+  cy.get('.euiStat__title-isLoading').should('not.exist');
   const breakDownBtn = cy.get(
     '[data-test-subj=pldBreakdownFilter]',
     DEFAULT_TIMEOUT
@@ -27,7 +27,7 @@ When(`the user selected the breakdown`, () => {
 });
 
 Then(`breakdown series should appear in chart`, () => {
-  cy.get('.euiLoadingChart').should('not.be.visible');
+  cy.get('.euiLoadingChart').should('not.exist');
 
   cy.get('[data-cy=pageLoadDist]').within(() => {
     cy.get('div.echLegendItem__label[title=Chrome] ', DEFAULT_TIMEOUT)

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/client_metrics_helper.ts

@@ -5,6 +5,7 @@
  */
 
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 /**
  * Verifies the behavior of the client metrics component
@@ -17,15 +18,14 @@ export function verifyClientMetrics(
 ) {
   const clientMetricsSelector = '[data-cy=client-metrics] .euiStat__title';
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   if (checkTitleStatus) {
     cy.get('.euiStat__title', DEFAULT_TIMEOUT).should('be.visible');
-    cy.get('.euiSelect-isLoading').should('not.be.visible');
+    cy.get('.euiSelect-isLoading').should('not.exist');
   }
 
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  cy.get('.euiStat__title-isLoading').should('not.exist');
 
   cy.get(clientMetricsSelector).eq(0).should('have.text', metrics[0]);
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts

@@ -7,6 +7,7 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 import { loginAndWaitForPage } from '../../../integration/helpers';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { waitForLoadingToFinish } from './utils';
 
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = { timeout: 60 * 1000 };
@@ -36,9 +37,9 @@ Then(`should display percentile for page load chart`, () => {
 
   cy.get('.euiLoadingChart', DEFAULT_TIMEOUT).should('be.visible');
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  waitForLoadingToFinish();
+
+  cy.get('.euiStat__title-isLoading').should('not.exist');
 
   cy.get(pMarkers).eq(0).should('have.text', '50th');
 
@@ -52,21 +53,19 @@ Then(`should display percentile for page load chart`, () => {
 Then(`should display chart legend`, () => {
   const chartLegend = 'div.echLegendItem__label';
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiLoadingChart').should('not.be.visible');
+  waitForLoadingToFinish();
+  cy.get('.euiLoadingChart').should('not.exist');
 
   cy.get(chartLegend, DEFAULT_TIMEOUT).eq(0).should('have.text', 'Overall');
 });
 
 Then(`should display tooltip on hover`, () => {
-  cy.get('.euiLoadingChart').should('not.be.visible');
+  cy.get('.euiLoadingChart').should('not.exist');
 
   const pMarkers = '[data-cy=percentile-markers] span.euiToolTipAnchor';
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiLoadingChart').should('not.be.visible');
+  waitForLoadingToFinish();
+  cy.get('.euiLoadingChart').should('not.exist');
 
   const marker = cy.get(pMarkers, DEFAULT_TIMEOUT).eq(0);
   marker.invoke('show');

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts

@@ -7,11 +7,11 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { waitForLoadingToFinish } from './utils';
 
 When(/^the user filters by "([^"]*)"$/, (filterName) => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  waitForLoadingToFinish();
+  cy.get('.euiStat__title-isLoading').should('not.exist');
   cy.get(`#local-filter-${filterName}`).click();
 
   cy.get(`#local-filter-popover-${filterName}`, DEFAULT_TIMEOUT).within(() => {
@@ -51,9 +51,8 @@ When(/^the user filters by "([^"]*)"$/, (filterName) => {
 });
 
 Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  waitForLoadingToFinish();
+  cy.get('.euiStat__title-isLoading').should('not.exist');
 
   const data =
     filterName === 'os'

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/js_errors.ts

@@ -9,8 +9,8 @@ import { DEFAULT_TIMEOUT } from './csm_dashboard';
 import { getDataTestSubj } from './utils';
 
 Then(`it displays list of relevant js errors`, () => {
-  cy.get('.euiBasicTable-loading').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  cy.get('.euiBasicTable-loading').should('not.exist');
+  cy.get('.euiStat__title-isLoading').should('not.exist');
 
   getDataTestSubj('uxJsErrorsTotal').should('have.text', 'Total errors112');
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts

@@ -6,11 +6,10 @@
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { verifyClientMetrics } from './client_metrics_helper';
-import { getDataTestSubj } from './utils';
+import { getDataTestSubj, waitForLoadingToFinish } from './utils';
 
 When('the user changes the selected percentile', () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   getDataTestSubj('uxPercentileSelect').select('95');
 });

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts

@@ -7,10 +7,10 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { verifyClientMetrics } from './client_metrics_helper';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 When('the user changes the selected service name', () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get(`[data-cy=serviceNameFilter]`, DEFAULT_TIMEOUT).select('client');
 });
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/url_search_filter.ts

@@ -6,18 +6,18 @@
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 When(`a user clicks inside url search field`, () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+  waitForLoadingToFinish();
+  cy.get('.euiStat__title-isLoading').should('not.exist');
   cy.get('span[data-cy=csmUrlFilter]', DEFAULT_TIMEOUT).within(() => {
     cy.get('input.euiFieldSearch').click();
   });
 });
 
 Then(`it displays top pages in the suggestion popover`, () => {
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   cy.get('div.euiPopover__panel-isOpen', DEFAULT_TIMEOUT).within(() => {
     const listOfUrls = cy.get('li.euiSelectableListItem');
@@ -38,17 +38,17 @@ Then(`it displays top pages in the suggestion popover`, () => {
 });
 
 When(`a user enters a query in url search field`, () => {
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   cy.get('[data-cy=csmUrlFilter]').within(() => {
     cy.get('input.euiSelectableSearch').type('cus');
   });
 
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 });
 
 Then(`it should filter results based on query`, () => {
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   cy.get('div.euiPopover__panel-isOpen', DEFAULT_TIMEOUT).within(() => {
     const listOfUrls = cy.get('li.euiSelectableListItem');

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/utils.ts

@@ -6,9 +6,12 @@
 
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
 
+export function waitForLoadingToFinish() {
+  cy.get('[data-test-subj=globalLoadingIndicator-hidden]', DEFAULT_TIMEOUT);
+}
+
 export function getDataTestSubj(dataTestSubj: string) {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   return cy.get(`[data-test-subj=${dataTestSubj}]`, DEFAULT_TIMEOUT);
 }