adding e2e tests

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/header_filters.spec.ts

@@ -0,0 +1,130 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import url from 'url';
+import archives_metadata from '../../../fixtures/es_archiver/archives_metadata';
+import { esArchiverLoad, esArchiverUnload } from '../../../tasks/es_archiver';
+
+const { start, end } = archives_metadata['apm_8.0.0'];
+
+const serviceOverviewPath = '/app/apm/services/kibana/overview';
+const baseUrl = url.format({
+  pathname: serviceOverviewPath,
+  query: { rangeFrom: start, rangeTo: end },
+});
+
+const apisToIntercept = [
+  {
+    endpoint: '/api/apm/services/kibana/transactions/charts/latency',
+    as: 'latencyChartRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/throughput',
+    as: 'throughputChartRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/transactions/charts/error_rate',
+    as: 'errorRateChartRequest',
+  },
+  {
+    endpoint:
+      '/api/apm/services/kibana/transactions/groups/detailed_statistics',
+    as: 'transactionGroupsDetailedRequest',
+  },
+  {
+    endpoint:
+      '/api/apm/services/kibana/service_overview_instances/detailed_statistics',
+    as: 'instancesDetailedRequest',
+  },
+  {
+    endpoint:
+      '/api/apm/services/kibana/service_overview_instances/main_statistics',
+    as: 'instancesMainStatisticsRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/error_groups/main_statistics',
+    as: 'errorGroupsMainStatisticsRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/transaction/charts/breakdown',
+    as: 'transactonBreakdownRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/transactions/groups/main_statistics',
+    as: 'transactionsGroupsMainStatisticsRequest',
+  },
+];
+
+describe('Service overview - header filters', () => {
+  before(() => {
+    // esArchiverLoad('apm_8.0.0');
+  });
+  after(() => {
+    // esArchiverUnload('apm_8.0.0');
+  });
+  beforeEach(() => {
+    cy.loginAsReadOnlyUser();
+  });
+  describe('Filtering by transaction type', () => {
+    it('changes url when selecting different value', () => {
+      cy.visit(baseUrl);
+      cy.contains('Kibana');
+      cy.url().should('not.include', 'transactionType');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'request'
+      );
+      cy.get('[data-test-subj="headerFilterTransactionType"]').select(
+        'taskManager'
+      );
+      cy.url().should('include', 'transactionType=taskManager');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'taskManager'
+      );
+    });
+
+    it('calls APIs with correct transaction type', () => {
+      apisToIntercept.map(({ endpoint, as }) => {
+        cy.intercept('GET', endpoint).as(as);
+      });
+      cy.visit(baseUrl);
+      cy.contains('Kibana');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'request'
+      );
+
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: apisToIntercept.map(({ as }) => `@${as}`),
+        value: 'transactionType=request',
+      });
+
+      cy.get('[data-test-subj="headerFilterTransactionType"]').select(
+        'taskManager'
+      );
+      cy.url().should('include', 'transactionType=taskManager');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'taskManager'
+      );
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: apisToIntercept.map(({ as }) => `@${as}`),
+        value: 'transactionType=taskManager',
+      });
+    });
+  });
+
+  describe('Filtering by kuerybar', () => {
+    it('filters by transaction.name', () => {
+      cy.visit(baseUrl);
+      cy.contains('Kibana');
+      cy.get('[data-test-subj="headerFilterKuerybar"]').type('transaction.n');
+      // cy.get('[data-test-subj="transaction.name"]').click();
+      // cy.contains('transaction.name').click();
+    });
+  });
+});

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -39,3 +39,20 @@ Cypress.Commands.add('changeTimeRange', (value: string) => {
   cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
   cy.contains(value).click();
 });
+
+Cypress.Commands.add(
+  'expectAPIsToHaveBeenCalledWith',
+  ({
+    apisIntercepted,
+    value,
+  }: {
+    apisIntercepted: string[];
+    value: string;
+  }) => {
+    cy.wait(apisIntercepted).then((interceptions) => {
+      interceptions.map((interception) => {
+        expect(interception.request.url).include(value);
+      });
+    });
+  }
+);

x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts

@@ -11,5 +11,9 @@ declare namespace Cypress {
     loginAsSuperUser(): void;
     loginAs(params: { username: string; password: string }): void;
     changeTimeRange(value: string): void;
+    expectAPIsToHaveBeenCalledWith(params: {
+      apisIntercepted: string[];
+      value: string;
+    }): void;
   }
 }

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js

@@ -61,9 +61,9 @@ const ListItem = euiStyled.li`
   ${Description} {
     p span {
       background: ${({ selected, theme }) =>
-        selected
-          ? theme.eui.euiColorEmptyShade
-          : theme.eui.euiColorLightestShade};
+    selected
+      ? theme.eui.euiColorEmptyShade
+      : theme.eui.euiColorLightestShade};
     }
   }
 `;
@@ -108,6 +108,7 @@ function Suggestion(props) {
       selected={props.selected}
       onClick={() => props.onClick(props.suggestion)}
       onMouseEnter={props.onMouseEnter}
+      data-test-subj={props.suggestion.text}
     >
       <Icon type={props.suggestion.type}>
         <EuiIcon type={getEuiIconType(props.suggestion.type)} />

x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx

@@ -38,6 +38,7 @@ export function TransactionTypeSelect() {
   return (
     <>
       <EuiSelectWithWidth
+        data-test-subj="headerFilterTransactionType"
         onChange={handleChange}
         options={options}
         value={transactionType}