From 67f2b7cad2df49dbfec4a9603f01fbd6e76f8cb9 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 7 Oct 2024 14:15:31 +0200
Subject: [PATCH] [Security Solution] Fix flaky unified component test #189791
 (#195093)

## Summary

Fixes #189791

Pagination test suite was timing out because huge number of records in
data grid was rendering in JSDOM which were creating performance issues.
This PR fixes that so that test does not times out.
---
 .../query_tab_unified_components.test.tsx     | 103 ++++++++++++++----
 1 file changed, 84 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx
index 3d7f37205ca94..2c8a5614598b5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/query_tab_unified_components.test.tsx
@@ -297,21 +297,27 @@ describe('query tab with unified timeline', () => {
     );
   });
 
-  // FLAKY: https://github.com/elastic/kibana/issues/189791
-  describe.skip('pagination', () => {
+  describe('pagination', () => {
     beforeEach(() => {
-      // should return all the records instead just 3
-      // as the case in the default mock
+      // pagination tests need more than 1 record so here
+      // we return 5 records instead of just 1.
       useTimelineEventsMock = jest.fn(() => [
         false,
         {
-          events: structuredClone(mockTimelineData),
+          events: structuredClone(mockTimelineData.slice(0, 5)),
           pageInfo: {
             activePage: 0,
-            totalPages: 10,
+            totalPages: 5,
           },
           refreshedAt: Date.now(),
-          totalCount: 70,
+          /*
+           * `totalCount` could be any number w.r.t this test
+           * and actually means total hits on elastic search
+           * and not the fecthed number of records.
+           *
+           * This helps in testing `sampleSize` and `loadMore`
+           */
+          totalCount: 50,
           loadPage: loadPageMock,
         },
       ]);
@@ -326,21 +332,48 @@ describe('query tab with unified timeline', () => {
     it(
       'should paginate correctly',
       async () => {
-        renderTestComponents();
+        const mockStateWithNoteInTimeline = {
+          ...mockGlobalState,
+          timeline: {
+            ...mockGlobalState.timeline,
+            timelineById: {
+              [TimelineId.test]: {
+                ...mockGlobalState.timeline.timelineById[TimelineId.test],
+                /* 1 record for each page */
+                itemsPerPage: 1,
+                itemsPerPageOptions: [1, 2, 3, 4, 5],
+                savedObjectId: 'timeline-1', // match timelineId in mocked notes data
+                pinnedEventIds: { '1': true },
+              },
+            },
+          },
+        };
 
-        await waitFor(() => {
-          expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
-            'Rows per page: 5'
-          );
-        });
+        render(
+          <TestProviders
+            store={createMockStore({
+              ...structuredClone(mockStateWithNoteInTimeline),
+            })}
+          >
+            <TestComponent />
+          </TestProviders>
+        );
+
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        expect(screen.getByTestId('pagination-button-previous')).toBeVisible();
+
+        expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+          'Rows per page: 1'
+        );
 
         expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
-        expect(screen.getByTestId('pagination-button-6')).toBeVisible();
+        expect(screen.getByTestId('pagination-button-4')).toBeVisible();
+        expect(screen.queryByTestId('pagination-button-5')).toBeNull();
 
-        fireEvent.click(screen.getByTestId('pagination-button-6'));
+        fireEvent.click(screen.getByTestId('pagination-button-4'));
 
         await waitFor(() => {
-          expect(screen.getByTestId('pagination-button-6')).toHaveAttribute('aria-current', 'true');
+          expect(screen.getByTestId('pagination-button-4')).toHaveAttribute('aria-current', 'true');
         });
       },
       SPECIAL_TEST_TIMEOUT
@@ -349,13 +382,45 @@ describe('query tab with unified timeline', () => {
     it(
       'should load more records according to sample size correctly',
       async () => {
-        renderTestComponents();
+        const mockStateWithNoteInTimeline = {
+          ...mockGlobalState,
+          timeline: {
+            ...mockGlobalState.timeline,
+            timelineById: {
+              [TimelineId.test]: {
+                ...mockGlobalState.timeline.timelineById[TimelineId.test],
+                itemsPerPage: 1,
+                /*
+                 * `sampleSize` is the max number of records that are fetched from elasticsearch
+                 * in one request. If hits > sampleSize, you can fetch more records ( <= sampleSize)
+                 */
+                sampleSize: 5,
+                itemsPerPageOptions: [1, 2, 3, 4, 5],
+                savedObjectId: 'timeline-1', // match timelineId in mocked notes data
+                pinnedEventIds: { '1': true },
+              },
+            },
+          },
+        };
+
+        render(
+          <TestProviders
+            store={createMockStore({
+              ...structuredClone(mockStateWithNoteInTimeline),
+            })}
+          >
+            <TestComponent />
+          </TestProviders>
+        );
+
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
         await waitFor(() => {
           expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
-          expect(screen.getByTestId('pagination-button-6')).toBeVisible();
+          expect(screen.getByTestId('pagination-button-4')).toBeVisible();
         });
         // Go to last page
-        fireEvent.click(screen.getByTestId('pagination-button-6'));
+        fireEvent.click(screen.getByTestId('pagination-button-4'));
         await waitFor(() => {
           expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
         });