[APM UI] Rephrase BDD steps for RUM scenarios (elastic#72492) (elasti…

…c#76615)

* chore: group tests doing the same

This will reduce the time it takes to execute the tests

* chore: rephrase step

* chore: extract common code to a function

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature.disabled

@@ -12,20 +12,14 @@ Feature: RUM Dashboard
       | os         |
       | location   |
 
-  Scenario: Page load distribution percentiles
+  Scenario: Display RUM Data components
     When a user browses the APM UI application for RUM Data
     Then should display percentile for page load chart
-
-  Scenario: Page load distribution chart tooltip
-    When a user browses the APM UI application for RUM Data
-    Then should display tooltip on hover
-
-  Scenario: Page load distribution chart legends
-    When a user browses the APM UI application for RUM Data
-    Then should display chart legend
+      And should display tooltip on hover
+      And should display chart legend
 
   Scenario: Breakdown filter
-    Given a user click page load breakdown filter
+    Given a user clicks the page load breakdown filter
     When the user selected the breakdown
     Then breakdown series should appear in chart
 

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { DEFAULT_TIMEOUT } from './rum_dashboard';
+
+/**
+ * Verifies the behavior of the client metrics component
+ * @param metrics array of three elements
+ * @param checkTitleStatus if it's needed to check title elements
+ */
+export function verifyClientMetrics(
+  metrics: string[],
+  checkTitleStatus: boolean
+) {
+  const clientMetricsSelector = '[data-cy=client-metrics] .euiStat__title';
+
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+
+  if (checkTitleStatus) {
+    cy.get('.euiStat__title', { timeout: DEFAULT_TIMEOUT }).should(
+      'be.visible'
+    );
+    cy.get('.euiSelect-isLoading').should('not.be.visible');
+  }
+
+  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+
+  cy.get(clientMetricsSelector).eq(0).should('have.text', metrics[0]);
+
+  cy.get(clientMetricsSelector).eq(1).should('have.text', metrics[1]);
+
+  cy.get(clientMetricsSelector).eq(2).should('have.text', metrics[2]);
+}

x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/page_load_dist.ts

@@ -9,7 +9,7 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = 60 * 1000;
 
-Given(`a user click page load breakdown filter`, () => {
+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');

x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum/rum_dashboard.ts

@@ -6,6 +6,7 @@
 
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 import { loginAndWaitForPage } from '../../../integration/helpers';
+import { verifyClientMetrics } from './client_metrics_helper';
 
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = 60 * 1000;
@@ -21,19 +22,9 @@ Given(`a user browses the APM UI application for RUM Data`, () => {
 });
 
 Then(`should have correct client metrics`, () => {
-  const clientMetrics = '[data-cy=client-metrics] .euiStat__title';
+  const metrics = ['0.01 sec', '0.08 sec', '55 '];
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title', { timeout: DEFAULT_TIMEOUT }).should('be.visible');
-  cy.get('.euiSelect-isLoading').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
-
-  cy.get(clientMetrics).eq(2).should('have.text', '55 ');
-
-  cy.get(clientMetrics).eq(1).should('have.text', '0.08 sec');
-
-  cy.get(clientMetrics).eq(0).should('have.text', '0.01 sec');
+  verifyClientMetrics(metrics, true);
 });
 
 Then(`should display percentile for page load chart`, () => {

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

@@ -6,6 +6,7 @@
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from '../apm';
+import { verifyClientMetrics } from './client_metrics_helper';
 
 When('a user changes the selected service name', (filterName) => {
   // wait for all loading to finish
@@ -16,15 +17,7 @@ When('a user changes the selected service name', (filterName) => {
 });
 
 Then(`it displays relevant client metrics`, () => {
-  const clientMetrics = '[data-cy=client-metrics] .euiStat__title';
+  const metrics = ['0.01 sec', '0.07 sec', '7 '];
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get('.euiStat__title-isLoading').should('not.be.visible');
-
-  cy.get(clientMetrics).eq(2).should('have.text', '7 ');
-
-  cy.get(clientMetrics).eq(1).should('have.text', '0.07 sec');
-
-  cy.get(clientMetrics).eq(0).should('have.text', '0.01 sec');
+  verifyClientMetrics(metrics, false);
 });