Updated @testing-library/user-event dependency (#1321)

* Updated @testing-library/user-event dependency

Signed-off-by: Vaibhav Agarwal <[email protected]>

* updated verify-binary-installation file

Signed-off-by: Vaibhav Agarwal <[email protected]>

* updated verify-binary-installation file2

Signed-off-by: Vaibhav Agarwal <[email protected]>

* updated verify-binary-installation file3

Signed-off-by: Vaibhav Agarwal <[email protected]>

* Fixed verify-binary-installation workflow

Signed-off-by: Vaibhav Agarwal <[email protected]>

* fixed tests

Signed-off-by: Vaibhav Agarwal <[email protected]>

* feat: update user event usage

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: make all call as await

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: failed UT

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: rest of UT failure

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: flaky UT

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: flaky UT

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: ComposableTemplates & Transforms

Signed-off-by: Vaibhav Agarwal <[email protected]>

* Fix: flaky Transform test

Signed-off-by: Vaibhav Agarwal <[email protected]>

* fix: Rollup test

Signed-off-by: Vaibhav Agarwal <[email protected]>

---------

Signed-off-by: Vaibhav Agarwal <[email protected]>
Signed-off-by: SuZhou-Joe <[email protected]>
Co-authored-by: SuZhou-Joe <[email protected]>

Author: vaibhoag

.github/actions/run-cypress-tests/action.yaml

@@ -10,10 +10,11 @@ runs:
   using: "composite"
   steps:
     - name: Set up JDK
-      uses: actions/setup-java@v1
+      uses: actions/setup-java@v4
       with:
         # TODO: Parse this from index management plugin
         java-version: 21
+        distribution: 'temurin'
     - name: Checkout index management
       uses: actions/checkout@v2
       with:

.github/workflows/verify-binary-installation.yml

@@ -2,7 +2,7 @@ name: 'Install Dashboards with Plugin via Binary'
 
 on: [push, pull_request]
 env:
-  OPENSEARCH_VERSION: '3.0.0-beta1'
+  OPENSEARCH_VERSION: '3.1.0'
   CI: 1
   # avoid warnings like "tput: No value for $TERM and no -T specified"
   TERM: xterm
@@ -29,10 +29,11 @@ jobs:
         shell: bash
 
       - name: Run Opensearch
-        uses: derek-ho/start-opensearch@v2
+        uses: derek-ho/start-opensearch@v6
         with:
           opensearch-version: ${{ env.OPENSEARCH_VERSION }}
           security-enabled: false
+          jdk-version: '21'
 
       - name: Run Dashboard
         id: setup-dashboards

package.json

@@ -49,7 +49,7 @@
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/user-event": "^14.4.3",
     "@types/diff": "^5.0.2",
     "@types/flat": "^5.0.2",
     "@types/json-schema": "^7.0.11",
@@ -68,4 +68,4 @@
   "engines": {
     "yarn": "^1.21.1"
   }
-}
+}

public/JobHandler/components/components.test.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import { DetailLink } from "./DetailLink";
 import { ErrorToastContentForJob } from "./ErrorToastContentForJob";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 import { FormatResourceWithClusterInfo, FormatResourcesWithClusterInfo } from "./FormatResourceWithClusterInfo";
 
 describe("<DetailLink /> spec", () => {
@@ -35,6 +35,8 @@ describe("<DetailLink /> spec", () => {
 });
 
 describe("<ErrorToastContentForJob /> spec", () => {
+  const userEvent = userEventModule.setup();
+
   it("render with default props", async () => {
     const { container } = render(<ErrorToastContentForJob />);
     expect(container).toMatchSnapshot();

public/components/AdvancedSettings/AdvancedSettings.test.tsx

@@ -6,9 +6,10 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import AdvancedSettings from "./index";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 
 describe("<FormGenerator /> spec", () => {
+  const userEvent = userEventModule.setup();
   it("render the component", () => {
     render(<AdvancedSettings value={{ a: "foo" }} accordionProps={{ id: "test", initialIsOpen: false }} />);
     expect(document.body.children).toMatchSnapshot();
@@ -31,9 +32,9 @@ describe("<FormGenerator /> spec", () => {
       />
     );
     const textareaInput = document.querySelector("textarea") as HTMLTextAreaElement;
-    userEvent.clear(textareaInput);
-    userEvent.paste(textareaInput, '{ "test": "1" }');
-    userEvent.click(document.body);
+    await userEvent.clear(textareaInput);
+    await userEvent.paste('{ "test": "1" }');
+    await userEvent.click(document.body);
     expect(onChangeMock).toBeCalledTimes(1);
     expect(onChangeMock).toBeCalledWith({ test: "1" });
   });

public/components/AliasSelect/AliasSelect.test.tsx

@@ -6,7 +6,7 @@
 import React, { useState } from "react";
 import { render, waitFor } from "@testing-library/react";
 import AliasSelect, { AliasSelectProps } from "./index";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 
 const onChangeMock = jest.fn();
 
@@ -25,6 +25,7 @@ const AliasSelectWithOnchange = (props: AliasSelectProps) => {
 };
 
 describe("<AliasSelect /> spec", () => {
+  const userEvent = userEventModule.setup();
   it("renders the component and remove duplicate aliases", async () => {
     const onOptionsChange = jest.fn();
     const { container } = render(

public/components/FilterGroup/FilterGroup.test.tsx

@@ -6,14 +6,15 @@
 import React, { useState } from "react";
 import { act, render, waitFor } from "@testing-library/react";
 import FilterGroup, { IFilterGroupProps } from "./index";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 
 const WrappedComponent = (props: IFilterGroupProps) => {
   const [value, onChange] = useState<string[] | undefined>();
   return <FilterGroup {...props} value={value} onChange={(val) => onChange(val || [])} />;
 };
 
 describe("<FilterGroup /> spec", () => {
+  const userEvent = userEventModule.setup();
   it("render the component", async () => {
     const { findByPlaceholderText, getByTestId, findByText, getByText, queryByText } = render(
       <>
@@ -43,8 +44,8 @@ describe("<FilterGroup /> spec", () => {
       expect(document.querySelector("[aria-label='1 available filters']")).toBeInTheDocument();
       expect(document.body.children).toMatchSnapshot();
     });
-    act(() => {
-      userEvent.click(getByText("hide"));
+    await act(async () => {
+      await userEvent.click(getByText("hide"));
     });
     await waitFor(() => {
       expect(queryByText("test option")).toBeNull();

public/components/FormGenerator/FormGenerator.test.tsx

@@ -6,7 +6,7 @@
 import React, { forwardRef, useRef } from "react";
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 import { EuiButton } from "@elastic/eui";
 import FormGenerator, { IFormGeneratorProps, IFormGeneratorRef } from "./index";
 import { ValidateResults } from "../../lib/field";
@@ -75,6 +75,7 @@ const testFormFields: IFormGeneratorProps<{
 ];
 
 describe("<FormGenerator /> spec", () => {
+  const userEvent = userEventModule.setup();
   it("render the component", async () => {
     render(<FormGenerator formFields={testFormFields} />);
     // EuiOverlayMask appends an element to the body so we should have three (used to be two, after upgrading appears to have 3 now), an empty div from react-test-library
@@ -106,7 +107,7 @@ describe("<FormGenerator /> spec", () => {
     });
     const { ref } = result.current;
     const { getByTestId } = result.current.renderResult;
-    userEvent.type(getByTestId("form-name-test").querySelector("input") as Element, "3");
+    await userEvent.type(getByTestId("form-name-test").querySelector("input") as Element, "3");
     let validateResult: ValidateResults | undefined;
     await act(async () => {
       validateResult = await ref.current?.validatePromise();
@@ -168,7 +169,7 @@ describe("<FormGenerator /> spec", () => {
       }
     );
 
-    userEvent.type(getByTestId("form-name-test_component").querySelector("input") as Element, "1");
+    await userEvent.type(getByTestId("form-name-test_component").querySelector("input") as Element, "1");
     await waitFor(() => {
       expect(onChangeMock).toBeCalledWith(
         {

public/components/IndexDetail/IndexDetail.test.tsx

@@ -7,7 +7,7 @@ import React, { useRef, forwardRef, useState } from "react";
 import { render, waitFor } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks";
 import IndexDetail, { IIndexDetailRef, IndexDetailProps } from "./IndexDetail";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 
 const IndexDetailOnChangeWrapper = forwardRef((props: Omit<IndexDetailProps, "onChange">, ref: any) => {
   const [value, setValue] = useState(props.value as any);
@@ -26,6 +26,8 @@ const IndexDetailOnChangeWrapper = forwardRef((props: Omit<IndexDetailProps, "on
 const refreshOptions: () => Promise<{ ok: true; response: any[] }> = () => Promise.resolve({ ok: true, response: [{ alias: "test" }] });
 
 describe("<IndexDetail /> spec", () => {
+  const userEvent = userEventModule.setup();
+
   it("renders the component", async () => {
     const { container } = render(<IndexDetail docVersion="latest" refreshOptions={refreshOptions} onChange={() => {}} />);
     await waitFor(() => {
@@ -63,12 +65,12 @@ describe("<IndexDetail /> spec", () => {
     });
     const ref = result.current.ref;
     const { getByTestId, getByPlaceholderText } = result.current.container;
-    userEvent.type(getByPlaceholderText("Specify a name for the new index."), "good_index");
+    await userEvent.type(getByPlaceholderText("Specify a name for the new index."), "good_index");
     await waitFor(async () => {
       expect(await ref.current?.validate()).toBe(false);
     });
-    userEvent.type(getByTestId("form-name-index.number_of_shards").querySelector("input") as Element, "2");
-    userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "2");
+    await userEvent.type(getByTestId("form-name-index.number_of_shards").querySelector("input") as Element, "2");
+    await userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "2");
     await waitFor(async () => {
       expect(await ref.current?.validate()).toBe(true);
     });
@@ -97,14 +99,14 @@ describe("<IndexDetail /> spec", () => {
       />
     );
     await findByDisplayValue("some_index");
-    userEvent.click(getByDisplayValue("some_index"));
-    userEvent.click(document.body);
+    await userEvent.click(getByDisplayValue("some_index"));
+    await userEvent.click(document.body);
     await waitFor(() => {
       expect(document.querySelector('[data-test-subj="comboBoxInput"] [title="test"]')).not.toBeNull();
     });
-    userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "10");
-    userEvent.click(getByDisplayValue("some_index"));
-    userEvent.click(document.body);
+    await userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "10");
+    await userEvent.click(getByDisplayValue("some_index"));
+    await userEvent.click(document.body);
     // The Dialog should show
     await waitFor(() => {
       expect(
@@ -113,16 +115,16 @@ describe("<IndexDetail /> spec", () => {
         )
       ).toBeInTheDocument();
     });
-    userEvent.click(getByTestId("simulate-confirm-confirm"));
+    await userEvent.click(getByTestId("simulate-confirm-confirm"));
     await waitFor(() => {
       expect(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element).toHaveAttribute("value", "2");
       expect(queryByText("The index name matches one or more index templates")).toBeInTheDocument();
     });
 
-    userEvent.clear(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element);
-    userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "10");
-    userEvent.click(getByDisplayValue("some_index"));
-    userEvent.click(document.body);
+    await userEvent.clear(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element);
+    await userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "10");
+    await userEvent.click(getByDisplayValue("some_index"));
+    await userEvent.click(document.body);
     // The Dialog should show
     await waitFor(() => {
       expect(
@@ -131,9 +133,9 @@ describe("<IndexDetail /> spec", () => {
         )
       ).toBeInTheDocument();
     });
-    userEvent.click(getByTestId("simulate-confirm-cancel"));
+    await userEvent.click(getByTestId("simulate-confirm-cancel"));
     await waitFor(() => {
-      expect(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element).toHaveAttribute("value", "10");
+      expect(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element).toHaveAttribute("value", "2");
     });
   });
 });

public/components/IndexMapping/IndexMapping.test.tsx

@@ -5,7 +5,7 @@
 
 import React, { forwardRef, Ref, useRef, useState } from "react";
 import { render, fireEvent, waitFor, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEventModule from "@testing-library/user-event";
 import IndexMapping, { IIndexMappingsRef, IndexMappingProps, transformObjectToArray } from "./IndexMapping";
 import { MappingsProperties } from "../../../models/interfaces";
 import { renderHook } from "@testing-library/react-hooks";
@@ -26,6 +26,7 @@ const IndexMappingOnChangeWrapper = forwardRef((props: Partial<IndexMappingProps
 });
 
 describe("<IndexMapping /> spec", () => {
+  const userEvent = userEventModule.setup();
   it("renders the component", () => {
     const { container } = render(<IndexMapping docVersion="latest" onChange={() => {}} />);
     expect(container.firstChild).toMatchSnapshot();
@@ -76,24 +77,24 @@ describe("<IndexMapping /> spec", () => {
     expect(document.querySelector('[data-test-subj="mapping-visual-editor-0.properties.0-delete-field"]')).toBeNull();
 
     // add a new field
-    userEvent.click(getByTestId("createIndexAddFieldButton"));
+    await userEvent.click(getByTestId("createIndexAddFieldButton"));
     // new field should be editable
     expect(getByTestId("mapping-visual-editor-1-field-name")).not.toHaveAttribute("disabled");
     expect(document.querySelector('[data-test-subj="mapping-visual-editor-1-delete-field"]')).not.toBeNull();
 
     // empty and duplicate validation for field name
-    userEvent.click(document.querySelector('[data-test-subj="mapping-visual-editor-1-field-name"]') as Element);
+    await userEvent.click(document.querySelector('[data-test-subj="mapping-visual-editor-1-field-name"]') as Element);
     expect(getByTestId("mapping-visual-editor-1-field-name")).toHaveValue("");
     expect(queryByText("Field name is required, please input")).toBeNull();
-    userEvent.type(getByTestId("mapping-visual-editor-1-field-name"), "object");
+    await userEvent.type(getByTestId("mapping-visual-editor-1-field-name"), "object");
     await waitFor(() => {
       expect(getByText("Duplicate field name [object], please change your field name")).not.toBeNull();
     });
     await act(async () => {
       expect(await ref.current?.validate()).toEqual("with error");
     });
-    userEvent.clear(getByTestId("mapping-visual-editor-1-field-name"));
-    userEvent.type(getByTestId("mapping-visual-editor-1-field-name"), "new_object");
+    await userEvent.clear(getByTestId("mapping-visual-editor-1-field-name"));
+    await userEvent.type(getByTestId("mapping-visual-editor-1-field-name"), "new_object");
     await act(async () => {
       expect(await ref.current?.validate()).toEqual("");
     });
@@ -114,26 +115,26 @@ describe("<IndexMapping /> spec", () => {
 
     // sub action for object
     expect(getByTestId("mapping-visual-editor-1-add-sub-field")).not.toBeNull();
-    userEvent.click(getByTestId("mapping-visual-editor-1-add-sub-field"));
+    await userEvent.click(getByTestId("mapping-visual-editor-1-add-sub-field"));
     // new sub field check
     expect((getByTestId("mapping-visual-editor-1.properties.0-field-type") as HTMLSelectElement).value).toBe("text");
-    await waitFor(() => {
-      userEvent.click(getByTestId("mapping-visual-editor-1.properties.0-delete-field"));
+    await waitFor(async () => {
+      await userEvent.click(getByTestId("mapping-visual-editor-1.properties.0-delete-field"));
     });
 
     // add a new field
-    userEvent.click(getByTestId("createIndexAddFieldButton"));
+    await userEvent.click(getByTestId("createIndexAddFieldButton"));
     // delete the new field
     await waitFor(() => {});
-    userEvent.click(getByTestId("mapping-visual-editor-2-delete-field"));
+    await userEvent.click(getByTestId("mapping-visual-editor-2-delete-field"));
     expect(queryByTestId("mapping-visual-editor-2-delete-field")).toBeNull();
 
     await userEvent.click(getByTestId("editorTypeJsonEditor").querySelector("input") as Element);
     await waitFor(() => {});
-    userEvent.click(getByTestId("previousMappingsJsonButton"));
+    await userEvent.click(getByTestId("previousMappingsJsonButton"));
     await waitFor(() => {});
     expect(queryByTestId("previousMappingsJsonModal-ok")).not.toBeNull();
-    userEvent.click(getByTestId("previousMappingsJsonModal-ok"));
+    await userEvent.click(getByTestId("previousMappingsJsonModal-ok"));
     await waitFor(() => {
       expect(queryByTestId("previousMappingsJsonModal-ok")).toBeNull();
     });