[7.x] [IM] Index Templates UI list view (#39922)

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts

@@ -0,0 +1,100 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import {
+  registerTestBed,
+  TestBed,
+  TestBedConfig,
+  findTestSubject,
+} from '../../../../../../test_utils';
+import { IndexManagementHome } from '../../../public/sections/home';
+import { BASE_PATH } from '../../../common/constants';
+import { indexManagementStore } from '../../../public/store';
+
+const testBedConfig: TestBedConfig = {
+  store: indexManagementStore,
+  memoryRouter: {
+    initialEntries: [`${BASE_PATH}indices`],
+    componentRoutePath: `${BASE_PATH}:section(indices|templates)`,
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed(IndexManagementHome, testBedConfig);
+
+export interface IdxMgmtHomeTestBed extends TestBed<IdxMgmtTestSubjects> {
+  actions: {
+    selectTab: (tab: 'indices' | 'index templates') => void;
+    clickReloadButton: () => void;
+    clickTemplateActionAt: (index: number, action: 'delete') => void;
+  };
+}
+
+export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
+  const testBed = await initTestBed();
+
+  /**
+   * User Actions
+   */
+
+  const selectTab = (tab: 'indices' | 'index templates') => {
+    const tabs = ['indices', 'index templates'];
+
+    testBed
+      .find('tab')
+      .at(tabs.indexOf(tab))
+      .simulate('click');
+  };
+
+  const clickReloadButton = () => {
+    const { find } = testBed;
+    find('reloadButton').simulate('click');
+  };
+
+  const clickTemplateActionAt = async (index: number, action: 'delete') => {
+    const { component, table } = testBed;
+    const { rows } = table.getMetaData('templatesTable');
+    const currentRow = rows[index];
+    const lastColumn = currentRow.columns[currentRow.columns.length - 1].reactWrapper;
+    const button = findTestSubject(lastColumn, `${action}TemplateButton`);
+
+    // @ts-ignore (remove when react 16.9.0 is released)
+    await act(async () => {
+      button.simulate('click');
+      component.update();
+    });
+  };
+
+  return {
+    ...testBed,
+    actions: {
+      selectTab,
+      clickReloadButton,
+      clickTemplateActionAt,
+    },
+  };
+};
+
+type IdxMgmtTestSubjects = TestSubjects;
+
+export type TestSubjects =
+  | 'appTitle'
+  | 'cell'
+  | 'deleteSystemTemplateCallOut'
+  | 'deleteTemplateButton'
+  | 'deleteTemplatesButton'
+  | 'deleteTemplatesConfirmation'
+  | 'documentationLink'
+  | 'emptyPrompt'
+  | 'indicesList'
+  | 'reloadButton'
+  | 'row'
+  | 'sectionLoading'
+  | 'systemTemplatesSwitch'
+  | 'tab'
+  | 'templatesList'
+  | 'templatesTable';

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts

@@ -0,0 +1,61 @@
+/*
+ * 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, { SinonFakeServer } from 'sinon';
+
+const API_PATH = '/api/index_management';
+
+type HttpResponse = Record<string, any> | any[];
+
+// Register helpers to mock HTTP Requests
+const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
+  const setLoadTemplatesResponse = (response: HttpResponse = []) => {
+    server.respondWith('GET', `${API_PATH}/templates`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setLoadIndicesResponse = (response: HttpResponse = []) => {
+    server.respondWith('GET', `${API_PATH}/indices`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setDeleteTemplateResponse = (response: HttpResponse = []) => {
+    server.respondWith('DELETE', `${API_PATH}/templates`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  return {
+    setLoadTemplatesResponse,
+    setLoadIndicesResponse,
+    setDeleteTemplateResponse,
+  };
+};
+
+export const init = () => {
+  const server = sinon.fakeServer.create();
+  server.respondImmediately = true;
+
+  // Define default response for unhandled requests.
+  // We make requests to APIs which don't impact the component under test, e.g. UI metric telemetry,
+  // and we can mock them all with a 200 instead of mocking each one individually.
+  server.respondWith([200, {}, 'DefaultResponse']);
+
+  const httpRequestsMockHelpers = registerHttpRequestMockHelpers(server);
+
+  return {
+    server,
+    httpRequestsMockHelpers,
+  };
+};

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/index.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { setup as homeSetup } from './home.helpers';
+
+export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../../test_utils';
+
+export { setupEnvironment } from './setup_environment';
+
+export const pageHelpers = {
+  home: { setup: homeSetup },
+};

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/setup_environment.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 axios from 'axios';
+import axiosXhrAdapter from 'axios/lib/adapters/xhr';
+import { init as initHttpRequests } from './http_requests';
+import { setHttpClient } from '../../../public/services/api';
+
+const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
+
+export const setupEnvironment = () => {
+  const { server, httpRequestsMockHelpers } = initHttpRequests();
+
+  // @ts-ignore
+  setHttpClient(mockHttpClient);
+
+  return {
+    server,
+    httpRequestsMockHelpers,
+  };
+};