Add Component Integration Test For Byte Processor (#95130)

* Addded test for Bytes processor.

* Broke out processor not selected section of tests to its own test and made edits per feedback in PR.

* Broke out processor data fetching to a separate reusable helper function.

* Broke out processor data fetching to a separate reusable helper function.

* Added functionality for toggling the ignore missing switch.

* ES lint fix.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/bytes.test.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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';
+
+// Default parameter values automatically added to the Bytes processor when saved
+const defaultBytesParameters = {
+  ignore_failure: undefined,
+  description: undefined,
+};
+
+const BYTES_TYPE = 'bytes';
+
+describe('Processor: Bytes', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+    testBed.component.update();
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { addProcessor, saveNewProcessor, addProcessorType },
+      form,
+    } = testBed;
+
+    // Open flyout to add new processor
+    addProcessor();
+    // Click submit button without entering any fields
+    await saveNewProcessor();
+
+    // Expect form error as a processor type is required
+    expect(form.getErrorsMessages()).toEqual(['A type is required.']);
+
+    // Add type (the other fields are not visible until a type is selected)
+    await addProcessorType(BYTES_TYPE);
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" is required parameter
+    expect(form.getErrorsMessages()).toEqual(['A field value is required.']);
+  });
+
+  test('saves with default parameter values', async () => {
+    const {
+      actions: { addProcessor, saveNewProcessor, addProcessorType },
+      form,
+    } = testBed;
+
+    // Open flyout to add new processor
+    addProcessor();
+    // Add type (the other fields are not visible until a type is selected)
+    await addProcessorType(BYTES_TYPE);
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'field_1');
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, BYTES_TYPE);
+    expect(processors[0].bytes).toEqual({
+      field: 'field_1',
+      ...defaultBytesParameters,
+    });
+  });
+
+  test('allows optional parameters to be set', async () => {
+    const {
+      actions: { addProcessor, addProcessorType, saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Open flyout to add new processor
+    addProcessor();
+    // Add type (the other fields are not visible until a type is selected)
+    await addProcessorType(BYTES_TYPE);
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'field_1');
+
+    // Set optional parameteres
+    form.setInputValue('targetField.input', 'target_field');
+
+    form.toggleEuiSwitch('ignoreMissingSwitch.input');
+
+    // Save the field with new changes
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, BYTES_TYPE);
+    expect(processors[0].bytes).toEqual({
+      description: undefined,
+      field: 'field_1',
+      ignore_failure: undefined,
+      target_field: 'target_field',
+      ignore_missing: true,
+      tag: undefined,
+      if: undefined,
+    });
+  });
+});

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

@@ -90,9 +90,9 @@ const createActions = (testBed: TestBed<TestSubject>) => {
       component.update();
     },
 
-    async addProcessorType({ type, label }: { type: string; label: string }) {
+    async addProcessorType(type: string) {
       await act(async () => {
-        find('processorTypeSelector.input').simulate('change', [{ value: type, label }]);
+        find('processorTypeSelector.input').simulate('change', [{ value: type }]);
       });
       component.update();
     },
@@ -127,12 +127,19 @@ export const setupEnvironment = () => {
   };
 };
 
+export const getProcessorValue = (onUpdate: jest.Mock, type: string) => {
+  const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
+  const { processors } = onUpdateResult.getData();
+  return processors;
+};
+
 type TestSubject =
   | 'addProcessorForm.submitButton'
   | 'addProcessorButton'
   | 'addProcessorForm.submitButton'
   | 'processorTypeSelector.input'
   | 'fieldNameField.input'
+  | 'ignoreMissingSwitch.input'
   | 'targetField.input'
   | 'keepOriginalField.input'
   | 'removeIfSuccessfulField.input';

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

@@ -0,0 +1,52 @@
+/*
+ * 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 } from './processor.helpers';
+
+describe('Processor: Bytes', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+    testBed.component.update();
+  });
+
+  test('Prevents form submission if processor type not selected', async () => {
+    const {
+      actions: { addProcessor, saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Open flyout to add new processor
+    addProcessor();
+    // Click submit button without entering any fields
+    await saveNewProcessor();
+
+    // Expect form error as a processor type is required
+    expect(form.getErrorsMessages()).toEqual(['A type is required.']);
+  });
+});

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/uri_parts.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import { act } from 'react-dom/test-utils';
-import { setup, SetupResult } from './processor.helpers';
+import { setup, SetupResult, getProcessorValue } from './processor.helpers';
 
 // Default parameter values automatically added to the URI parts processor when saved
 const defaultUriPartsParameters = {
@@ -16,6 +16,8 @@ const defaultUriPartsParameters = {
   description: undefined,
 };
 
+const URI_PARTS_TYPE = 'uri_parts';
+
 describe('Processor: URI parts', () => {
   let onUpdate: jest.Mock;
   let testBed: SetupResult;
@@ -51,14 +53,9 @@ describe('Processor: URI parts', () => {
 
     // Open flyout to add new processor
     addProcessor();
-    // Click submit button without entering any fields
-    await saveNewProcessor();
-
-    // Expect form error as a processor type is required
-    expect(form.getErrorsMessages()).toEqual(['A type is required.']);
 
     // Add type (the other fields are not visible until a type is selected)
-    await addProcessorType({ type: 'uri_parts', label: 'URI parts' });
+    await addProcessorType(URI_PARTS_TYPE);
 
     // Click submit button with only the type defined
     await saveNewProcessor();
@@ -76,14 +73,13 @@ describe('Processor: URI parts', () => {
     // Open flyout to add new processor
     addProcessor();
     // Add type (the other fields are not visible until a type is selected)
-    await addProcessorType({ type: 'uri_parts', label: 'URI parts' });
+    await addProcessorType(URI_PARTS_TYPE);
     // Add "field" value (required)
     form.setInputValue('fieldNameField.input', 'field_1');
     // Save the field
     await saveNewProcessor();
 
-    const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
-    const { processors } = onUpdateResult.getData();
+    const processors = getProcessorValue(onUpdate, URI_PARTS_TYPE);
     expect(processors[0].uri_parts).toEqual({
       field: 'field_1',
       ...defaultUriPartsParameters,
@@ -99,7 +95,7 @@ describe('Processor: URI parts', () => {
     // Open flyout to add new processor
     addProcessor();
     // Add type (the other fields are not visible until a type is selected)
-    await addProcessorType({ type: 'uri_parts', label: 'URI parts' });
+    await addProcessorType(URI_PARTS_TYPE);
     // Add "field" value (required)
     form.setInputValue('fieldNameField.input', 'field_1');
 
@@ -111,8 +107,7 @@ describe('Processor: URI parts', () => {
     // Save the field with new changes
     await saveNewProcessor();
 
-    const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
-    const { processors } = onUpdateResult.getData();
+    const processors = getProcessorValue(onUpdate, URI_PARTS_TYPE);
     expect(processors[0].uri_parts).toEqual({
       description: undefined,
       field: 'field_1',

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/common_fields/ignore_missing_field.tsx

@@ -50,5 +50,6 @@ export const IgnoreMissingField: FunctionComponent<Props> = (props) => (
     config={{ ...fieldsConfig.ignore_missing, ...props }}
     component={ToggleField}
     path="fields.ignore_missing"
+    data-test-subj="ignoreMissingSwitch"
   />
 );