[Mappings editor] Add component integration tests (#63853)

x-pack/plugins/index_management/__jest__/components/index_table.test.js

@@ -8,6 +8,15 @@ import React from 'react';
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 import { MemoryRouter } from 'react-router-dom';
+
+/**
+ * The below import is required to avoid a console error warn from brace package
+ * console.warn ../node_modules/brace/index.js:3999
+      Could not load worker ReferenceError: Worker is not defined
+          at createWorker (/<path-to-repo>/node_modules/brace/index.js:17992:5)
+ */
+import * as stubWebWorker from '../../../../test_utils/stub_web_worker'; // eslint-disable-line no-unused-vars
+
 import { AppWithoutRouter } from '../../public/application/app';
 import { AppContextProvider } from '../../public/application/app_context';
 import { Provider } from 'react-redux';

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 { defaultShapeParameters } from './shape_datatype.test';
+export { defaultTextParameters } from './text_datatype.test';

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/shape_datatype.test.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 { componentHelpers, MappingsEditorTestBed } from '../helpers';
+
+const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
+const onChangeHandler = jest.fn();
+const getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+
+// Parameters automatically added to the shape datatype when saved (with the default values)
+export const defaultShapeParameters = {
+  type: 'shape',
+  coerce: false,
+  ignore_malformed: false,
+  ignore_z_value: true,
+};
+
+describe('Mappings editor: shape datatype', () => {
+  let testBed: MappingsEditorTestBed;
+
+  /**
+   * Variable to store the mappings data forwarded to the consumer component
+   */
+  let data: any;
+
+  test('initial view and default parameters values', async () => {
+    const defaultMappings = {
+      _meta: {},
+      _source: {},
+      properties: {
+        myField: {
+          type: 'shape',
+        },
+      },
+    };
+
+    const updatedMappings = { ...defaultMappings };
+
+    await act(async () => {
+      testBed = await setup({ value: defaultMappings, onChange: onChangeHandler });
+    });
+
+    const {
+      exists,
+      waitFor,
+      waitForFn,
+      actions: { startEditField, updateFieldAndCloseFlyout },
+    } = testBed;
+
+    // Open the flyout to edit the field
+    await act(async () => {
+      startEditField('myField');
+    });
+
+    await waitFor('mappingsEditorFieldEdit');
+
+    // Save the field and close the flyout
+    await act(async () => {
+      await updateFieldAndCloseFlyout();
+    });
+
+    await waitForFn(
+      async () => exists('mappingsEditorFieldEdit') === false,
+      'Error waiting for the details flyout to close'
+    );
+
+    // It should have the default parameters values added
+    updatedMappings.properties.myField = {
+      type: 'shape',
+      ...defaultShapeParameters,
+    };
+
+    ({ data } = await getMappingsEditorData());
+    expect(data).toEqual(updatedMappings);
+  });
+});