Skip to content

Commit

Permalink
[SIEM] Fields browser readable (#56000)
Browse files Browse the repository at this point in the history 
* extracts methods to tasks

* uses cypress api for assertions

* refactor

* removes tag
  • Loading branch information
@MadameSheema
MadameSheema committed Jan 28, 2020
1 parent 3db8cb3 commit fc10fb6
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 92 deletions.
8 changes: 2 additions & 6 deletions x-pack/legacy/plugins/siem/cypress/integration/lib/fields_browser/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@
* you may not use this file except in compliance with the Elastic License.
*/

import {
FIELDS_BROWSER_CONTAINER,
FIELDS_BROWSER_FILTER_INPUT,
TIMELINE_FIELDS_BUTTON,
} from './selectors';
import { FIELDS_BROWSER_CONTAINER, FIELDS_BROWSER_FILTER_INPUT } from './selectors';
import {
assertAtLeastOneEventMatchesSearch,
executeKQL,
hostExistsQuery,
toggleTimelineVisibility,
} from '../timeline/helpers';
import { TIMELINE_DATA_PROVIDERS } from '../timeline/selectors';
import { TIMELINE_DATA_PROVIDERS, TIMELINE_FIELDS_BUTTON } from '../timeline/selectors';

/** Opens the timeline's Field Browser */
export const openTimelineFieldsBrowser = () => {
Expand Down
3 changes: 3 additions & 0 deletions x-pack/legacy/plugins/siem/cypress/integration/lib/timeline/selectors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
/** A data provider rendered in the timeline's data providers drop area */
export const DATA_PROVIDER = '[data-test-subj="providerContainer"]';

export const TIMELINE_FIELDS_BUTTON =
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';

/** Data providers are dropped and rendered in this area of the timeline */
export const TIMELINE_DATA_PROVIDERS = '[data-test-subj="dataProviders"]';

Expand Down
136 changes: 52 additions & 84 deletions ...legacy/plugins/siem/cypress/integration/smoke_tests/fields_browser/fields_browser.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,40 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { drag, drop } from '../../lib/drag_n_drop/helpers';
import {
clearFieldsBrowser,
clickOutsideFieldsBrowser,
openTimelineFieldsBrowser,
populateTimeline,
filterFieldsBrowser,
} from '../../lib/fields_browser/helpers';
import { HOSTS_PAGE } from '../../lib/urls';

import { loginAndWaitForPage, DEFAULT_TIMEOUT } from '../../../tasks/login';

import {
FIELDS_BROWSER_TITLE,
FIELDS_BROWSER_SELECTED_CATEGORY_TITLE,
FIELDS_BROWSER_SELECTED_CATEGORY_COUNT,
FIELDS_BROWSER_CATEGORIES_COUNT,
FIELDS_BROWSER_CONTAINER,
FIELDS_BROWSER_FIELDS_COUNT,
FIELDS_BROWSER_FILTER_INPUT,
FIELDS_BROWSER_HOST_CATEGORIES_COUNT,
FIELDS_BROWSER_SELECTED_CATEGORY_COUNT,
FIELDS_BROWSER_SELECTED_CATEGORY_TITLE,
FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT,
FIELDS_BROWSER_TITLE,
} from '../../lib/fields_browser/selectors';
import { HOSTS_PAGE } from '../../lib/urls';
import { loginAndWaitForPage, DEFAULT_TIMEOUT } from '../../lib/util/helpers';
FIELDS_BROWSER_FIELDS_COUNT,
FIELDS_BROWSER_MESSAGE_HEADER,
FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER,
FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER,
FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER,
} from '../../../screens/timeline/fields_browser';

import {
openTimeline,
populateTimeline,
openTimelineFieldsBrowser,
} from '../../../tasks/timeline/main';

import {
clearFieldsBrowser,
filterFieldsBrowser,
closeFieldsBrowser,
removesMessageField,
addsHostGeoCityNameToTimeline,
addsHostGeoCountryNameToTimelineDraggingIt,
addsHostGeoContinentNameToTimeline,
resetFields,
} from '../../../tasks/timeline/fields_browser';

const defaultHeaders = [
{ id: '@timestamp' },
Expand All @@ -41,6 +54,7 @@ describe('Fields Browser', () => {
context('Fields Browser rendering', () => {
before(() => {
loginAndWaitForPage(HOSTS_PAGE);
openTimeline();
populateTimeline();
openTimelineFieldsBrowser();
});
Expand Down Expand Up @@ -78,7 +92,7 @@ describe('Fields Browser', () => {

filterFieldsBrowser(filterInput);

cy.get(FIELDS_BROWSER_CATEGORIES_COUNT)
cy.get(FIELDS_BROWSER_CATEGORIES_COUNT, { timeout: DEFAULT_TIMEOUT })
.invoke('text')
.should('eq', '2 categories');
});
Expand All @@ -88,18 +102,13 @@ describe('Fields Browser', () => {

filterFieldsBrowser(filterInput);

cy.get(FIELDS_BROWSER_FILTER_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
'not.have.class',
'euiFieldSearch-isLoading'
);

cy.get(FIELDS_BROWSER_HOST_CATEGORIES_COUNT)
.invoke('text')
.then(hostCategoriesCount => {
cy.get(FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT)
.invoke('text')
.then(systemCategoriesCount => {
cy.get(FIELDS_BROWSER_FIELDS_COUNT)
cy.get(FIELDS_BROWSER_FIELDS_COUNT, { timeout: DEFAULT_TIMEOUT })
.invoke('text')
.should('eq', `${+hostCategoriesCount + +systemCategoriesCount} fields`);
});
Expand All @@ -120,6 +129,7 @@ describe('Fields Browser', () => {
context('Editing the timeline', () => {
before(() => {
loginAndWaitForPage(HOSTS_PAGE);
openTimeline();
populateTimeline();
openTimelineFieldsBrowser();
});
Expand All @@ -130,31 +140,17 @@ describe('Fields Browser', () => {
});

it('removes the message field from the timeline when the user un-checks the field', () => {
const toggleField = 'message';

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'exist'
);
cy.get(FIELDS_BROWSER_MESSAGE_HEADER).should('exist');

cy.get(
`[data-test-subj="timeline"] [data-test-subj="field-${toggleField}-checkbox"]`
).uncheck({
force: true,
});
removesMessageField();
closeFieldsBrowser();

clickOutsideFieldsBrowser();

cy.get(FIELDS_BROWSER_CONTAINER).should('not.exist');

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'not.exist'
);
cy.get(FIELDS_BROWSER_MESSAGE_HEADER).should('not.exist');
});

it('selects a search results label with the expected count of categories matching the filter input', () => {
const category = 'host';

filterFieldsBrowser(`${category}.`);
filterFieldsBrowser(category);

cy.get(FIELDS_BROWSER_SELECTED_CATEGORY_TITLE)
.invoke('text')
Expand All @@ -163,75 +159,47 @@ describe('Fields Browser', () => {

it('adds a field to the timeline when the user clicks the checkbox', () => {
const filterInput = 'host.geo.c';
const toggleField = 'host.geo.city_name';

filterFieldsBrowser(filterInput);
cy.get(FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER).should('not.exist');
addsHostGeoCityNameToTimeline();
closeFieldsBrowser();

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'not.exist'
);

cy.get(`[data-test-subj="timeline"] [data-test-subj="field-${toggleField}-checkbox"]`).check({
force: true,
});

clickOutsideFieldsBrowser();

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`, {
cy.get(FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER, {
timeout: DEFAULT_TIMEOUT,
}).should('exist');
});

it('adds a field to the timeline when the user drags and drops a field', () => {
const filterInput = 'host.geo.c';
const toggleField = 'host.geo.country_name';

filterFieldsBrowser(filterInput);

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'not.exist'
);

cy.get(
`[data-test-subj="timeline"] [data-test-subj="field-name-${toggleField}"]`
).then(field => drag(field));
cy.get(FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER).should('not.exist');

cy.get(`[data-test-subj="timeline"] [data-test-subj="headers-group"]`).then(headersDropArea =>
drop(headersDropArea)
);
addsHostGeoCountryNameToTimelineDraggingIt();

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`, {
cy.get(FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER, {
timeout: DEFAULT_TIMEOUT,
}).should('exist');
});

it('resets all fields in the timeline when `Reset Fields` is clicked', () => {
const filterInput = 'host.geo.c';
const toggleField = 'host.geo.continent_name';

filterFieldsBrowser(filterInput);

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'not.exist'
);

cy.get(`[data-test-subj="timeline"] [data-test-subj="field-${toggleField}-checkbox"]`).check({
force: true,
});
cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('not.exist');

clickOutsideFieldsBrowser();
addsHostGeoContinentNameToTimeline();
closeFieldsBrowser();

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'exist'
);
cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('exist');

openTimelineFieldsBrowser();
resetFields();

cy.get('[data-test-subj="timeline"] [data-test-subj="reset-fields"]').click({ force: true });

cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
'not.exist'
);
cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('not.exist');
});
});
});
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/cypress/screens/hosts/fields_browser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
*/

/** Clicking this button in the timeline opens the Fields browser */
export const TIMELINE_FIELDS_BUTTON =
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';

/** The title displayed in the fields browser (i.e. Customize Columns) */
export const FIELDS_BROWSER_TITLE = '[data-test-subj="field-browser-title"]';
Expand Down
60 changes: 60 additions & 0 deletions x-pack/legacy/plugins/siem/cypress/screens/timeline/fields_browser.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* 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 const FIELDS_BROWSER_TITLE = '[data-test-subj="field-browser-title"]';

/** Typing in this input filters the Field Browser */
export const FIELDS_BROWSER_FILTER_INPUT = '[data-test-subj="field-search"]';

/** The title of the selected category in the right-hand side of the fields browser */
export const FIELDS_BROWSER_SELECTED_CATEGORY_TITLE = '[data-test-subj="selected-category-title"]';

export const FIELDS_BROWSER_SELECTED_CATEGORY_COUNT =
'[data-test-subj="selected-category-count-badge"]';

export const FIELDS_BROWSER_CATEGORIES_COUNT = '[data-test-subj="categories-count"]';

export const FIELDS_BROWSER_HOST_CATEGORIES_COUNT = '[data-test-subj="host-category-count"]';

export const FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT = '[data-test-subj="system-category-count"]';

export const FIELDS_BROWSER_FIELDS_COUNT = '[data-test-subj="fields-count"]';

/** Contains the body of the fields browser */
export const FIELDS_BROWSER_CONTAINER = '[data-test-subj="fields-browser-container"]';

export const FIELDS_BROWSER_MESSAGE_HEADER =
'[data-test-subj="timeline"] [data-test-subj="header-text-message"]';

export const FIELDS_BROWSER_MESSAGE_CHECKBOX =
'[data-test-subj="timeline"] [data-test-subj="field-message-checkbox"]';

export const FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER =
'[data-test-subj="header-text-host.geo.country_name"]';

export const FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_CHECKBOX =
'[data-test-subj="field-host.geo.country_name-checkbox"]';

export const FIELDS_BROWSER_DRAGGABLE_HOST_GEO_COUNTRY_NAME_HEADER =
'[data-test-subj="timeline"] [data-test-subj="field-name-host.geo.country_name"]';

export const FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER =
'[data-test-subj="header-text-host.geo.city_name"]';

export const FIELDS_BROWSER_HOST_GEO_CITY_NAME_CHECKBOX =
'[data-test-subj="field-host.geo.city_name-checkbox"]';

export const FIELDS_BROWSER_HEADER_DROP_AREA =
'[data-test-subj="timeline"] [data-test-subj="headers-group"]';

export const FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER =
'[data-test-subj="header-text-host.geo.continent_name"]';

export const FIELDS_BROWSER_HOST_GEO_CONTINENT_NAME_CHECKBOX =
'[data-test-subj="field-host.geo.continent_name-checkbox"]';

export const FIELDS_BROWSER_RESET_FIELDS =
'[data-test-subj="timeline"] [data-test-subj="reset-fields"]';
18 changes: 18 additions & 0 deletions x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* 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.
*/

/** The `Timeline ^` button that toggles visibility of the Timeline */
export const TIMELINE_TOGGLE_BUTTON = '[data-test-subj="flyoutOverlay"]';

/** Contains the KQL bar for searching or filtering in the timeline */
export const SEARCH_OR_FILTER_CONTAINER =
'[data-test-subj="timeline-search-or-filter-search-container"]';

export const TIMELINE_FIELDS_BUTTON =
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';

/** The total server-side count of the events matching the timeline's search criteria */
export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';
Loading

0 comments on commit fc10fb6

Please sign in to comment.