[CCR & Rollup] Update client integration tests (#33857)

x-pack/plugins/cross_cluster_replication/__jest__/client_integration/auto_follow_pattern_list.test.js

@@ -6,7 +6,7 @@
 
 import sinon from 'sinon';
 
-import { initTestBed, mockAllHttpRequests, nextTick, getRandomString, findTestSubject } from './test_helpers';
+import { initTestBed, registerHttpRequestMockHelpers, nextTick, getRandomString, findTestSubject } from './test_helpers';
 import { AutoFollowPatternList } from '../../public/app/sections/home/auto_follow_pattern_list';
 import { getAutoFollowPatternClientMock } from '../../fixtures/auto_follow_pattern';
 
@@ -29,12 +29,25 @@ describe('<AutoFollowPatternList />', () => {
   let getUserActions;
   let tableCellsValues;
   let rows;
-  let updateHttpMockResponse;
+  let setLoadAutoFollowPatternsResponse;
+  let setDeleteAutoFollowPatternResponse;
+  let setAutoFollowStatsResponse;
 
   beforeEach(() => {
     server = sinon.fakeServer.create();
     server.respondImmediately = true;
-    (updateHttpMockResponse = mockAllHttpRequests(server));
+
+    // Register helpers to mock Http Requests
+    ({
+      setLoadAutoFollowPatternsResponse,
+      setDeleteAutoFollowPatternResponse,
+      setAutoFollowStatsResponse
+    } = registerHttpRequestMockHelpers(server));
+
+    // Set "default" mock responses by not providing any arguments
+    setLoadAutoFollowPatternsResponse();
+    setDeleteAutoFollowPatternResponse();
+    setAutoFollowStatsResponse();
   });
 
   describe('on component mount', () => {
@@ -88,7 +101,7 @@ describe('<AutoFollowPatternList />', () => {
     let clickAutoFollowPatternAt;
 
     beforeEach(async () => {
-      updateHttpMockResponse('loadAutoFollowPatterns', { patterns: autoFollowPatterns });
+      setLoadAutoFollowPatternsResponse({ patterns: autoFollowPatterns });
 
       // Mount the component
       ({
@@ -179,7 +192,7 @@ describe('<AutoFollowPatternList />', () => {
         expect(rows.length).toBe(2);
 
         // We wil delete the *first* auto-follow pattern in the table
-        updateHttpMockResponse('deleteAutoFollowPattern', { itemsDeleted: [autoFollowPattern1.name] });
+        setDeleteAutoFollowPatternResponse({ itemsDeleted: [autoFollowPattern1.name] });
 
         selectAutoFollowPatternAt(0);
         clickBulkDeleteButton();
@@ -301,7 +314,7 @@ describe('<AutoFollowPatternList />', () => {
           leaderIndex: `${autoFollowPattern2.name}:my-leader-test`,
           autoFollowException: { type: 'exception', reason: message }
         }];
-        updateHttpMockResponse('autoFollowStats', { recentAutoFollowErrors });
+        setAutoFollowStatsResponse({ recentAutoFollowErrors });
 
         clickAutoFollowPatternAt(0);
         expect(exists('ccrAutoFollowPatternDetailErrors')).toBe(false);

x-pack/plugins/cross_cluster_replication/__jest__/client_integration/follower_indices_list.test.js

@@ -6,7 +6,7 @@
 
 import sinon from 'sinon';
 
-import { initTestBed, mockAllHttpRequests, nextTick, getRandomString } from './test_helpers';
+import { initTestBed, registerHttpRequestMockHelpers, nextTick, getRandomString } from './test_helpers';
 import { FollowerIndicesList } from '../../public/app/sections/home/follower_indices_list';
 import { getFollowerIndexMock } from '../../fixtures/follower_index';
 
@@ -28,12 +28,17 @@ describe('<FollowerIndicesList />', () => {
   let getMetadataFromEuiTable;
   let getUserActions;
   let tableCellsValues;
-  let updateHttpMockResponse;
+  let setLoadFollowerIndicesResponse;
 
   beforeEach(() => {
     server = sinon.fakeServer.create();
     server.respondImmediately = true;
-    (updateHttpMockResponse = mockAllHttpRequests(server));
+
+    // Register helpers to mock Http Requests
+    ({ setLoadFollowerIndicesResponse } = registerHttpRequestMockHelpers(server));
+
+    // Set "default" mock responses by not providing any arguments
+    setLoadFollowerIndicesResponse();
   });
 
   describe('on component mount', () => {
@@ -79,7 +84,7 @@ describe('<FollowerIndicesList />', () => {
     let clickFollowerIndexAt;
 
     beforeEach(async () => {
-      updateHttpMockResponse('loadFollowerIndices', { indices: followerIndices });
+      setLoadFollowerIndicesResponse({ indices: followerIndices });
 
       // Mount the component
       ({
@@ -289,19 +294,19 @@ describe('<FollowerIndicesList />', () => {
 
       test('should set the correct follower index settings values', () => {
         const mapSettingsToFollowerIndexProp = {
-          'Status': 'status',
-          'RemoteCluster': 'remoteCluster',
-          'LeaderIndex': 'leaderIndex',
-          'MaxReadReqOpCount': 'maxReadRequestOperationCount',
-          'MaxOutstandingReadReq': 'maxOutstandingReadRequests',
-          'MaxReadReqSize': 'maxReadRequestSize',
-          'MaxWriteReqOpCount': 'maxWriteRequestOperationCount',
-          'MaxWriteReqSize': 'maxWriteRequestSize',
-          'MaxOutstandingWriteReq': 'maxOutstandingWriteRequests',
-          'MaxWriteBufferCount': 'maxWriteBufferCount',
-          'MaxWriteBufferSize': 'maxWriteBufferSize',
-          'MaxRetryDelay': 'maxRetryDelay',
-          'ReadPollTimeout': 'readPollTimeout'
+          Status: 'status',
+          RemoteCluster: 'remoteCluster',
+          LeaderIndex: 'leaderIndex',
+          MaxReadReqOpCount: 'maxReadRequestOperationCount',
+          MaxOutstandingReadReq: 'maxOutstandingReadRequests',
+          MaxReadReqSize: 'maxReadRequestSize',
+          MaxWriteReqOpCount: 'maxWriteRequestOperationCount',
+          MaxWriteReqSize: 'maxWriteRequestSize',
+          MaxOutstandingWriteReq: 'maxOutstandingWriteRequests',
+          MaxWriteBufferCount: 'maxWriteBufferCount',
+          MaxWriteBufferSize: 'maxWriteBufferSize',
+          MaxRetryDelay: 'maxRetryDelay',
+          ReadPollTimeout: 'readPollTimeout'
         };
 
         clickFollowerIndexAt(0);

x-pack/plugins/cross_cluster_replication/__jest__/client_integration/home.test.js

@@ -6,7 +6,7 @@
 
 import sinon from 'sinon';
 
-import { initTestBed, mockAllHttpRequests, nextTick } from './test_helpers';
+import { initTestBed, registerHttpRequestMockHelpers, nextTick } from './test_helpers';
 import { CrossClusterReplicationHome } from '../../public/app/sections/home/home';
 import { BASE_PATH } from '../../common/constants';
 import routing from '../../public/app/services/routing';
@@ -38,7 +38,12 @@ describe('<CrossClusterReplicationHome />', () => {
   beforeEach(() => {
     server = sinon.fakeServer.create();
     server.respondImmediately = true;
-    mockAllHttpRequests(server);
+
+    // Register helpers to mock Http Requests
+    const { setLoadFollowerIndicesResponse } = registerHttpRequestMockHelpers(server);
+
+    // Set "default" mock responses by not providing any arguments
+    setLoadFollowerIndicesResponse();
   });
 
   describe('on component mount', () => {

x-pack/plugins/cross_cluster_replication/__jest__/client_integration/test_helpers.js

@@ -137,7 +137,7 @@ export const initTestBed = (component, props = {}, options) => {
   };
 };
 
-export const mockAllHttpRequests = server => {
+export const registerHttpRequestMockHelpers = server => {
   const mockResponse = (defaultResponse, response) => ([
     200,
     { 'Content-Type': 'application/json' },
@@ -185,28 +185,10 @@ export const mockAllHttpRequests = server => {
     );
   };
 
-  /**
-   * Set all http request to their default response
-   */
-  setLoadFollowerIndicesResponse();
-  setLoadAutoFollowPatternsResponse();
-  setAutoFollowStatsResponse();
-
-  /**
-   * Return a method to override any of the http reques
-   */
-  return (request, response) => {
-    const mapRequestToHelper = {
-      'loadFollowerIndices': setLoadFollowerIndicesResponse,
-      'loadAutoFollowPatterns': setLoadAutoFollowPatternsResponse,
-      'deleteAutoFollowPattern': setDeleteAutoFollowPatternResponse,
-      'autoFollowStats': setAutoFollowStatsResponse,
-    };
-
-    if (!mapRequestToHelper[request]) {
-      throw new Error(`Did not find a helper to set http response for request ${request}`);
-    }
-
-    return mapRequestToHelper[request](response);
+  return {
+    setLoadFollowerIndicesResponse,
+    setLoadAutoFollowPatternsResponse,
+    setDeleteAutoFollowPatternResponse,
+    setAutoFollowStatsResponse,
   };
 };

x-pack/plugins/rollup/__jest__/client_integration/job_list.test.js

@@ -0,0 +1,143 @@
+/*
+ * 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 sinon from 'sinon';
+import axios from 'axios';
+
+import { registerTestBed, nextTick } from '../../../../test_utils';
+import { createRollupJobsStore } from '../../public/crud_app/store';
+import { setHttp, registerRouter, getRouter } from '../../public/crud_app/services';
+import { JobList } from '../../public/crud_app/sections/job_list';
+
+// axios has a $http like interface so using it to simulate $http
+setHttp(axios.create());
+
+jest.mock('ui/chrome', () => ({
+  addBasePath: (path) => path ? path : 'api/rollup',
+  breadcrumbs: { set: () => {} },
+}));
+
+jest.mock('../../public/crud_app/services', () => {
+  const services = require.requireActual('../../public/crud_app/services');
+  return {
+    ...services,
+    getRouterLinkProps: (link) => ({ href: link }),
+  };
+});
+
+const loadJobsMock = {
+  jobs: [{
+    config: {
+      id: 'my-rollup-job',
+      index_pattern: 'kibana_sample*',
+      rollup_index: 'rollup-index',
+      cron: '0 0 0 ? * 7',
+      groups: {
+        date_histogram: {
+          interval: '24h',
+          field: 'timestamp',
+          delay: '1d',
+          time_zone: 'UTC'
+        }
+      },
+      metrics: [],
+      timeout: '20s',
+      page_size: 1000
+    },
+    status: {
+      job_state: 'stopped',
+      upgraded_doc_id: true
+    },
+    stats: {
+      pages_processed: 0,
+      documents_processed: 0,
+      rollups_indexed: 0,
+      trigger_count: 0,
+      index_time_in_ms: 0,
+      index_total: 0,
+      index_failures: 0,
+      search_time_in_ms: 0,
+      search_total: 0,
+      search_failures: 0
+    }
+  }]
+};
+
+describe('<JobList />', () => {
+  describe('detail panel', () => {
+    let server;
+    let component;
+    let getMetadataFromEuiTable;
+    let exists;
+
+    const testBedOptions = {
+      memoryRouter: {
+        onRouter: (router) =>  {
+          // register our react memory router
+          registerRouter(router);
+        }
+      }
+    };
+
+    beforeEach(async () => {
+      server = sinon.fakeServer.create();
+      server.respondImmediately = true;
+
+      // Mock load job list
+      server.respondWith('GET', '/api/rollup/jobs', [
+        200,
+        { 'Content-Type': 'application/json' },
+        JSON.stringify(loadJobsMock),
+      ]);
+
+      // Mock all user actions tracking
+      server.respondWith('POST', /\/api\/user_action/, [200, { 'Content-Type': 'application/json' }, '']);
+
+      const initTestBed = registerTestBed(JobList, {}, createRollupJobsStore());
+      ({ component, exists, getMetadataFromEuiTable } = initTestBed(undefined, testBedOptions));
+
+      await nextTick(); // We need to wait next tick for the mock server response to comes in
+      component.update();
+    });
+
+    test('should open the detail panel when clicking on a job in the table', () => {
+      const { rows } = getMetadataFromEuiTable('rollupJobsListTable');
+      const button = rows[0].columns[1].reactWrapper.find('button');
+
+      expect(exists('rollupJobDetailFlyout')).toBe(false); // make sure it is not shown
+
+      button.simulate('click');
+
+      expect(exists('rollupJobDetailFlyout')).toBe(true);
+    });
+
+    test('should add the Job id to the route query params when opening the detail panel', () => {
+      const { rows } = getMetadataFromEuiTable('rollupJobsListTable');
+      const button = rows[0].columns[1].reactWrapper.find('button');
+
+      expect(getRouter().history.location.search).toEqual('');
+
+      button.simulate('click');
+
+      const {
+        jobs: [{
+          config: { id: jobId },
+        }],
+      } = loadJobsMock;
+      expect(getRouter().history.location.search).toEqual(`?job=${jobId}`);
+    });
+
+    test('should open the detail panel whenever a job id is added to the query params', () => {
+      expect(exists('rollupJobDetailFlyout')).toBe(false); // make sure it is not shown
+
+      getRouter().history.replace({ search: `?job=bar` });
+
+      component.update();
+
+      expect(exists('rollupJobDetailFlyout')).toBe(true);
+    });
+  });
+});

x-pack/plugins/rollup/public/crud_app/sections/job_list/job_table/job_table.js

@@ -378,7 +378,7 @@ export class JobTableUi extends Component {
         <EuiSpacer size="m" />
 
         {jobs.length > 0 ? (
-          <EuiTable>
+          <EuiTable data-test-subj="rollupJobsListTable">
             <EuiTableHeader>
               <EuiTableHeaderCellCheckbox>
                 <EuiCheckbox

x-pack/plugins/rollup/public/crud_app/store/index.js

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { rollupJobsStore } from './store';
+export { rollupJobsStore, createRollupJobsStore } from './store';

x-pack/plugins/rollup/public/crud_app/store/store.js

@@ -13,7 +13,7 @@ import {
   detailPanel,
 } from './middleware';
 
-function createRollupJobsStore(initialState = {}) {
+export function createRollupJobsStore(initialState = {}) {
   const enhancers = [ applyMiddleware(thunk, detailPanel) ];
 
   window.__REDUX_DEVTOOLS_EXTENSION__ && enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());