DO IT

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/alert_list_pagination.test.ts

@@ -80,20 +80,6 @@ describe('alert list pagination', () => {
           }
         `);
       });
-
-      // TODO, move this test to react land, since thats where this logic lives now. is that good?
-      xdescribe('and then a new page size is passed', () => {
-        beforeEach(() => {
-          historyPush({ ...queryParams(), page_size: '1' });
-        });
-        it('should modify the url correctly and reset index to `0`', () => {
-          expect(queryParams()).toMatchInlineSnapshot(`
-            Object {
-              "page_size": "1",
-            }
-          `);
-        });
-      });
     });
   });
 });

x-pack/plugins/endpoint/public/applications/endpoint/store/alerts/mock_alert_result_list.ts

@@ -6,36 +6,54 @@
 
 import { AlertResultList } from '../../../../../common/types';
 
-export const mockAlertResultList: () => AlertResultList = () => {
-  const mock: AlertResultList = {
-    alerts: [
-      {
-        '@timestamp': new Date(1542341895000).toString(),
-        agent: {
-          id: 'ced9c68e-b94a-4d66-bb4c-6106514f0a2f',
-          version: '3.0.0',
-        },
-        event: {
-          action: 'open',
-        },
-        file_classification: {
-          malware_classification: {
-            score: 3,
-          },
+export const mockAlertResultList: (options?: {
+  total?: number;
+  request_page_size?: number;
+  request_page_index?: number;
+}) => AlertResultList = (options = {}) => {
+  const {
+    total = 1,
+    request_page_size: requestPageSize = 10,
+    request_page_index: requestPageIndex = 0,
+  } = options;
+
+  // Skip any that are before the page we're on
+  const numberToSkip = requestPageSize * requestPageIndex;
+
+  // total - numberToSkip is the count of non-skipped ones, but return no more than a pageSize, and no less than 0
+  const actualCountToReturn = Math.max(Math.min(total - numberToSkip, requestPageSize), 0);
+
+  const alerts = [];
+  for (let index = 0; index < actualCountToReturn; index++) {
+    alerts.push({
+      '@timestamp': new Date(1542341895000).toString(),
+      agent: {
+        id: 'ced9c68e-b94a-4d66-bb4c-6106514f0a2f',
+        version: '3.0.0',
+      },
+      event: {
+        action: 'open',
+      },
+      file_classification: {
+        malware_classification: {
+          score: 3,
         },
-        host: {
-          hostname: 'HD-c15-bc09190a',
-          ip: '10.179.244.14',
-          os: {
-            name: 'Windows',
-          },
+      },
+      host: {
+        hostname: 'HD-c15-bc09190a',
+        ip: '10.179.244.14',
+        os: {
+          name: 'Windows',
         },
-        thread: {},
       },
-    ],
-    total: 1,
-    request_page_size: 10,
-    request_page_index: 0,
+      thread: {},
+    });
+  }
+  const mock: AlertResultList = {
+    alerts,
+    total,
+    request_page_size: requestPageSize,
+    request_page_index: requestPageIndex,
     result_from_index: 0,
   };
   return mock;

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

@@ -11,7 +11,7 @@ import { I18nProvider } from '@kbn/i18n/react';
 import { AlertIndex } from './index';
 import { appStoreFactory } from '../../store';
 import { coreMock } from 'src/core/public/mocks';
-import { fireEvent, waitForElement } from '@testing-library/react';
+import { fireEvent, waitForElement, act } from '@testing-library/react';
 import { RouteCapture } from '../route_capture';
 import { createMemoryHistory, MemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
@@ -68,7 +68,10 @@ describe('when on the alerting page', () => {
     };
     queryByTestSubjId = async (renderResult, testSubjId) => {
       return await waitForElement(
-        () => renderResult.container.querySelector(`[data-test-subj="${testSubjId}"]`),
+        /**
+         * Use document.body instead of container because EUI renders things like popover out of the DOM heirarchy.
+         */
+        () => document.body.querySelector(`[data-test-subj="${testSubjId}"]`),
         {
           container: renderResult.container,
         }
@@ -102,7 +105,7 @@ describe('when on the alerting page', () => {
 
         /**
          * There should be a 'row' which is the header, and
-         * another 'row' which is the alert summary.
+         * row which is the alert item.
          */
         expect(rows).toHaveLength(2);
       });
@@ -150,4 +153,37 @@ describe('when on the alerting page', () => {
       });
     });
   });
+  describe('when the url has page_size=1 and a page_index=1', () => {
+    beforeEach(() => {
+      reactTestingLibrary.act(() => {
+        history.push({
+          ...history.location,
+          search: '?page_size=1&page_index=1',
+        });
+      });
+    });
+    describe('when the user changes page size to 10', () => {
+      beforeEach(async () => {
+        const renderResult = render();
+        const paginationButton = await queryByTestSubjId(
+          renderResult,
+          'tablePaginationPopoverButton'
+        );
+        if (paginationButton) {
+          act(() => {
+            fireEvent.click(paginationButton);
+          });
+        }
+        const show10RowsButton = await queryByTestSubjId(renderResult, 'tablePagination-10-rows');
+        if (show10RowsButton) {
+          act(() => {
+            fireEvent.click(show10RowsButton);
+          });
+        }
+      });
+      it('should have a page_index of 0', () => {
+        expect(history.location.search).toBe('?page_size=10');
+      });
+    });
+  });
 });