diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/constants.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/constants.ts
new file mode 100644
index 0000000000000..3f6e5d7d4dab2
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/constants.ts
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+export const TEMPLATE_NAME = 'my_template';
+
+export const INDEX_PATTERNS = ['my_index_pattern'];
+
+export const SETTINGS = {
+  number_of_shards: 1,
+  index: {
+    lifecycle: {
+      name: 'my_policy',
+    },
+  },
+};
+
+export const ALIASES = {
+  alias: {
+    filter: {
+      term: { user: 'my_user' },
+    },
+  },
+};
+
+export const MAPPINGS = {
+  _source: {},
+  _meta: {},
+  properties: {},
+};
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
new file mode 100644
index 0000000000000..7e3e1fba9c44a
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
@@ -0,0 +1,173 @@
+/*
+ * 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 { ReactWrapper } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import {
+  registerTestBed,
+  TestBed,
+  TestBedConfig,
+  findTestSubject,
+  nextTick,
+} from '../../../../../test_utils';
+import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { BASE_PATH } from '../../../common/constants';
+import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { Template } from '../../../common/types';
+import { WithAppDependencies, services } from './setup_environment';
+
+const testBedConfig: TestBedConfig = {
+  store: () => indexManagementStore(services as any),
+  memoryRouter: {
+    initialEntries: [`${BASE_PATH}indices`],
+    componentRoutePath: `${BASE_PATH}:section(indices|templates)`,
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
+
+export interface IdxMgmtHomeTestBed extends TestBed<IdxMgmtTestSubjects> {
+  findAction: (action: 'edit' | 'clone' | 'delete') => ReactWrapper;
+  actions: {
+    selectHomeTab: (tab: 'indicesTab' | 'templatesTab') => void;
+    selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void;
+    clickReloadButton: () => void;
+    clickTemplateAction: (name: Template['name'], action: 'edit' | 'clone' | 'delete') => void;
+    clickTemplateAt: (index: number) => void;
+    clickCloseDetailsButton: () => void;
+    clickActionMenu: (name: Template['name']) => void;
+  };
+}
+
+export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
+  const testBed = await initTestBed();
+
+  /**
+   * Additional helpers
+   */
+  const findAction = (action: 'edit' | 'clone' | 'delete') => {
+    const actions = ['edit', 'clone', 'delete'];
+    const { component } = testBed;
+
+    return component.find('.euiContextMenuItem').at(actions.indexOf(action));
+  };
+
+  /**
+   * User Actions
+   */
+
+  const selectHomeTab = (tab: 'indicesTab' | 'templatesTab') => {
+    testBed.find(tab).simulate('click');
+  };
+
+  const selectDetailsTab = (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => {
+    const tabs = ['summary', 'settings', 'mappings', 'aliases'];
+
+    testBed
+      .find('templateDetails.tab')
+      .at(tabs.indexOf(tab))
+      .simulate('click');
+  };
+
+  const clickReloadButton = () => {
+    const { find } = testBed;
+    find('reloadButton').simulate('click');
+  };
+
+  const clickActionMenu = async (templateName: Template['name']) => {
+    const { component } = testBed;
+
+    // When a table has > 2 actions, EUI displays an overflow menu with an id "<template_name>-actions"
+    // The template name may contain a period (.) so we use bracket syntax for selector
+    component.find(`div[id="${templateName}-actions"] button`).simulate('click');
+  };
+
+  const clickTemplateAction = (
+    templateName: Template['name'],
+    action: 'edit' | 'clone' | 'delete'
+  ) => {
+    const actions = ['edit', 'clone', 'delete'];
+    const { component } = testBed;
+
+    clickActionMenu(templateName);
+
+    component
+      .find('.euiContextMenuItem')
+      .at(actions.indexOf(action))
+      .simulate('click');
+  };
+
+  const clickTemplateAt = async (index: number) => {
+    const { component, table, router } = testBed;
+    const { rows } = table.getMetaData('templateTable');
+    const templateLink = findTestSubject(rows[index].reactWrapper, 'templateDetailsLink');
+
+    await act(async () => {
+      const { href } = templateLink.props();
+      router.navigateTo(href!);
+      await nextTick();
+      component.update();
+    });
+  };
+
+  const clickCloseDetailsButton = () => {
+    const { find } = testBed;
+
+    find('closeDetailsButton').simulate('click');
+  };
+
+  return {
+    ...testBed,
+    findAction,
+    actions: {
+      selectHomeTab,
+      selectDetailsTab,
+      clickReloadButton,
+      clickTemplateAction,
+      clickTemplateAt,
+      clickCloseDetailsButton,
+      clickActionMenu,
+    },
+  };
+};
+
+type IdxMgmtTestSubjects = TestSubjects;
+
+export type TestSubjects =
+  | 'aliasesTab'
+  | 'appTitle'
+  | 'cell'
+  | 'closeDetailsButton'
+  | 'createTemplateButton'
+  | 'deleteSystemTemplateCallOut'
+  | 'deleteTemplateButton'
+  | 'deleteTemplatesConfirmation'
+  | 'documentationLink'
+  | 'emptyPrompt'
+  | 'manageTemplateButton'
+  | 'mappingsTab'
+  | 'noAliasesCallout'
+  | 'noMappingsCallout'
+  | 'noSettingsCallout'
+  | 'indicesList'
+  | 'indicesTab'
+  | 'reloadButton'
+  | 'row'
+  | 'sectionError'
+  | 'sectionLoading'
+  | 'settingsTab'
+  | 'summaryTab'
+  | 'summaryTitle'
+  | 'systemTemplatesSwitch'
+  | 'templateDetails'
+  | 'templateDetails.manageTemplateButton'
+  | 'templateDetails.sectionLoading'
+  | 'templateDetails.tab'
+  | 'templateDetails.title'
+  | 'templateList'
+  | 'templateTable'
+  | 'templatesTab';
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
new file mode 100644
index 0000000000000..e5bce31ee6de1
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
@@ -0,0 +1,96 @@
+/*
+ * 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';
+import { API_BASE_PATH } from '../../../common/constants';
+
+type HttpResponse = Record<string, any> | any[];
+
+// Register helpers to mock HTTP Requests
+const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
+  const setLoadTemplatesResponse = (response: HttpResponse = []) => {
+    server.respondWith('GET', `${API_BASE_PATH}/templates`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setLoadIndicesResponse = (response: HttpResponse = []) => {
+    server.respondWith('GET', `${API_BASE_PATH}/indices`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setDeleteTemplateResponse = (response: HttpResponse = []) => {
+    server.respondWith('DELETE', `${API_BASE_PATH}/templates`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setLoadTemplateResponse = (response?: HttpResponse, error?: any) => {
+    const status = error ? error.status || 400 : 200;
+    const body = error ? error.body : response;
+
+    server.respondWith('GET', `${API_BASE_PATH}/templates/:id`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(body),
+    ]);
+  };
+
+  const setCreateTemplateResponse = (response?: HttpResponse, error?: any) => {
+    const status = error ? error.body.status || 400 : 200;
+    const body = error ? JSON.stringify(error.body) : JSON.stringify(response);
+
+    server.respondWith('PUT', `${API_BASE_PATH}/templates`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      body,
+    ]);
+  };
+
+  const setUpdateTemplateResponse = (response?: HttpResponse, error?: any) => {
+    const status = error ? error.status || 400 : 200;
+    const body = error ? JSON.stringify(error.body) : JSON.stringify(response);
+
+    server.respondWith('PUT', `${API_BASE_PATH}/templates/:name`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      body,
+    ]);
+  };
+
+  return {
+    setLoadTemplatesResponse,
+    setLoadIndicesResponse,
+    setDeleteTemplateResponse,
+    setLoadTemplateResponse,
+    setCreateTemplateResponse,
+    setUpdateTemplateResponse,
+  };
+};
+
+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, {}, 'DefaultSinonMockServerResponse']);
+
+  const httpRequestsMockHelpers = registerHttpRequestMockHelpers(server);
+
+  return {
+    server,
+    httpRequestsMockHelpers,
+  };
+};
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts
new file mode 100644
index 0000000000000..66021b531919a
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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';
+import { setup as templateCreateSetup } from './template_create.helpers';
+import { setup as templateCloneSetup } from './template_clone.helpers';
+import { setup as templateEditSetup } from './template_edit.helpers';
+
+export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../test_utils';
+
+export { setupEnvironment } from './setup_environment';
+
+export const pageHelpers = {
+  home: { setup: homeSetup },
+  templateCreate: { setup: templateCreateSetup },
+  templateClone: { setup: templateCloneSetup },
+  templateEdit: { setup: templateEditSetup },
+};
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
new file mode 100644
index 0000000000000..1eaf7efd17395
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+/* eslint-disable @kbn/eslint/no-restricted-paths */
+import React from 'react';
+import axios from 'axios';
+import axiosXhrAdapter from 'axios/lib/adapters/xhr';
+
+import {
+  notificationServiceMock,
+  docLinksServiceMock,
+} from '../../../../../../src/core/public/mocks';
+import { AppContextProvider } from '../../../public/application/app_context';
+import { httpService } from '../../../public/application/services/http';
+import { breadcrumbService } from '../../../public/application/services/breadcrumbs';
+import { documentationService } from '../../../public/application/services/documentation';
+import { notificationService } from '../../../public/application/services/notification';
+import { ExtensionsService } from '../../../public/services';
+import { UiMetricService } from '../../../public/application/services/ui_metric';
+import { setUiMetricService } from '../../../public/application/services/api';
+import { setExtensionsService } from '../../../public/application/store/selectors';
+import { init as initHttpRequests } from './http_requests';
+
+const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
+
+export const services = {
+  extensionsService: new ExtensionsService(),
+  uiMetricService: new UiMetricService('index_management'),
+};
+services.uiMetricService.setup({ reportUiStats() {} } as any);
+setExtensionsService(services.extensionsService);
+setUiMetricService(services.uiMetricService);
+const appDependencies = { services, core: {}, plugins: {} } as any;
+
+export const setupEnvironment = () => {
+  // Mock initialization of services
+  // @ts-ignore
+  httpService.setup(mockHttpClient);
+  breadcrumbService.setup(() => undefined);
+  documentationService.setup(docLinksServiceMock.createStartContract());
+  notificationService.setup(notificationServiceMock.createSetupContract());
+
+  const { server, httpRequestsMockHelpers } = initHttpRequests();
+
+  return {
+    server,
+    httpRequestsMockHelpers,
+  };
+};
+
+export const WithAppDependencies = (Comp: any) => (props: any) => (
+  <AppContextProvider value={appDependencies}>
+    <Comp {...props} />
+  </AppContextProvider>
+);
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts
new file mode 100644
index 0000000000000..36498b99ba143
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.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 { registerTestBed, TestBedConfig } from '../../../../../test_utils';
+import { BASE_PATH } from '../../../common/constants';
+import { TemplateClone } from '../../../public/application/sections/template_clone'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { formSetup } from './template_form.helpers';
+import { TEMPLATE_NAME } from './constants';
+import { WithAppDependencies } from './setup_environment';
+
+const testBedConfig: TestBedConfig = {
+  memoryRouter: {
+    initialEntries: [`${BASE_PATH}clone_template/${TEMPLATE_NAME}`],
+    componentRoutePath: `${BASE_PATH}clone_template/:name`,
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed(WithAppDependencies(TemplateClone), testBedConfig);
+
+export const setup = formSetup.bind(null, initTestBed);
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
new file mode 100644
index 0000000000000..14a44968a93c3
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
@@ -0,0 +1,26 @@
+/*
+ * 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 { registerTestBed, TestBedConfig } from '../../../../../test_utils';
+import { BASE_PATH } from '../../../common/constants';
+import { TemplateCreate } from '../../../public/application/sections/template_create'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { formSetup, TestSubjects } from './template_form.helpers';
+import { WithAppDependencies } from './setup_environment';
+
+const testBedConfig: TestBedConfig = {
+  memoryRouter: {
+    initialEntries: [`${BASE_PATH}create_template`],
+    componentRoutePath: `${BASE_PATH}create_template`,
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed<TestSubjects>(
+  WithAppDependencies(TemplateCreate),
+  testBedConfig
+);
+
+export const setup = formSetup.bind(null, initTestBed);
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts
new file mode 100644
index 0000000000000..af5fa8b79ecad
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.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 { registerTestBed, TestBedConfig } from '../../../../../test_utils';
+import { BASE_PATH } from '../../../common/constants';
+import { TemplateEdit } from '../../../public/application/sections/template_edit'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { formSetup, TestSubjects } from './template_form.helpers';
+import { TEMPLATE_NAME } from './constants';
+import { WithAppDependencies } from './setup_environment';
+
+const testBedConfig: TestBedConfig = {
+  memoryRouter: {
+    initialEntries: [`${BASE_PATH}edit_template/${TEMPLATE_NAME}`],
+    componentRoutePath: `${BASE_PATH}edit_template/:name`,
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed<TestSubjects>(WithAppDependencies(TemplateEdit), testBedConfig);
+
+export const setup = formSetup.bind(null, initTestBed);
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
new file mode 100644
index 0000000000000..9d4eb631a1c40
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
@@ -0,0 +1,241 @@
+/*
+ * 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 { TestBed, SetupFunc, UnwrapPromise } from '../../../../../test_utils';
+import { Template } from '../../../common/types';
+import { nextTick } from './index';
+
+interface MappingField {
+  name: string;
+  type: string;
+}
+
+// Look at the return type of formSetup and form a union between that type and the TestBed type.
+// This way we an define the formSetup return object and use that to dynamically define our type.
+export type TemplateFormTestBed = TestBed<TemplateFormTestSubjects> &
+  UnwrapPromise<ReturnType<typeof formSetup>>;
+
+export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
+  const testBed = await initTestBed();
+
+  // User actions
+  const clickNextButton = () => {
+    testBed.find('nextButton').simulate('click');
+  };
+
+  const clickBackButton = () => {
+    testBed.find('backButton').simulate('click');
+  };
+
+  const clickSubmitButton = () => {
+    testBed.find('submitButton').simulate('click');
+  };
+
+  const clickEditButtonAtField = (index: number) => {
+    testBed
+      .find('editFieldButton')
+      .at(index)
+      .simulate('click');
+  };
+
+  const clickEditFieldUpdateButton = () => {
+    testBed.find('editFieldUpdateButton').simulate('click');
+  };
+
+  const clickRemoveButtonAtField = (index: number) => {
+    testBed
+      .find('removeFieldButton')
+      .at(index)
+      .simulate('click');
+
+    testBed.find('confirmModalConfirmButton').simulate('click');
+  };
+
+  const clickCancelCreateFieldButton = () => {
+    testBed.find('createFieldWrapper.cancelButton').simulate('click');
+  };
+
+  const completeStepOne = async ({
+    name,
+    indexPatterns,
+    order,
+    version,
+  }: Partial<Template> = {}) => {
+    const { form, find, component } = testBed;
+
+    if (name) {
+      form.setInputValue('nameField.input', name);
+    }
+
+    if (indexPatterns) {
+      const indexPatternsFormatted = indexPatterns.map((pattern: string) => ({
+        label: pattern,
+        value: pattern,
+      }));
+
+      find('mockComboBox').simulate('change', indexPatternsFormatted); // Using mocked EuiComboBox
+      await nextTick();
+    }
+
+    if (order) {
+      form.setInputValue('orderField.input', JSON.stringify(order));
+    }
+
+    if (version) {
+      form.setInputValue('versionField.input', JSON.stringify(version));
+    }
+
+    clickNextButton();
+    await nextTick();
+    component.update();
+  };
+
+  const completeStepTwo = async (settings?: string) => {
+    const { find, component } = testBed;
+
+    if (settings) {
+      find('mockCodeEditor').simulate('change', {
+        jsonString: settings,
+      }); // Using mocked EuiCodeEditor
+      await nextTick();
+      component.update();
+    }
+
+    clickNextButton();
+    await nextTick();
+    component.update();
+  };
+
+  const completeStepThree = async (mappingFields?: MappingField[]) => {
+    const { component } = testBed;
+
+    if (mappingFields) {
+      for (const field of mappingFields) {
+        const { name, type } = field;
+        await addMappingField(name, type);
+      }
+    } else {
+      await nextTick();
+    }
+
+    await nextTick(50); // hooks updates cycles are tricky, adding some latency is needed
+    clickNextButton();
+    await nextTick(50);
+    component.update();
+  };
+
+  const completeStepFour = async (aliases?: string) => {
+    const { find, component } = testBed;
+
+    if (aliases) {
+      find('mockCodeEditor').simulate('change', {
+        jsonString: aliases,
+      }); // Using mocked EuiCodeEditor
+      await nextTick(50);
+      component.update();
+    }
+
+    clickNextButton();
+    await nextTick(50);
+    component.update();
+  };
+
+  const selectSummaryTab = (tab: 'summary' | 'request') => {
+    const tabs = ['summary', 'request'];
+
+    testBed
+      .find('summaryTabContent')
+      .find('.euiTab')
+      .at(tabs.indexOf(tab))
+      .simulate('click');
+  };
+
+  const addMappingField = async (name: string, type: string) => {
+    const { find, form, component } = testBed;
+
+    form.setInputValue('nameParameterInput', name);
+    find('createFieldWrapper.mockComboBox').simulate('change', [
+      {
+        label: type,
+        value: type,
+      },
+    ]);
+
+    await nextTick(50);
+    component.update();
+
+    find('createFieldWrapper.addButton').simulate('click');
+
+    await nextTick();
+    component.update();
+  };
+
+  return {
+    ...testBed,
+    actions: {
+      clickNextButton,
+      clickBackButton,
+      clickSubmitButton,
+      clickEditButtonAtField,
+      clickEditFieldUpdateButton,
+      clickRemoveButtonAtField,
+      clickCancelCreateFieldButton,
+      completeStepOne,
+      completeStepTwo,
+      completeStepThree,
+      completeStepFour,
+      selectSummaryTab,
+      addMappingField,
+    },
+  };
+};
+
+export type TemplateFormTestSubjects = TestSubjects;
+
+export type TestSubjects =
+  | 'backButton'
+  | 'codeEditorContainer'
+  | 'confirmModalConfirmButton'
+  | 'createFieldWrapper.addPropertyButton'
+  | 'createFieldWrapper.addButton'
+  | 'createFieldWrapper.addFieldButton'
+  | 'createFieldWrapper.addMultiFieldButton'
+  | 'createFieldWrapper.cancelButton'
+  | 'createFieldWrapper.mockComboBox'
+  | 'editFieldButton'
+  | 'editFieldUpdateButton'
+  | 'fieldsListItem'
+  | 'fieldTypeComboBox'
+  | 'indexPatternsField'
+  | 'indexPatternsWarning'
+  | 'indexPatternsWarningDescription'
+  | 'mappingsEditorFieldEdit'
+  | 'mockCodeEditor'
+  | 'mockComboBox'
+  | 'nameField'
+  | 'nameField.input'
+  | 'nameParameterInput'
+  | 'nextButton'
+  | 'orderField'
+  | 'orderField.input'
+  | 'pageTitle'
+  | 'removeFieldButton'
+  | 'requestTab'
+  | 'saveTemplateError'
+  | 'settingsEditor'
+  | 'systemTemplateEditCallout'
+  | 'stepAliases'
+  | 'stepMappings'
+  | 'stepSettings'
+  | 'stepSummary'
+  | 'stepTitle'
+  | 'submitButton'
+  | 'summaryTab'
+  | 'summaryTabContent'
+  | 'templateForm'
+  | 'templateFormContainer'
+  | 'testingEditor'
+  | 'versionField'
+  | 'versionField.input';
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home.test.ts
new file mode 100644
index 0000000000000..9e8af02b74631
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home.test.ts
@@ -0,0 +1,508 @@
+/*
+ * 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 * as fixtures from '../../test/fixtures';
+import { setupEnvironment, pageHelpers, nextTick, getRandomString } from './helpers';
+import { IdxMgmtHomeTestBed } from './helpers/home.helpers';
+import { API_BASE_PATH } from '../../common/constants';
+
+const { setup } = pageHelpers.home;
+
+const removeWhiteSpaceOnArrayValues = (array: any[]) =>
+  array.map(value => {
+    if (!value.trim) {
+      return value;
+    }
+    return value.trim();
+  });
+
+jest.mock('ui/new_platform');
+
+describe('<IndexManagementHome />', () => {
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+  let testBed: IdxMgmtHomeTestBed;
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('on component mount', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadIndicesResponse([]);
+
+      testBed = await setup();
+
+      await act(async () => {
+        const { component } = testBed;
+
+        await nextTick();
+        component.update();
+      });
+    });
+
+    test('should set the correct app title', () => {
+      const { exists, find } = testBed;
+      expect(exists('appTitle')).toBe(true);
+      expect(find('appTitle').text()).toEqual('Index Management');
+    });
+
+    test('should have a link to the documentation', () => {
+      const { exists, find } = testBed;
+      expect(exists('documentationLink')).toBe(true);
+      expect(find('documentationLink').text()).toBe('Index Management docs');
+    });
+
+    describe('tabs', () => {
+      test('should have 2 tabs', () => {
+        const { find } = testBed;
+        const templatesTab = find('templatesTab');
+        const indicesTab = find('indicesTab');
+
+        expect(indicesTab.length).toBe(1);
+        expect(indicesTab.text()).toEqual('Indices');
+        expect(templatesTab.length).toBe(1);
+        expect(templatesTab.text()).toEqual('Index Templates');
+      });
+
+      test('should navigate to Index Templates tab', async () => {
+        const { exists, actions, component } = testBed;
+
+        expect(exists('indicesList')).toBe(true);
+        expect(exists('templateList')).toBe(false);
+
+        httpRequestsMockHelpers.setLoadTemplatesResponse([]);
+
+        actions.selectHomeTab('templatesTab');
+
+        await act(async () => {
+          await nextTick();
+          component.update();
+        });
+
+        expect(exists('indicesList')).toBe(false);
+        expect(exists('templateList')).toBe(true);
+      });
+    });
+
+    describe('index templates', () => {
+      describe('when there are no index templates', () => {
+        beforeEach(async () => {
+          const { actions, component } = testBed;
+
+          httpRequestsMockHelpers.setLoadTemplatesResponse([]);
+
+          actions.selectHomeTab('templatesTab');
+
+          await act(async () => {
+            await nextTick();
+            component.update();
+          });
+        });
+
+        test('should display an empty prompt', async () => {
+          const { exists } = testBed;
+
+          expect(exists('sectionLoading')).toBe(false);
+          expect(exists('emptyPrompt')).toBe(true);
+        });
+      });
+
+      describe('when there are index templates', () => {
+        const template1 = fixtures.getTemplate({
+          name: `a${getRandomString()}`,
+          indexPatterns: ['template1Pattern1*', 'template1Pattern2'],
+          settings: {
+            index: {
+              number_of_shards: '1',
+              lifecycle: {
+                name: 'my_ilm_policy',
+              },
+            },
+          },
+        });
+        const template2 = fixtures.getTemplate({
+          name: `b${getRandomString()}`,
+          indexPatterns: ['template2Pattern1*'],
+        });
+        const template3 = fixtures.getTemplate({
+          name: `.c${getRandomString()}`, // mock system template
+          indexPatterns: ['template3Pattern1*', 'template3Pattern2', 'template3Pattern3'],
+        });
+
+        const templates = [template1, template2, template3];
+
+        beforeEach(async () => {
+          const { actions, component } = testBed;
+
+          httpRequestsMockHelpers.setLoadTemplatesResponse(templates);
+
+          actions.selectHomeTab('templatesTab');
+
+          await act(async () => {
+            await nextTick();
+            component.update();
+          });
+        });
+
+        test('should list them in the table', async () => {
+          const { table } = testBed;
+
+          const { tableCellsValues } = table.getMetaData('templateTable');
+
+          tableCellsValues.forEach((row, i) => {
+            const template = templates[i];
+            const { name, indexPatterns, order, ilmPolicy } = template;
+
+            const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : '';
+            const orderFormatted = order ? order.toString() : order;
+
+            expect(removeWhiteSpaceOnArrayValues(row)).toEqual([
+              '',
+              name,
+              indexPatterns.join(', '),
+              ilmPolicyName,
+              orderFormatted,
+              '',
+              '',
+              '',
+              '',
+            ]);
+          });
+        });
+
+        test('should have a button to reload the index templates', async () => {
+          const { component, exists, actions } = testBed;
+          const totalRequests = server.requests.length;
+
+          expect(exists('reloadButton')).toBe(true);
+
+          await act(async () => {
+            actions.clickReloadButton();
+            await nextTick();
+            component.update();
+          });
+
+          expect(server.requests.length).toBe(totalRequests + 1);
+          expect(server.requests[server.requests.length - 1].url).toBe(
+            `${API_BASE_PATH}/templates`
+          );
+        });
+
+        test('should have a button to create a new template', () => {
+          const { exists } = testBed;
+          expect(exists('createTemplateButton')).toBe(true);
+        });
+
+        test('should have a switch to view system templates', async () => {
+          const { table, exists, component, form } = testBed;
+          const { rows } = table.getMetaData('templateTable');
+
+          expect(rows.length).toEqual(
+            templates.filter(template => !template.name.startsWith('.')).length
+          );
+
+          expect(exists('systemTemplatesSwitch')).toBe(true);
+
+          await act(async () => {
+            form.toggleEuiSwitch('systemTemplatesSwitch');
+            await nextTick();
+            component.update();
+          });
+
+          const { rows: updatedRows } = table.getMetaData('templateTable');
+          expect(updatedRows.length).toEqual(templates.length);
+        });
+
+        test('each row should have a link to the template details panel', async () => {
+          const { find, exists, actions } = testBed;
+
+          await actions.clickTemplateAt(0);
+
+          expect(exists('templateList')).toBe(true);
+          expect(exists('templateDetails')).toBe(true);
+          expect(find('templateDetails.title').text()).toBe(template1.name);
+        });
+
+        test('template actions column should have an option to delete', () => {
+          const { actions, findAction } = testBed;
+          const { name: templateName } = template1;
+
+          actions.clickActionMenu(templateName);
+
+          const deleteAction = findAction('delete');
+
+          expect(deleteAction.text()).toEqual('Delete');
+        });
+
+        test('template actions column should have an option to clone', () => {
+          const { actions, findAction } = testBed;
+          const { name: templateName } = template1;
+
+          actions.clickActionMenu(templateName);
+
+          const cloneAction = findAction('clone');
+
+          expect(cloneAction.text()).toEqual('Clone');
+        });
+
+        test('template actions column should have an option to edit', () => {
+          const { actions, findAction } = testBed;
+          const { name: templateName } = template1;
+
+          actions.clickActionMenu(templateName);
+
+          const editAction = findAction('edit');
+
+          expect(editAction.text()).toEqual('Edit');
+        });
+
+        describe('delete index template', () => {
+          test('should show a confirmation when clicking the delete template button', async () => {
+            const { actions } = testBed;
+            const { name: templateName } = template1;
+
+            await actions.clickTemplateAction(templateName, 'delete');
+
+            // We need to read the document "body" as the modal is added there and not inside
+            // the component DOM tree.
+            expect(
+              document.body.querySelector('[data-test-subj="deleteTemplatesConfirmation"]')
+            ).not.toBe(null);
+
+            expect(
+              document.body.querySelector('[data-test-subj="deleteTemplatesConfirmation"]')!
+                .textContent
+            ).toContain('Delete template');
+          });
+
+          test('should show a warning message when attempting to delete a system template', async () => {
+            const { component, form, actions } = testBed;
+
+            await act(async () => {
+              form.toggleEuiSwitch('systemTemplatesSwitch');
+              await nextTick();
+              component.update();
+            });
+
+            const { name: systemTemplateName } = template3;
+            await actions.clickTemplateAction(systemTemplateName, 'delete');
+
+            expect(
+              document.body.querySelector('[data-test-subj="deleteSystemTemplateCallOut"]')
+            ).not.toBe(null);
+          });
+
+          test('should send the correct HTTP request to delete an index template', async () => {
+            const { component, actions, table } = testBed;
+            const { rows } = table.getMetaData('templateTable');
+
+            const templateId = rows[0].columns[2].value;
+
+            const { name: templateName } = template1;
+            await actions.clickTemplateAction(templateName, 'delete');
+
+            const modal = document.body.querySelector(
+              '[data-test-subj="deleteTemplatesConfirmation"]'
+            );
+            const confirmButton: HTMLButtonElement | null = modal!.querySelector(
+              '[data-test-subj="confirmModalConfirmButton"]'
+            );
+
+            httpRequestsMockHelpers.setDeleteTemplateResponse({
+              results: {
+                successes: [templateId],
+                errors: [],
+              },
+            });
+
+            await act(async () => {
+              confirmButton!.click();
+              await nextTick();
+              component.update();
+            });
+
+            const latestRequest = server.requests[server.requests.length - 1];
+
+            expect(latestRequest.method).toBe('DELETE');
+            expect(latestRequest.url).toBe(`${API_BASE_PATH}/templates/${template1.name}`);
+          });
+        });
+
+        describe('detail panel', () => {
+          beforeEach(async () => {
+            const template = fixtures.getTemplate({
+              name: `a${getRandomString()}`,
+              indexPatterns: ['template1Pattern1*', 'template1Pattern2'],
+            });
+
+            httpRequestsMockHelpers.setLoadTemplateResponse(template);
+          });
+
+          test('should show details when clicking on a template', async () => {
+            const { exists, actions } = testBed;
+
+            expect(exists('templateDetails')).toBe(false);
+
+            await actions.clickTemplateAt(0);
+
+            expect(exists('templateDetails')).toBe(true);
+          });
+
+          describe('on mount', () => {
+            beforeEach(async () => {
+              const { actions } = testBed;
+
+              await actions.clickTemplateAt(0);
+            });
+
+            test('should set the correct title', async () => {
+              const { find } = testBed;
+              const { name } = template1;
+
+              expect(find('templateDetails.title').text()).toEqual(name);
+            });
+
+            it('should have a close button and be able to close flyout', async () => {
+              const { actions, component, exists } = testBed;
+
+              expect(exists('closeDetailsButton')).toBe(true);
+              expect(exists('summaryTab')).toBe(true);
+
+              actions.clickCloseDetailsButton();
+
+              await act(async () => {
+                await nextTick();
+                component.update();
+              });
+
+              expect(exists('summaryTab')).toBe(false);
+            });
+
+            it('should have a manage button', async () => {
+              const { actions, exists } = testBed;
+
+              await actions.clickTemplateAt(0);
+
+              expect(exists('templateDetails.manageTemplateButton')).toBe(true);
+            });
+          });
+
+          describe('tabs', () => {
+            test('should have 4 tabs', async () => {
+              const template = fixtures.getTemplate({
+                name: `a${getRandomString()}`,
+                indexPatterns: ['template1Pattern1*', 'template1Pattern2'],
+                settings: {
+                  index: {
+                    number_of_shards: '1',
+                  },
+                },
+                mappings: {
+                  _source: {
+                    enabled: false,
+                  },
+                  properties: {
+                    created_at: {
+                      type: 'date',
+                      format: 'EEE MMM dd HH:mm:ss Z yyyy',
+                    },
+                  },
+                },
+                aliases: {
+                  alias1: {},
+                },
+              });
+
+              const { find, actions, exists } = testBed;
+
+              httpRequestsMockHelpers.setLoadTemplateResponse(template);
+
+              await actions.clickTemplateAt(0);
+
+              expect(find('templateDetails.tab').length).toBe(4);
+              expect(find('templateDetails.tab').map(t => t.text())).toEqual([
+                'Summary',
+                'Settings',
+                'Mappings',
+                'Aliases',
+              ]);
+
+              // Summary tab should be initial active tab
+              expect(exists('summaryTab')).toBe(true);
+
+              // Navigate and verify all tabs
+              actions.selectDetailsTab('settings');
+              expect(exists('summaryTab')).toBe(false);
+              expect(exists('settingsTab')).toBe(true);
+
+              actions.selectDetailsTab('aliases');
+              expect(exists('summaryTab')).toBe(false);
+              expect(exists('settingsTab')).toBe(false);
+              expect(exists('aliasesTab')).toBe(true);
+
+              actions.selectDetailsTab('mappings');
+              expect(exists('summaryTab')).toBe(false);
+              expect(exists('settingsTab')).toBe(false);
+              expect(exists('aliasesTab')).toBe(false);
+              expect(exists('mappingsTab')).toBe(true);
+            });
+
+            test('should show an info callout if data is not present', async () => {
+              const templateWithNoOptionalFields = fixtures.getTemplate({
+                name: `a${getRandomString()}`,
+                indexPatterns: ['template1Pattern1*', 'template1Pattern2'],
+              });
+
+              const { actions, find, exists, component } = testBed;
+
+              httpRequestsMockHelpers.setLoadTemplateResponse(templateWithNoOptionalFields);
+
+              await actions.clickTemplateAt(0);
+
+              await act(async () => {
+                await nextTick();
+                component.update();
+              });
+
+              expect(find('templateDetails.tab').length).toBe(4);
+              expect(exists('summaryTab')).toBe(true);
+
+              // Navigate and verify callout message per tab
+              actions.selectDetailsTab('settings');
+              expect(exists('noSettingsCallout')).toBe(true);
+
+              actions.selectDetailsTab('mappings');
+              expect(exists('noMappingsCallout')).toBe(true);
+
+              actions.selectDetailsTab('aliases');
+              expect(exists('noAliasesCallout')).toBe(true);
+            });
+          });
+
+          describe('error handling', () => {
+            it('should render an error message if error fetching template details', async () => {
+              const { actions, exists } = testBed;
+              const error = {
+                status: 404,
+                error: 'Not found',
+                message: 'Template not found',
+              };
+
+              httpRequestsMockHelpers.setLoadTemplateResponse(undefined, { body: error });
+
+              await actions.clickTemplateAt(0);
+
+              expect(exists('sectionError')).toBe(true);
+              // Manage button should not render if error
+              expect(exists('templateDetails.manageTemplateButton')).toBe(false);
+            });
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/template_clone.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/template_clone.test.tsx
new file mode 100644
index 0000000000000..5d895c8e98624
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/template_clone.test.tsx
@@ -0,0 +1,123 @@
+/*
+ * 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 React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { TemplateFormTestBed } from './helpers/template_form.helpers';
+import { getTemplate } from '../../test/fixtures';
+import {
+  TEMPLATE_NAME,
+  INDEX_PATTERNS as DEFAULT_INDEX_PATTERNS,
+  MAPPINGS,
+} from './helpers/constants';
+
+const { setup } = pageHelpers.templateClone;
+
+jest.mock('ui/new_platform');
+
+jest.mock('@elastic/eui', () => ({
+  ...jest.requireActual('@elastic/eui'),
+  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+  // which does not produce a valid component wrapper
+  EuiComboBox: (props: any) => (
+    <input
+      data-test-subj="mockComboBox"
+      onChange={async (syntheticEvent: any) => {
+        props.onChange([syntheticEvent['0']]);
+      }}
+    />
+  ),
+  // Mocking EuiCodeEditor, which uses React Ace under the hood
+  EuiCodeEditor: (props: any) => (
+    <input
+      data-test-subj="mockCodeEditor"
+      onChange={(syntheticEvent: any) => {
+        props.onChange(syntheticEvent.jsonString);
+      }}
+    />
+  ),
+}));
+
+describe('<TemplateClone />', () => {
+  let testBed: TemplateFormTestBed;
+
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  const templateToClone = getTemplate({
+    name: TEMPLATE_NAME,
+    indexPatterns: ['indexPattern1'],
+    mappings: {
+      ...MAPPINGS,
+      _meta: {},
+      _source: {},
+    },
+  });
+
+  beforeEach(async () => {
+    httpRequestsMockHelpers.setLoadTemplateResponse(templateToClone);
+
+    testBed = await setup();
+
+    await act(async () => {
+      await nextTick();
+      testBed.component.update();
+    });
+  });
+
+  test('should set the correct page title', () => {
+    const { exists, find } = testBed;
+
+    expect(exists('pageTitle')).toBe(true);
+    expect(find('pageTitle').text()).toEqual(`Clone template '${templateToClone.name}'`);
+  });
+
+  describe('form payload', () => {
+    beforeEach(async () => {
+      const { actions } = testBed;
+
+      await act(async () => {
+        // Complete step 1 (logistics)
+        // Specify index patterns, but do not change name (keep default)
+        await actions.completeStepOne({
+          indexPatterns: DEFAULT_INDEX_PATTERNS,
+        });
+
+        // Bypass step 2 (index settings)
+        await actions.completeStepTwo();
+
+        // Bypass step 3 (mappings)
+        await actions.completeStepThree();
+
+        // Bypass step 4 (aliases)
+        await actions.completeStepFour();
+      });
+    });
+
+    it('should send the correct payload', async () => {
+      const { actions } = testBed;
+
+      await act(async () => {
+        actions.clickSubmitButton();
+        await nextTick();
+      });
+
+      const latestRequest = server.requests[server.requests.length - 1];
+
+      const expected = {
+        ...templateToClone,
+        name: `${templateToClone.name}-copy`,
+        indexPatterns: DEFAULT_INDEX_PATTERNS,
+      };
+
+      expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
+    });
+  });
+});
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/template_create.test.tsx
new file mode 100644
index 0000000000000..981067c09f8aa
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/template_create.test.tsx
@@ -0,0 +1,387 @@
+/*
+ * 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 React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { TemplateFormTestBed } from './helpers/template_form.helpers';
+import {
+  TEMPLATE_NAME,
+  SETTINGS,
+  MAPPINGS,
+  ALIASES,
+  INDEX_PATTERNS as DEFAULT_INDEX_PATTERNS,
+} from './helpers/constants';
+
+const { setup } = pageHelpers.templateCreate;
+
+jest.mock('ui/new_platform');
+
+jest.mock('@elastic/eui', () => ({
+  ...jest.requireActual('@elastic/eui'),
+  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+  // which does not produce a valid component wrapper
+  EuiComboBox: (props: any) => (
+    <input
+      data-test-subj="mockComboBox"
+      onChange={(syntheticEvent: any) => {
+        props.onChange([syntheticEvent['0']]);
+      }}
+    />
+  ),
+  // Mocking EuiCodeEditor, which uses React Ace under the hood
+  EuiCodeEditor: (props: any) => (
+    <input
+      data-test-subj="mockCodeEditor"
+      onChange={(syntheticEvent: any) => {
+        props.onChange(syntheticEvent.jsonString);
+      }}
+    />
+  ),
+}));
+
+const TEXT_MAPPING_FIELD = {
+  name: 'text_datatype',
+  type: 'text',
+};
+
+const BOOLEAN_MAPPING_FIELD = {
+  name: 'boolean_datatype',
+  type: 'boolean',
+};
+
+const KEYWORD_MAPPING_FIELD = {
+  name: 'keyword_datatype',
+  type: 'keyword',
+};
+
+describe('<TemplateCreate />', () => {
+  let testBed: TemplateFormTestBed;
+
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('on component mount', () => {
+    beforeEach(async () => {
+      await act(async () => {
+        testBed = await setup();
+      });
+    });
+
+    test('should set the correct page title', () => {
+      const { exists, find } = testBed;
+
+      expect(exists('pageTitle')).toBe(true);
+      expect(find('pageTitle').text()).toEqual('Create template');
+    });
+
+    test('should not let the user go to the next step with invalid fields', async () => {
+      const { find, actions, component } = testBed;
+
+      expect(find('nextButton').props().disabled).toEqual(false);
+
+      await act(async () => {
+        actions.clickNextButton();
+        await nextTick();
+        component.update();
+      });
+
+      expect(find('nextButton').props().disabled).toEqual(true);
+    });
+  });
+
+  describe('form validation', () => {
+    beforeEach(async () => {
+      await act(async () => {
+        testBed = await setup();
+      });
+    });
+
+    describe('index settings (step 2)', () => {
+      beforeEach(async () => {
+        const { actions } = testBed;
+
+        await act(async () => {
+          // Complete step 1 (logistics)
+          await actions.completeStepOne({ name: TEMPLATE_NAME, indexPatterns: ['index1'] });
+        });
+      });
+
+      it('should set the correct page title', () => {
+        const { exists, find } = testBed;
+
+        expect(exists('stepSettings')).toBe(true);
+        expect(find('stepTitle').text()).toEqual('Index settings (optional)');
+      });
+
+      it('should not allow invalid json', async () => {
+        const { form, actions } = testBed;
+
+        await act(async () => {
+          actions.completeStepTwo('{ invalidJsonString ');
+        });
+
+        expect(form.getErrorsMessages()).toContain('Invalid JSON format.');
+      });
+    });
+
+    describe('mappings (step 3)', () => {
+      beforeEach(async () => {
+        const { actions } = testBed;
+
+        await act(async () => {
+          // Complete step 1 (logistics)
+          await actions.completeStepOne({ name: TEMPLATE_NAME, indexPatterns: ['index1'] });
+
+          // Complete step 2 (index settings)
+          await actions.completeStepTwo('{}');
+        });
+      });
+
+      it('should set the correct page title', () => {
+        const { exists, find } = testBed;
+
+        expect(exists('stepMappings')).toBe(true);
+        expect(find('stepTitle').text()).toEqual('Mappings (optional)');
+      });
+
+      it('should allow the user to define document fields for a mapping', async () => {
+        const { actions, find } = testBed;
+
+        await act(async () => {
+          await actions.addMappingField('field_1', 'text');
+          await actions.addMappingField('field_2', 'text');
+          await actions.addMappingField('field_3', 'text');
+        });
+
+        expect(find('fieldsListItem').length).toBe(3);
+      });
+
+      it('should allow the user to remove a document field from a mapping', async () => {
+        const { actions, find } = testBed;
+
+        await act(async () => {
+          await actions.addMappingField('field_1', 'text');
+          await actions.addMappingField('field_2', 'text');
+        });
+
+        expect(find('fieldsListItem').length).toBe(2);
+
+        actions.clickCancelCreateFieldButton();
+        // Remove first field
+        actions.clickRemoveButtonAtField(0);
+
+        expect(find('fieldsListItem').length).toBe(1);
+      });
+    });
+
+    describe('aliases (step 4)', () => {
+      beforeEach(async () => {
+        const { actions } = testBed;
+
+        await act(async () => {
+          // Complete step 1 (logistics)
+          await actions.completeStepOne({ name: TEMPLATE_NAME, indexPatterns: ['index1'] });
+
+          // Complete step 2 (index settings)
+          await actions.completeStepTwo('{}');
+
+          // Complete step 3 (mappings)
+          await actions.completeStepThree();
+        });
+      });
+
+      it('should set the correct page title', () => {
+        const { exists, find } = testBed;
+
+        expect(exists('stepAliases')).toBe(true);
+        expect(find('stepTitle').text()).toEqual('Aliases (optional)');
+      });
+
+      it('should not allow invalid json', async () => {
+        const { actions, form } = testBed;
+
+        await act(async () => {
+          // Complete step 4 (aliases) with invalid json
+          await actions.completeStepFour('{ invalidJsonString ');
+        });
+
+        expect(form.getErrorsMessages()).toContain('Invalid JSON format.');
+      });
+    });
+  });
+
+  describe('review (step 5)', () => {
+    beforeEach(async () => {
+      await act(async () => {
+        testBed = await setup();
+
+        const { actions } = testBed;
+
+        // Complete step 1 (logistics)
+        await actions.completeStepOne({
+          name: TEMPLATE_NAME,
+          indexPatterns: DEFAULT_INDEX_PATTERNS,
+        });
+
+        // Complete step 2 (index settings)
+        await actions.completeStepTwo(JSON.stringify(SETTINGS));
+
+        // Complete step 3 (mappings)
+        await actions.completeStepThree();
+
+        // Complete step 4 (aliases)
+        await actions.completeStepFour(JSON.stringify(ALIASES));
+      });
+    });
+
+    it('should set the correct step title', () => {
+      const { find, exists } = testBed;
+      expect(exists('stepSummary')).toBe(true);
+      expect(find('stepTitle').text()).toEqual(`Review details for '${TEMPLATE_NAME}'`);
+    });
+
+    describe('tabs', () => {
+      test('should have 2 tabs', () => {
+        const { find } = testBed;
+
+        expect(find('summaryTabContent').find('.euiTab').length).toBe(2);
+        expect(
+          find('summaryTabContent')
+            .find('.euiTab')
+            .map(t => t.text())
+        ).toEqual(['Summary', 'Request']);
+      });
+
+      test('should navigate to the Request tab', async () => {
+        const { exists, actions } = testBed;
+
+        expect(exists('summaryTab')).toBe(true);
+        expect(exists('requestTab')).toBe(false);
+
+        actions.selectSummaryTab('request');
+
+        expect(exists('summaryTab')).toBe(false);
+        expect(exists('requestTab')).toBe(true);
+      });
+    });
+
+    it('should render a warning message if a wildcard is used as an index pattern', async () => {
+      await act(async () => {
+        testBed = await setup();
+
+        const { actions } = testBed;
+        // Complete step 1 (logistics)
+        await actions.completeStepOne({
+          name: TEMPLATE_NAME,
+          indexPatterns: ['*'], // Set wildcard index pattern
+        });
+
+        // Complete step 2 (index settings)
+        await actions.completeStepTwo(JSON.stringify({}));
+
+        // Complete step 3 (mappings)
+        await actions.completeStepThree();
+
+        // Complete step 4 (aliases)
+        await actions.completeStepFour(JSON.stringify({}));
+      });
+
+      const { exists, find } = testBed;
+
+      expect(exists('indexPatternsWarning')).toBe(true);
+      expect(find('indexPatternsWarningDescription').text()).toEqual(
+        'All new indices that you create will use this template. Edit index patterns.'
+      );
+    });
+  });
+
+  describe('form payload & api errors', () => {
+    beforeEach(async () => {
+      const MAPPING_FIELDS = [BOOLEAN_MAPPING_FIELD, TEXT_MAPPING_FIELD, KEYWORD_MAPPING_FIELD];
+
+      await act(async () => {
+        testBed = await setup();
+
+        const { actions } = testBed;
+        // Complete step 1 (logistics)
+        await actions.completeStepOne({
+          name: TEMPLATE_NAME,
+          indexPatterns: DEFAULT_INDEX_PATTERNS,
+        });
+
+        // Complete step 2 (index settings)
+        await actions.completeStepTwo(JSON.stringify(SETTINGS));
+
+        // Complete step 3 (mappings)
+        await actions.completeStepThree(MAPPING_FIELDS);
+
+        // Complete step 4 (aliases)
+        await nextTick(100);
+        await actions.completeStepFour(JSON.stringify(ALIASES));
+      });
+    });
+
+    it('should send the correct payload', async () => {
+      const { actions } = testBed;
+
+      await act(async () => {
+        actions.clickSubmitButton();
+        await nextTick();
+      });
+
+      const latestRequest = server.requests[server.requests.length - 1];
+
+      const expected = JSON.stringify({
+        isManaged: false,
+        name: TEMPLATE_NAME,
+        indexPatterns: DEFAULT_INDEX_PATTERNS,
+        settings: SETTINGS,
+        mappings: {
+          ...MAPPINGS,
+          properties: {
+            [BOOLEAN_MAPPING_FIELD.name]: {
+              type: BOOLEAN_MAPPING_FIELD.type,
+            },
+            [TEXT_MAPPING_FIELD.name]: {
+              type: TEXT_MAPPING_FIELD.type,
+            },
+            [KEYWORD_MAPPING_FIELD.name]: {
+              type: KEYWORD_MAPPING_FIELD.type,
+            },
+          },
+        },
+        aliases: ALIASES,
+      });
+
+      expect(JSON.parse(latestRequest.requestBody).body).toEqual(expected);
+    });
+
+    it('should surface the API errors from the put HTTP request', async () => {
+      const { component, actions, find, exists } = testBed;
+
+      const error = {
+        status: 409,
+        error: 'Conflict',
+        message: `There is already a template with name '${TEMPLATE_NAME}'`,
+      };
+
+      httpRequestsMockHelpers.setCreateTemplateResponse(undefined, { body: error });
+
+      await act(async () => {
+        actions.clickSubmitButton();
+        await nextTick();
+        component.update();
+      });
+
+      expect(exists('saveTemplateError')).toBe(true);
+      expect(find('saveTemplateError').text()).toContain(error.message);
+    });
+  });
+});
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/template_edit.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/template_edit.test.tsx
new file mode 100644
index 0000000000000..537b0d8ef4156
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/template_edit.test.tsx
@@ -0,0 +1,210 @@
+/*
+ * 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 React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { TemplateFormTestBed } from './helpers/template_form.helpers';
+import * as fixtures from '../../test/fixtures';
+import { TEMPLATE_NAME, SETTINGS, ALIASES, MAPPINGS as DEFAULT_MAPPING } from './helpers/constants';
+
+const UPDATED_INDEX_PATTERN = ['updatedIndexPattern'];
+const UPDATED_MAPPING_TEXT_FIELD_NAME = 'updated_text_datatype';
+const MAPPING = {
+  ...DEFAULT_MAPPING,
+  properties: {
+    text_datatype: {
+      type: 'text',
+    },
+  },
+};
+
+const { setup } = pageHelpers.templateEdit;
+
+jest.mock('ui/new_platform');
+
+jest.mock('@elastic/eui', () => ({
+  ...jest.requireActual('@elastic/eui'),
+  // Mocking EuiComboBox, as it utilizes "react-virtualized" for rendering search suggestions,
+  // which does not produce a valid component wrapper
+  EuiComboBox: (props: any) => (
+    <input
+      data-test-subj="mockComboBox"
+      onChange={(syntheticEvent: any) => {
+        props.onChange([syntheticEvent['0']]);
+      }}
+    />
+  ),
+  // Mocking EuiCodeEditor, which uses React Ace under the hood
+  EuiCodeEditor: (props: any) => (
+    <input
+      data-test-subj="mockCodeEditor"
+      onChange={(syntheticEvent: any) => {
+        props.onChange(syntheticEvent.jsonString);
+      }}
+    />
+  ),
+}));
+
+describe('<TemplateEdit />', () => {
+  let testBed: TemplateFormTestBed;
+
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('without mappings', () => {
+    const templateToEdit = fixtures.getTemplate({
+      name: 'index_template_without_mappings',
+      indexPatterns: ['indexPattern1'],
+    });
+
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadTemplateResponse(templateToEdit);
+
+      testBed = await setup();
+
+      await act(async () => {
+        await nextTick();
+        testBed.component.update();
+      });
+    });
+
+    it('allows you to add mappings', async () => {
+      const { actions, find } = testBed;
+
+      await act(async () => {
+        // Complete step 1 (logistics)
+        await actions.completeStepOne();
+
+        // Step 2 (index settings)
+        await actions.completeStepTwo();
+
+        // Step 3 (mappings)
+        await act(async () => {
+          await actions.addMappingField('field_1', 'text');
+        });
+
+        expect(find('fieldsListItem').length).toBe(1);
+      });
+    });
+  });
+
+  describe('with mappings', () => {
+    const templateToEdit = fixtures.getTemplate({
+      name: TEMPLATE_NAME,
+      indexPatterns: ['indexPattern1'],
+      mappings: MAPPING,
+    });
+
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadTemplateResponse(templateToEdit);
+
+      testBed = await setup();
+
+      await act(async () => {
+        await nextTick();
+        testBed.component.update();
+      });
+    });
+
+    test('should set the correct page title', () => {
+      const { exists, find } = testBed;
+      const { name } = templateToEdit;
+
+      expect(exists('pageTitle')).toBe(true);
+      expect(find('pageTitle').text()).toEqual(`Edit template '${name}'`);
+    });
+
+    it('should set the nameField to readOnly', () => {
+      const { find } = testBed;
+
+      const nameInput = find('nameField.input');
+      expect(nameInput.props().disabled).toEqual(true);
+    });
+
+    // TODO: Flakey test
+    describe.skip('form payload', () => {
+      beforeEach(async () => {
+        const { actions, component, find, form } = testBed;
+
+        await act(async () => {
+          // Complete step 1 (logistics)
+          await actions.completeStepOne({
+            indexPatterns: UPDATED_INDEX_PATTERN,
+          });
+
+          // Step 2 (index settings)
+          await actions.completeStepTwo(JSON.stringify(SETTINGS));
+
+          // Step 3 (mappings)
+          // Select the first field to edit
+          actions.clickEditButtonAtField(0);
+          await nextTick();
+          component.update();
+          // verify edit field flyout
+          expect(find('mappingsEditorFieldEdit').length).toEqual(1);
+          // change field name
+          form.setInputValue('nameParameterInput', UPDATED_MAPPING_TEXT_FIELD_NAME);
+          // Save changes
+          actions.clickEditFieldUpdateButton();
+          await nextTick();
+          component.update();
+          // Proceed to the next step
+          actions.clickNextButton();
+          await nextTick(50);
+          component.update();
+
+          // Step 4 (aliases)
+          await actions.completeStepFour(JSON.stringify(ALIASES));
+        });
+      });
+
+      it('should send the correct payload with changed values', async () => {
+        const { actions } = testBed;
+
+        await act(async () => {
+          actions.clickSubmitButton();
+          await nextTick();
+        });
+
+        const latestRequest = server.requests[server.requests.length - 1];
+
+        const { version, order } = templateToEdit;
+
+        const expected = {
+          name: TEMPLATE_NAME,
+          version,
+          order,
+          indexPatterns: UPDATED_INDEX_PATTERN,
+          mappings: {
+            ...MAPPING,
+            _meta: {},
+            _source: {},
+            properties: {
+              [UPDATED_MAPPING_TEXT_FIELD_NAME]: {
+                type: 'text',
+                store: false,
+                index: true,
+                fielddata: false,
+                eager_global_ordinals: false,
+                index_phrases: false,
+                norms: true,
+                index_options: 'positions',
+              },
+            },
+          },
+          isManaged: false,
+          settings: SETTINGS,
+          aliases: ALIASES,
+        };
+        expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
+      });
+    });
+  });
+});