[Security Solution] Add cypress tests for global search bar (#68535)

x-pack/plugins/security_solution/cypress/integration/search_bar.spec.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { loginAndWaitForPage } from '../tasks/login';
+import { openAddFilterPopover, fillAddFilterForm } from '../tasks/search_bar';
+import { GLOBAL_SEARCH_BAR_FILTER_ITEM } from '../screens/search_bar';
+import { hostIpFilter } from '../objects/filter';
+
+import { HOSTS_PAGE } from '../urls/navigation';
+import { waitForAllHostsToBeLoaded } from '../tasks/hosts/all_hosts';
+
+describe('SearchBar', () => {
+  before(() => {
+    loginAndWaitForPage(HOSTS_PAGE);
+    waitForAllHostsToBeLoaded();
+  });
+
+  it('adds correctly a filter to the global search bar', () => {
+    openAddFilterPopover();
+    fillAddFilterForm(hostIpFilter);
+    cy.get(GLOBAL_SEARCH_BAR_FILTER_ITEM(hostIpFilter)).should('be.visible');
+  });
+});

x-pack/plugins/security_solution/cypress/objects/filter.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+export interface SearchBarFilter {
+  key: string;
+  value: string;
+}
+
+export const hostIpFilter: SearchBarFilter = {
+  key: 'host.ip',
+  value: '1.1.1.1',
+};

x-pack/plugins/security_solution/cypress/screens/search_bar.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { SearchBarFilter } from '../objects/filter';
+
+export const GLOBAL_SEARCH_BAR_ADD_FILTER =
+  '[data-test-subj="globalDatePicker"] [data-test-subj="addFilter"]';
+
+export const GLOBAL_SEARCH_BAR_SUBMIT_BUTTON =
+  '[data-test-subj="globalDatePicker"] [data-test-subj="querySubmitButton"]';
+
+export const ADD_FILTER_FORM_FIELD_INPUT =
+  '[data-test-subj="filterFieldSuggestionList"] input[data-test-subj="comboBoxSearchInput"]';
+
+export const ADD_FILTER_FORM_FIELD_OPTION = (value: string) =>
+  `[data-test-subj="comboBoxOptionsList filterFieldSuggestionList-optionsList"] button[title="${value}"] strong`;
+
+export const ADD_FILTER_FORM_OPERATOR_FIELD =
+  '[data-test-subj="filterOperatorList"] input[data-test-subj="comboBoxSearchInput"]';
+
+export const ADD_FILTER_FORM_OPERATOR_OPTION_IS =
+  '[data-test-subj="comboBoxOptionsList filterOperatorList-optionsList"] button[title="is"]';
+
+export const ADD_FILTER_FORM_FILTER_VALUE_INPUT = '[data-test-subj="filterParams"] input';
+
+export const ADD_FILTER_FORM_SAVE_BUTTON = '[data-test-subj="saveFilter"]';
+
+export const GLOBAL_SEARCH_BAR_FILTER_ITEM = ({ key, value }: SearchBarFilter) =>
+  `[data-test-subj="filter filter-enabled filter-key-${key} filter-value-${value} filter-unpinned"]`;

x-pack/plugins/security_solution/cypress/tasks/search_bar.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { SearchBarFilter } from '../objects/filter';
+
+import {
+  GLOBAL_SEARCH_BAR_ADD_FILTER,
+  GLOBAL_SEARCH_BAR_SUBMIT_BUTTON,
+  ADD_FILTER_FORM_SAVE_BUTTON,
+  ADD_FILTER_FORM_FIELD_INPUT,
+  ADD_FILTER_FORM_OPERATOR_OPTION_IS,
+  ADD_FILTER_FORM_OPERATOR_FIELD,
+  ADD_FILTER_FORM_FIELD_OPTION,
+  ADD_FILTER_FORM_FILTER_VALUE_INPUT,
+} from '../screens/search_bar';
+
+export const openAddFilterPopover = () => {
+  cy.get(GLOBAL_SEARCH_BAR_SUBMIT_BUTTON).should('be.enabled');
+  cy.get(GLOBAL_SEARCH_BAR_ADD_FILTER).click({ force: true });
+};
+
+export const fillAddFilterForm = ({ key, value }: SearchBarFilter) => {
+  cy.get(ADD_FILTER_FORM_FIELD_INPUT).type(key);
+  cy.get(ADD_FILTER_FORM_FIELD_INPUT).click();
+  cy.get(ADD_FILTER_FORM_FIELD_OPTION(key)).click({ force: true });
+  cy.get(ADD_FILTER_FORM_OPERATOR_FIELD).click();
+  cy.get(ADD_FILTER_FORM_OPERATOR_OPTION_IS).click();
+  cy.get(ADD_FILTER_FORM_FILTER_VALUE_INPUT).type(value);
+  cy.get(ADD_FILTER_FORM_SAVE_BUTTON).click();
+};