[8.2] [Ingest Pipelines] add tests for grok processor (#130123) (#130249)

* [Ingest Pipelines] add tests for grok processor (#130123)

(cherry picked from commit 9e900a15ec)

* update test

Co-authored-by: Alison Goryachev <alison.goryachev@elastic.co>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts

@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act } from 'react-dom/test-utils';
+import { setup, SetupResult, getProcessorValue } from './processor.helpers';
+
+const GROK_TYPE = 'grok';
+
+describe('Processor: Grok', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+  let clickAddPattern: () => Promise<void>;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+    // disable all react-beautiful-dnd development warnings
+    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    // enable all react-beautiful-dnd development warnings
+    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+
+    const { find, component, actions } = testBed;
+
+    clickAddPattern = async () => {
+      await act(async () => {
+        find('droppableList.addButton').simulate('click');
+      });
+      component.update();
+    };
+
+    component.update();
+
+    // Open flyout to add new processor
+    actions.addProcessor();
+    // Add type (the other fields are not visible until a type is selected)
+    await actions.addProcessorType(GROK_TYPE);
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+      exists,
+    } = testBed;
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" is a required parameter
+    expect(form.getErrorsMessages()).toEqual(['A field value is required.']);
+    // Patterns field is also required; it uses EuiDraggable and only shows an error icon when invalid
+    expect(exists('droppableList.errorIcon')).toBe(true);
+  });
+
+  test('saves with default parameter values', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value
+    form.setInputValue('fieldNameField.input', 'test_grok_processor');
+
+    // Add pattern 1
+    form.setInputValue('droppableList.input-0', 'pattern1');
+
+    // Add pattern 2
+    await clickAddPattern();
+    form.setInputValue('droppableList.input-1', 'pattern2');
+
+    // Add pattern 3
+    await clickAddPattern();
+    form.setInputValue('droppableList.input-2', 'pattern3');
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, GROK_TYPE);
+
+    expect(processors[0][GROK_TYPE]).toEqual({
+      field: 'test_grok_processor',
+      patterns: ['pattern1', 'pattern2', 'pattern3'],
+    });
+  });
+});

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx

@@ -188,4 +188,9 @@ type TestSubject =
   | 'transportField.input'
   | 'seedField.input'
   | 'copyFromInput'
-  | 'trimSwitch.input';
+  | 'trimSwitch.input'
+  | 'droppableList.addButton'
+  | 'droppableList.errorIcon'
+  | 'droppableList.input-0'
+  | 'droppableList.input-1'
+  | 'droppableList.input-2';

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/drag_and_drop_text_list.tsx

@@ -87,7 +87,12 @@ function DragAndDropTextListComponent({
     [onMove]
   );
   return (
-    <EuiFormRow isInvalid={typeof error === 'string'} error={error} fullWidth>
+    <EuiFormRow
+      isInvalid={typeof error === 'string'}
+      error={error}
+      fullWidth
+      data-test-subj="droppableList"
+    >
       <>
         {/* Label and help text. Also wire up the htmlFor so the label points to the first text field. */}
         <EuiFlexGroup
@@ -158,6 +163,7 @@ function DragAndDropTextListComponent({
                                   <EuiFlexGroup gutterSize="none" alignItems="center">
                                     <EuiFlexItem>
                                       <EuiFieldText
+                                        data-test-subj={`input-${idx}`}
                                         id={idx === 0 ? firstItemId : undefined}
                                         isInvalid={isInvalid}
                                         value={field.value}
@@ -168,7 +174,10 @@ function DragAndDropTextListComponent({
                                     </EuiFlexItem>
                                     {typeof errorMessage === 'string' && (
                                       <EuiFlexItem grow={false}>
-                                        <div className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon">
+                                        <div
+                                          className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon"
+                                          data-test-subj="errorIcon"
+                                        >
                                           <EuiIconTip
                                             aria-label={errorMessage}
                                             content={errorMessage}
@@ -208,7 +217,7 @@ function DragAndDropTextListComponent({
               })}
             </EuiDroppable>
           </EuiDragDropContext>
-          <EuiButtonEmpty iconType="plusInCircle" onClick={onAdd}>
+          <EuiButtonEmpty iconType="plusInCircle" onClick={onAdd} data-test-subj="addButton">
             {addLabel}
           </EuiButtonEmpty>
         </div>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/grok.test.tsx

@@ -1,57 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { mount } from 'enzyme';
-
-import {
-  uiSettingsServiceMock,
-  i18nServiceMock,
-} from '../../../../../../../../../../src/core/public/mocks';
-
-import { Form, useForm, KibanaContextProvider } from '../../../../../../shared_imports';
-import { Grok } from './grok';
-
-// @ts-ignore
-window.Worker = function () {
-  this.postMessage = () => {};
-  (this as any).terminate = () => {};
-};
-
-describe('<Grok/>', () => {
-  const setup = (props?: { defaultValue: Record<string, any> }) => {
-    function MyComponent() {
-      const { form } = useForm({ defaultValue: props?.defaultValue });
-      const i18n = i18nServiceMock.createStartContract();
-      return (
-        <KibanaContextProvider
-          services={{ uiSettings: uiSettingsServiceMock.createSetupContract() }}
-        >
-          <i18n.Context>
-            <Form form={form}>
-              <Grok />
-            </Form>
-          </i18n.Context>
-        </KibanaContextProvider>
-      );
-    }
-    return mount(<MyComponent />);
-  };
-
-  beforeAll(() => {
-    // disable all react-beautiful-dnd development warnings
-    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
-  });
-
-  afterAll(() => {
-    // enable all react-beautiful-dnd development warnings
-    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
-  });
-  test('smoke', () => {
-    setup({ defaultValue: { type: 'grok', fields: { patterns: ['test'] } } });
-  });
-});