Add view and functional tests

x-pack/plugins/endpoint/public/applications/endpoint/mocks.ts

@@ -18,6 +18,9 @@ type DataMock = Omit<DataPublicStartMock, 'indexPatterns' | 'query'> & {
       setFilters: jest.Mock;
     };
   };
+  ui: DataPublicStartMock['ui'] & {
+    SearchBar: jest.Mock;
+  };
 };
 
 export interface DepsStartMock {
@@ -28,6 +31,7 @@ export const depsStartMock: () => DepsStartMock = () => {
   const dataMock: DataMock = (dataPluginMock.createStartContract() as unknown) as DataMock;
   dataMock.indexPatterns.getFieldsForWildcard = jest.fn();
   dataMock.query.filterManager.setFilters = jest.fn();
+  dataMock.ui.SearchBar = jest.fn();
 
   return {
     data: dataMock,

x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index.test.tsx

@@ -9,6 +9,7 @@ import * as reactTestingLibrary from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { I18nProvider } from '@kbn/i18n/react';
 import { AlertIndex } from './index';
+import { IIndexPattern } from 'src/plugins/data/public';
 import { appStoreFactory } from '../../store';
 import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
 import { fireEvent, act } from '@testing-library/react';
@@ -36,6 +37,7 @@ describe('when on the alerting page', () => {
     store = appStoreFactory();
 
     depsStart = depsStartMock();
+    depsStart.data.ui.SearchBar.mockImplementation(() => <div />);
 
     /**
      * Render the test component, use this after setting up anything in `beforeEach`.
@@ -167,4 +169,65 @@ describe('when on the alerting page', () => {
       });
     });
   });
+  describe('when there are filtering params in the url', () => {
+    let indexPatterns: IIndexPattern[];
+    beforeEach(() => {
+      /**
+       * Dispatch the `serverReturnedSearchBarIndexPatterns` action, which is normally dispatched by the middleware
+       * when the page loads. The SearchBar will not render if there are no indexPatterns in the state.
+       */
+      indexPatterns = [
+        { title: 'endpoint-events-1', fields: [{ name: 'host.hostname', type: 'string' }] },
+      ];
+      reactTestingLibrary.act(() => {
+        const action: AppAction = {
+          type: 'serverReturnedSearchBarIndexPatterns',
+          payload: indexPatterns,
+        };
+        store.dispatch(action);
+      });
+
+      const searchBarQueryParam =
+        '(language%3Akuery%2Cquery%3A%27host.hostname%20%3A%20"DESKTOP-QBBSCUT"%27)';
+      const searchBarDateRangeParam = '(from%3Anow-1y%2Cto%3Anow)';
+      reactTestingLibrary.act(() => {
+        history.push({
+          ...history.location,
+          search: `?query=${searchBarQueryParam}&date_range=${searchBarDateRangeParam}`,
+        });
+      });
+    });
+    it("should render the SearchBar component with the correct 'indexPatterns' prop", async () => {
+      render();
+      const callProps = depsStart.data.ui.SearchBar.mock.calls[0][0];
+      expect(callProps.indexPatterns).toEqual(indexPatterns);
+    });
+    it("should render the SearchBar component with the correct 'query' prop", async () => {
+      render();
+      const callProps = depsStart.data.ui.SearchBar.mock.calls[0][0];
+      const expectedProp = { query: 'host.hostname : "DESKTOP-QBBSCUT"', language: 'kuery' };
+      expect(callProps.query).toEqual(expectedProp);
+    });
+    it("should render the SearchBar component with the correct 'dateRangeFrom' prop", async () => {
+      render();
+      const callProps = depsStart.data.ui.SearchBar.mock.calls[0][0];
+      const expectedProp = 'now-1y';
+      expect(callProps.dateRangeFrom).toEqual(expectedProp);
+    });
+    it("should render the SearchBar component with the correct 'dateRangeTo' prop", async () => {
+      render();
+      const callProps = depsStart.data.ui.SearchBar.mock.calls[0][0];
+      const expectedProp = 'now';
+      expect(callProps.dateRangeTo).toEqual(expectedProp);
+    });
+    it('should render the SearchBar component with the correct display props', async () => {
+      render();
+      const callProps = depsStart.data.ui.SearchBar.mock.calls[0][0];
+      expect(callProps.showFilterBar).toBe(true);
+      expect(callProps.showDatePicker).toBe(true);
+      expect(callProps.showQueryBar).toBe(true);
+      expect(callProps.showQueryInput).toBe(true);
+      expect(callProps.showSaveQuery).toBe(false);
+    });
+  });
 });

x-pack/plugins/endpoint/public/applications/endpoint/view/alerts/index_search_bar.tsx

@@ -63,6 +63,7 @@ export const AlertIndexSearchBar = memo(() => {
     <div>
       {searchBarIndexPatterns.length > 0 && (
         <SearchBar
+          dataTestSubj="alertsSearchBar"
           appName="endpoint"
           isLoading={false}
           indexPatterns={searchBarIndexPatterns}

x-pack/test/functional/apps/endpoint/alert_list.ts

@@ -3,12 +3,14 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function({ getPageObjects, getService }: FtrProviderContext) {
-  const pageObjects = getPageObjects(['common', 'endpoint']);
+  const pageObjects = getPageObjects(['common', 'endpointAlerts']);
   const testSubjects = getService('testSubjects');
   const esArchiver = getService('esArchiver');
+  const browser = getService('browser');
 
   describe('Endpoint Alert List', function() {
     this.tags(['ciGroup7']);
@@ -20,9 +22,19 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
     it('loads the Alert List Page', async () => {
       await testSubjects.existOrFail('alertListPage');
     });
+    it('includes alerts search bar', async () => {
+      await testSubjects.existOrFail('alertsSearchBar');
+    });
     it('includes Alert list data grid', async () => {
       await testSubjects.existOrFail('alertListGrid');
     });
+    it('updates the url upon submitting a new search bar query', async () => {
+      await pageObjects.endpointAlerts.enterSearchBarQuery();
+      await pageObjects.endpointAlerts.submitSearchBarFilter();
+      const currentUrl = await browser.getCurrentUrl();
+      expect(currentUrl).to.contain('query=');
+      expect(currentUrl).to.contain('date_range=');
+    });
 
     after(async () => {
       await esArchiver.unload('endpoint/alerts/api_feature');

x-pack/test/functional/page_objects/endpoint_alerts_page.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { FtrProviderContext } from '../ftr_provider_context';
+
+export function EndpointAlertsPageProvider({ getService }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+
+  return {
+    async enterSearchBarQuery() {
+      return await testSubjects.setValue('alertsSearchBar', 'test query');
+    },
+    async submitSearchBarFilter() {
+      return await testSubjects.click('querySubmitButton');
+    },
+  };
+}

x-pack/test/functional/page_objects/index.ts

@@ -47,6 +47,7 @@ import { InfraMetricExplorerProvider } from './infra_metric_explorer';
 import { RoleMappingsPageProvider } from './role_mappings_page';
 import { SpaceSelectorPageProvider } from './space_selector_page';
 import { EndpointPageProvider } from './endpoint_page';
+import { EndpointAlertsPageProvider } from './endpoint_alerts_page';
 
 // just like services, PageObjects are defined as a map of
 // names to Providers. Merge in Kibana's or pick specific ones
@@ -81,4 +82,5 @@ export const pageObjects = {
   lens: LensPageProvider,
   roleMappings: RoleMappingsPageProvider,
   endpoint: EndpointPageProvider,
+  endpointAlerts: EndpointAlertsPageProvider,
 };