From 6c44a1e04b9173699993e0a55702ccfa794efc5d Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Mon, 28 Mar 2022 11:12:01 +0200 Subject: [PATCH 1/3] Remove axios dependency --- .../add/remote_clusters_add.helpers.tsx | 24 +++---- .../add/remote_clusters_add.test.ts | 20 ++---- .../edit/remote_clusters_edit.helpers.tsx | 25 +++---- .../edit/remote_clusters_edit.test.tsx | 15 ++-- .../helpers/http_requests.ts | 70 +++++++++++++------ .../client_integration/helpers/index.ts | 2 +- ...p_environment.ts => setup_environment.tsx} | 36 +++++----- .../list/remote_clusters_list.helpers.js | 12 +++- .../list/remote_clusters_list.test.js | 17 +++-- 9 files changed, 113 insertions(+), 108 deletions(-) rename x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/{setup_environment.ts => setup_environment.tsx} (68%) diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx index a4debdc6ae964..2e74cc7299bc1 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx @@ -5,22 +5,13 @@ * 2.0. */ -import React from 'react'; import { registerTestBed } from '@kbn/test-jest-helpers'; +import { HttpSetup } from 'src/core/public'; import { RemoteClusterAdd } from '../../../public/application/sections'; import { createRemoteClustersStore } from '../../../public/application/store'; import { AppRouter, registerRouter } from '../../../public/application/services'; -import { createRemoteClustersActions } from '../helpers'; -import { AppContextProvider } from '../../../public/application/app_context'; - -const ComponentWithContext = ({ isCloudEnabled }: { isCloudEnabled: boolean }) => { - return ( - - - - ); -}; +import { createRemoteClustersActions, WithAppDependencies } from '../helpers'; const testBedConfig = ({ isCloudEnabled }: { isCloudEnabled: boolean }) => { return { @@ -32,11 +23,12 @@ const testBedConfig = ({ isCloudEnabled }: { isCloudEnabled: boolean }) => { }; }; -const initTestBed = (isCloudEnabled: boolean) => - registerTestBed(ComponentWithContext, testBedConfig({ isCloudEnabled }))(); - -export const setup = async (isCloudEnabled = false) => { - const testBed = await initTestBed(isCloudEnabled); +export const setup = async (httpSetup: HttpSetup, overrides?: Record) => { + const initTestBed = registerTestBed( + WithAppDependencies(RemoteClusterAdd, httpSetup, overrides), + testBedConfig({ isCloudEnabled: !!overrides?.isCloudEnabled }) + ); + const testBed = await initTestBed(); return { ...testBed, diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.ts b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.ts index 28332f71ca6ac..75a1656b0daed 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.ts +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { SinonFakeServer } from 'sinon'; import { TestBed } from '@kbn/test-jest-helpers'; import { act } from 'react-dom/test-utils'; @@ -17,20 +16,13 @@ const notInArray = (array: string[]) => (value: string) => array.indexOf(value) let component: TestBed['component']; let actions: RemoteClustersActions; -let server: SinonFakeServer; describe('Create Remote cluster', () => { - beforeAll(() => { - ({ server } = setupEnvironment()); - }); - - afterAll(() => { - server.restore(); - }); + const { httpSetup } = setupEnvironment(); beforeEach(async () => { await act(async () => { - ({ actions, component } = await setup()); + ({ actions, component } = await setup(httpSetup)); }); component.update(); }); @@ -95,7 +87,7 @@ describe('Create Remote cluster', () => { describe('on cloud', () => { beforeEach(async () => { await act(async () => { - ({ actions, component } = await setup(true)); + ({ actions, component } = await setup(httpSetup, { isCloudEnabled: true })); }); component.update(); @@ -153,7 +145,7 @@ describe('Create Remote cluster', () => { describe('proxy address', () => { beforeEach(async () => { await act(async () => { - ({ actions, component } = await setup()); + ({ actions, component } = await setup(httpSetup)); }); component.update(); @@ -190,7 +182,7 @@ describe('Create Remote cluster', () => { describe('on prem', () => { beforeEach(async () => { await act(async () => { - ({ actions, component } = await setup()); + ({ actions, component } = await setup(httpSetup)); }); component.update(); @@ -235,7 +227,7 @@ describe('Create Remote cluster', () => { describe('on cloud', () => { beforeEach(async () => { await act(async () => { - ({ actions, component } = await setup(true)); + ({ actions, component } = await setup(httpSetup, { isCloudEnabled: true })); }); component.update(); diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.helpers.tsx b/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.helpers.tsx index 86f75c12424e7..87561ccd79c4d 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.helpers.tsx +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.helpers.tsx @@ -6,13 +6,12 @@ */ import { registerTestBed, TestBedConfig } from '@kbn/test-jest-helpers'; +import { HttpSetup } from 'src/core/public'; -import React from 'react'; import { RemoteClusterEdit } from '../../../public/application/sections'; import { createRemoteClustersStore } from '../../../public/application/store'; import { AppRouter, registerRouter } from '../../../public/application/services'; -import { createRemoteClustersActions } from '../helpers'; -import { AppContextProvider } from '../../../public/application/app_context'; +import { createRemoteClustersActions, WithAppDependencies } from '../helpers'; export const REMOTE_CLUSTER_EDIT_NAME = 'new-york'; @@ -22,15 +21,6 @@ export const REMOTE_CLUSTER_EDIT = { skipUnavailable: true, }; -const ComponentWithContext = (props: { isCloudEnabled: boolean }) => { - const { isCloudEnabled, ...rest } = props; - return ( - - - - ); -}; - const testBedConfig: TestBedConfig = { store: createRemoteClustersStore, memoryRouter: { @@ -43,11 +33,12 @@ const testBedConfig: TestBedConfig = { }, }; -const initTestBed = (isCloudEnabled: boolean) => - registerTestBed(ComponentWithContext, testBedConfig)({ isCloudEnabled }); - -export const setup = async (isCloudEnabled = false) => { - const testBed = await initTestBed(isCloudEnabled); +export const setup = async (httpSetup: HttpSetup, overrides?: Record) => { + const initTestBed = registerTestBed( + WithAppDependencies(RemoteClusterEdit, httpSetup, overrides), + testBedConfig + ); + const testBed = await initTestBed(); return { ...testBed, diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.test.tsx b/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.test.tsx index 47aac3f924b96..89bd3a5d9f0e9 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.test.tsx +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.test.tsx @@ -20,18 +20,15 @@ import { Cluster } from '../../../common/lib'; let component: TestBed['component']; let actions: RemoteClustersActions; -const { server, httpRequestsMockHelpers } = setupEnvironment(); describe('Edit Remote cluster', () => { - afterAll(() => { - server.restore(); - }); + const { httpSetup, httpRequestsMockHelpers } = setupEnvironment(); httpRequestsMockHelpers.setLoadRemoteClustersResponse([REMOTE_CLUSTER_EDIT]); beforeEach(async () => { await act(async () => { - ({ component, actions } = await setup()); + ({ component, actions } = await setup(httpSetup)); }); component.update(); }); @@ -54,7 +51,7 @@ describe('Edit Remote cluster', () => { let addRemoteClusterTestBed: TestBed; await act(async () => { - addRemoteClusterTestBed = await setupRemoteClustersAdd(); + addRemoteClusterTestBed = await setupRemoteClustersAdd(httpSetup); }); addRemoteClusterTestBed!.component.update(); @@ -90,7 +87,7 @@ describe('Edit Remote cluster', () => { httpRequestsMockHelpers.setLoadRemoteClustersResponse([cluster]); await act(async () => { - ({ component, actions } = await setup(true)); + ({ component, actions } = await setup(httpSetup, { isCloudEnabled: true })); }); component.update(); @@ -108,7 +105,7 @@ describe('Edit Remote cluster', () => { httpRequestsMockHelpers.setLoadRemoteClustersResponse([cluster]); await act(async () => { - ({ component, actions } = await setup(true)); + ({ component, actions } = await setup(httpSetup, { isCloudEnabled: true })); }); component.update(); @@ -128,7 +125,7 @@ describe('Edit Remote cluster', () => { httpRequestsMockHelpers.setLoadRemoteClustersResponse([cluster]); await act(async () => { - ({ component, actions } = await setup(true)); + ({ component, actions } = await setup(httpSetup, { isCloudEnabled: true })); }); component.update(); diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/http_requests.ts b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/http_requests.ts index 3ebe3ab5738d6..92b5e4ccbb1ce 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/http_requests.ts +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/http_requests.ts @@ -5,26 +5,56 @@ * 2.0. */ -import sinon, { SinonFakeServer } from 'sinon'; +import { httpServiceMock } from '../../../../../../src/core/public/mocks'; +import { API_BASE_PATH } from '../../../common/constants'; import { Cluster } from '../../../common/lib'; +type HttpMethod = 'GET' | 'DELETE'; + +export interface ResponseError { + statusCode: number; + message: string | Error; +} + // Register helpers to mock HTTP Requests -const registerHttpRequestMockHelpers = (server: SinonFakeServer) => { - const mockResponse = (response: Cluster[] | { itemsDeleted: string[]; errors: string[] }) => [ - 200, - { 'Content-Type': 'application/json' }, - JSON.stringify(response), - ]; - - const setLoadRemoteClustersResponse = (response: Cluster[] = []) => { - server.respondWith('GET', '/api/remote_clusters', mockResponse(response)); +const registerHttpRequestMockHelpers = ( + httpSetup: ReturnType +) => { + const mockResponses = new Map>>( + ['GET', 'DELETE'].map( + (method) => [method, new Map()] as [HttpMethod, Map>] + ) + ); + + const mockMethodImplementation = (method: HttpMethod, path: string) => + mockResponses.get(method)?.get(path) ?? Promise.resolve({}); + + httpSetup.get.mockImplementation((path) => + mockMethodImplementation('GET', path as unknown as string) + ); + httpSetup.delete.mockImplementation((path) => + mockMethodImplementation('DELETE', path as unknown as string) + ); + + const mockResponse = (method: HttpMethod, path: string, response?: unknown, error?: unknown) => { + const defuse = (promise: Promise) => { + promise.catch(() => {}); + return promise; + }; + + return mockResponses + .get(method)! + .set(path, error ? defuse(Promise.reject({ body: error })) : Promise.resolve(response)); }; + const setLoadRemoteClustersResponse = (response: Cluster[], error?: ResponseError) => + mockResponse('GET', API_BASE_PATH, response, error); + const setDeleteRemoteClusterResponse = ( - response: { itemsDeleted: string[]; errors: string[] } = { itemsDeleted: [], errors: [] } - ) => { - server.respondWith('DELETE', /api\/remote_clusters/, mockResponse(response)); - }; + clusterName: string, + response: { itemsDeleted: string[]; errors: string[] } = { itemsDeleted: [], errors: [] }, + error?: ResponseError + ) => mockResponse('DELETE', `${API_BASE_PATH}/${clusterName}`, response, error); return { setLoadRemoteClustersResponse, @@ -33,15 +63,11 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => { }; export const init = () => { - const server = sinon.fakeServer.create(); - server.respondImmediately = true; - - // We make requests to APIs which don't impact the UX, e.g. UI metric telemetry, - // and we can mock them all with a 200 instead of mocking each one individually. - server.respondWith([200, {}, '']); + const httpSetup = httpServiceMock.createSetupContract(); + const httpRequestsMockHelpers = registerHttpRequestMockHelpers(httpSetup); return { - server, - httpRequestsMockHelpers: registerHttpRequestMockHelpers(server), + httpSetup, + httpRequestsMockHelpers, }; }; diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/index.ts index b2a7e2d90dc64..caa40969627ac 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/index.ts +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/index.ts @@ -6,6 +6,6 @@ */ export { nextTick, getRandomString, findTestSubject } from '@kbn/test-jest-helpers'; -export { setupEnvironment } from './setup_environment'; +export { setupEnvironment, WithAppDependencies } from './setup_environment'; export type { RemoteClustersActions } from './remote_clusters_actions'; export { createRemoteClustersActions } from './remote_clusters_actions'; diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.ts b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.tsx similarity index 68% rename from x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.ts rename to x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.tsx index 084552c5e6abe..a150e2a92fcc9 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.ts +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.tsx @@ -5,15 +5,15 @@ * 2.0. */ -import axios from 'axios'; -import axiosXhrAdapter from 'axios/lib/adapters/xhr'; - +import React from 'react'; +import { HttpSetup } from 'src/core/public'; import { notificationServiceMock, fatalErrorsServiceMock, docLinksServiceMock, } from '../../../../../../src/core/public/mocks'; +import { AppContextProvider } from '../../../public/application/app_context'; import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks'; import { init as initBreadcrumb } from '../../../public/application/services/breadcrumb'; @@ -23,12 +23,22 @@ import { init as initUiMetric } from '../../../public/application/services/ui_me import { init as initDocumentation } from '../../../public/application/services/documentation'; import { init as initHttpRequests } from './http_requests'; -export const setupEnvironment = () => { - // axios has a similar interface to HttpSetup, but we - // flatten out the response. - const mockHttpClient = axios.create({ adapter: axiosXhrAdapter }); - mockHttpClient.interceptors.response.use(({ data }) => data); +export const WithAppDependencies = + (Comp: any, httpSetup: HttpSetup, overrides: Record = {}) => + (props: Record) => { + const { isCloudEnabled, ...rest } = props; + initHttp(httpSetup); + + return ( + + + + ); + }; +export const setupEnvironment = () => { initBreadcrumb(() => {}); initDocumentation(docLinksServiceMock.createStartContract()); initUiMetric(usageCollectionPluginMock.createSetupContract()); @@ -36,14 +46,6 @@ export const setupEnvironment = () => { notificationServiceMock.createSetupContract().toasts, fatalErrorsServiceMock.createSetupContract() ); - // This expects HttpSetup but we're giving it AxiosInstance. - // @ts-ignore - initHttp(mockHttpClient); - - const { server, httpRequestsMockHelpers } = initHttpRequests(); - return { - server, - httpRequestsMockHelpers, - }; + return initHttpRequests(); }; diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.helpers.js b/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.helpers.js index 9aeef5d684f3f..f3f25afee3bd7 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.helpers.js +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.helpers.js @@ -9,6 +9,7 @@ import { act } from 'react-dom/test-utils'; import { registerTestBed, findTestSubject } from '@kbn/test-jest-helpers'; +import { WithAppDependencies } from '../helpers'; import { RemoteClusterList } from '../../../public/application/sections/remote_cluster_list'; import { createRemoteClustersStore } from '../../../public/application/store'; import { registerRouter } from '../../../public/application/services/routing'; @@ -20,10 +21,15 @@ const testBedConfig = { }, }; -const initTestBed = registerTestBed(RemoteClusterList, testBedConfig); +export const setup = async (httpSetup, overrides) => { + const initTestBed = registerTestBed( + // ESlint cannot figure out that the hoc should start with a capital leter. + // eslint-disable-next-line + WithAppDependencies(RemoteClusterList, httpSetup, overrides), + testBedConfig + ); + const testBed = await initTestBed(); -export const setup = (props) => { - const testBed = initTestBed(props); const EUI_TABLE = 'remoteClusterListTable'; // User actions diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js b/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js index a6987fa19d1ee..3d2bbc3bd67bc 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js @@ -31,7 +31,7 @@ jest.mock('@elastic/eui/lib/components/search_bar/search_box', () => { }); describe('', () => { - const { server, httpRequestsMockHelpers } = setupEnvironment(); + const { httpSetup, httpRequestsMockHelpers } = setupEnvironment(); beforeAll(() => { jest.useFakeTimers(); @@ -39,7 +39,6 @@ describe('', () => { afterAll(() => { jest.useRealTimers(); - server.restore(); }); httpRequestsMockHelpers.setLoadRemoteClustersResponse([]); @@ -47,8 +46,8 @@ describe('', () => { describe('on component mount', () => { let exists; - beforeEach(() => { - ({ exists } = setup()); + beforeEach(async () => { + ({ exists } = await setup(httpSetup)); }); test('should show a "loading remote clusters" indicator', () => { @@ -62,7 +61,7 @@ describe('', () => { beforeEach(async () => { await act(async () => { - ({ exists, component } = setup()); + ({ exists, component } = await setup(httpSetup)); }); component.update(); @@ -98,7 +97,7 @@ describe('', () => { httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters); await act(async () => { - ({ table, component, form } = setup()); + ({ table, component, form } = await setup(httpSetup)); }); component.update(); @@ -154,7 +153,7 @@ describe('', () => { httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters); await act(async () => { - ({ table, actions, component, form } = setup()); + ({ table, actions, component, form } = await setup(httpSetup)); }); component.update(); @@ -217,7 +216,7 @@ describe('', () => { httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters); await act(async () => { - ({ component, find, exists, table, actions } = setup()); + ({ component, find, exists, table, actions } = await setup(httpSetup)); }); component.update(); @@ -339,7 +338,7 @@ describe('', () => { describe('confirmation modal (delete remote cluster)', () => { test('should remove the remote cluster from the table after delete is successful', async () => { // Mock HTTP DELETE request - httpRequestsMockHelpers.setDeleteRemoteClusterResponse({ + httpRequestsMockHelpers.setDeleteRemoteClusterResponse(remoteCluster1.name, { itemsDeleted: [remoteCluster1.name], errors: [], }); From 8312e01eec255c61b33546988a75c058ac0fb382 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Mon, 28 Mar 2022 11:12:07 +0200 Subject: [PATCH 2/3] commit using @elastic.co From d13d3b5b28d7a64148cdfc9d9af81d2f7e86c207 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Wed, 30 Mar 2022 11:04:44 +0200 Subject: [PATCH 3/3] Address CR changes --- .../add/remote_clusters_add.helpers.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx index 2e74cc7299bc1..385815f3133db 100644 --- a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx +++ b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.tsx @@ -13,20 +13,17 @@ import { createRemoteClustersStore } from '../../../public/application/store'; import { AppRouter, registerRouter } from '../../../public/application/services'; import { createRemoteClustersActions, WithAppDependencies } from '../helpers'; -const testBedConfig = ({ isCloudEnabled }: { isCloudEnabled: boolean }) => { - return { - store: createRemoteClustersStore, - memoryRouter: { - onRouter: (router: AppRouter) => registerRouter(router), - }, - defaultProps: { isCloudEnabled }, - }; +const testBedConfig = { + store: createRemoteClustersStore, + memoryRouter: { + onRouter: (router: AppRouter) => registerRouter(router), + }, }; export const setup = async (httpSetup: HttpSetup, overrides?: Record) => { const initTestBed = registerTestBed( WithAppDependencies(RemoteClusterAdd, httpSetup, overrides), - testBedConfig({ isCloudEnabled: !!overrides?.isCloudEnabled }) + testBedConfig ); const testBed = await initTestBed();