[Security Solution] Unskip cypress tests (#86653) (#87767)

* unskip data provider cypress test * remove extra whitespace for filter classes * remove cy.wait * update functional test * fix cypress and add tabType to dataTestSubj * fix cypress test * revert createNewTimeline task * fix dependency * fix line error Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 8, 2021 · 0d1d095 · 0d1d095
1 parent 9ea8a0f
commit 0d1d095
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 25 deletions.
diff --git a/src/plugins/data/public/ui/filter_bar/filter_item.tsx b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
@@ -153,7 +153,14 @@ export function FilterItem(props: Props) {
     const dataTestSubjNegated = filter.meta.negate ? 'filter-negated' : '';
     const dataTestSubjDisabled = `filter-${isDisabled(labelConfig) ? 'disabled' : 'enabled'}`;
     const dataTestSubjPinned = `filter-${isFilterPinned(filter) ? 'pinned' : 'unpinned'}`;
-    return `filter ${dataTestSubjDisabled} ${dataTestSubjKey} ${dataTestSubjValue} ${dataTestSubjPinned} ${dataTestSubjNegated}`;
+    return classNames(
+      'filter',
+      dataTestSubjDisabled,
+      dataTestSubjKey,
+      dataTestSubjValue,
+      dataTestSubjPinned,
+      dataTestSubjNegated
+    );
   }
 
   function getPanels() {

diff --git a/test/functional/services/filter_bar.ts b/test/functional/services/filter_bar.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import classNames from 'classnames';
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export function FilterBarProvider({ getService, getPageObjects }: FtrProviderContext) {
@@ -45,7 +46,14 @@ export function FilterBarProvider({ getService, getPageObjects }: FtrProviderCon
       const filterPinnedState = pinned ? 'pinned' : 'unpinned';
       const filterNegatedState = negated ? 'filter-negated' : '';
       return testSubjects.exists(
-        `filter filter-${filterActivationState} filter-key-${key} filter-value-${value} filter-${filterPinnedState} ${filterNegatedState}`,
+        classNames(
+          'filter',
+          `filter-${filterActivationState}`,
+          key !== '' && `filter-key-${key}`,
+          value !== '' && `filter-value-${value}`,
+          `filter-${filterPinnedState}`,
+          filterNegatedState
+        ),
         {
           allowHidden: true,
         }

diff --git a/x-pack/plugins/security_solution/cypress/integration/timeline_data_providers.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timeline_data_providers.spec.ts
@@ -25,9 +25,7 @@ import { closeTimeline, createNewTimeline } from '../tasks/timeline';
 import { HOSTS_URL } from '../urls/navigation';
 import { cleanKibana } from '../tasks/common';
 
-// FLAKY: https://github.com/elastic/kibana/issues/85098
-// FLAKY: https://github.com/elastic/kibana/issues/62060
-describe.skip('timeline data providers', () => {
+describe('timeline data providers', () => {
   before(() => {
     cleanKibana();
     loginAndWaitForPage(HOSTS_URL);

diff --git a/x-pack/plugins/security_solution/cypress/screens/timeline.ts b/x-pack/plugins/security_solution/cypress/screens/timeline.ts
@@ -89,6 +89,18 @@ export const SAVE_FILTER_BTN = '[data-test-subj="saveFilter"]';
 export const SEARCH_OR_FILTER_CONTAINER =
   '[data-test-subj="timeline-search-or-filter-search-container"]';
 
+export const QUERY_TAB_EVENTS_TABLE = '[data-test-subj="query-events-table"]';
+
+export const QUERY_TAB_EVENTS_BODY = '[data-test-subj="query-tab-flyout-body"]';
+
+export const QUERY_TAB_EVENTS_FOOTER = '[data-test-subj="query-tab-flyout-footer"]';
+
+export const PINNED_TAB_EVENTS_TABLE = '[data-test-subj="pinned-events-table"]';
+
+export const PINNED_TAB_EVENTS_BODY = '[data-test-subj="pinned-tab-flyout-body"]';
+
+export const PINNED_TAB_EVENTS_FOOTER = '[data-test-subj="pinned-tab-flyout-footer"]';
+
 export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';
 
 export const STAR_ICON = '[data-test-subj="timeline-favorite-empty-star"]';
@@ -111,10 +123,8 @@ export const TIMELINE_DROPPED_DATA_PROVIDERS = '[data-test-subj="providerContain
 export const TIMELINE_FIELDS_BUTTON =
   '[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
 
-export const TIMELINE_FILTER = (filter: TimelineFilter) => {
-  // The space at the end of the line is required. We want to keep it until it is updated.
-  return `[data-test-subj="filter filter-enabled filter-key-${filter.field} filter-value-${filter.value} filter-unpinned "]`;
-};
+export const TIMELINE_FILTER = (filter: TimelineFilter) =>
+  `[data-test-subj="filter filter-enabled filter-key-${filter.field} filter-value-${filter.value} filter-unpinned"]`;
 
 export const TIMELINE_FILTER_FIELD = '[data-test-subj="filterFieldSuggestionList"]';
 
@@ -127,9 +137,9 @@ export const TIMELINE_FILTER_VALUE =
 
 export const TIMELINE_FLYOUT = '[data-test-subj="eui-flyout"]';
 
-export const TIMELINE_FLYOUT_HEADER = '[data-test-subj="eui-flyout-header"]';
+export const TIMELINE_FLYOUT_HEADER = '[data-test-subj="query-tab-flyout-header"]';
 
-export const TIMELINE_FLYOUT_BODY = '[data-test-subj="eui-flyout-body"]';
+export const TIMELINE_FLYOUT_BODY = '[data-test-subj="query-tab-flyout-body"]';
 
 export const TIMELINE_INSPECT_BUTTON = `${TIMELINE_FLYOUT} [data-test-subj="inspect-icon-button"]`;
 

diff --git a/x-pack/plugins/security_solution/cypress/tasks/timeline.ts b/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
@@ -118,7 +118,6 @@ export const closeTimeline = () => {
 
 export const createNewTimeline = () => {
   cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').click({ force: true });
-  cy.wait(1000);
   cy.get(CREATE_NEW_TIMELINE).should('be.visible');
   cy.get(CREATE_NEW_TIMELINE).click();
 };

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
@@ -179,7 +179,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
           <EventsTable
             $activePage={activePage}
             $columnCount={columnHeaders.length + 1}
-            data-test-subj="events-table"
+            data-test-subj={`${tabType}-events-table`}
             columnWidths={columnWidths}
             onKeyDown={onKeyDown}
             $rowCount={data.length}

diff --git a/.../security_solution/public/timelines/components/timeline/pinned_tab_content/index.test.tsx b/.../security_solution/public/timelines/components/timeline/pinned_tab_content/index.test.tsx
@@ -15,7 +15,7 @@ import { TestProviders } from '../../../../common/mock/test_providers';
 
 import { Sort } from '../body/sort';
 import { useMountAppended } from '../../../../common/utils/use_mount_appended';
-import { TimelineId } from '../../../../../common/types/timeline';
+import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
 import { useTimelineEvents } from '../../../containers/index';
 import { useTimelineEventsDetails } from '../../../containers/details/index';
 import { useSourcererScope } from '../../../../common/containers/sourcerer';
@@ -117,7 +117,9 @@ describe('PinnedTabContent', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.pinned}-events-table"]`).exists()
+      ).toEqual(true);
     });
 
     it('it shows the timeline footer', () => {

diff --git a/...ugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx b/...ugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
@@ -173,10 +173,13 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
 
   return (
     <>
-      <FullWidthFlexGroup>
+      <FullWidthFlexGroup data-test-subj={`${TimelineTabs.pinned}-tab`}>
         <ScrollableFlexItem grow={2}>
           <EventDetailsWidthProvider>
-            <StyledEuiFlyoutBody data-test-subj="eui-flyout-body" className="timeline-flyout-body">
+            <StyledEuiFlyoutBody
+              data-test-subj={`${TimelineTabs.pinned}-tab-flyout-body`}
+              className="timeline-flyout-body"
+            >
               <StatefulBody
                 activePage={pageInfo.activePage}
                 browserFields={browserFields}
@@ -192,7 +195,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
               />
             </StyledEuiFlyoutBody>
             <StyledEuiFlyoutFooter
-              data-test-subj="eui-flyout-footer"
+              data-test-subj={`${TimelineTabs.pinned}-tab-flyout-footer`}
               className="timeline-flyout-footer"
             >
               <Footer

diff --git a/...s/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx b/...s/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
@@ -144,7 +144,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
     });
 
     test('it does render the timeline table when the source is loading with no events', () => {
@@ -161,7 +163,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
       expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
     });
 
@@ -172,7 +176,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
       expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
     });
 
@@ -183,7 +189,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
       expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
     });
 

diff --git a/...lugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/...lugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -273,7 +273,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
       <FullWidthFlexGroup>
         <ScrollableFlexItem grow={2}>
           <HideShowContainer $isVisible={!timelineFullScreen}>
-            <StyledEuiFlyoutHeader data-test-subj="eui-flyout-header" hasBorder={false}>
+            <StyledEuiFlyoutHeader
+              data-test-subj={`${activeTab}-tab-flyout-header`}
+              hasBorder={false}
+            >
               <EuiFlexGroup gutterSize="s" data-test-subj="timeline-date-picker-container">
                 <DatePicker grow={1}>
                   <SuperDatePicker id="timeline" timelineId={timelineId} />
@@ -303,7 +306,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
           </HideShowContainer>
 
           <EventDetailsWidthProvider>
-            <StyledEuiFlyoutBody data-test-subj="eui-flyout-body" className="timeline-flyout-body">
+            <StyledEuiFlyoutBody
+              data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
+              className="timeline-flyout-body"
+            >
               <StatefulBody
                 activePage={pageInfo.activePage}
                 browserFields={browserFields}
@@ -320,7 +326,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
             </StyledEuiFlyoutBody>
 
             <StyledEuiFlyoutFooter
-              data-test-subj="eui-flyout-footer"
+              data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
               className="timeline-flyout-footer"
             >
               {!isBlankTimeline && (