From 9e248d160dea2aa832a6003a824f536ca5535fbd Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Thu, 1 Aug 2024 16:53:10 -0700
Subject: [PATCH] fix ut (#1040) (#1041)

(cherry picked from commit 42707105a59d7757e4b7c6ab3fd55ad1e7c63a80)

Signed-off-by: Hailong Cui <ihailong@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../MonitorTimeField/MonitorTimeField.test.js |   8 +-
 .../MonitorTimeField.test.js.snap             | 503 ++++++++++++++++++
 test/jest.config.js                           |   3 +-
 3 files changed, 509 insertions(+), 5 deletions(-)

diff --git a/public/pages/CreateMonitor/components/MonitorTimeField/MonitorTimeField.test.js b/public/pages/CreateMonitor/components/MonitorTimeField/MonitorTimeField.test.js
index e8b8d9be3..6fd5728f1 100644
--- a/public/pages/CreateMonitor/components/MonitorTimeField/MonitorTimeField.test.js
+++ b/public/pages/CreateMonitor/components/MonitorTimeField/MonitorTimeField.test.js
@@ -27,7 +27,7 @@ describe('MonitorTimeField', () => {
       </Formik>
     );
     // Default blank option
-    expect(wrapper.find('EuiComboBox').props().options.length).toBe(0);
+    expect(wrapper.find('EuiCompressedComboBox').props().options.length).toBe(0);
   });
 
   test('displays options', () => {
@@ -37,7 +37,7 @@ describe('MonitorTimeField', () => {
       </Formik>
     );
     // 3 options
-    expect(wrapper.find('EuiComboBox').props().options.length).toBe(3);
+    expect(wrapper.find('EuiCompressedComboBox').props().options.length).toBe(3);
   });
 
   test('displays options includes date_nanos', () => {
@@ -51,8 +51,8 @@ describe('MonitorTimeField', () => {
     expect(wrapper).toMatchSnapshot();
 
     // 4 options
-    expect(wrapper.find('EuiComboBox').props().options.length).toBe(4);
-    expect(wrapper.find('EuiComboBox').props().options).toEqual(
+    expect(wrapper.find('EuiCompressedComboBox').props().options.length).toBe(4);
+    expect(wrapper.find('EuiCompressedComboBox').props().options).toEqual(
       expect.arrayContaining([{ label: 'date_nanos1' }])
     );
   });
diff --git a/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap b/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap
index c386f7017..32056c9fe 100644
--- a/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap
+++ b/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap
@@ -1,5 +1,508 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MonitorTimeField displays options includes date_nanos 1`] = `
+<Formik
+  initialValues={Object {}}
+  onSubmit={[Function]}
+>
+  <MonitorTimeField
+    dataTypes={
+      Object {
+        "date": Array [
+          "date1",
+          "date2",
+          "date3",
+        ],
+        "date_nanos": Array [
+          "date_nanos1",
+        ],
+      }
+    }
+  >
+    <FormikComboBox
+      fieldProps={
+        Object {
+          "validate": [Function],
+        }
+      }
+      formRow={true}
+      inputProps={
+        Object {
+          "data-test-subj": "timeFieldComboBox",
+          "isClearable": false,
+          "onChange": [Function],
+          "options": Array [
+            Object {
+              "label": "date1",
+            },
+            Object {
+              "label": "date2",
+            },
+            Object {
+              "label": "date3",
+            },
+            Object {
+              "label": "date_nanos1",
+            },
+          ],
+          "placeholder": "Select a time field",
+          "singleSelection": Object {
+            "asPlainText": true,
+          },
+        }
+      }
+      name="timeField"
+      rowProps={
+        Object {
+          "error": [Function],
+          "helpText": "Choose the time field you want to use for your x-axis",
+          "isInvalid": [Function],
+          "label": "Time field",
+          "style": Object {
+            "paddingLeft": "10px",
+          },
+        }
+      }
+    >
+      <FormikInputWrapper
+        fieldProps={
+          Object {
+            "validate": [Function],
+          }
+        }
+        name="timeField"
+        render={[Function]}
+      >
+        <Field
+          name="timeField"
+          validate={[Function]}
+        >
+          <FormikFormRow
+            form={
+              Object {
+                "dirty": false,
+                "errors": Object {},
+                "getFieldHelpers": [Function],
+                "getFieldMeta": [Function],
+                "getFieldProps": [Function],
+                "handleBlur": [Function],
+                "handleChange": [Function],
+                "handleReset": [Function],
+                "handleSubmit": [Function],
+                "initialErrors": Object {},
+                "initialStatus": undefined,
+                "initialTouched": Object {},
+                "initialValues": Object {},
+                "isSubmitting": false,
+                "isValid": true,
+                "isValidating": false,
+                "registerField": [Function],
+                "resetForm": [Function],
+                "setErrors": [Function],
+                "setFieldError": [Function],
+                "setFieldTouched": [Function],
+                "setFieldValue": [Function],
+                "setFormikState": [Function],
+                "setStatus": [Function],
+                "setSubmitting": [Function],
+                "setTouched": [Function],
+                "setValues": [Function],
+                "status": undefined,
+                "submitCount": 0,
+                "submitForm": [Function],
+                "touched": Object {},
+                "unregisterField": [Function],
+                "validateField": [Function],
+                "validateForm": [Function],
+                "validateOnBlur": true,
+                "validateOnChange": true,
+                "validateOnMount": false,
+                "values": Object {},
+              }
+            }
+            name="timeField"
+            rowProps={
+              Object {
+                "error": [Function],
+                "helpText": "Choose the time field you want to use for your x-axis",
+                "isInvalid": [Function],
+                "label": "Time field",
+                "style": Object {
+                  "paddingLeft": "10px",
+                },
+              }
+            }
+          >
+            <EuiCompressedFormRow
+              describedByIds={Array []}
+              display="rowCompressed"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              helpText="Choose the time field you want to use for your x-axis"
+              id="timeField-form-row"
+              isInvalid={false}
+              label="Time field"
+              labelType="label"
+              style={
+                Object {
+                  "paddingLeft": "10px",
+                }
+              }
+            >
+              <div
+                className="euiFormRow euiFormRow--compressed"
+                id="timeField-form-row-row"
+                style={
+                  Object {
+                    "paddingLeft": "10px",
+                  }
+                }
+              >
+                <div
+                  className="euiFormRow__labelWrapper"
+                >
+                  <EuiFormLabel
+                    aria-invalid={false}
+                    className="euiFormRow__label"
+                    htmlFor="timeField-form-row"
+                    isFocused={false}
+                    isInvalid={false}
+                    type="label"
+                  >
+                    <label
+                      aria-invalid={false}
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="timeField-form-row"
+                    >
+                      Time field
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <ComboBox
+                    aria-describedby="timeField-form-row-help-0"
+                    field={
+                      Object {
+                        "name": "timeField",
+                        "onBlur": [Function],
+                        "onChange": [Function],
+                        "value": undefined,
+                      }
+                    }
+                    form={
+                      Object {
+                        "dirty": false,
+                        "errors": Object {},
+                        "getFieldHelpers": [Function],
+                        "getFieldMeta": [Function],
+                        "getFieldProps": [Function],
+                        "handleBlur": [Function],
+                        "handleChange": [Function],
+                        "handleReset": [Function],
+                        "handleSubmit": [Function],
+                        "initialErrors": Object {},
+                        "initialStatus": undefined,
+                        "initialTouched": Object {},
+                        "initialValues": Object {},
+                        "isSubmitting": false,
+                        "isValid": true,
+                        "isValidating": false,
+                        "registerField": [Function],
+                        "resetForm": [Function],
+                        "setErrors": [Function],
+                        "setFieldError": [Function],
+                        "setFieldTouched": [Function],
+                        "setFieldValue": [Function],
+                        "setFormikState": [Function],
+                        "setStatus": [Function],
+                        "setSubmitting": [Function],
+                        "setTouched": [Function],
+                        "setValues": [Function],
+                        "status": undefined,
+                        "submitCount": 0,
+                        "submitForm": [Function],
+                        "touched": Object {},
+                        "unregisterField": [Function],
+                        "validateField": [Function],
+                        "validateForm": [Function],
+                        "validateOnBlur": true,
+                        "validateOnChange": true,
+                        "validateOnMount": false,
+                        "values": Object {},
+                      }
+                    }
+                    id="timeField-form-row"
+                    inputProps={
+                      Object {
+                        "data-test-subj": "timeFieldComboBox",
+                        "isClearable": false,
+                        "onChange": [Function],
+                        "options": Array [
+                          Object {
+                            "label": "date1",
+                          },
+                          Object {
+                            "label": "date2",
+                          },
+                          Object {
+                            "label": "date3",
+                          },
+                          Object {
+                            "label": "date_nanos1",
+                          },
+                        ],
+                        "placeholder": "Select a time field",
+                        "singleSelection": Object {
+                          "asPlainText": true,
+                        },
+                      }
+                    }
+                    name="timeField"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                  >
+                    <EuiCompressedComboBox
+                      async={false}
+                      compressed={true}
+                      data-test-subj="timeFieldComboBox"
+                      fullWidth={false}
+                      id="timeField"
+                      isClearable={false}
+                      name="timeField"
+                      onChange={[Function]}
+                      options={
+                        Array [
+                          Object {
+                            "label": "date1",
+                          },
+                          Object {
+                            "label": "date2",
+                          },
+                          Object {
+                            "label": "date3",
+                          },
+                          Object {
+                            "label": "date_nanos1",
+                          },
+                        ]
+                      }
+                      placeholder="Select a time field"
+                      selectedOptions={Array []}
+                      singleSelection={
+                        Object {
+                          "asPlainText": true,
+                        }
+                      }
+                      sortMatchesBy="none"
+                    >
+                      <div
+                        aria-expanded={false}
+                        aria-haspopup="listbox"
+                        className="euiComboBox euiComboBox--compressed"
+                        data-test-subj="timeFieldComboBox"
+                        name="timeField"
+                        onKeyDown={[Function]}
+                        role="combobox"
+                      >
+                        <EuiComboBoxInput
+                          autoSizeInputRef={[Function]}
+                          compressed={true}
+                          fullWidth={false}
+                          hasSelectedOptions={false}
+                          id="timeField"
+                          inputRef={[Function]}
+                          isListOpen={false}
+                          noIcon={false}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onCloseListClick={[Function]}
+                          onFocus={[Function]}
+                          onOpenListClick={[Function]}
+                          onRemoveOption={[Function]}
+                          placeholder="Select a time field"
+                          rootId={[Function]}
+                          searchValue=""
+                          selectedOptions={Array []}
+                          singleSelection={
+                            Object {
+                              "asPlainText": true,
+                            }
+                          }
+                          toggleButtonRef={[Function]}
+                          updatePosition={[Function]}
+                          value=""
+                        >
+                          <EuiFormControlLayout
+                            compressed={true}
+                            fullWidth={false}
+                            icon={
+                              Object {
+                                "aria-label": "Open list of options",
+                                "data-test-subj": "comboBoxToggleListButton",
+                                "disabled": undefined,
+                                "onClick": [Function],
+                                "ref": [Function],
+                                "side": "right",
+                                "type": "arrowDown",
+                              }
+                            }
+                          >
+                            <div
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
+                            >
+                              <div
+                                className="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
+                                  data-test-subj="comboBoxInput"
+                                  onClick={[Function]}
+                                  tabIndex={-1}
+                                >
+                                  <p
+                                    className="euiComboBoxPlaceholder"
+                                  >
+                                    Select a time field
+                                  </p>
+                                  <AutosizeInput
+                                    aria-controls=""
+                                    className="euiComboBox__input"
+                                    data-test-subj="comboBoxSearchInput"
+                                    id="timeField"
+                                    injectStyles={true}
+                                    inputRef={[Function]}
+                                    minWidth={1}
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    role="textbox"
+                                    style={
+                                      Object {
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                    value=""
+                                  >
+                                    <div
+                                      className="euiComboBox__input"
+                                      style={
+                                        Object {
+                                          "display": "inline-block",
+                                          "fontSize": 14,
+                                        }
+                                      }
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="timeField"
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onFocus={[Function]}
+                                        role="textbox"
+                                        style={
+                                          Object {
+                                            "boxSizing": "content-box",
+                                            "width": "2px",
+                                          }
+                                        }
+                                        value=""
+                                      />
+                                      <div
+                                        style={
+                                          Object {
+                                            "height": 0,
+                                            "left": 0,
+                                            "overflow": "scroll",
+                                            "position": "absolute",
+                                            "top": 0,
+                                            "visibility": "hidden",
+                                            "whiteSpace": "pre",
+                                          }
+                                        }
+                                      />
+                                    </div>
+                                  </AutosizeInput>
+                                </div>
+                                <EuiFormControlLayoutIcons
+                                  compressed={true}
+                                  icon={
+                                    Object {
+                                      "aria-label": "Open list of options",
+                                      "data-test-subj": "comboBoxToggleListButton",
+                                      "disabled": undefined,
+                                      "onClick": [Function],
+                                      "ref": [Function],
+                                      "side": "right",
+                                      "type": "arrowDown",
+                                    }
+                                  }
+                                >
+                                  <div
+                                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <EuiFormControlLayoutCustomIcon
+                                      aria-label="Open list of options"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      iconRef={[Function]}
+                                      onClick={[Function]}
+                                      size="s"
+                                      type="arrowDown"
+                                    >
+                                      <button
+                                        aria-label="Open list of options"
+                                        className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                        data-test-subj="comboBoxToggleListButton"
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiIcon
+                                          aria-hidden="true"
+                                          className="euiFormControlLayoutCustomIcon__icon"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <div>
+                                            EuiIconMock
+                                          </div>
+                                        </EuiIcon>
+                                      </button>
+                                    </EuiFormControlLayoutCustomIcon>
+                                  </div>
+                                </EuiFormControlLayoutIcons>
+                              </div>
+                            </div>
+                          </EuiFormControlLayout>
+                        </EuiComboBoxInput>
+                      </div>
+                    </EuiCompressedComboBox>
+                  </ComboBox>
+                  <EuiFormHelpText
+                    className="euiFormRow__text"
+                    id="timeField-form-row-help-0"
+                    key="Choose the time field you want to use for your x-axis"
+                  >
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="timeField-form-row-help-0"
+                    >
+                      Choose the time field you want to use for your x-axis
+                    </div>
+                  </EuiFormHelpText>
+                </div>
+              </div>
+            </EuiCompressedFormRow>
+          </FormikFormRow>
+        </Field>
+      </FormikInputWrapper>
+    </FormikComboBox>
+  </MonitorTimeField>
+</Formik>
+`;
+
 exports[`MonitorTimeField renders 1`] = `
 <div
   class="euiFormRow euiFormRow--compressed"
diff --git a/test/jest.config.js b/test/jest.config.js
index 01ad0e888..24c0d96b6 100644
--- a/test/jest.config.js
+++ b/test/jest.config.js
@@ -16,6 +16,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less|scss)$': '<rootDir>/test/mocks/styleMock.js',
     '^ui/(.*)': '<rootDir>/../../src/legacy/ui/public/$1/',
+    '^!!raw-loader!.*': 'jest-raw-loader',
   },
   snapshotSerializers: ['../../node_modules/enzyme-to-json/serializer'],
   coverageReporters: ['lcov', 'text', 'cobertura'],
@@ -50,6 +51,6 @@ module.exports = {
   transformIgnorePatterns: [
     // ignore all node_modules except d3-color which requires babel transforms to handle export statement
     // since ESM modules are not natively supported in Jest yet (https://github.com/facebook/jest/issues/4842)
-    '[/\\\\]node_modules(?![\\/\\\\](d3-color))[/\\\\].+\\.js$',
+    '[/\\\\]node_modules(?![\\/\\\\](monaco-editor|weak-lru-cache|ordered-binary|d3-color|axios))[/\\\\].+\\.js$',
   ],
 };